I have some jquery which checks if a particular element is visible on a page and passes a parameter to be appended to the url, so the element can be shown/hidden on the next page.
I want to see if it is possible to store this value in a coldfusion variable and then pass it via the navigation, as this seems to be a more robust method to me.
Here is my basic html:
<nav>
<ul id="mainNav" class="clearfix">
<li><a href="/">Main</a></li>
<li><a href="#" class="<cfif VARIABLES.primarydir EQ 'work'>clicked</cfif>">Work</a></li>
<li><a href="/about" class="<cfif VARIABLES.primarydir EQ 'about'>clicked</cfif>">About</a></li>
<li><a href="/news" class="<cfif VARIABLES.primarydir EQ 'news'>clicked</cfif>">News </a></li>
<li><a href="/tumblr.com" target="_blank">Blog</a></li>
</ul>
<ul id="subNav">
<li><a href="/work/effort" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'effort'>clicked</cfif>">Effort, We Cried!</a></li>
<li><a href="/work/why" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'why'>clicked</cfif>">Why Do We Do This</a></li>
<li><a href="/work/guests" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'guests'>clicked</cfif>">Guests & Hosts</a></li>
<li><a href="/work/prettygirls" class="<cfif VARIABLES.primarydir EQ 'work' and VARIABLES.secondarydir EQ 'prettygirls'>clicked</cfif>">Pretty Girls Doing Horrid Things</a></li>
</ul>
</nav>
#subNav
is set to hidden by default in the css.
I think have some basic jquery to toggle the visibility of the subNav:
var toggleSubNav = (function(){
trigger.on('click',function(){
subNav.toggleClass('visible', function(){
subNavLength = subNav.is(':visible');
});
return false;
});
}());
And then a second function which checks the visibility of the subNav and appends the url:
merge.on('click',function(){
var url = $(this).attr('href');
subNavLength = subNav.is(':visible');
if(subNavLength){
window.location = url + '?subnav=true';
}else{
window.location = url;
}
return false;
});
Finally a function which checks the url for the content of '?subnav=true' to display this on the next page:
var subNavProp = (function(){
if(href.indexOf('?subnav=true') > 0){
subNav.addClass('visible');
}else{
subNav.removeClass('visible');
}
}());
The variable subNavLength
is global and gets updated via these various functions.
I realise I am posting an awful lot of jquery and I don't really know how (or if) there is a way to convert this to a backend solution for coldfusion. My thought was that I could toggle a class on the subNav element that is wrapped in a coldfusion if, something like:
<ul id="subNav" class="<cfif var IS true">className</cfif>">
But I am wondering if that still requires something of a Front End solution. Or even if there is another better way to do this?
Aucun commentaire:
Enregistrer un commentaire