JS Communication Between Pages Problem [Archive]

View Full Version : JS Communication Between Pages Problem

PpSi

10-25-2011, 11:05 AM

Ok so, in my site I use the script below script to hide or show the header.

Everything works fine, but I have the following problem:If a user hides the header in let's say "Page A", when he clicks a button and goes to "Page B", the header is no longer hidden, and that's because "Page B" does not know the user hid it in "Page A".

The script was provided by azoomer (http://www.dynamicdrive.com/forums/member.php?u=43424), in another post of mine.The code below represents the demopage he created to show how the script works.

The page is here: http://azoomer.com/show-panel.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>paneltoggle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#content{
width:615px;
height:auto;
margin-top:100px;
margin-left:auto;
margin-right:auto;
padding-right:15px;
}
#panelwrap{
width:655px;
height:auto;
margin-top:0;
margin-left:auto;
margin-right:auto;
}
#panel{
width:600px;
height:200px;
display:none;
margin-top:0;
float:left;
padding-bottom:20px;
background:#F4F4F4
}
#togglebutton {
cursor:pointer;
float:right;
font-size:11px;
left:50%;
margin-left:240px;
position:absolute;
text-align:left;
width:55px;
margin-top:-36px;
}
.hidepanel{
display:none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#togglebutton').click(function() {
$('#panel').slideToggle();
});

$('#togglebutton').click(function() {
if ($('.showpanel').is(':visible')) {
$('.showpanel').hide();
} else {
$('.showpanel').show();
}
});

$('#togglebutton').click(function() {
if ($('.hidepanel').is(':visible')) {
$('.hidepanel').hide();
} else {
$('.hidepanel').show();
}
});

$(function() {
$('#togglebutton').hover( function(){
$(this).css('color', '#F00');
},
function(){
$(this).css('color', '#000');
});
});
});
</script>
</head>
<body>
<div id="content">
<h2>Show and hide menu panel.</h2>
<div id="panelwrap">
<div id="togglebutton"><span class="showpanel">Show panel</span><span class="hidepanel">Hide panel</span>
</div>
<div id="panel">
MENU PANEL
</div>
</div>

<p>
Curabitur suscipit tincidunt leo, non vulputate tortor elementum vitae. In hac habitasse platea dictumst. Curabitur sagittis odio ut elit vehicula condimentum. Ut felis eros, ullamcorper eget semper vel, ullamcorper ac metus. Etiam viverra dictum urna, vitae commodo arcu tristique sollicitudin. Aliquam erat volutpat. Proin a mauris nec orci volutpat adipiscing. Sed lacinia, mauris quis feugiat ullamcorper, augue leo rutrum ante, vel ornare dolor odio ac ligula. Proin vehicula tristique consectetur. Nulla facilisi. Sed eleifend hendrerit metus, nec malesuada odio vehicula eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Suspendisse ullamcorper leo sit amet ligula lobortis a rutrum ipsum feugiat. Vestibulum porttitor pretium arcu, ut imperdiet nulla venenatis accumsan. Aliquam erat volutpat. Fusce quis dolor ut elit pretium laoreet sit amet at elit. Proin nec magna augue, vulputate mattis massa. Nunc bibendum lacus id nisl facilisis porttitor. Quisque scelerisque aliquet accumsan. Nullam accumsan porta lacus vel pretium. Pellentesque diam massa, laoreet non lobortis at, viverra non est. Nunc turpis orci, malesuada vitae faucibus ut, eleifend eu lorem. Vivamus cursus tristique lectus, ac lacinia nibh pharetra in. Suspendisse mollis suscipit enim, sed ornare sem vulputate ac. Curabitur vitae quam enim.

Suspendisse molestie hendrerit dolor a auctor. Morbi viverra bibendum risus, ac aliquam arcu porttitor ut. Morbi ultrices porttitor mauris sed venenatis. Nulla facilisi. Nullam porta erat id leo ultricies adipiscing. Cras non lacus quam. Maecenas id mi eget eros suscipit mattis et tempor magna. Etiam sed massa neque. Quisque viverra molestie viverra. Nam viverra dolor risus. Sed id mi eros, quis venenatis lorem. Phasellus enim urna, aliquet in sodales vitae, pharetra non mauris. Pellentesque cursus porttitor dictum.

