JavaScript - Javascript Redirect Issue With Php Index
Hi,
I am very new to Javascript but have found a great tutorial to create a dynamic dropdown menu. I got it to work, but have problems redirecting it to the correct page after the necessary page refresh to load the items in the 2nd dropdown menu. The Javascript in the header is the following: Code: <SCRIPT language=JavaScript> function reload(form){ var val=form.cat.options[form.cat.options.selectedIndex].value; self.location='index.php?cat=' + val ;} </script> My PHP controller (index.php) code to load the correct frames is as follows: Code: <ul id="navbar"> <li><a href="index.php?id=home">Home</a></li> <li><a href="index.php?id=overview">Overview</a></li> <li><a href="index.php?id=add">Add new product</a></li> </ul> Code: if(isset($_GET['cat'])){ include ('add.html.php');} else { switch($_GET['id']) { default: include('home.html.php'); break; case "home": include('home.html.php'); break; case "overview": include('add.html.php'); break; case "add": include('add.html.php'); } } So I have made a workaround to load the "add.html.php" frame with the if(isset)$_GET['cat']. But what I really would like to do is to change the Javascript self.location to Code: self.location='index.php?id=add?cat=' + val ;} so that the PHP index script loads the add.html.php automatically. However, when changing the self.location as described above the page is redirected to home.html.php. It is really annoying, I have googled for a full day but haven't found a solution yet. Maybe someone can tell me how I can easily load the correct frame by using Javascript? Many thanks in advance!! Similar TutorialsI am trying to "swap" the contents of a div(#right_top) depending on which line item you hover over. Awkward, but does work, but.... the problem is that although I can get the code to work, the "right_top" div gets longer (physically on the page) even though each div is supposed to be a different "z-index". I don't know how to correct this, or is there better code? I would appreciate any help! Thank you. Complete code below..... ------------------------------------------------------------------- Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <script language="javascript" type="text/javascript"> <!-- Hide script from older browsers function MM_findObj(n, d) { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; } function MM_showHideLayers() { //v3.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <!-------------------------------------------------------------> <style type="text/css"> #wrapper{ width:800px; } #left_top{ background-color:#66FFFF; width:270px; padding-top:60px; padding-left:30px; float:left; } #right_top{ background-color:#66FF33; padding-top:60px; width:480px; padding-left:20px; float:left; } #first_div{ position:relative; width:450px; height:300px; z-index:1; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } #second_div{ position:relative; font-size:16px; width:450px; height:300px; z-index:2; top: -320px; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } #third_div{ position:relative; font-size:16px; width:450px; height:300px; z-index:3; top: -640px; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } </style> </head> <body> <div id="wrapper"> <div id="left_top"> <table width="210" height="483"> <tr><td width="210" height="477" valign="top"> <div><a title="first div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div> <div><a title="second div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div> <div><a title="third div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div> </td></tr> </table> </div><!-- end of left_top --> <div id="right_top"> <div id="first_div"> <p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div> <div id="second_div"> <p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div> <div id="third_div"> <p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div> </div><!-- end of right_top div --> </div><!-- end of wrapper --> </body> </html> Hello All! First I would like to say that I have attempted to find an answer to my issue and there is obviously an enormous amount of help across this and other forums regarding how to use Javascript to modify your CSS styles including changing the z-Index property. I am to the point where I believe maybe it just needs an extra set of eyes to help me understand what I am doing wrong here! My dilemma is that I have a table on my site which has four images, one for different areas of the site. Below that table area, I have a space where I plan to display the text describing those sections upon mouse rollover. My goal is to have an outer div tag with position relative and then contain 4 div tags inside of that with position absolute so that I can stack them under the background all with negative z-Indexes. I have a javascript that is called on mouse over and mouse out to raise the z-Index of each div text area, but it is not working. See the code below: Javascript for the z-Index change: Code: <script type="text/javascript"> <!-- //function to change zIndex function swapMyImages(obj,z){ var theObj; //ie4 if(document.all){ theObj=document.all(obj); theObj.style.zIndex=z; } //ie5,6, Mozilla 1.0 and Opera 6 if(document.getElementById){ theObj=document.getElementById(obj); theObj.style.zIndex=z; } //nn4x if(document.layers){ theObj=document.layers[obj]; theObj.zIndex=z; } } //--> </script> </head> Anchor for one of the images with mouse overs attached: Code: <a class="thumb" href="..." title="Visit Our Shop" onmouseover="swapMyImages('shoptext','10')" onmouseout="swapMyImages('shoptext','-10')"><img src="images/hometable_back.jpg" width="190" alt="Tee Shirt Shop" longdesc="..." /></a> my Div section with the text areas set to negative z-Index: Code: <div id="hometext"> <div id="servicetext">service text here</div> <div id="shoptext">shop text here</div> <div id="portfoliotext">[portfolio text here</div> <div id="contacttext">contact text here</div> </div> my style sheet items for the divs: Code: .hometext { position:relative; float: none; left:0px; top:0px; text-align:center; z-index:-10; } #servicetext { position:absolute; float: none; left:0px; top:0px; text-align:center; z-index:-10; background-color:#000000; } #shoptext { position:absolute; float: none; left:0px; top:0px; text-align:center; z-index:-10; background-color:#000000; } #portfoliotext { position:absolute; float: none; left:0px; top:0px; text-align:center; z-index:-10; background-color:#000000; } #contacttext { position:absolute; float: none; left:0px; top:0px; text-align:center; z-index:-10; background-color:#000000; } I tried posting the code but it's too long... Page address: http://professorcuddlecore.com/paintings/ Problem: Click first or second photo, pops up fine, bottom text is behind the photo. You can view the JS by viewing source etc, sorry I can't fit it here. I spent 2-3 hours trying to figure out the problem but I'm new to JS and it looks like pretty convoluted code I'm using (obviously didn't write it myself, it's by "PopBox.") Thanks for any time spent helping me, pre-appreciated. I'm trying to figure out how to use an javascript function to redirect without using <body onload>. Normally I use this: Code: <META HTTP-EQUIV="Refresh" Content="0; URL=ajax.php?page=mypage"> But since I'm using ajax, and only want to redirect tha ajax part, the above can not be used... When I have a hyperlink to go to a page in ajax it looks like this: Code: <a href="#" onclick="load('ajax.php?page=mypage','contentarea');return false;"> Is there anyway that I can have the ajax part set into the META HTTP-EQUIV="Refresh" or is there an other way to do this? Thanks in advance... Hello Coding Forums, For the past few days, i have been learning and just surfing the forum board. I have recently ran into a problem and i am in need of help. This is a mixture of HTMl, XML, and JavaScript. For what i know, it seems my problem is a JS problem. I have been looking at this Facebook Fan page: http://www.facebook.com/pages/The-fi...18916928166010 I understand everything in the second page. The problem is i dont understand how in page 1, you are direct to page 2. Can anyone please explain to me how this is working? I am new with javaScript. Trust me, i have looked and i am still learning. This is important to me. -Mygel Hi I was wondering how to redirect to another page when a button is clicked using javascript. Should I use the goSite() function, or window.location.href =
Hi, I want to redirect pages e,g 'http://mydomain.com/pagename.html' to 'http://www.mydomain.com/pagename.html",i.e if anyone access without www then it will be added automatically,how can i do this using javascript? plz help Thanks This has been driving me crazy all day, cant seem to work out what im doing wrong. Alerts the correct URL Used document.write and it works But the redirect command doesnt initiate automatically on click and im not sure why. Someone help!! Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>http</title> <style> <!-- p.MsoNormal {mso-style-parent:""; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri","sans-serif"; margin-left:0cm; margin-right:0cm; margin-top:0cm} --> </style> <script type="text/javascript"> function buildstring(form) { var text = form.text.value; var xmljson = form.choice1.value; var init = 'localhost:1234/PPTX/tr?service=extract&action=extractAll&text='; var op = '&op='; var first = init + text + op + xmljson; var complete = "http://" + first; alert (complete); window.location = complete; } </script> </head> <body> <form method="get" id="urlbuild"> <table> <tr> <td> <h2>URL Builder</h2> </td> </tr> <tr> <td> <input type="text" size="100" name="text" value=""> </td> </tr> </table> <table> <tr> <td> <select type="one" name="choice1"> <option value="xml"> XML </option> <option value="json"> JSON </option> </select> </td> <td> <p>Please choose XML or JSON.</p> </td> </tr> </table> <table> <tr> <td> <input type="submit" onClick="buildstring(this.form)"> </td> </tr> </table> </form> </body> </html> I have a simple javascript for validating the radio buttons. But for what ever reason window.location does not redirect. this is my code: <SCRIPT LANGUAGE="JavaScript"> function checkRadio (frmName, rbGroupName) { var radios = document[frmName].elements[rbGroupName]; for (var i=0; i <radios.length; i++) { if (radios[i].checked) { return true; } } return false; } function valFrm() { if ( checkRadio("frm1","radio1")==true && checkRadio("frm1","radio2")==true) window.location="price.jsp"; else alert("You didnt select any price"); } </script> when i replace an alert with the redirect line it works fine. any help would be appreciated. The follow code DOES WORK, however not as I want it TO. I have a domain FRAMED / Redirect to a free blogging site. at the BLOGGING site I have to following code in the header to redirect to my domain name. WHAT IS HAPPENING IS AS YOU CAN GUEST IT is going into a loop. WHAT I am trying to do is get the LINK juice SERP to the domain name. SO the java code is right but I want it to quit ONCE after the redirect / forward. as the site is in FRAME once directed to the domain name it STICKS....on the domain name. <script language='javascript'> document.location='http://www.GOOGLE.COM/'; </script> I am new VERY new to javascript hi, I am trying to redirect from my main site to my mobile site by detecting screen width using javascript. But everything time i try to test this via the iphone 4s,the browser keeps reloading without loading any content, like its on some sort of loop! Here are the scripts ive tried to used below, have i missed anything? [CODE] <script type="text/javascript" charset="utf-8"> if (navigator.userAgent.match(/(operamini|ipad|ipod|iphone|android|webOS|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafon e|o2|pocket|kindle|mobile|hiptop|\bpda|psp|treo|nokia|blackberry)/i)) { location.replace("example.com"); } </script> [CODE END] [CODE] <script type="text/javascript"> if (screen.width <= 550) window.location = 'http://yoursite.com/mobile'; </script> [CODE END] Thanks in advance for any help! Jon hey guys. i need a js code that redirects to a flash page or to a non flash page after detecting the browsers plugin abilities and if it has flash or not. any help would be appriciated. cheers Hi, Ever seen on the iphone where you have to slide the slider across the screen to unlock it? I have a duplicate of this using javascript but no matter what I try I cannot make it redirect. I want the page to be redirected after the slider has gone to the other side. Heres the HTML Code: <!DOCTYPE html> <head> <meta charset='UTF-8'> <title>Slide To Unlock</title> <link rel='stylesheet' href='css/style.css'> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script> <script src='js/slidetounlock.js'></script> </head> <body> <div id="page-wrap"> <div id="well"> <h2><strong id="slider"></strong> <span>slide to unlock</span></h2> </div> </div> </body </html> And the javascript Code: $(function() { $("#slider").draggable({ axis: 'x', containment: 'parent', drag: function(event, ui) { if (ui.position.left > 550) { $("#well").fadeOut(); } else { // Apparently Safari isn't allowing partial opacity on text with background clip? Not sure. // $("h2 span").css("opacity", 100 - (ui.position.left / 5)) } }, stop: function(event, ui) { if (ui.position.left < 551) { $(this).animate({ left: 0 }) } } }); // The following credit: http://www.evanblack.com/blog/touch-slide-to-unlock/ $('#slider')[0].addEventListener('touchmove', function(event) { event.preventDefault(); var el = event.target; var touch = event.touches[0]; curX = touch.pageX - this.offsetLeft - 73; if(curX <= 0) return; if(curX > 550){ $('#well').fadeOut(); } el.style.webkitTransform = 'translateX(' + curX + 'px)'; }, false); $('#slider')[0].addEventListener('touchend', function(event) { this.style.webkitTransition = '-webkit-transform 0.3s ease-in'; this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false ); this.style.webkitTransform = 'translateX(0px)'; }, false); }); I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar? Also, how would I set the zindex so the bubbles are always in front of everything else. Thank you in advance. //Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com) //Based on code by Altan d.o.o. (snow@altan.hr) //For full source code and installation instructions to this script, visit http://www.dynamicdrive.com var no = 15; // image number or falling rate var speed = 2; // the lower the number the faster the image moves var snow = new Array(); snow[0] = "bubble.png" snow[1] = "bubble2.png" snow[2] = "bubble3.png" var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 600, doc_height = 1024; if (ns4up||ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); j = 0; for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>"); } } else if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>"); } } if (j == (snow.length-1)) { j = 0; } else { j += 1; } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]+pageYOffset; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE_NS6() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] -= sty[i]; if (yp[i] < -50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = doc_height; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = ns6up?window.innerWidth-5:document.body.clientWidth; doc_height = ns6up?window.innerHeight-5:document.body.clientHeight; } dx[i] += stx[i]; if (ie4up){ document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } else if (ns6up){ document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px'; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px'; } } setTimeout("snowIE_NS6()", speed); } if (ns4up) { snowNS(); } else if (ie4up||ns6up) { snowIE_NS6(); } // End --> </script> i need help with this code why isnt it redirecting me to my other webpage heres the code
Code: <form name="loginform"> <label>User name</label> <input type="text" name="usr" placeholder="username"> <label>Password</label> <input type="password" name="pword" placeholder="password"> <input type="submit" value="Login" onSubmit="validateForm();" /> </form> <script> function validateForm() { var un = document.loginform.usr.value; var pw = document.loginform.pword.value; var username = "username"; var password = "password"; if ((un == username) && (pw == password)) { window.location = "main.html"; return false; } else { alert ("Login was unsuccessful, please check your username and password"); } } </script> Hi, I have three buttons on my site. When a button is clicked it pulls down a javascript pop up questionaire box. When the person closes the box they're redirected to Paypal depending on which button they clicked, hence the 3 if else options toward the end of this script. How might the following code be rewritten so that the pop up box no longer exists, but so the options still function and redirect correctly to Paypal? Code: <script type="text/javascript"> function popup(option){ Modalbox.show('<div><p>How did you learn about Dinosaur Pop?</p> <textarea id="message" name="message" rows="4" cols="30"></textarea><br><br><input type="button" value="Send" onclick="Modalbox.hide(); redirect(' + option + ');" /> or <input type="button" value="No, leave it!" onclick="Modalbox.hide(); redirect(' + option + ');" /></div>', {title: "Question", width: 300}); return false; } function redirect(option) { var messageObj = document.getElementById("message"); if (messageObj != null && messageObj.value != "") { var url = 'submit_message.php?message=' + encodeURIComponent(messageObj.value); new Ajax.Request(url, { method: 'get', onSuccess: function(transport) { } }) } if (option == 1) document._xclick.submit(); else if (option == 2) document._xclick1.submit(); else if (option == 3) window.location = "download/Dinosaur Pop Book.pdf"; } </script> Hi all, I'm new here and need some help. I don't know Javascript at all. I have a paypal form that looks like this: Code: <FORM action="https://www.paypal.com/cgi-bin/webscr" method="post"> <INPUT type="hidden" name="cmd" value="_s-xclick"> <INPUT type="hidden" name="hosted_button_id" value="VMMCF6CUGBPAN"> <INPUT type="hidden" name="on0" value="DATA">DATA<BR> <SELECT name="os0"> <OPTION value="250" selected="selected">DATA</OPTION> <OPTION value="400">DATA</OPTION> <OPTION value="1000">DATA</OPTION> </SELECT> <INPUT type="hidden" name="currency_code" value="USD"> <BR> <INPUT type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><IMG alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </FORM> This form works perfectly with my system now. I'm trying to add one fourth option that will redirect to another page, but I'm not sure if changing the name of the select will break the paypal transaction. So I tried this solution: Code: <FORM action="https://www.paypal.com/cgi-bin/webscr" method="post"> <INPUT type="hidden" name="cmd" value="_s-xclick"> <INPUT type="hidden" name="hosted_button_id" value="VMMCF6CUGBPAN"> <INPUT type="hidden" name="URL" value="DATA">DATA<BR> <SELECT name="URL" onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value"> <OPTION value="250" selected="selected">DATA</OPTION> <OPTION value="500">500 Words</OPTION> <OPTION value="1000">1000 Words</OPTION> <OPTION value="project.html">1000+ Words</OPTION> </SELECT> <INPUT type="hidden" name="currency_code" value="USD"> <BR> <br> <INPUT type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><IMG alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </FORM> It works great if I select the fourth option with a internal url in it. But if I choose one of the other options it tries to dynamically change to a page "250", "500", or "1000" and they don't exist. Also, I'm not sure if changing the select name or the option value will break the transaction with paypal. What I'd like the form to do is nothing on all options except the fourth; which is a redirect. The first, second, and third option require the used to click a paypal buy now button. Can't I just take this... Code: onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value" ...put it in the option tag and change it to onSelect or something? This is as far as I can go. I copied the code and altered it. Can anyone here help please? Hi folks! I know this is a really simple script, but I'm still a beginner, still learning and struggling..haha thanks for sticking with me Anyway my aim here is to have x,y, or z Div come to the front onClick. I've figured out how to do it with two Div's (using the code below) but not with 3 or more. I'm not attached to the code, so if you want to suggest something totally different I am all ears! Thank you greatly! ian Code: <script> function changeZunder() { layer1.style.zIndex = 1; layer2.style.zIndex = 2; } function changeZover() { layer1.style.zIndex = 2; layer2.style.zIndex = 1; } </script> ---- <body> <div id="layer1" style="z-index: 1; position: absolute;" onClick="changeZover()"> FIRST BOX </div> <div id="layer2" style="z-index: 1; position: absolute;" onClick="changeZunder()"> SECOND BOX </div> </body> This is what I tried but alas, it does not work por que no? This is located on my main index file which if the result of z is greater than 1, I would have the user stay at this page as opposed to redirecting to the portrait design. I have optimized the website for mobile use so there is a reason of having two different pages, the wide screen has extra tools / other stuff that isn't shown on the portrait not because of size/responsive design but becasue I want it to be this way. Anyway... "What's the situation captain?" This is located above my <style> tag Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script language="JavaScript" type="text/javascript"> <script> function redirect() { var x = screen.width; var y = screen.height; var z = x/y; if (z<1) { window.location.replace("alternate destination"); }; else ( ){ // stay here }; }; </script> Reply With Quote 12-21-2014, 01:58 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts You have extra semicolons in there. In general, don't put a semicolon directly after a right brace }; There are a couple of exceptions, but they don't apply here. What's the point in having the else?? Hi there, I hope I post this in the right section. I'm trying to do a redirect using the below code: <script type="text/javascript"> window.location.href = "http://google.com" </script> FF and IE work as they should. Chrome doesn't. The request above to http://google.com, gets a 'canceled' status in Chrome browser > Development tools > "Network". I've tried several other functions: location.href = url location.replace(url) document.location = url location.assign(url) window.open(url, '_self') Same code pasted within a local html file works fine. Below is the redirect request that it's canceled by chrome: http://pastebin.com/hD36M1RG Any clues? Thanks |