Tricky trick: Sliding panes

[dalecooper]

Hi, if you go on my new website : lozeremedia . com, you’ll see 2 panes. One white with the actual content, and one with a wood texture on the side.

I would like the white pane to slide left then right (outside the viewport then back to original state) when switching pages, and the wooden one to slide to top then back to normal when clicking on it’s (only) link (and of course with a different content).

Is it possible to achieve this ? Maybe with javascript ? And how compatible with older web browsers will it be ?

[dalecooper]

Ok, it will be a bit long to read (maybe) but I tried the “Slot Machine Tabs” script from the download section of this site with my website. Here are the different codes, along with the javascript.

HTML

  

























Accueil


Designs


Services


Contact
























Kate


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.






Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


















Juliet


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.






Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


















Penelope


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.






Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
















Penelope


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.






Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
















Lozère Média propose des tarifs avantageux pour petites et grandes structures.


Demandez un devis

CSS

html, body {

height: 100%;

overflow: hidden;

}



body {

background: url(../img/menubar.png) no-repeat fixed center bottom, url(../img/background1.png) #d8b5b5;

}



html, body, #page-wrap {

height: 100%;

width: 100%;

}



a { text-decoration: none; }

h3 { margin: 0 0 10px 0; }



.content-box { overflow: hidden; position: absolute; top: 20px; left: 20px; width: 90%; height: 100%; }



.current { z-index: 100; }



.col-one, .col-two, .col-three { width: 100%; position: relative;}

.col-one, .col-two { margin-right: 3%; }



aside {

background-image: url(../img/background.gif);



-webkit-border-bottom-left-radius:5px 5px;

border-bottom-left-radius:5px 5px;

-o-border-bottom-left-radius:5px 5px;

-ms-border-bottom-left-radius:5px 5px;

-moz-border-radius-bottomleft:5px 5px;

-webkit-border-bottom-right-radius:5px 5px;

border-bottom-right-radius:5px 5px;

-o-border-bottom-right-radius:5px 5px;

-ms-border-bottom-right-radius:5px 5px;

-moz-border-radius-bottomright:5px 5px;

-moz-box-shadow: 0 0 10px #444;

-webkit-box-shadow: 0 0 10px #444;

box-shadow: 0 0 10px #444;



display: block;

width: 17%;

padding: 30px 15px 15px;

overflow: auto;

float: right;

position: relative;

max-height: 600px;

right: 20px;

text-align: center;

}



aside p {

text-align: center;

color: #fff;

font-size: 18px;

}



aside a {

color: #fff;

font-size: 18px;

text-decoration: none;

border-bottom:1px dashed;

text-align: center;

}