Quisque mattis cursus nibh id posuere. Morbi rhoncus justo at mauris fringilla vel volutpat quam pulvinar. In congue quam sollicitudin nunc mollis placerat. Phasellus augue erat, interdum non pharetra euismod, ultrices et ligula. Proin quam est, porta at ullamcorper sed, gravida non leo. Nam eros magna, sagittis a lacinia a, egestas vitae diam. Vivamus in orci at diam auctor euismod. Vestibulum eget ante non est blandit porta. Etiam odio quam, hendrerit non dictum vitae, mollis ac arcu. Nullam consectetur facilisis nibh ac mollis. Mauris iaculis consectetur venenatis. Aenean in massa magna, bibendum egestas metus. Nullam sapien felis, rhoncus sed venenatis in, tristique laoreet est.

Donec diam metus, gravida vitae fermentum in, condimentum ut ante. Nam tincidunt auctor pretium. Duis commodo lobortis ante, vel rhoncus nisl tempor vitae. Nam vehicula consectetur mauris, nec lacinia metus accumsan sagittis. Suspendisse potenti. Integer non dolor vitae ante hendrerit tempus. Duis ipsum nunc, sagittis eget euismod id, porttitor at purus. Ut quam lorem, placerat eget aliquet sagittis, dignissim eu magna. Nunc id sapien velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ornare, lorem aliquet commodo dapibus, purus odio ultrices neque, vitae sagittis purus mauris non sem.
</p>
</div>
</body>
</html>

I tried to fix this by using one php session variable in all my pages, so that the js would react depending on the value of that variable(1 or 0), but I was unable to implement my ideea correctly in js (I'm a bit of a js/php coding novice).

Any help would be greatly appreciated!

Thanks in advance,
PpSI.

Sartavius

10-26-2011, 01:39 AM

JS isn't my forte either, but you'll need to use a cookie (session based or longer - depending on your intent) to remember what the user chose. You'll probably want to use the jquery cookie plugin since you're already utilizing jquery - it's pretty easy to use and understand.

PpSi

10-26-2011, 03:57 PM

so then, I guess i should declare my cookie in the home page like this:
$.cookie('panel_state', '1', { expires: 10, path: '/', domain: 'mywebsite.com' });

The default value for panel_state is 1, for active(panel is visible).I guess it will work something like this:
When someone clicks the button, the Cookie Will take value 0, meaning it has to be hidden.The javascript reads the cookie as beeing 0, and then hides the menu.
When someone clicks the "show menu" button, the cookie is assigned the value "1", letting the js know the menu has to be made visible.

Then on the "hide panel" and "show panel" buttons I should have something like:

<img href="Hide_Panel_Image_Path" onclick="SetCookie('panel_state','0',expiry)" class="hidepanel"/>

and

<img href="Show_Panel_Image_Path" onclick="SetCookie('panel_state','1',expiry)" class="showpanel"/>

and the script should look something like below?

<script type="text/javascript">
jQuery(document).ready(function($){
$('#togglebutton').click(function() {
$('#panel').slideToggle();
});

$('#togglebutton').click(function() {
if (panel_state==0) {
$('.showpanel').hide();
} else {
$('.showpanel').show();
}
});

$('#togglebutton').click(function() {
if (panel_state==1) {
$('.hidepanel').hide();
} else {
$('.hidepanel').show();
}
});

$(function() {
$('#togglebutton').hover( function(){
$(this).css('color', '#F00');
},
function(){
$(this).css('color', '#000');
});
});
});
</script>

Is the js correct?(I will test it anyway).

Thanks Sertavius for the tip! It this would work, it would be a lot easier for me to work with Js than to work with php. ^_^

Later Edit: Tested it, it does not work.

I think i need i new function though, given the fact that modifying this one will only trigger the "Slidetoggle();" event in the new page, if the menu was hidden in the current page.

this is how i declared my cookie: <script type="text/javascript">$.cookie('panel_state', '1', { expires: 10, path: '/', domain: 'mywebsite.com' });</script>

and this is the function that i tried to create, to achieve the desired effect:

<script type="text/javascript">
$(document).ready(function(){
if (panel_state==1){
$('#panel').hide();
}
else{
$('#panel').show();
}
if (panel_state==0){
$('#panel').hide();
}
else{
$('#panel').show();
}
});
</script>

Didn't work though:< Any ideas?

PpSi

10-29-2011, 03:27 PM

Bump!

Another ideea would be(and this would be easier) to change all buttons to load a certain page, depending on the value of "panel_state", and to have two versions of the same page:one version to have the header hidden, and one to have the header shown.

The panel_state variable should start with the value 1(the menu is visible, on page load).When the user clicks the "hide menu" button, panel_state should take the value 0.

When the user will click pe button to go to page B, the button would load a version of PageB that has the header hidden.

It would be something like

If(panel_state==0) load(PageB_hidden_version)
else (load PageB)

I just don't know how to implement this in js..