If / Then for Displaying Hidden DIVs

Printable View

01-17-2013, 01:29 AM
DerekP

If / Then for Displaying Hidden DIVs

Hey Guys,

I'm trying to use Javascript to display two possible sets of content. One set of content is served to an affiliate, whose traffic has "?hop=fuzzphil" in the URL. I'm using PHP to grab the parameter, then passing it into JavaScript and trying to use an in-else statement to determine which hidden div to display. Beneath the JS code are two hidden divs with different names; I want to use JS to trigger the display of either section after a time delay.

Here's what my code looks like right now:

Code:

<?php $affiliateid = $_REQUEST['hop']; ?> <script type="text/javascript"> var hopid="<?php echo $affiliateid; ?>"; if (hopid == "fuzzphil") { function showBuyLink() { document.getElementById("buttonphilippe").style.display = "inline"; setTimeout("showBuyLink()", 5000); } } else { function showBuyLink() { document.getElementById("buylink").style.display = "inline"; setTimeout("showBuyLink()", 1000); } } </script>

Beneath the code are two divs with "display: none" and the id set to either "buylink" or "buttonphilippe." I've tested the delay code independently and it works, but something in the if-else is breaking it I think. I've also tested just putting the PHP hop ID into the variable and it document.writes just fine, so I'm not sure what's going on.

Thanks for the help :)
01-17-2013, 07:25 AM
Padonak

1. if you are using php for grabbing the paramentr why not to use it for displaying the apropriate content?
2. if grabbing the part of the url is the only reason for using php you don't need to use php at all
01-17-2013, 10:50 AM
DerekP

1) We're using Visual Website Optimizer for split testing and it's interfering with the code. I think having dynamically generated code is more difficult when you're also dynamically generating the content. We tried with PHP first and it didn't work very well.

2) It's beyond my JS skills. I found this bit of code online:

Code:

function get(name){ if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search)) return decodeURIComponent(name[1]); } var hopid=get('foo');

But it didn't work. I don't really understand it enough to troubleshoot it.

Anyway, I already tested using PHP to assign the variable and that part of the code works fine. I know it's not the most efficient way of doing things, but I just want it to work, I don't really care about it being efficient. Any idea why the code as it is isn't working? The variable assignment part is fine ;/
01-17-2013, 02:31 PM
Padonak

i do not clearly understand your reasons so choose by yourself what you need from the two variants below:

with PHP (not having hop=fuzzphil | having hop=fuzzphil)

Code:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>PHP based</title> <style type="text/css"> .gr{color:Green;} .cr{color:Crimson;} .hid{display:none;} </style> </head> <body> <center> <input class="hid" id="buttonphilippe" type="button" value="buttonphilippe" /> <a class="hid" id="buylink" href="#null">buylink</a> <div id="from_url" class="hid">Here goes the content for those <h2><span class="gr">having</span> hop=fuzzphil</h2> in their URL</div> <div id="not_from_url" class="hid">Here goes the content for those <h2><span class="cr">not having</span> hop=fuzzphil</h2> in their URL</div> <script type="text/javascript"> var path='fuzzphil'; <?php $affiliateid=(isset($_REQUEST['hop']))?$_REQUEST['hop']:'nothing'; echo 'var hopid=\''.$affiliateid.'\';'; ?> if(hopid==path){ document.getElementById("buttonphilippe").style.display = "inline"; document.getElementById("from_url").style.display = "block"; } else{ document.getElementById("buylink").style.display = "inline"; document.getElementById("not_from_url").style.display = "block"; } </script> </center> </body> </html>

without PHP (not having hop=fuzzphil | having hop=fuzzphil)

Code:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>HTML + JS based</title> <style type="text/css"> .gr{color:Green;} .cr{color:Crimson;} .hid{display:none;} </style> </head> <body> <center> <input class="hid" id="buttonphilippe" type="button" value="buttonphilippe" /> <a class="hid" id="buylink" href="#null">buylink</a> <div id="from_url" class="hid">Here goes the content for those <h2><span class="gr">having</span> hop=fuzzphil</h2> in their URL</div> <div id="not_from_url" class="hid">Here goes the content for those <h2><span class="cr">not having</span> hop=fuzzphil</h2> in their URL</div> <script type="text/javascript"> var path='fuzzphil'; var ls=location.search; if(ls.length>0 && ls.indexOf('hop='+path) != -1){ document.getElementById("buttonphilippe").style.display = "inline"; document.getElementById("from_url").style.display = "block"; } else{ document.getElementById("buylink").style.display = "inline"; document.getElementById("not_from_url").style.display = "block"; } </script> </center> </body> </html>
01-17-2013, 03:58 PM
DerekP

IT WORKS! THANK YOU!

Just one more quick question - How do I make it so the content displays after a certain period of time? For example, say I wanted it to display in 30 seconds. I tried to adapt the old code to your code, but it didn't work ;/

Here's what your code looks like on my site right now:

Code:

<script type="text/javascript"> var path='fuzzphil'; <?php $affiliateid=(isset($_REQUEST['hop']))?$_REQUEST['hop']:'nothing'; echo 'var hopid=\''.$affiliateid.'\';'; ?> if(hopid==path){ document.getElementById("from_url").style.display = "inline"; } else{ document.getElementById("not_from_url").style.display = "inline"; } </script>

Here's what I tried to do:

Code:

<script type="text/javascript"> var path='fuzzphil'; <?php $affiliateid=(isset($_REQUEST['hop']))?$_REQUEST['hop']:'nothing'; echo 'var hopid=\''.$affiliateid.'\';'; ?> if(hopid==path){ function showBuyLink1(){ document.getElementById("from_url").style.display = "inline"; setTimeout("showBuyLink1()", 30000); } } else{ function showBuyLink2(){ document.getElementById("not_from_url").style.display = "inline"; setTimeout("showBuyLink2()", 30000); } } </script>

Basically say "If hop=fuzzphil, display X content after 30 seconds, otherwise display Y content after 30 seconds." Everything you wrote works perfectly, THANK YOU. Just hoping to get this one last thing figured out. Really appreciate the help.
01-18-2013, 04:18 AM
Padonak

i think you could do it this way:

Code:

<script type="text/javascript"> var path='fuzzphil'; <?php $affiliateid=(isset($_REQUEST['hop']))?$_REQUEST['hop']:'nothing'; echo 'var hopid=\''.$affiliateid.'\';'; ?> function decide(){ if(hopid==path){ document.getElementById("from_url").style.display = "inline"; } else{ document.getElementById("not_from_url").style.display = "inline"; } } setTimeout('decide()',30000); </script>