JavaScript - Cycle Div Contents
Hey all,
Hopefully I can explain this so it makes sense. I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it. Thanks for any help! Similar TutorialsHi I have a built this Jquery code: http://blog.mehdi.biz/2010/02/vertic...ry-lovers.html I want the buttons to auto cycle insted of hovering can anyone help please? We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated. Code: <style type="text/css"> .al {display:none} .ca {display:none} .ct {display:none} .ga {display:none} .il {display:none} .la {display:none} .ma {display:none} .mi {display:none} .mn {display:none} .mo {display:none} .ms {display:none} .nc {display:none} .ne {display:none} .nh {display:none} .nv {display:none} .ny {display:none} .or {display:none} .sc {display:none} .tn {display:none} .tx {display:none} .va {display:none} .vt {display:none} .wa {display:none} .wi {display:none} </style> <script type="text/javascript"> function showHide(cls, show) { for (var i=0; i<document.styleSheets.length; i++) { // browser-compatibility var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].cssRules; for (var j = 0; j < rule.length; j++) { if (rule[j].selectorText == "." + cls) { //find css selector rule[j].style.display = (show) ? 'block' : 'none'; } } } } function selAction(sel) { for (var i = 0; i < sel.options.length; i++) { showHide(sel.options[i].value, i == sel.selectedIndex); } } </script> </head> <body> <table> <tr> <td colspan="3"> <select name="type" onchange="selAction(this);"> <strong><option value="et"> Please Select Your State: </option> <option value="al">Alabama</option> <option value="ca">California</option> <option value="ct">Connecticut</option> <option value="ga">Georgia</option> <option value="il">Illinois</option> <option value="la">Louisiana</option> <option value="ma">Massachusetts</option> <option value="mi">Michigan</option> <option value="mn">Minnesota</option> <option value="mo">Missouri</option> <option value="ms">Mississippi</option> <option value="nc">North Carolina</option> <option value="ne">Nebraska</option> <option value="nh">New Hampshire</option> <option value="nv">Nevada</option> <option value="ny">New York</option> <option value="or">Oregon</option> <option value="sc">South Carolina</option> <option value="tn">Tennessee</option> <option value="tx">Texas</option> <option value="va">Virginia</option> <option value="vt">Vermont</option> <option value="wa">Washington</option> <option value="wi">Wisconsin</option></strong> </select> </td> </tr> <tr class="al"> <td> No issues in your state at this time.</td> </tr> <tr class="ca"> <td> No issues in your state at this time. </td> </tr> <tr class="ct"> <td> No issues in your state at this time. </td> </tr> <tr class="ga"> <td> No issues in your state at this time. </td> </tr> <tr class="il"> <td> No issues in your state at this time. </td> </tr> <tr class="la"> <td> No issues in your state at this time. </td> </tr> <tr class="ma"> <td> No issues in your state at this time. </td> </tr> <tr class="mi"> <td> No issues in your state at this time. </td> </tr> <tr class="mn"> <td> No issues in your state at this time. </td> </tr> <tr class="mo"> <td> No issues in your state at this time. </td> </tr> <tr class="ms"> <td> No issues in your state at this time. </td> </tr> <tr class="nc"> <td> No issues in your state at this time. </td> </tr> <tr class="ne"> <td> No issues in your state at this time. </td> </tr> <tr class="nh"> <td> No issues in your state at this time. </td> </tr> <tr class="nv"> <td> No issues in your state at this time. </td> </tr> <tr class="ny"> <td> No issues in your state at this time. </td> </tr> <tr class="or"> <td> No issues in your state at this time. </td> </tr> <tr class="sc"> <td> No issues in your state at this time. </td> </tr> <tr class="tn"> <td> No issues in your state at this time. </td> </tr> <tr class="tx"> <td> No issues in your state at this time. </td> </tr> <tr class="va"> <td> No issues in your state at this time. </td> </tr> <tr class="vt"> <td> No issues in your state at this time. </td> </tr> <tr class="wa"> <td> No issues in your state at this time. </td> </tr> <tr class="wi"> <td> No issues in your state at this time. </td> </tr> </table> </center></td> </tr> </table> </body> </html> Hi, Does anyone know how to make the cycle function in jquery unobtrusive? I've got the following code and when I disable javascript, I get a nasty long list of images Jquery code: $(document).ready(function() { $('.homepage-slideshow').cycle({ fx: 'fade', befo onAfter, pause: 1, timeout: 0, pager: '#nav' }); }); function onAfter() { var cycle_href = this.href; var brokenstring = this.title.split(" :: "); var cycle_title = brokenstring[0]; var cycle_descr = brokenstring[1]; $('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>'); $('#output-descr').html(cycle_descr); } Html code: <div class="homepage-slideshow"> <a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a> <a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a> </div> <div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div> <div class="homepage-metadata"> <p id="output-descr"></p> <h3 id="output"></h3> </div> Hello! I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! Hello all I have a problem implementing too JQuery tools; Cycle and Fullsize (together). I have uploaded an example over at: http://lawrencebrown.eu/jquery/index.html The problem is that only the first image pics up the Full size script, I have bene told by a friend to add the following into code into the cycle script: Code: after: function () { *$("div.album img").fullsize(); } I have tried putting this in different places from lines 19 to 43 on index.html with no winning results yet. Any help you can offer to the mark up between lines 19 to 43 would be great. I appreciate that their are plenty of other lightbox solutions that can solve this problem - I have even had a few up and running, however this is a specific request on this job to use Fullsize. Full size docs: http://www.addfullsize.com/ Cycle docs: http://malsup.com/jquery/cycle/ Thanks for you time Lawrence Hi, I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located: Code: // create array of images var CyclingImages = new Array("header/images/tankimage1.gif", "header/images/tankimage2.gif", "header/images/tankimage3.gif", "header/images/tankimage4.gif") Here is the code in the master page which finds the javascript: Code: <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script> Here is the function call in the masterpage to fade and cycle the images: Code: <body onload="FadeAndCycleImages()"> Here is the code in the masterpage which references the cycling images: Code: <span class="fadingimages"> <img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" /> </span> Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated. Thank you, petela Hello everybody, I'll quit new as it comes to programming, so please forgive this nono on forehand. I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout. Thanks for your help. Code: <html> <head> <script language='javascript'> function blink(elementid){ colorarray = Array( '#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3', '#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786', '#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122', '#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f', '#9c1c0f'); i=0; setInterval ("changecolor('"+elementid+"')",200); } function changecolor(x) { var x= document.getElementById(x); if (x != null){ x.style.color = colorarray[i]; if (i==24){ i= 0; colorarray = colorarray.reverse(); } } i++; } var text=new Array(); text[0] = "text 1"; text[1] = "text 2"; text[2] = "text 3"; </script> </head> <body bgcolor="#ECFFEC"> <script language="javascript">blink('fade');</script> // INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY <div id="fade">TEXT</div> </body> </html> I currently am using the jQuery UI DatePicker for my page. For each date that has an "event" listed for that day, the date is highlighted. The other part of my page on the bottom has a "previous" and "next" button. This is basic record selection/navigation pretty much, but I am new to Javascript. Is there an easy way to navigate through these? Any help would be majorly appreciated. Thanks I want to loop through a form containing various fields and replace them with values I have in a JS object. E.g. (1) <form id="theform"> <input type="text" name="field_1" value="" /> <input type="checkbox" name="field_2" value="" /> </form (2) object.field_1 = "Dave"; object.field_2 = ""; // empty as not checked, else holds value of checked one -- The problem is: what about checkboxes and <select> drop downs, and radios?? Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this? Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript"> // JavaScript Document var imagenumber = 4 ; var randomnumber = Math.random() ; var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ; images = new Array images[1] = "images/newtopbar.jpg" images[2] = "images/newtopbar2.jpg" images[3] = "images/newtopbar3.jpg" images[4] = "images/newtopbar4.jpg" var image = images[rand1] function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 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 && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> I'm working on stripping specific HTML tags in order to do a selected string comparison. Stripping the tag, done. Re-calibrating the selection start and end points, done. Capturing the tags for re-insertion, done. Getting the start point of the tag, done. What I am having trouble with is finding the content between the tag so that I can put it back after altering the selected text. <span class="something">find this content!</span> Any ideas are more than welcome! Thanks, Hi I need to produce some code to get the contents of the particular TD I am running a function in. I have the following code which works fine up the point of wanting to delete a row. In order to make it work again I have to go into the code and adjust all the numbers in the functions (not sure that's the correct terminology) Code: <head> <script language='javascript'> exchRate = '1.12'; function gettheUKP(which) { // This is the line I think I need to change var x = document.getElementsByTagName("span")[which].innerHTML; var s = Math.round(x / exchRate); document.write('(£' + s + ')') } </script> </head> <body> <table cellspacing="0" cellpadding="0" class="charges"> <tr> <td><strong><span>368</span>€</strong> <script type="text/javascript">gettheUKP(0);</script></td> </tr> <tr> <td><strong><span>471</span>€</strong> <script type="text/javascript">gettheUKP(1);</script></td> </tr> <tr> <td><strong><span>598</span>€</strong> <script type="text/javascript">gettheUKP(2);</script></td> </tr> <tr> <td><strong><span>720</span>€</strong> <script type="text/javascript">gettheUKP(3);</script></td> </tr> <tr> <td><strong><span>998</span>€</strong> <script type="text/javascript">gettheUKP(4);</script></td> </tr> </table> </body> So in essence I think I need to change the highlighted line to say "get the contents on the span within this TD". Is this possible? Thanks Hi all! First post here (obviously)... I seem to have an issue with getting javascript to recognize the value of a variable. Code: for(var m=1; m<=86; m++) { var currgroup = "group" + m; alert(currgroup); if(currgroup.Contains(point)) { var userNG = m; var foundNG = true } else { var foundNG = false; } } If you see where I alert the value of currgroup, it displays "Group1" as it should... so the next line should be Group1.Contains(point); but it errors out as "currgroup.Contains(point) is not a function". If however I hard code it with Group1.Contains(point) it works fine. Is there a way to tell JS explicitly that I want it to use the variable contents instead of the name that I'm missing? Thanks a bunch for any and all help, Matt Hi, How I build a table based on a list under a <DIV></DIV> like this? printing: 1 and: 3 typesetting: 2 industry: 2 has: 2 been: 1 s: 1 standard: 1 ever: 1 since: 1 1500s: 1 when: 1 an: 1 unknown: 1 printer: 1 took: 1 a: 2 galley: 1 type: 3 scrambled: 1 Regards Bob Hey. I have been pulling out my hair trying to do this. I am printing out the contents of a DIV tag but it does not print the css with it. Just the basic text For example: .testDiv { border: 1px solid #0F0; margin-right: 300px; text-decoration: underline; font-weight: bold; } The print does not change the text according to the css. Why is this? Thanks in advance for any help. Marc Hi.. Im currently working on my project and I have a big problem with changing the layout of tabs. Basically, when I launch my GUI, it will display "No Data Available" in my view tab. In my Add tab, I have the admin panel whereby the user enters the data to be stored and display. the problem now lies when displaying. It is a juke ringtone gallery whereby when there are data being stored in the database, it will display the following in a Gridlayout; I applied the ChangeListener to the JTabbedPane which is tp. I added tabs using tp.add. I declared this in my ChangeListener: if(tp.getSelectedIndex() == 0) createViewPanel(); else if(tp.getSelectedIndex()==1) createAddPanel(); where createViewPanel() is for the View tab and createAddPanel() is for the Add tab. i also called the respective tabs using frameView = (JPanel)tp.getComponent(0); to get the layout for View tab and frameAdd = (JPanel)tp.getComponent(1); to get the layout for the Add tab. What methods need I use so that I can display the different data in the specific GridLayout to be displayed in the View tab or what other ways can I do it? I need to make a javascript that when I am at a page within a game I play and click the javascript, it will get the value of a table cell, separate them to x and y variables and then put the values into a link that opens. The open link is of a php script that uses $_GET for the values of the variables to query my database. I am terrible at javascript and have been trying to do this for 2 days now with no success. So I hope I can find help here. Here's the scripts so it is easier to understand: This is part of the html page that is from the game. I need to have the javascript get 432|608 and assign x=432 and y=608 in this case, although those number change, the place in the table that that they are displayed do not change. <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> <html> <head> <title></title> <meta http-equiv="Content-Language" content="de"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Page-Enter" content="revealTrans(Duration=0.1,Transition=4)"> <link rel="stylesheet" type="text/css" href="kingsage.css"> <link rel="shortcut icon" href="favicon.ico" type="image/ico"> <script src="js/kingsage.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-core-nc.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/mootools-1.2-more.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> <script src="js/map_src.js?hash=1e4c479f8ba66202f3b1bfb74414eef4" type="text/javascript"></script> </head> <body> <script type="text/javascript"> //<![CDATA[ lang = new Array(); lang['DAY'] = 'Day'; lang['DAYS'] = 'Days'; //]]> </script> <div style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" align="center"> <table style="border-collapse: collapse; height: 100%;" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr valign="top"> <td width="50%" align="right"> <br> </td> <td style="width: 840px;"> <table style="border-collapse: collapse; width: 840px; height: 100%;" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="lay_content" valign="top"><a name="head2"></a> <div class="contentpane"> <table class="borderlist" style="width: 420px;"> <tbody> <tr> <th colspan="2">Abandoned settlement</th> </tr> <tr> <td>Coordinates:</td> <td><a href="game.php?village=19392&s=map&x=432&y=608">432|608</a></td> </tr> <tr> <td>Points:</td> <td>390</td> </tr> <tr> <td>Player:</td> <td><br> </td> </tr> <tr> <td>Alliance:</td> <td><a href="game.php?village=19392&s=info_ally&id="></a><br> </td> </tr> </tbody> </table> <br> </div> </td> </tr> </tbody> </table> </td> <td width="50%" align="left"> <br> </td> </tr> </tbody> </table> </div> <div id="settlement" style="display: none;"></div> <script type="text/javascript"> //<![CDATA[ startCounter(); //]]> </script> </body> </html> Here's the php script that will process the x and y Code: <?php putenv("TZ=Europe/Berlin"); session_start(); include("includes/config.php"); $username = $_GET['username']; $pass = $_GET['pass']; $x = $_GET['x']; $y = $_GET['y']; $now = time(); //confirm user can make claim global $conn; $q = "SELECT password FROM users WHERE username = '$username' AND active = 1"; $result = mysql_query($q,$conn); if(!$result || (mysql_numrows($result) < 1)) { $data = "Your identity can not be authenticated"; } else { $dbarray = mysql_fetch_array($result); if($pass == $dbarray['password']) { $continue = true; } else { $data = "Your password can not be authenticated"; } } //if can claim then check the village if($continue) { $q = "SELECT * FROM `claims` WHERE x = '$x' AND y = '$y' AND state = 1"; $village = mysql_query($q, $conn); $result = mysql_fetch_assoc($village); if(!$result) { $can_claim = true; } elseif($result) { if($result['username'] == $username) { $data = "You already have an active claim on ($x|$y)"; } elseif($result['username'] <> $username) { $claimer = $result['username']; $data = "$claimer already has an active claim on ($x|$y)"; } } if($can_claim == true) { global $conn; $claim_made = time(); $claim_expires = $claim_made + 432000; $state = 1; $q = "INSERT INTO `claims` (x, y, username, claim_made, claim_expires, state) VALUES ('$x', '$y', '$username', '$claim_made', '$claim_expires', '$state')"; $add_claim = mysql_query($q, $conn); if($add_claim) { $data = "Success! You claimed ($x|$y)"; } else { $data = "Error: Your claim on ($x|$y) did not complete."; } } echo "<SCRIPT>alert(\"$data\");</SCRIPT>"; } ?> The javascript should link to this php script and send the variables like this: 'http://twv-kingsage.tw-family.us/auto_add_claim.php?username=username&pass=md5_password&x="+x+"&y="+y' Can someone tell me how to extract the values for x and y from the page and get them to the link? Thanks for the help, it is much appreciated. Right. I'm trying to create a little game (If you can call it that) where every time the user hovers over a <div> which contains a button, said <div> moves to a random point on the page. I've tried a way of moving the item and Googled extensively but have not yet come up with a way of doing it. This is my current code: Code: if(document.getElementById) { var carrier = document.getElementById(btnarea); carrier.style.top = randomHeight + "px"; } if(document.getElementById) { var carrier = document.getElementById(btnarea); carrier.style.left = randomWidth + "px"; } Which does not work. I hover over the <div> and the button, yet nothing happens. I can click the button, which seems to be the only thing working right now. I have a feeling the issue could be with another part of the code, but I wanted to see what you people thought first. Any ideas? You can see it working (Or not) at http://zeroerror.co.uk/public/clickme.php. Thanks in advance. Hi guys I was wondering if its possible to add contents within a div to a javascript array. Something like this: Code: <script type="text/javascript"> function returnArray() { var divContent = document.getElementById('images'); var matchImage = divContent.match(/<img/); /* add images into array somehow */ alert('This is ' +ImageArray[1]); } </script> <div id="images"> <img src="image1.jpg" alt="image" /> <img src="image2.jpg" alt="image" /> <img src="image3.jpg" alt="image" /> </div> Thanks for any info. Hi friends, I am very well aware that ctrl-a and ctrl-c will not copy images (only the text) in ms-word/openoffice writer. so, the better option is to convert the doc into html and place the contents of the html in Tinymce editor. (This is what i want to accomplish). I know this thing can be done in javascript but i dont know how. Please tell me or any guidance to copy the contents of word(text and images at one go) into a tinymce editor. Any help would be highly appreciated. Thanks, aras |