aside a:hover {

-webkit-border-top-left-radius:5px 5px;

border-top-left-radius:5px 5px;

-o-border-top-left-radius:5px 5px;

-ms-border-top-left-radius:5px 5px;

-moz-border-radius-topleft:5px 5px;

-webkit-border-top-right-radius:5px 5px;

border-top-right-radius:5px 5px;

-o-border-top-right-radius:5px 5px;

-ms-border-top-right-radius:5px 5px;

-moz-border-radius-topright:5px 5px;

-webkit-border-bottom-right-radius:5px 5px;

border-bottom-right-radius:5px 5px;

-o-border-bottom-right-radius:5px 5px;

-ms-border-bottom-right-radius:5px 5px;

-moz-border-radius-bottomright:5px 5px;

-webkit-border-bottom-left-radius:5px 5px;

border-bottom-left-radius:5px 5px;

-o-border-bottom-left-radius:5px 5px;

-ms-border-bottom-left-radius:5px 5px;

-moz-border-radius-bottomleft:5px 5px;

color: #ffffff;

background-image: -moz-linear-gradient(90deg, #83b154 0%, #aecd8f 100%);

background-image: -webkit-gradient(linear, left bottom, left top, from(#83b154), to(#aecd8f));

padding-top: 2px;

padding-right: 2px;

padding-left: 2px;

}



aside a:visited {

color: #ffffff;

}



.box-wrapper {

-moz-box-shadow: 0 0 20px black;

-webkit-box-shadow: 0 0 20px black;

padding: 20px;

background: white;

border: 1px solid #ccc;

margin: -1px 0 0 0;

height: 500px;

position: relative;

top: 80px;

float: left;

width: 60%;

}

I hope someone will have the courage to read it^^

So my problem now is that the content of the box-wrapper section is superimposed. I can’t find a way to set the “.current” function to work (I think it is .current that is the problem, not sure though).

Crossed fingers for someone to read and answer this :P

(note: the javascript is just below)

[dalecooper]

JAVASCRIPT

var columnReadyCounter = 0;



// This is the callback function for the "hiding" animations

// it gets called for each animation (since we don't know which is slowest)

// the third time it's called, then it resets the column positions

function ifReadyThenReset() {



columnReadyCounter++;



if (columnReadyCounter == 3) {

$(".col").not(".current .col").css("top", 350);

columnReadyCounter = 0;

}



};



// When the DOM is ready

$(function() {



var $allContentBoxes = $(".content-box"),

$allTabs = $(".tabs li a"),

$el, $colOne, $colTwo, $colThree,

hrefSelector = "",

speedOne = 1000,

speedTwo = 2000,

speedThree = 1500;



// first tab and first content box are default current

$(".tabs li:first-child a, .content-box:first").addClass("current");

$(".box-wrapper .current .col").css("top", 0);



$("#slot-machine-tabs").delegate(".tabs a", "click", function() {



$el = $(this);



if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {



// current tab correctly set

$allTabs.removeClass("current");

$el.addClass("current");



// optional... random speeds each time.

speedOne = Math.floor(Math.random()*1000) + 500;

speedTwo = Math.floor(Math.random()*1000) + 500;

speedThree = Math.floor(Math.random()*1000) + 500;



// each column is animated upwards to hide

// kind of annoyingly redudundant code

$colOne = $(".box-wrapper .current .col-one");

$colOne.animate({

"top": -$colOne.height()

}, speedOne);



$colTwo = $(".box-wrapper .current .col-two");

$colTwo.animate({

"top": -$colTwo.height()

}, speedTwo);



$colThree = $(".box-wrapper .current .col-three");

$colThree.animate({

"top": -$colThree.height()

}, speedThree);



// new content box is marked as current

$allContentBoxes.removeClass("current");

hrefSelector = $el.attr("href");

$(hrefSelector).addClass("current");



// columns from new content area are moved up from the bottom

// also annoying redundant and triple callback seems weird

$(".box-wrapper .current .col-one").animate({

"top": 0

}, speedOne, function() {

ifReadyThenReset();

});



$(".box-wrapper .current .col-two").animate({

"top": 0

}, speedTwo, function() {

ifReadyThenReset();

});



$(".box-wrapper .current .col-three").animate({

"top": 0

}, speedThree, function() {

ifReadyThenReset();

});



};



});



});


		
	

[dalecooper]

Well, I close the subject. I understood where I was wrong and now realize it is clearly not adaptable easily for my use. May have to rewrite the whole javascript, and it’s not in my competences^^

I mark this subject as solved.

[Billy]

It still doesn’t work very nicely; the menu goes to the top at one point, in a list, and then goes to the bottom again where it should be.
As this happens, the box with the content goes over the picture used for the navigation at the bottom.
(This all happens at about 1020 px wide screen)

Et je pense que ça devrait-être plus visible que le site parle de webdesign; si on lit ça se voit, mais ce n’est pas assez visible lorsqu’on y jette un coup-d’oeil.

[dalecooper]

Are you talking about the actual website ? Because I didn’t notice this although I did check on several browsers with several resolutions. Could you help me reproduce the issue please ?

Et merci du conseil, je vais essayer de mettre en valeur un peu plus le thème de ce site!

EDIT: I actually did reproduce the issue just now^^
Do you have an idea why it behave like this ? I’ll check again where I did wrong… arf :(

[Author]

Posts