d_quiri Posted August 5, 2014 Share Posted August 5, 2014 Hello, i'm a media designer with a very basic knownledge of JS. I have problem with a script on a website i created and would love some help... Here is the situation: In the main menu of my Wordpress website I have a page that includes three different profile pages that are reachable through another menu on this certain page. But the main menu topic doesn't show as active with this profile pages. These profiles create an URL like that: ?team=name. My idea: to "addClass" the class "active" in the main menu topic (#menu-item-234) when this part "?team" is shown in the URL. I tried to code it but I'm not surprised it doesn't work... ;-) I don't really know what i'm doing ..Did I explain it understandable? Can someone help me, I would appreciate it very much.. <script type="text/javascript"> $(document).ready(function(){ if ( document.location.hash === '?team' ) { $("#menu-item-234").addClass("active"); } else if { document.location.hash !== '?team' } { $("#menu-item-234").removeClass("active"); } });</script> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 5, 2014 Share Posted August 5, 2014 The hash property isn't what comes after the question mark, it's what comes after the hash symbol (#), e.g.:example.com/page.php?var=val#bookmarkHere's the reference for the location interface, it looks like you want the search property:https://developer.mozilla.org/en-US/docs/Web/API/Location Link to comment Share on other sites More sharing options...
d_quiri Posted August 6, 2014 Author Share Posted August 6, 2014 Ok, thanks. I tried ... but put it in the wrong place? Is the structure right in the first place? <script type="text/javascript"> if ( window.location.search == "?team" ) { $("#menu-item-234").addClass("active"); } else if { window.location.search !== "?team"} { $("#menu-item-234").removeClass("active"); }; </script> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 6, 2014 Share Posted August 6, 2014 The structure looks fine, that should match a URL like this:example.com/page.php?teamYou can do some tests through, print the value of window.location.search to see what it is. Link to comment Share on other sites More sharing options...
d_quiri Posted August 6, 2014 Author Share Posted August 6, 2014 Hm ok. The URL looks actually like this: domain.com/?team=firstname-name And the print gives the same i have in the code: ?team=firstname-name So I tried this also ... (Does it have to be the whole string? Best be would with just the "/?team=" part) Is there a problem with where it is located? In the <head> Tag is right? Link to comment Share on other sites More sharing options...
Hadien Posted August 6, 2014 Share Posted August 6, 2014 you can create a "toQuery" function whose job is to parse out the location.search text into an object: var query = {string:window.location.search.substring(1),vars:{}};function toQuery(){ var kVpair, varArray = query.string.split("&"); for(var i=0;i<varArray.length;i++){ kVpair = varArray[i].split("="); query.vars[kVpair[0]] = kVpair[1] | undefined; } }; then you can create a lookup table (LUT) so that the page knows which query variable affects which cell. var activeLUT;$(document).ready(function(){ //link up the querynames to the elements they'll activate activeLUT = { "team":$("#menu-item-234"), "_otheritem_":$("#some-other-element") }; //populate the query object toQuery(); //first remove any and all active classes on navigation elements for(var key in activeLUT){ activeLUT[key].removeClass("active"); } //going by reference in the query, grab each element in the LUT and activate classes for(var key in query.vars){ if(activeLUT[key]!==undefined){ activeLUT[key].addClass("active"); } }} its usually best to stick as much of the javascript into the <head> tag as possible. its good practice to try and keep javascript mostly grouped and separate from the rest of the HTML. Its easier to maintain and cleaner to read through. And ALWAYS place all <script> tags after all <style> tags. This is a more important optimization for larger, involved sites. If you have tons of javascript code before style tags a browser may hang as its trying to compute the javascript, leaving the page unstyled for a short time, or worse the CSS might never load. when browsers come to javascript they like to stop what ever else they are doing to "compile" and later run the code. This can block incoming bandwith thus slowing the load times of a page. placing scripts after styles allows them to download both in parallel. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now