|
JavaScript - Modify Matching_columns Script To Work With Html5 Elements?
hi.
in reference to this post: http://www.codingforums.com/showthread.php?t=226228 can some guru show me how to modify the matching columns script so that it works in html5? .. with a long center SECTION element and two shorter ASIDE elents .. 1 on each side. UPDATE .. Houston, we have an answer. Similar TutorialsHi I am a new user to JS, and I have a problem he I have some JS code to work on a data set with file name "data.txt" in the header section of an HTML page. Code: <script type="text/javascript" src="data.txt"></script> What I am trying to do is to ask a user to input a different file name, then update the file name in the <script> tag, for example, to Code: <script type="text/javascript" src="new_data.txt"></script> But I don't know how to update the file name. Any help will be appreciated. I am using the simple password script from http://www.allwebco-templates.com/su...ect_simple.htm where the password is contained in the header script. I need to change the password, e.g. from Jan to Feb to Mar to Apr etc. How could I modify the script to contain the list of passwords, and have it automatically utilise/apply the correct password for the current month? To a non-javascript person like me this seems like it should be simple..... Can anyone please suggest a solution? Thanks muchly in advance. I trying to modify that username password script so that only a password is needed,and if entered correctly, it takes you to a certain webpage but the script seems to break when I take out the username variables..is there any way I can do this? Heres the script, its from the resources on javascriptkit. How would I do this? Any help would be appreciated! Heres the script I found. <script type = "text/javascript"> var count = 2; function validate() { var un = document.myform.username.value; var pw = document.myform.pword.value; var valid = false; var unArray = ["Philip", "George", "Sarah", "Michael"]; // as many as you like - no comma after final entry var pwArray = ["Password1", "Password2", "Password3", "Password4"]; // the corresponding passwords; for (var i=0; i <unArray.length; i++) { if ((un == unArray[i]) && (pw == pwArray[i])) { valid = true; break; } } if (valid) { alert ("Login was successful"); window.location = "http://www.google.com"; return false; } var t = " tries"; if (count == 1) {t = " try"} if (count >= 1) { alert ("Invalid username and/or password. You have " + count + t + " left."); document.myform.username.value = ""; document.myform.pword.value = ""; setTimeout("document.myform.username.focus()", 25); setTimeout("document.myform.username.select()", 25); count --; } else { alert ("Still incorrect! You have no more tries left!"); document.myform.username.value = "No more tries allowed!"; document.myform.pword.value = ""; document.myform.username.disabled = true; document.myform.pword.disabled = true; return false; } } </script> <form name = "myform"> <p>ENTER USER NAME <input type="text" name="username"> ENTER PASSWORD <input type="password" name="pword"> <input type="button" value="Check In" name="Submit" onclick= "validate()"> </p> </form> Hello, I am currently working on my school's website. The site is laid out with a DIV on the left set up as a menu (called "leftmenu") and a DIV to the right to display the content (called "maincontent"). Clicking a link in leftmenu calls a script which changes the content of "maincontent". The script currently works as it should except for one small error. The appropriate heading, text and image load for each link, but the formatting between the image and the paragraph is lost. When the page originally loads, the image is set to "float:left" and the paragraph wraps around it to the right. However, when the script runs and changes the contents, the paragraph no longer wraps around the image, but is written below it. Javascript function: Code: var nov12="News for November 12";
var nov11="News for November 11";
var nov10="News for November 10";
function writeNews(title,image,txt)
{
document.getElementById("newsTitle").innerHTML=title;
document.getElementById("newsImage").src=image;
document.getElementById("newsText").innerHTML=txt;
}
HTML for the links calling the function and maincontent: Code: <div class="leftmenu">
<h3>News</h3>
<ul class="leftmenu">
<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 12','img1.jpg',nov12)">Nov 12</a></li>
<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 11','img2.jpg',nov11)">Nov 11</a></li>
<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 10','img3.jpg',nov10)">Nov 10</a></li>
</ul>
</div>
<div class="maincontent">
<h3 id="newsTitle">School News</h3>
<img id="newsImage" class="newsimagestyle" src="img1.jpg" />
<p id="newsText"><img id="newsImage" class="newsimagestyle" src="" />Select the date from the menu on the left for news posted on that day.</p>
</div>
I have also attached the "before.jpg" and "after.jpg" screen captures from the relevant section of the website so you can see what changes are happening to the formatting. BEFO AFTER: Any help to keep the formatting in the same would be greatly appreciated. Thanks. Phil Hi all, I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard. This is the code I currently have for the checkbox: Code: function playSound() {
if (document.getElementById('sound').checked){
-something needs to be added here to make it work?-
}
}
Anyone have an idea how to make this work? Many thanks I wanted to know if document.getElementById works while accessing form elements. I tried doing this just for testing purposes This code doesnt work function validateForm() { var val = document.getElementById("id_login").getAttribute("value"); alert(val); return false; } but this does function validateForm() { alert(document.myForm.text_login.value ); return false; } Why doesnt document.getElementByid work with form objects.it works with all non form HTML objects.. Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) {
steps = 1000;
elem = document.getElementById(obj);
function fadeIn() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ i +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
}
}
function fadeOut() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
}
}
/* One for Fade in and anything will be fade out*/
if(toggle == 1) {
fadeIn();
}
else {
fadeOut();
}
}
Thanks, Jon W Hi, I'm a javascript idiot, and I need a script to change two styles in two different elements based on the status of 2 radio buttons. Basically, I have 2 forms...#formTest and #formTest2. When radio button "search" value "1" is selected I need the display style for #formTest to be "block" and the display style for #formTest2 to be "none". When radio buton "search" value "2" is selected, I need the opposite to occur. (#formTest display style ="none" and #formTest2 display style="block") I have very buggy code which produces similar changes, but does other bad things, so won't work. Basically, the first selection change displays both forms, which after the first selection change works fine, unless you click anywhere else, in which case both forms are not displayed. I know I should use a function in the head and call it with an onselect or onclick event. I just don't know how. I appreciate any help anyone can offer me! My ugly (nonfunctional code is below) Search by Make: <input name="search" type="radio" value="1" onclick="document.getElementById('testForm').style.display='block';" onchange="document.getElementById('testForm').style.display='none';" checked="checked" /> <br /> Search by Category: <input name="search" type="radio" value="2" onclick="document.getElementById('testForm2').style.display='block';" onchange="document.getElementById('testForm2').style.display='none';" /> Thanks Again so my code is supposed to retrieve three values from a flash element. now it works fine, but when it retrieves a 0 from any of the three valuse, it goes all haywire.... how could i put in a statement or command that if it returns 0, that all it will display is a 0 instead of returning "NaN"? But since all three valuse added together are supposed to equal 100% i have to run the numbers through a little bit of division and rounding after it gets the value of each one. Code: var techfaction = document.getElementById('tfaction');
var natfaction = document.getElementById('nfaction');
var magfaction = document.getElementById('mfaction');
retrFaction();
roundNumber();
function retrFaction()
{
var values = document.documentElement.innerHTML.match(/factiontrianglesmall\.swf\??.*\\x26link/i)[0].match(/[0-9.]{4,9}/ig);
techfaction.innerHTML = roundNumber(values[0] / 30, 1) + '%';
natfaction.innerHTML = roundNumber(values[1] / 30, 1) + '%';
magfaction.innerHTML = roundNumber(values[2] / 30, 1) + '%';
}
function roundNumber(num, dec)
{
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani Hi guys, it's been a while since I've been here Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button. I googled it but didn't find anything too useful except for this: http://www.aHappyDeal.com/wj_r.asp?lid=2109 but I'm not sure how to edit it for the toggle. Thanks! I'm reworking a 15 year old script. Here is the original general purpose routine that extracted a portion of one form to another form. Code: function FillForm(f) {
for( i=FullName; i<=EndOfForm; i++) {
self.document.forms[f].elements[i].value = FormData[i];
};
};
But NOW I'm supposed to use getElementById() Does that mean instead of the short routine I have to put one line for each Id tag and it is no longer general purpose and independent of the form being used? Is it OK to keep using the legacy script despite the Warning from the error console? Hi guys, it's been a while since I've been here Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button. I googled it but didn't find anything too useful except for this: http://www.codetoad.com/javascript/e...rm_element.asp but I'm not sure how to edit it for the toggle. Thanks! Okay I'm trying to make a script where if I click on a link a div pops up. And if I click on another link another div pop ups up and the old div is closed. The script calls the function from the link in the html and sends an ID. I am confused as to why this doesn't work. Code: function controls(vtiles){/*ID of requested div*/
vtiles.style.ClassName='switchOn'; //change it's classname to something that's displayed
var cap=document.getElementsByTagName('div');// get every div element
for(i=0;i<cap.length;i++) // make some kina loop with the number of divs
{
var store=cap[i].ClassName;
if(store=='switchOn' && cap.[i].id);
{ /*look for div's that are on (switchOn) and check to see if they have and ID*/
var check = cap.[i].id //store their IDs
if(check!=vtiles){//check to see if the id is the one stored in Vtiles
store=='switchP'//change the classname to switchP(off)
}
}
}
}
Code: <div class="content"><a class="Atiles" href="#" onclick="controls(document.getElementById('Ankara'))">Ankara</a></div>
<div id="Ankara" class="switchP">
Code: .switchP{
position:absolute;
display:none;
z-index:-1;
left: 20px;
top:40px;
}
.switchOn{
position:absolute;
display:block;
z-index:100;
left: 20px;
top:40px;
width:200px;
height:200px;
}
hey I'm a bit confused, I really am looking for some javascript tutorials so I don't have to keep asking for help. Problem solved, thanks for looking.
I have 3 HTML form inputs fields that is dynamically generated by a "add more" button, with naming for the fields name as fieldName, fieldName1, fieldName2, fieldName3, and so on. Now, I'm trying to retrieve the value from this fields with JavaScript, using the script below. var bookingForm = document.forms['formName']; var qty = bookingForm.fieldName +'i'.value; with the 'i' been a generated numeric number by a for loop when I use alert(qty), it returns NaN, when I'm expecting the value for fieldName1, fieldName2, and so on. But when I use; var qty = bookingForm.fieldName.value I can get the value in that field but get NaN when I try to concatenate 1,2,3, with the fieldName. Any help will be very much appreciated. Hello! I have the following code that I just can't seem to get to work. Here are the issue that aren't working: 1. The items that are stored in the users account aren't showing up as selected when you enter the page. (They work in IE, not Chrome) 2. When you click the items, nothing happens. (It used to work and would add the item to the top image) If you need any more info, or more of the code, let me know. I removed most of the PHP to simplify it for revising, and I didn't include it's CSS. Code: <div id="avatar_form" width="95" height="141">
</div>
<div id="avatar_stack">
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> />
</p>
</div>
<BR><BR><BR>
<script type="text/javascript">
var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume')
var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff')
var inactive_tab_background_colour = '#fff'
var inactive_tab_bottom_border_colour = '#fff'
var stack_height = 1
var on_top = 0
var key = null
onload = layout
function layout()
{
if(!document.getElementById('avatar_section')) return
document.onkeydown = keyhit
tabs()
hide_radio_buttons(document.getElementById('avatar_stack'))
StackImageHolders('avatar_stack');
P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top]
P.style.backgroundColor = layer_colours[on_top]
P.style.zIndex = stack_height++
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<LIs.length; i++)
{
LIs[i].style.backgroundColor = inactive_tab_background_colour
LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
}
LIs[on_top].style.backgroundColor = layer_colours[on_top]
LIs[on_top].style.borderBottomColor = layer_colours[on_top]
LIs[on_top].focus()
IMGs = document.getElementById('avatar_stack').getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
IMGs[i].className = 'black_border'
IMGs[i].style.cursor = 'pointer'
IMGs[i].onclick=function(){ChangeGarment(this)}
}
avatar_preview_and_hotkey_text()
update_avatar(document.getElementById('avatar_stack').firstChild)
/* I added the following two lines because Internet Explorer
wasn't updating the display properly after loading */
document.getElementsByTagName('body')[0].style.width='95';
document.getElementsByTagName('body')[0].style.width='95';
}
function keyhit(e)
{
thisKey = e ? e.which : window.event.keyCode
alt_key_down = e ? e.altKey : window.event.altKey
ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey
shift_key_down = e ? e.shiftKey : window.event.shiftKey
switch (thisKey) {
case 37: key = 'LEFT'
break
case 39: key = 'RIGHT'
break
default: key = null
}
if(key && alt_key_down && ctrl_key_down)
{
IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
if(IMGs[i].className == 'red_border')
{
if((key == 'LEFT') && (i > 0))
{
i--
ChangeGarment(IMGs[i])
return
}
if((key == 'RIGHT') && (i < (IMGs.length - 1)))
{
i++
ChangeGarment(IMGs[i])
return
}
}
}
}
else if(key && alt_key_down && shift_key_down)
{
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
if((key == 'LEFT') && (on_top > 0))
{
on_top--
bring_to_the_top(LIs[on_top])
return
}
if((key == 'RIGHT') && (on_top < (LIs.length - 1)))
{
on_top++
bring_to_the_top(LIs[on_top])
return
}
}
}
function tabs()
{
list = document.createElement('ul')
for(i=0; i<avatar_layers.length; i++)
{
list_item = document.createElement('li')
list_item.appendChild(document.createTextNode(avatar_layers[i]))
list_item.onmouseover=function(){this.className='mouse'}
list_item.onmouseout=function(){this.className=''}
list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values
list_item.onclick=function(){
bring_to_the_top(this)
}
list_item.onfocus=function(){
bring_to_the_top(this)
}
list.appendChild(list_item)
}
document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack'))
}
function hide_radio_buttons(caller)
{
INPUTs = caller.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
INPUTs[i].style.display = 'none';
}
}
}
function StackImageHolders(caller)
{
Ps = document.getElementById(caller).getElementsByTagName('p')
for(i=0; i<Ps.length; i++)
{
Ps[i].className = 'stack'
}
}
function avatar_preview_and_hotkey_text()
{
for(i=0; i<avatar_layers.length; i++)
{
preview = document.createElement('img')
preview.id = avatar_layers[i]
preview.className = 'preview'
preview.width = '95px'
preview.height = '141px'
preview.alt = 'avatar preview image'
document.getElementById('avatar_stack').appendChild(preview)
}
hotkey_text = document.createElement(' ')
hotkey_text.className = 'hotkeys'
hotkey_text.appendChild(document.createTextNode(''))
document.getElementById('avatar_stack').appendChild(hotkey_text)
}
function update_avatar(caller)
{
INPUTs = caller.parentNode.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
if(INPUTs[i].checked)
{
document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif'
INPUTs[i].previousSibling.className = 'red_border'
}
else
{
INPUTs[i].previousSibling.className = 'black_border'
}
}
}
}
function ChangeGarment(caller)
{
inputs = caller.parentNode.getElementsByTagName('input')
for(i=0;i<inputs.length;i++)
{
inputs[i].checked=false
}
caller.nextSibling.checked=true
update_avatar(caller)
}
function bring_to_the_top(caller)
{
tabs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<tabs.length; i++)
{
tabs[i].style.backgroundColor = inactive_tab_background_colour
tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
}
on_top = caller.tab_number
caller.style.backgroundColor = layer_colours[caller.tab_number]
caller.style.borderBottomColor = layer_colours[caller.tab_number]
put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number]
put_on_top.style.zIndex = stack_height++
put_on_top.style.backgroundColor = layer_colours[caller.tab_number]
}
</script>
I am a very novice web coder and can't get this to work... I've tried everything and am getting no where but frustrated! Thanks in advance!! Code:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function calculateSavings()
{
var lastBill = eval(document.theForm.elements[0].value);
var frequencyRating = eval(document.theForm.elements[1].value);
var savingsRate = .05;
var annualSavings = 0;
/*
if (frequencyRating == 'every day)
{
savingsRate = .01;
}
else if (frequencyRating == 'weekly)
{
savingsRate = .05;
}
else if (frequencyRating == 'monthly')
{
savingsRate = .15;
}
else if (frequencyRating == 'yearly')
{
savingsRate = .2;
}
*/
annualSavings = lastBill * savingsRate;
document.write(annualSavings);
}
// End -->
</SCRIPT>
</head>
<body>
<form name="savingsCalcForm">
How much was your last bill?
<br><INPUT TYPE="text">
<br>
<br>
How often are you using your tractor?
<br><input type="radio" name="group1" value="every day"> every day<br>
<input type="radio" name="group1" value="weekly "> weekly<br>
<input type="radio" name="group1" value="monthly"> monthly<br>
<input type="radio" name="group1" value="yearly"> yearly<br>
<br>
<br>
<INPUT TYPE="button" VALUE="calculate savings" onClick="calculateSavings();">
</form>
</body>
</html>
|
|||||||