JavaScript - Super Easy Code Check Involving Changing Bg.color With Variable
I am very new to coding, trying to teach myself some javascript. I know this is a very simple code, I just can't seem to nail down what is going wrong. Feeling really stupid right now.
Heres the code: Code: <html> <head> <script language="JavaScript"> var choice=confirm("Press ok for black. Press cancel for red."); if (choice==true){ document.bgColor="yellow"; document.fgColor="black"; } else { document.bgColor="red"; document.fgColor="white"; } </script> <body> <p>words</p> </body> </html> If someone could take a second to set me straight, I would really appreciate it. btw: hope I posted all this according to the "rules". I tried Similar TutorialsHey guys, I have been trying to get better at my javascript as of late and there is this one particular color fading technique I have found that I am having trouble dissecting. The following code appears to be how they are making a rollover go from a dark gray to a subtle light gray with a nice fade but I can't exactly tell whats going on from the code. Is it just telling it to add a rgb point in so many seconds? Any professional help would be greatly appreciated. Code: colorInit= true}b.elem.style[a]="rgb("+Math.max(Math.min(parseInt(b.pos*(b.end[0]-b.start[0])+b.start[0],0),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[1]-b.start[1])+b.start[1],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[2]-b.start[2])+b.start[2],0),255),0)+")"}}); Hello, I can't seem, for the life of me to get this to work at all. I've tried everything out there and can't get it to work with IE 7: I would like to change the border color of my table row on hover. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> .test { border:1px solid #9CA4AA } .test:hover { border:1px solid #666666 } </style> </head> <body> <table width="536" style="border:1px solid #9CA4AA" cellspacing="0" cellpadding="1"> <tr class="test"> <td> </td> </tr> </table> </body> </html> I desperately need your help before I have no hair left. Thanks for all your help in advance, Cheers, J So my functions are dealing with Time. The function delay_time() is called by clicking a button in html and the return value of the function is displayed in a textbox. What I need to do is basically if the value of resultingtime is greater that the value of delay time I need the value shown in red(ff0000) and bold and if it isnt then I need it displayed in bold green(00ff00). but Ive tried doing this in my javascript and found that I cant code it in there the way that I know. I really dont know what to do... I think that I have to do it in the html coding but I dont know how. Here is the javascript I wrote: Code: function delay_time(idealTime, startTime, stopTime, delayTime) { var delay_time = idealTime.value; var bigger_time = stopTime.value; var smaller_time = startTime.value; var resultingtime = subtract_time(bigger_time, smaller_time, delay_time); //if (resultingtime > delay_time) { //resultingtime = resultingtime.fontcolor("ff2000"); //resultingtime = resultingtime.bold(); //} //else { //resultingtime = resultingtime.fontcolor("60ff00"); //resultingtime = resultingtime.bold(); //} delayTime.value = resultingtime; } function subtract_time(bigger_time, smaller_time, delay_time) { var bigger_value = convert_time_to_value(bigger_time); var smaller_value = convert_time_to_value(smaller_time); var idealTime = delay_time; var resultingtime = bigger_value - smaller_value; return resultingtime; } function convert_time_to_value(time_format) { var hh = time_format.substring(0, 2); var mm = time_format.substring(3, 5); var time_value = (eval(hh) * 60) + (eval(mm) * 1); return time_value; } and here is the html code for the button : Code: ID="Button15" type="button" value="Delay Time" onclick="delay_time(document.getElementById('TextBox102'), document.getElementById('TextBox104'), document.getElementById('TextBox105'), document.getElementById('TextBox106'))"/> here is the text box I have the value going into: Code: <asp:TextBox ID="TextBox106" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: medium" Width="0.75in" BorderStyle="Inset"></asp:TextBox> and here is the code from the box that I need to know if the value is bigger or smaller than: Code: <asp:TextBox ID="TextBox102" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: right;" Width="0.5in" BorderStyle="Inset"></asp:TextBox> please help. Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function. I think I am overthinking the process - as always! Any help pointing out my mistake(s) would be greatly appreciated. Code: function show_color() { var show_prompt = prompt("Please enter a color name"); var change_body = document.getElementById("body");; show_prompt = change_body; change_body = change(this.id); } function change(id) { switch (id) { case 'red': document.body.bgColor = "red"; break; case 'green': document.body.bgColor = "green"; break; case 'yellow': document.body.bgColor = "yellow"; break; case 'blue': document.body.bgColor = "blue"; break; case 'pink': document.body.bgColor = "pink"; break; } } I want to create a basic script where someone clicks the button and the document color is changing. while I can do it with inline even handlers and also using the script block in html document, i am not able to achieve the result using the external js.js. My goal is not to use any even handlers at all inside the html document. This is how my codes looks like: <head> <title> Basics Exercise</title> <script type="text/javascript" src="js.js"></script> </head> <body> <form> <p> Click this button and the document's color will change again </p> <input name="button" type="button" value="Change the background color of the document"/> </form> js.js has function changecolor() { document.bgColor='#ea0d17'; } document.forms[0].button.onClick=changecolor(); I don't want anyone to write a script for me, but I would appreciate if someone told me why the script I wrote is not working. hi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks Code: <iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe> I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour. My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to. I've only ever done a small amount of JS coding but from the research I've done it should go something like this, Code: document.style.alinkColor = "COLOR" I got to that via discovering that Code: document.style.backgroundColor = "COLOR" will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case. Anyone able to point me in the right direction? Hello I want to html text to show diffrent color, if date in list is in the past. shoud this even work ? am i hopeless? Code: <script type="text/javascript"> var day = d.getDay(); var event = this.document.getElementById('list'); if ('day' < 'event') { document.getElementById('list').style.color = '#DB35B0' } </script> <ul> <li id ="list">26/02/12 Some happening here</li> <li id ="list">27/02/12 Some happening here</li> <li id ="list">28/02/12 Some happening here</li> </ul> Help me anyone I am completely stuck. If you do this I shall build a shrine in your honour. In the following code the 'for' loop gets data from the relevant tags of an XML file, then puts them into the 'txt' variable. It then moves onto the next record in the XML file and does the same thing. However, I don't want the contents of txt to be overwritten each time the code loops through each record. Instead I want it to add to txt, then loop around and add the new contents of txt to the previous contents of txt. I tried txt = txt + artist + title + year; but this didn't work. Can anyone explain how to do this? Please note the contents of the variables are strings of text not numbers. Code: x=xmlDoc.getElementsByTagName("CD"); i=0; function displayCD() { for (var i=0;i<x.length;i++) { artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue); txt= "Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year; } document.getElementById("showCD").innerHTML=txt; } Is it possible to give an anchor tag an id and call it with GetElement? this is what I have tried: Code: <a id="link1" href="test.html">Part 1</a></li> Code: document.getElementById("link1").style.color = "blue"; This is my CSS: Code: A:link { color:#ffffff; font-size:14pt; font-weight:bold;} A:visited { color:#ffff00; font-size:14pt; font-weight:bold;} A:hover { color:#6698ff; font-size:14pt; font-weight:bold;} A:active { color:#c0c0c0; font-size:14pt; font-weight:bold;} Hi all, I currently have this javascript that will change the cell to green with one click... Code: <script type="text/javascript"> function ColorChange(obj){ obj.style.color='#FFFFFF'; obj.style.backgroundColor='#66CC33'; obj.parentNode.style.backgroundColor='#66CC33'; } </script> echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>"; the problem is that I need around 3 different colors to be possible.. e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange. I'm not sure how to take this javascript further? Would someone be kind enough to point me in the right direction? Many thanks, Greens85 OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue. Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked. Any help would be awesome!!!! Thanks!!!!!! Code: <html> <head><title>menu</title> <script type="text/javascript"> var element = null; function select(xx) { if ( element ) { element.style.backgroundColor='gray'; } element = xx; xx.style.backgroundColor='navy'; } </script> <style type="text/css"> a {text-decoration:none; color:white} a:visited {color:white} a:active {color:white} a:hover {color:white} table#lay_menu {width:100%; margin:0px} table#lay_menu td {text-align:center; width:20%} .menu {text-align:center; background-color:gray; } .start {text-align:center; background-color:navy; } </style> </head> <body> <table id="layout"> <tr> <td width="188"> <a href="#"> <div class="menu" onClick="select(this)">Artists</div> </a></td> </tr> <tr> <td><a href="#"> <div class="menu" onClick="select(this)">CPAs</div> </a></td> </tr> <tr> <td><a href="#"> <div class="menu" onClick="select(this)">Doctors</div> </a> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html> I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = []; var radiolist = []; var labelspans = []; var labels = []; var radios = []; var count; var spans = document.getElementsByTagName('span'); function getLabels() { for (x=0; x<spans.length; x++) { if (spans[x].className == "LabelWrapper") { labelspans.push(spans[x]); } } for (y=0; y<labelspans.length; y++) { labels.push(labelspans[y].firstChild); radioname.push(labelspans[y].firstChild.htmlFor); } } function getRadios() { //will put all radio groups into the "radiolist" array for (z=0; z<radioname.length; z++) { radiolist.push(document.getElementsByName(radioname[z])); //will add Event Listener to each radio button, and add each one to the "radios" array for (i=0; i<radiolist[z].length; i++) { chkradio = radiolist[z][i]; chkradio.setAttribute("count",Number(z)); chkradio.addEventListener("click", function(){changeLabel()}, false); radios.push(chkradio); } } } function changeLabel() //loops through all the radios to check if they are selected, and changes label color accordingly { for (w=0; w<radios.length; w++) { if (radios[w].checked) { a = radios[w].getAttribute("count"); labels[a].innerHTML = labels[a].innerHTML.fontcolor("green"); } } } getLabels(); getRadios(); This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? Any idea why this doesn't work? I'm trying to hide the li with ID of facebook1 if the innerHTML is one of two things. But if both return false and there is more code in there (e.g. a full url), I want to show the li with ID of facebook1 and also add the text 'Facebook Profile' to the span with ID of fbook-add. Code: <ul> <li id="facebook1"><a href="http://facebook.com"><span id="fbook-add"></span></a></li> </ul> <script type="text/javascript"> if(document.getElementById('facebook1').innerHTML.toLowerCase()=='<a href="http://"><span id="fbook-add"></span></a>') { document.getElementById('facebook1').style.display='none'; } else if(document.getElementById('facebook1').innerHTML.toLowerCase()=='<a href=""><span id="fbook-add"></span></a>') { document.getElementById('facebook1').style.display='none'; } else { document.getElementById('fbook-add').innerHTML=='Facebook Profile'; } </script> Hi I'm not a programmer if someone could help me fix this it would be great thanks. here is the code I found a while ago. Code: <!-- SUBMENU ROLLOVER SCRIPT --> <script type="text/javascript"> window.onload=function () { setStyles(); }; function setStyles() { ids = new Array ('contentMenu1','contentMenu2','contentMenu3','contentMenu4'); for (i=0;i<ids.length;i++) { document.getElementById(ids[i]).className='notactive'; document.getElementById(ids[i]).onclick=function() { return CngClass(this); } } } function CngClass(obj){ var currObj; for (i=0;i<ids.length;i++) { currObj = document.getElementById(ids[i]); if (obj.id == currObj.id) { currObj.className=(currObj.className=='notactive')?'active':'notactive'; } else { currObj.className='notactive'; } } //return false; } </script> <!-- END SUBMENU ROLLOVER SCRIPT --> and the html is here Code: <ul class="contentMenuContainer"> <li id="contentMenu1" class="notactive"><a href="javascript:ajaxpage('aj-wildlife.html', 'homeInfo');" onClick="setStyles('contentMenu1');" >wildlife</a></li> <li id="contentMenu2" class="notactive"><a href="javascript:ajaxpage('aj-solitude.html', 'homeInfo');" onClick="setStyles('contentMenu2');">solitude</a></li> <li id="contentMenu3" class="notactive"><a href="javascript:ajaxpage('aj-theboat.html', 'homeInfo');" onClick="setStyles('contentMenu3');">the boat</a></li> <li id="contentMenu4" class="notactive"><a href="javascript:ajaxpage('aj-hosts.html', 'homeInfo');" onClick="setStyles('contentMenu4');">your hosts</a></li> </ul> OK so all I need is to know how to set a list item to be class="active" by default. I tried setting it to "active" but the script must reset them all to "notactive". Sorry for being such a noob. Any help is greatly appreciated. thanks I need someone to make a small modification to this javascript code: <script type = "text/javascript"> function hyperlink() { var url = (location.href) url = url.replace(/\.(html)/i, "_2.html") window.location.href = url; } </script> Here is the situation: On this webpage: http://tehcake.com/video/30rock/2x14%20-%20Copyx.html where it says "Backup Links 1 2", if you click on the "1" in "Backup Links 1 2" it goes to this webpage, which is what it is supposed to do: http://tehcake.com/video/30rock/2x14%20-%20Copyx_2.html However, on this webpage, where it says "Backup Links 1 2", if you click on the "1" in "Backup Links 1 2" it leads to a non existing page by adding an extra "_2" to the end of the file name. Anyways, I need a way to modify this code (same one as above): <script type = "text/javascript"> function hyperlink() { var url = (location.href) url = url.replace(/\.(html)/i, "_2.html") window.location.href = url; } </script> This script subtracts ".html" and adds "_2.html" to the URL. Anyways, i need to change it so that if the filename has an _2.html in the file name, like in this URL: http://tehcake.com/video/30rock/2x14%20-%20Copyx_2.html the script would not add an extra _2 to the URL, instead it would just link to the same page. I dont know much about javascript so I need help to make this change. Hey guys, this should be a very easy fix for someone who knows Javascript (which I don't). The following code allows the class "ul.slideshow-nav li" to control the navigation of the slideshow, I want to adjust this script to allow "ul.slideshow-nav li" AND "ul.slideshow-nav2 li" to do this, possible? Code: $slideshow = { context: false, tabs: false, timeout: 8000, fx: 'scrollLeft', slideSpeed: 900, tabSpeed: 900, init: function() { this.context = $('#content-slideshow'); this.tabs = $('ul.slideshow-nav li', this.context); this.tabs.remove(); this.startSlideshow(); }, startSlideshow: function() { $('div.slideshow > ul', $slideshow.context).cycle({ fx: $slideshow.fx, pager: $('ul.slideshow-nav', $slideshow.context), pagerAnchorBuilder: $slideshow.startTabs, befo $slideshow.Tabactive, timeout: $slideshow.timeout, speed: $slideshow.slideSpeed, fastOnEvent: $slideshow.tabSpeed, pauseOnPagerHover: true, pause: true }); }, startTabs: function(i, slide) { return $slideshow.tabs.eq(i); }, Tabactive: function(currentSlide, nextSlide) { var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context); if(activeTab.length) { $slideshow.tabs.removeClass('on'); activeTab.parent().addClass('on'); } } }; $(function() { $slideshow.init(); }); I'm doing a school project and I am using JPlayer as a media player. The site is essentially a music jukebox with a search. I have the playlist set up in the jukebox with 5 songs from the start, but I need to make it so that when you do a search and click the plus sign button next to a song, it will change one of the songs in the playlist to that song. I have the search and everything working but when I click the button it does not actually change the variable in the javascript. Any help or insight to this would be much appreciated. Below is the javascript (with some PHP, but that shouldn't effect what I need). Thanks in advance!! Code: <link rel="stylesheet" href="stylesheets/style.css" type="text/css" /> <!-- CSS files required for JPlayer --> <link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" /> <link rel="stylesheet" href="skin/jplayeraudio.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jplayer.min.js"></script> <script type="text/javascript"> <!-- var nextSet = 1; <?php $songsInDB = 70; $rand1 = rand(1, $songsInDB); $rand2 = rand(1, $songsInDB); while($rand2 == $rand1) { $rand2 = rand(1, $songsInDB); } $rand3 = rand(1, $songsInDB); while($rand3 == $rand2 || $rand3 == $rand1) { $rand3 = rand(1, $songsInDB); } $rand4 = rand(1, $songsInDB); while($rand4 == $rand3 || $rand4 == $rand2 || $rand4 == $rand1) { $rand4 = rand(1, $songsInDB); } $rand5 = rand(1, $songsInDB); while($rand5 == $rand4 || $rand5 == $rand3 || $rand5 == $rand2 || $rand5 == $rand1) { $rand5 = rand(1, $songsInDB); } ?> var var1 = <?php echo $rand1; ?>; var var1artist = '<?php echo $database->getSongArtist($rand1); ?>'; var var1title = '<?php echo $database->getSongTitle($rand1); ?>'; var var2 = <?php echo $rand2; ?>; var var2artist = '<?php echo $database->getSongArtist($rand2); ?>'; var var2title = '<?php echo $database->getSongTitle($rand2); ?>'; var var3 = <?php echo $rand3; ?>; var var3artist = '<?php echo $database->getSongArtist($rand3); ?>'; var var3title = '<?php echo $database->getSongTitle($rand3); ?>'; var var4 = <?php echo $rand4; ?>; var var4artist = '<?php echo $database->getSongArtist($rand4); ?>'; var var4title = '<?php echo $database->getSongTitle($rand4); ?>'; var var5 = <?php echo $rand5; ?>; var var5artist = '<?php echo $database->getSongArtist($rand5); ?>'; var var5title = '<?php echo $database->getSongTitle($rand5); ?>'; var playItem = 0; $(document).ready(function(){ var myPlayList = [ {name:var1artist+" - "+var1title, mp3:"music/"+var1+".mp3"}, {name:var2artist+" - "+var2title, mp3:"music/"+var2+".mp3"}, {name:var3artist+" - "+var3title, mp3:"music/"+var3+".mp3"}, {name:var4artist+" - "+var4title, mp3:"music/"+var4+".mp3"}, {name:var5artist+" - "+var5title, mp3:"music/"+var5+".mp3"}, ]; // Local copy of jQuery selectors, for performance. var jpPlayTime = $("#jplayer_play_time"); var jpTotalTime = $("#jplayer_total_time"); $("#jquery_jplayer").jPlayer({ ready: function() { displayPlayList(); playListInit(false); // Parameter is a boolean for autoplay. }, ended: function() { playListNext(); }, swfPath:"/js", nativeSupport: true, supplied: "mp3" }); $("#jplayer_previous").click( function() { playListPrev(); $(this).blur(); return false; }); $("#jplayer_next").click( function() { playListNext(); $(this).blur(); return false; }); function displayPlayList() { $("#jplayer_playlist ul").empty(); for (i=0; i < myPlayList.length; i++) { var listItem = (i == myPlayList.length-1) ? "<li class='jplayer_playlist_item_last'>" : "<li>"; listItem += "<a href='#' id='jplayer_playlist_item_"+i+"' tabindex='1'>"+ myPlayList[i].name +"</a></li>"; $("#jplayer_playlist ul").append(listItem); $("#jplayer_playlist_item_"+i).data( "index", i ).click( function() { var index = $(this).data("index"); if (playItem != index) { playListChange( index ); } else { $("#jquery_jplayer").jPlayer("play"); } $(this).blur(); return false; }); } } function playListInit(autoplay) { if(autoplay) { playListChange( playItem ); } else { playListConfig( playItem ); } } function playListConfig( index ) { $("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current"); $("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current"); playItem = index; $("#jquery_jplayer").jPlayer("setMedia", myPlayList[playItem]); } function playListChange( index ) { playListConfig( index ); $("#jquery_jplayer").jPlayer("play"); } function playListNext() { var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0; playListChange( index ); } function playListPrev() { var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1; playListChange( index ); } }); function loadSong(songID, artist, title) { if(nextSet == 1){ var1 = songID; var1artist = artist; var1title = title; nextSet++; } else if(nextSet == 2){ var2 = songID; var2artist = artist; var2title = title; nextSet++; } else if(nextSet == 3){ var3 = songID; var3artist = artist; var3title = title; nextSet++; } else if(nextSet == 4){ var4 = songID; var4artist = artist; var4title = title; nextSet++; } else if(nextSet == 5){ var5 = songID; var5artist = artist; var5title = title; nextSet++; } if(nextSet > 5){ nextSet = 1; } alert("Song has been queued! "+nextSet) } var i = 1; $(document).ready(function(){ $(".search").click(function(){ $.post("livequery.php", { keywords: $(".keywords").val(), mode: $(".mode").val() }, function(data){ $("table#content").empty() $.each(data, function(){ var _class = "search_content1"; if(i % 2 == 0) { _class = "search_content2"; } $("table#content").append("<tr class='"+_class+"'><td class='trunc_table' width='4%'><input type='button' value='+' onClick=\"loadSong('"+this.id+"', '"+this.artist+"', '"+this.title+"')\" /></td><td class='trunc_table' width='27%'>" + this.title + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='22%'>" + this.artist + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='16%'>" + this.album + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='14%'>" + this.genre + "</td><td class='trunc_table' width='1%'> </td><td class='trunc_table' width='13%'>" + this.mood + "</td></tr>"); i++; }); }, "json"); }); }); --> </script> Also, the code for the playlist is in the myPlayList array, which I'm referencing the title, artist, and filename with the javascript values. I'm trying to change them in the function loadSong(songID, artist, title). I get the alert popup that I have in there, but no values change as far as the songs. Dear all, The code below puts a link in mydiv when the page loads if myvar equals 1. Great till here, but if myvar changes its value and it does not equal 1 any more I have to reload the page in order not to see the link. What do I have to do to avoid that reload? what do I have to do to check myvar's value for changes constantly? Thanks in advance! Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script> var myvar=1; function func1() { if (myvar==1){ var putit=""; putit +="<a href='#'>Put this link</a>"; $("#mydiv").html(putit); } } function addLoadEvent(func) { $(window).load(func); } addLoadEvent(func1); </script> </head> <body> <div id="mydiv"></div> I need someone who can help me create javascript code which will create a hyperlink string with a changing variable: This script should write and execute a hyperlink string which opens a separate pop-up window, nothing more. No image files, no subfolders, forget all that stuff. JUST A HYPERLINK. The hyperlink SYNTAX does all the work in loading and selecting the images, NOT THE SCRIPT. There is only one changing variable, the value following clipart_id= Here is the basic hyperlink syntax: <a href="http://www.websitename.com/clipart/manipulate? clipart_id= 00000 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a> THERE ARE ALWAYS 2 WINDOWS: ONE WINDOW HOLDS THE HTML; THE OTHER IS A POP-UP WINDOW (The opened hyperlink) The basic html page will contain only 2 objects, an input box and a NEXT BUTTON. Step 1: Initialize the variable from an input box, this variable is used to set the value following clipart_id= which is part of the hyperlink syntax Step 2: The user inputs the initial variable which is used to write the first hyperlink string; click NEXT to launch the first pop-up window Step 3: For each subsequent action Click NEXT - OnClick - This ADDS +1 to the initial variable, this variable is passed to be inserted in a new hyperlink string AND then launches a NEW hyperlink to open a NEW popup window. This is an infinite type of action which advances the value of clipart_id= every time the NEXT button is clicked. Each time you click the NEXT button it advances a counter which executes a NEW hyperlink in a NEW popup window. The only thing that ever changes is the variable after clipart_id=, BUT the entire url syntax of the hyperlink string must be maintained exactly as shown below. If you change the syntax it will not work. So, if the first value to start with is lets say 13000 ; this is input in a box; then the first hyperlink string will automatically be written and open using this: <a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13000 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a> Click the NEXT BUTTON and now a new hyperlink window will open which reads like this: <a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13001 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a> click the NEXT BUTTON and now a new hyperlink hyperlink window will open reads like this: <a href="http://www.websitename.com/clipart/manipulate?clipart_id= 13002 &path=%2Fclipart%2Feps%2F&lockRatio=true&width=500&height=500"></a> And so on and so on... Nothing else changes. So the "nextpath" after a CLICK is a complete new hyperlink string which contains a vew variable for the value following clipart_id= All I am trying to do is execute a standardized hyperlink string with one changing variable. CAN ANYONE HELP ME TO WRITE THIS CODE? |