|
JavaScript - New Site Layout, Help Me?
I'm usually pretty good with finding codes on my own,
but it's been a while and I'm pretty stumped. I am currently working on a new site, and making a new layout. So on Photoshop, I laid out how I want it to work: This is how it will look: Each section of the header, like each color/shape, will be a separate imagemap. When it is hovered upon, An arrow will move out of the color/shape, and then whatever the link will lead to will appear at the end: And when the arrow is taken off of it, it will retract back to the color/shape, not just disappear. And here's a picture of all the arrows out: Is this possible? And is it possible that the bar&arrow that come out to also be clickable? And the text at the end to be clickable text and not just an image? Any tutorials/website links are welcome, I can usually follow them pretty well. Sorry to bombard you, I just figured I'd ask everything I wanted to in one thread. Similar TutorialsI'l not good in Javascript and I can't find anything about what I want.. . On a sports website there is a table with our ranking and results. On this site the content is changed weekly, but it stays in the same tables.. . Is it possible to make a javascript to get those tables and put them on my own website so the content will change on my site when the content is changed on the sports site? Please help me, it would save me lot of time.. . THx I have this code on my invisionfree forum that is suppose to change a layout from 6 AM - 6 PM but it isn't working. Here is the code Code: <script language="javascript">
/* script created by Chandler @ http://s4.invisionfree.com/digitalized <-- a great site for skins codes and support! */
now = new Date();
itime = now.getHours();
function TSkinChange() {
if (itime >= 19) {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://hatchingyourdragons.com/daynocturne.css">');
}
if (itime <= 6) {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://hatchingyourdragons.com/nightnocturne.css">');
}}
TSkinChange();
</script>
Thanks in advance Hey guys...not really used JavaScript but what I want to do is fairly simple... The Problem: I have the following code in my head section of my page: <script type="text/javascript" src="js/random-testimonial.js"></script> However xhtml will not allow </script> so to counter this I try to make the code into this: <script type="text/javascript" src="js/random-testimonial.js" /> Thing is, when I do that, my whole layout messes up, it's as if it is ignoring my stylesheet when it is in the php version of the site, when it is in a normal html file, it pushes my main container to the left and then you can not see the header container properly, only a little bit of it. Everything seems to work fine if I keep it the code like the first shown here but I can not have it like that for xhtml, is there something I am missing here? Any help is much appreciated. If you need to know anything else then please let me know. Thanks a lot. hi at the first Sorry for my bad english. I have a joomla at the wrap5.5 framework I knew my frame work for Regulation module position height have a js function. this function is ok in IE5 & ff but in IE9 show very tall my module height. but i dont know what is wrong on this function . i dont know anything about JS. this function : Code: (function(e) {
e.fn.matchHeight = function(f) {
var a = 0;
this.each(function() {
a = Math.max(a, e(this).outerHeight())
});
f && (a = Math.max(a, f));
return this.each(function() {
var c = e(this),
b = c.outerHeight() - c.height();
c.css("min-height", a - b + "px")
})
}
my website:http://www.joomi.ir I want to make a menu like this web site :http://www.petrobras.com.br/pt/ When your move the cursor on it , a new windows open and there is a picture in left side and submenues in right side I myself think it is a jquery tool but I don't know how to make some thing like this How can I do so ? thanks First off please forgive my ignorance, as I am very new to coding. I hope that I have posted this in the right place. I found a great piece of code that I would like to use for my site search. I found it he http://www.javascriptkit.com/script/...e_search.shtml Here is what I am attempting to do. I would like this piece of code to search all three of my domains, if this is possible. I would like to use this search box on all three of my websites, if this is possible. If you look at this site: www.kennedyassassinationresearch.com I would like to keep the look similar to what it is now, and use this code in the upper right corner of the header, where the black search box is now. Is any of this possible? the code I located is: Code: <form name="jksearch" action="http://www.google.com/search" method="get" onSubmit="jksitesearch(this)">
<p>Search JavaScript Kit:<br />
<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" type="text" style="width: 200px" value="navigator object" /> <input type="submit" value="Search" /><br />
<div style="font: bold 11px Verdana;">Google:<input name="se" type="radio" checked> *Yahoo:<input name="se" type="radio"> *MSN:<input name="se" type="radio">
</div>
<script type="text/javascript">
// All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
//Enter domain of site to search.
var domainroot="www.javascriptkit.com"
var searchaction=[ //form action for the 3 search engines
"http://www.google.com/search",
"http://search.yahoo.com/search",
"http://search.msn.com/results.aspx"
]
var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines
function switchaction(cur, index){
cur.form.action=searchaction[index]
document.getElementById("hiddenquery").name=queryfieldname[index]
}
function jksitesearch(curobj){
for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see which is checked
if (document.jksearch.se[i].checked==true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
</p>
</form>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
Any help is greatly appreciated, as this is a learning experience for me, and this has me quite confused. Thanks! I need to have a new window or tab to open for the random image w/link script found here http://javascriptkit.com/script/cut144.shtml I have tried target=blank but that doesn't work. Your help would be appreciated. Thank you I'm sorry I don't have code for this one. I'm making a fansite for a game called RuneScape and I'm a bit stuck on this part. What I need for my website is, a page that will have the prices (min, middle, and max) of things from this or other items, which will be chosen later on. Here are two example sites that I am wanting to ... do the same thing as them. First Example Second Example I'd really appreciate any information you guys are willing to give. Thanks. Hello, can make recommendations that it is necessary to finish in this site, I see that that that doesn't suffice but I will not understand that, to you I will be very grateful for your answers Here a site http://iceroos.ru Hey there i dunno if i should post on this section but well, i'm creating a website and i want to stream nba games. I found this site http://www.nbaliveonline.com/streaming/ wich usually stream games, and i want to use their streams on my site, i would like to know if its possible and how i can do it by copying any code or something, is there any way to do it ? Basicly i just want their video player streaming games into my site... thanks hey man,i write this code , Code: <html>
<head>
<script type="text/javascript">
function Do()
{
winow.location.assign("http://www.google.com");
}
</script>
<script type="text/javascript">
function replaceDoc()
{
window.location.replace("http://www.w3schools.com")
}
</script>
</head>
<body>
<input type="button" value="Google" onclick="Do()" />
<input type="button" value="Replace document" onclick="replaceDoc()" />
</body>
</html>
i want to see if i click Google button Hello everyone, I am very curious, how are the scroll bars disabled on this web-site: http://www.nofrks.com/# I know how to disable scroll bars in a new window with Javascript, but how would I disable scroll bars on the web-site? Could someone please give me an idea? Thank you very much Hey, I am having some difficulties and wondered if anyone could help, i have created a keyboard that works and inputs the values pressed into a text box, i have then tried to expand on this and create a keyboard with multiple layouts that dynamically change when a button is pressed, i have done this by having an iframe within the page and calling the parent function but it will no longer input the text into the textbox. The CSS styling also works in Safari but won't on firefox, any help would be much appreciated Here is my 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type='text/javascript'> function addtotextbox(i) { if(document.getElementById('keyboardsearchbox').value.length==0) var node = document.getElementbyId('keyboard').document.getElementById(i).firstChild.nodeValue else node = document.getElementbyId('keyboard').document.getElementById(i).firstChild.nodeValue.toLowerCase() if(node == "space") document.getElementbyId('keyboard').document.getElementById("keyboardsearchbox").value += " " else document.getElementbyId('keyboard').document.getElementById('keyboardsearchbox').value += node } function resettext() { document.getElementById('keyboardsearchbox').value = "" } function backspace(){ var currentvalue=document.getElementById("keyboardsearchbox").value var newvalue=currentvalue.substr(0,currentvalue.length-1) document.getElementById("keyboardsearchbox").value=newvalue } var keyboardstyle='<html><head><style type="text/css">.orangebox{background-color:#F60;}.keyboard {font-family: Arial, Helvetica, sans-serif;text-align:center;font-size: 25px;font-weight: bold;color: #000;background-color: #F60;}.keyboard:hover {font-family: Arial, Helvetica, sans-serif;text-align:center;font-size: 25px;font-weight: bold;color: #000;background-color: #F90;}body {margin-left: 0px;margin-top: 0px;}.textboxstyle {font-family:Arial, Helvetica, sans-serif;font-size:20px;font-weight:normal;color:#F60;}</style></head><body>' function qwerty(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="1" onclick="parent.addtotextbox(this.id)">1</td><td width="90" align="center" class="keyboard" id="2" onclick="parent.addtotextbox(this.id)">2</td><td width="90" align="center" class="keyboard" id="3" onclick="parent.addtotextbox(this.id)">3</td><td width="90" align="center" class="keyboard" id="4" onclick="parent.addtotextbox(this.id)">4</td><td width="90" align="center" class="keyboard" id="5" onclick="parent.addtotextbox(this.id)">5</td><td width="90" align="center" class="keyboard" id="6" onclick="parent.addtotextbox(this.id)">6</td><td width="90" align="center" class="keyboard" id="7" onclick="parent.addtotextbox(this.id)">7</td><td width="90" align="center" class="keyboard" id="8" onclick="parent.addtotextbox(this.id)">8</td><td width="90" align="center" class="keyboard" id="9" onclick="parent.addtotextbox(this.id)">9</td><td width="90" align="center" class="keyboard" id="0" onclick="parent.addtotextbox(this.id)">0</td></tr><tr><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td width="90" align="center" class="keyboard" id="e" onclick="parent.addtotextbox(this.id)">E</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="i" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">I</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td></tr><tr><td id="space" width="90" rowspan="2" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="a" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">A</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td><td id="d" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">D</td><td id="f" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">F</td><td id="g" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">G</td><td id="h" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">H</td><td id="j" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">J</td><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td></tr><tr><td align="center" valign="middle" bgcolor="#F60" id="box1"></td><td align="center" valign="middle" bgcolor="#F60" id="box2"></td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="c" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">C</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="b" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">B</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="m" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">M</td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } function dorvak(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="1" onclick="parent.addtotextbox(this.id)">1</td><td width="90" align="center" class="keyboard" id="2" onclick="parent.addtotextbox(this.id)">2</td><td width="90" align="center" class="keyboard" id="3" onclick="parent.addtotextbox(this.id)">3</td><td width="90" align="center" class="keyboard" id="4" onclick="parent.addtotextbox(this.id)">4</td><td width="90" align="center" class="keyboard" id="5" onclick="parent.addtotextbox(this.id)">5</td><td width="90" align="center" class="keyboard" id="6" onclick="parent.addtotextbox(this.id)">6</td><td width="90" align="center" class="keyboard" id="7" onclick="parent.addtotextbox(this.id)">7</td><td width="90" align="center" class="keyboard" id="8" onclick="parent.addtotextbox(this.id)">8</td><td width="90" align="center" class="keyboard" id="9" onclick="parent.addtotextbox(this.id)">9</td><td width="90" align="center" class="keyboard" id="0" onclick="parent.addtotextbox(this.id)">0</td></tr><tr><td id="q" width="90" align="center" bgcolor="#F60" > </td><td id="w" width="90" align="center" bgcolor="#F60"> </td><td width="90" align="center" bgcolor="#F60" id="e" > </td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="f" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">F</td><td id="g" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">G</td><td id="c" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">C</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td></tr><tr><td id="a" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">A</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="e" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">E</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="i" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">I</td><td id="d" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">D</td><td id="h" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">H</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td></tr><tr><td id="space" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="j" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">J</td><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="b" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">B</td><td id="m" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">M</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } function alphabet(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="a" onclick="parent.addtotextbox(this.id)">A</td><td width="90" align="center" class="keyboard" id="b" onclick="parent.addtotextbox(this.id)">B</td><td width="90" align="center" class="keyboard" id="c" onclick="parent.addtotextbox(this.id)">C</td><td width="90" align="center" class="keyboard" id="d" onclick="parent.addtotextbox(this.id)">D</td><td width="90" align="center" class="keyboard" id="e" onclick="parent.addtotextbox(this.id)">E</td><td width="90" align="center" class="keyboard" id="f" onclick="parent.addtotextbox(this.id)">F</td><td width="90" align="center" class="keyboard" id="g" onclick="parent.addtotextbox(this.id)">G</td><td width="90" align="center" class="keyboard" id="h" onclick="parent.addtotextbox(this.id)">H</td><td width="90" align="center" class="keyboard" id="i" onclick="parent.addtotextbox(this.id)">I</td><td width="90" align="center" class="keyboard" id="j" onclick="parent.addtotextbox(this.id)">J</td></tr><tr><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td><td width="90" align="center" class="keyboard" id="m" onclick="parent.addtotextbox(this.id)">M</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td></tr><tr><td id="space" width="90" rowspan="2" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td><td id="z" bgcolor="#F60" width="90" align="center"></td><td id="k" width="90" align="center" bgcolor="#F60" ></td><td id="l" width="90" align="center" class="keyboard" ></td></tr><tr><td align="center" valign="middle" bgcolor="#F60" id="box1"></td><td align="center" valign="middle" bgcolor="#F60" id="box2"></td><td id="z" width="90" align="center" bgcolor="#F60" ></td><td id="x" width="90" align="center" bgcolor="#F60" ></td><td id="c" width="90" align="center" bgcolor="#F60" ></td><td id="v" width="90" align="center" bgcolor="#F60" ></td><td id="b" width="90" align="center" bgcolor="#F60" ></td><td id="n" width="90" align="center" bgcolor="#F60" ></td><td id="m" width="90" align="center" bgcolor="#F60" ></td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } </script> <style type="text/css"> .titles { font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:18px; font-weight:bold; color:#F60; background-color:#FFF; } .textboxstyle { font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; color:#F60; } .borderbox { border: #666; } .borderboxorange { border:#666; background-color:#F60; } body { margin-left: 0px; margin-top: 0px; } </style> </head> <body> <table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"> <tr> <td><table width="900" border="0" cellpadding="0" cellspacing="1"> <tr> <td width="403" height="30" colspan="3" align="center" valign='middle' bgcolor="#F60" id="textbox"><form id="form1"> <input name="keyboardsearchbox" type="text" class="textboxstyle" id="keyboardsearchbox" size="70"/> </form></td> <td width="150" align="center" valign='middle' bgcolor="#F60" id="textbox"><input type="submit" name="reset" id="reset" value=" Reset " onclick="resettext()" /></td> </tr> <tr> <td height="30" align="center" valign='middle' bgcolor="#F60" id="reset"><input type="submit" name="qwerty" id="qwertybutton" value=" Qwerty " onclick="qwerty()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="qwerty"><input type="submit" name="dorvak" id="dorvakbutton" value=" Dorvak " onclick="dorvak()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="dorvak"><input type="submit" name="alphabet" id="alphabetbutton" value=" alphabet " onclick="alphabet()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="alphabet"><input type="submit" name="backspace" id="backspace" value=" backspace " onclick="backspace()" /></td> </tr> <tr> <td height="30" colspan="4" align="center" valign='middle' id="iframe"><iframe id='keyboard' width='900'></iframe></td> </tr> </table></td> </tr> </table> </body> </html> Thanks! Joe I posted before but have read that this may be more accurate and help my answers. I would like dome help in explaining how I might be able to manipulate this javascript section to lay it out in html and or using css. Can this be done via this part of the script or is there something I can wrap around it? Thanks document.write("<SCRIPT type='text/JavaScript' SRC='http://images.compucars.co.uk/scripts/stockv2.asp?notMakeID="+QueryString('notMakeID')+"&makeID="+QueryString('makeID')+"&searchURL="+sear chURL+"&rspage="+QueryString('rspage')+"&ID="+QueryString('ID')+"&intMax="+QueryString('intMax')+"&i ntMin="+QueryString('intMin')+"&bodyType="+QueryString('bodyType')+"&fuelType="+QueryString('fuelTyp e')+"&maxPerPage="+maxPerPage+"&memberID="+memberID+"&align="+strAlign+"&URL="+escape(window.locatio n.protocol + '//' + window.location.host + window.location.pathname)+"'></SCR"+"IPT>"); The idea behind the code is simple: when a user scrolls their mouse/trackpad/etc down, the script immediately scrolls the page to a specified div. However, I can't get if (event.wheelDelta < 0) to work. Help? Resolved Alright, I've managed to make the code work. Try it out in your browser! Now, on to Part II, to make the transitions smoother (especially in Firefox, which is very jumpy) and to add keyboard (arrows) functionality. Code: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Scroll</title>
<script type="text/javascript">
window.onmousewheel=document.onmousewheel=wheel;
window.addEventListener('DOMMouseScroll',wheel,false);
var delta;
function wheel(event)
{
if(event.wheelDelta){
delta=event.wheelDelta;
}
else if(event.detail){
delta=-event.detail;
}
}
function one()
{
if(delta < 0)
document.getElementById('section2').scrollIntoView();
}
function two()
{
if(delta < 0)
document.getElementById('section3').scrollIntoView();
else if(delta > 0)
document.getElementById('section1').scrollIntoView();
}
function three()
{
if(delta > 0)
document.getElementById('section2').scrollIntoView();
}
</script>
<style>
html,body {
margin: 0px;
height: 100%;
}
#section1 {
position: static;
background: #D9D2D6;
height: 100%;
width: 100%;
}
#section2 {
position: static;
background: #9F755E;
height: 100%;
width: 100%;
}
#section3 {
position: static;
background: #811C1E;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="section1" onwheel="one();"></div>
<div id="section2" onwheel="two();"></div>
<div id="section3" onwheel="three();"></div>
</body>
</html>
HI, I have a questions here. Can I change firefox/IE's min/max/X button lay out to lower right corner? I have a web app (let us say i have 2 pages input.php and output.php) when user enters data into input.php and click search output.php renders from server. But the user from anywhere on web should be able to close output.php by using lower right X button. (by default FF/IE has top right X button, may top left in case of MAC), in otherwords I need to change the output.php page NOT on a user machine but on server, so that each user get same lay out when access the page. Is it possible?? pls help me.. Thanks in advance... I'm trying to make a page where you can change a page's layout through 2 separate CSS's via a button. i want to button to change text when it toggles the layouts as well. i have no clue how to do this with an entire CSS file, but here is something i made to change the background. could i use this logic to change the CSS of a page? HTML <in Code: <input type="button" value="change layout" onclick="toggle()" /> JavaScript Code: var flag = 0; function toggle(){
if(flag==0){
document.getElementById("container").style.backgroundImage="blah.jpg";
flag=1; } else if(flag==1){
document.getElementById("container").style.backgroundImage="blah2.jpg";
flag=0; } }
Hello, I am trying to complete a test site but adding some javascript. In short I am trying to make the main content div slide from behind the nav via some JS. http://www.squareflash.com/test/index.html First I am just trying to get the animate onClick to work. I found this practice site -- Using this I am trying to get some guidance on how to add a automatic stop function to the moveRight variable. http://www.tutorialspoint.com/cgi-bi...=javascript_45 The site is in html5, is there anything special I need to know for that? ty Hi I need a java script code that it allow users to post their questions and I can answer them . How can I do so ? Best regards Is it possible to make a simple site search where if someone types in an exact keyword then they are taken directly to another page on the site. So the results page is skipped entirely? It's only for a personal site so I can skip directly to a page easily just by typing a keyword in a search box. Hope you understand what I mean. And thanks. |
|||||||