Thanks donboe.
I’m glad it’s working for you.
I am even scared to ask, but is there a way to toggle between the words show and hide? So the menu item with class: panelHandle will say hide content when it is vissable and show Content when the actual content isn"t visible
Sure!
Alter the HTML to say only “Hide Text”, then update your JS like this:
$('#panelHandle').toggle(function() {
$('div.sel').animate({left: -w}, 900, function(){
$('#panelHandle').text("Show Content");
});
return false;
}, function() {
$('div.sel').animate({left: 0}, 900, function(){
$('#panelHandle').text("Hide Content");
});
return false;
});
Hi Pullo. This realy works great. Thank you so much. I will show you the site whenever I am ready with it
That’s good to know, donboe!
Please do show me the site, as it would be nice to see all of this in action.
Also, when I have a minute, I’ll write all of this up in a blog post, then you’ll have it for future reference.
That sounds like a great idea Pullo. That way other people can use something similar as well. I hope I can ask you one last question though? I have one separate page (blog) within this website outside of the system we have now. The page has the same layout but will open in a separate window when the tab is clicked. What I would like is that when you open that page is that the content pane slides open on page load! Is that possible?
Good morning,
Are you asking how to have the animation happen on page load (as opposed to the pane simply being open already)?
That is indeed what I mean. As soon as the page is open the panel should slide open!
Works as a charm Pullo. You made me a happy person. Thanks a lot
Hi Pullo. Is there any way to avoid that the panel is sliding when you click a certain button while you are already on that page. Here is a link to the site I’m working on.
Thank you so much in advance.
Hey donboe,
Not with your page coded as it is.
When you click on the links, in the nav bar, the browser just follows the link and loads the page accordingly. There is no JavaScript involved in this.
Your menu currently looks like this:
<ul id="menu">
<li><a href="index.cfm">Over Ons</a></li>
<li><a href="eten_en_drinken.cfm">Eten & Drinken</a></li>
<li><a href="agenda.cfm">Agenda</a></li>
...
</ul>
Would it be possible for you to add a class of “active” (or similar) to the anchor tag of whichever page the user finds themselves upon?
E.g. if you were on “Over Ons”, it woul look like this:
<ul id="menu">
<li><a href="index.cfm" class="active">Over Ons</a></li>
<li><a href="eten_en_drinken.cfm">Eten & Drinken</a></li>
<li><a href="agenda.cfm">Agenda</a></li>
...
</ul>
If you can do that, then a JavaScript solution, would be simple.