Possible to use javascript to create a static-border/having webpages slide between one another

edit: I don't want to just take content from different pages and load it into the current page. What I really want to do is load different html files that will be interactive within the television. I have found that it is difficult to do this because you can't load html files into DIV's and you can't click on links through a transparent png file.

Hello,

I am building a website for a tv show that my friends and I make called Every Single Day.

here you can see the mock up of what I have so far: http://www.uvm.edu/~areid/cs195/final/S/S.html

as of right now, the image I am using is just one big image that I sliced up with Photoshop.

What my goal is, is to use some sort of script to make it so the outside television will stay in place statically and the web-content within the television will transition without reloading the outer-most television.

I wanted to combine this technique with something similar to the fss slider script to allow each page on the site to slide, making it look like it is a continuation of the room. -Perhaps this isn't even the best way to achieve my desired result.

I have all of my images drawn and sliced, all I need now is some direction in what exactly to search for to find the pieces I am looking for.

Thank you very much, I am pleased to have joined this community,

cooper reid

Solution

Edit 5: http://jsfiddle.net/wdm954/pqAJK/10/ (Shows addition content.)

Edit 4: http://jsfiddle.net/wdm954/pqAJK/7/

This demo includes panning to specific frames.

var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs

$('.pan').click(function(e) {    
    e.preventDefault(); //prevent default action (of <a>)
    if ($('.content div').is(':animated')) return false; //disable click while animating
    var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
    $('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});

$('#tv-right').click(function() {

    if ($('.content div').is(':animated')) return false; //disable click while animating
    $('.content div').animate({top: '-='+h+'px'}, 2000); //animation

    //if last div then go back to the start
    if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
        $('.content div').stop().animate({ top: '0px' }, 1000);
    }
});

Edit 3: http://jsfiddle.net/wdm954/pqAJK/5/

Ok, check this demo out. Clicking on the right side of the TV (where you may put some buttons) will scroll the content in the screen. When you reach the last content section, the next click will return to the first content section. I layered the content so the background divs scroll behind the TV image and the content scrolls above (so you can click on it. There are a few other tricks thrown in but look it over and you should get the idea.

Edit 2: http://jsfiddle.net/wdm954/pqAJK/3/ (Click the TV to see the transition. This has content divs instead of just a background image).

Edit: Check out this demo: http://jsfiddle.net/wdm954/pqAJK/

I would first cut out the screen part of the TV and save it has a .png with transparency so you can see what is behind the screen portion of the TV.

Then you can add a background image and animate that with jQuery to slide into view the portion you would like to display.

I *personally wouldn't use any slices, kind of an old school technique for when most people didn't have high speed connections.