Show Div Based On If Statement
I'm trying to use this code to hide or show a div based on the url param 'direction' I can't get this to work and wonder if there is a better way. Sample url = http://domain.com?di
Solution 1:
You're missing a $(document).ready
(if you're using jQuery) or window.onload
block -
$(document).ready(function() {
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
});
or without jQuery -
window.onload = function() {
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
}else {
document.getElementById('south').style.display = 'none';
}
}
It's possible that your code isn't working as the divs haven't been loaded in to the DOM when you're trying to show/hide them.
Example : http://jsfiddle.net/manseuk/RTrgN/1/
Solution 2:
Maybe in the if/else statement you need to show and hide the other div so that the correct one is shown and the correct one is hidden in each condition?
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
document.getElementById('south').style.display = 'none';
}else {
document.getElementById('north').style.display = 'none';
document.getElementById('south').style.display = 'block';
}
Solution 3:
For a pure javascript method you need to add change the window.onload even to run your code - this ensures the DOM elements are present to run your code :
http://jsfiddle.net/manseuk/RTrgN/2/
functiongetUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
functionrunMe() {
var myVal = getUrlVars()["direction"];
if (myVal == "north") {
document.getElementById('north').style.display = 'block';
} else {
document.getElementById('south').style.display = 'none';
};
}
window.onload = runMe; // run the code once the DOM is loaded
Solution 4:
create a function, and assign it to the body's onload event. Also fix the styles from the if a bit.
<head><scripttype="text/javascript">functiongetUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
functionmyOnLoad()
{
var myVal = getUrlVars()["direction"];
if(myVal == "north") {
document.getElementById('north').style.display = 'block';
document.getElementById('south').style.display = 'none';
}else {
document.getElementById('north').style.display = 'none';
document.getElementById('south').style.display = 'block';
}
}
</script></head><bodyonload="myOnLoad()"><divid="north">Some text</div><divid="south">Some text</div></body>
Post a Comment for "Show Div Based On If Statement"