JavaScript - Links Extend Past Text And Toggle Description Without Photo
Hello,
I have a bit of javascript that is supposed to change picture and its accompanying text when you hover over a bit of link text in another area of the page. This is working, however, the text is toggling without the picture due to an invisible area next to each link. I am not sure if it's an issue with applying my javascript to another bit of code or what. Here is the code that I have that flips the text: Code: <script type="text/javascript"> function tabOver(which) { for ( var d = 1; d <= 31; ++d ) { document.getElementById("TAB"+d).style.display = ( d == which ) ? "block" : "none"; } } </script> and here is the bit that flips the pics: Code: <script> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("photos/aes1.jpg","photos/aes2.jpg","photos/aes3.jpg","photos/aes4.jpg","photos/aes5.jpg") </script> And here is the html where they show up: Code: <div id="mainimg-staff"><a href="javascript:warp()"><img src="img/select-aes.gif" name="targetimage" border=0></a> <div id="TABHOLDER"> <div id="TAB1" class="tabbed" style="display: block;"> </div> <div id="TAB2" class="tabbed"> <h1>Cheryl Lyon</h1> <ul> <li> Basic facials and skin treatments <li> Waxing <li> Specializing in naturopathic facial treatments </ul> </div> <div id="TAB3" class="tabbed"> <h1>Jackie T.</h1> <ul> <li> 10+ years experience <li> Facials and skin treatments <li> Waxing <li> Specializing in <em>Extreme</em> eyelash extensions </ul> </div> (there are a lot more text bits but I only included 2 to keep this short) Finally, here is the link that is making all this wonderful stuff happen: Code: <div style="left: 100px;" onmouseover="tabOver(2);"><a href="staff-aes.shtml" onMouseover="changeimage(myimages[0],this.href)">Cheryl Lyon</a></div> Do you see how I combined the pic and text in one code? I promise you that it is on accident that this is working at all. Could this be a style issue and not a javascript issue? I can't find anything in my css that will fix this. Similar TutorialsHi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated. Here is the code I have: Code: <html> <head> <style media="screen,projection" type="text/css"> /* begin gallery styling */ #jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; } #jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { width: 80px; height: 60px; } #jgal li.active img { display: block; float: left; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <script type="text/javascript"> document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init: function () { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); enlargedImg = document.createElement('img'); document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling); enlargedImg.src = li[0].getElementsByTagName('img')[0].src; li[0].className = 'active'; for (i = 0; i < li.length; i++) { li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i], 'mouseover', function () { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j = 0; j < im.length; j++) { im[j].className = ''; } this.className = 'active'; enlargedImg.src = this.getElementsByTagName('img')[0].src; }); } }, addEvent: function (obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e" + type + fn] = fn; obj[type + fn] = function () { obj["e" + type + fn](window.event); } obj.attachEvent("on" + type, obj[type + fn]); } } } gal.addEvent(window, 'load', function () { gal.init(); }); </script> </head> <body> <ul id="gallery"> <li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li> <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li> <li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li> <li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li> <li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li> <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li> <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li> </ul> </body> </html> Again, any help is greatly appreciated. Thanks, Ben. I've got this little chunk of code running on my freelance portfolio site - on each page (different sections of my portfolio) I have 6 thumbnails and a full sized graphic with some descriptive info, you click the thumbnail and it switches the graphic and other info, that all works fine. But on one page I have some web stuff and I'd like to make the var 'clientinfo' into a link to go to the client's website. I know I need to add an array with the website links, but then I'm not sure how to implement it into the html, I've tried various things I've found on here but I'm not getting anywhere on my own. I know it's something pretty simple (for someone who knows what they're doing) but I just can't seem to grasp it. Can anyone help? the js is like this: $(function() { $(".image").click(function() { var image = $(this).attr("rel"); var title = $(this).attr("title"); var description = $(this).attr("content"); var clientinfo = $(this).attr("clientinfo"); $('#gallery').hide(); $('#gallery').fadeIn('slow'); $('#image').html('<img src="' + image + '"/>'); $('#title').html(title); $('#description').html(description); $('#client').html(clientinfo); return false; }); and then the HTML anchors are like this: <a href="#" rel="images/gallery/web/site1.png" title="Site One" content="This is the descriptive info for site number one" clientinfo="Site One link" class="image"><img src="images/gallery/web/t_site1thumb.png" class="thumb" border="0"/></a> Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again. Code: <script type="text/javascript"> $(document).ready(function(){ $('.accordion-content').hide(); //toggle the componenet with class accordion $('.accordion-toggle').click(function(){ //$(this).toggleClass('toggle-accordion-active'); $(this).next('.accordion-content').slideToggle(300); }); $('#accordion-expand-all').click(function(){ $('.accordion-content').slideToggle(300); }); }); </script> Code: <p><a id="accordion-expand-all" href="#">Show</a></p> I wanted to toggle text by using a JavaScript. I used the following script: Code: function toggle_visibility(id) { var e = document.getElementById(id); e.style.display = ((e.style.display!='none') ? 'none' : 'block'); } and Code: <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div> for every element I wanted to hide by clicking the text. It works fine, but the content of the div is already displayed when loading the page itself. I want it to be hidden first, and only visible when you blick the text. Is this possible? Hi, I have a textual "link" that, when clicked, I want the text to change, and I want a number of checkboxes to be toggled on or off. Here's my code. Currently, I just have the text changing - I don't know how to simultaneously check/uncheck checkboxes. Code: <head> <script language="JavaScript" type="text/JavaScript"> <!-- toggle off and on, currently unused --> function checkAll(checkname, exby) { for (i = 0; i < checkname.length; i++) checkname[i].checked = exby.checked? true:false } <!-- changes text on click, currently used --> function exp(obj) { if(obj.oldText) { obj.innerHTML = obj.oldText; obj.oldText = null; } else { obj.oldText = obj.innerHTML; obj.innerHTML = 'Check All'; } } </script> </head> <body> <div id="checkboxes"> <table bgcolor="#DCDCDC" cellpadding="10"> <tr><th colspan="11" align="left"> <a href="#" onclick="javascript:exp(this);">Clear All</a><br/> </th></tr> <tr align="center"> <td>Check1 <br><input type="checkbox" name="checkGroup" value="chk-1" checked="yes" /></td> <td>Check2 <br><input type="checkbox" name="checkGroup" value="chk-2" checked="yes" /></td> <td>Check3 <br><input type="checkbox" name="checkGroup" value="chk-3" checked="yes" /></td> </tr> </table> </div> </body> Thanks for reading! Kevin Hi all, Edit: Got it. I saved that source page and investigated closely and I realized that there's "Cookie plugin" script, which is not mentioned to add(?), in that tutorial I've been trying to implement the method given at http://dev.akabillposters.com/dom-js...-links-jquery/, but can't make it work. Nothing happens when I click the check box. I'm not a jquery expert, though tried some alerts statements to trace the issue, with no luck. Can anyone see what I'm missing? [link removed] Any help would be appreciated. Thanks. Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! I tried posting the code but it's too long... Page address: http://professorcuddlecore.com/paintings/ Problem: Click first or second photo, pops up fine, bottom text is behind the photo. You can view the JS by viewing source etc, sorry I can't fit it here. I spent 2-3 hours trying to figure out the problem but I'm new to JS and it looks like pretty convoluted code I'm using (obviously didn't write it myself, it's by "PopBox.") Thanks for any time spent helping me, pre-appreciated. Yeah, did that title confuse you? :P I realize there is a problem with forms in IE7 and 8, where when a form is submitted, and you click the Back button or use history.go(-1), dynamic elements are not properly shown with their previous values. I can save the forms data to cookies for future use, but when I try to go Back, the page isn't actually reloaded, so the script won't load the cookies. How can I force a reload of the previous page upon going Back? Hi I'm reading a text file, manipulating the string that I've read, and then writing to a new text file called temp. The error that I am getting is basically reading past the end of the file. function SpaceFileEntries() { fso = new ActiveXObject("Scripting.FileSystemObject"); filename = "NDELPROF.txt"; path1 = document.getElementById("lblDataOutputDirectory").innerText + "\\" + filename; path2 = document.getElementById("lblDataOutputDirectory").innerText + "\\temp.txt"; s = fso.OpenTextFile(path1); j = fso.CreateTextFile(path2 , true); do { text = s.readLine(); partOne = text.substring(0,34); lastPart = text.substring(35, 54); space = " "; j.write(partOne); j.write(space); j.writeline(lastPart); } while ( text != null ) s.Close(); j.Close(); } Can someone please help me find this bug in the code. I know it's got to do with the while statement, but can't think or find good alternatives. Thanks. Daniel Hi all, I hoping somebody can help me. I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals. The code below seems to be working but I can only get working links on the first line that appears. Please can somebody help a gal out? xo [CODE] <html> <head> <title>Rotating Text</title> <script type="text/javascript"> var rotatingTextElement; var rotatingText = new Array(); var ctr = 0; function initRotateText() { rotatingTextElement = document.getElementById("textToChange"); rotatingText[0] = rotatingTextElement.innerHTML; rotatingText[1] = "why won't you work!?!?!?"; rotatingText[2] = "purdy please"; setInterval(rotateText, 5000); } function rotateText() { ctr++; if(ctr >= rotatingText.length) { ctr = 0; } rotatingTextElement.innerHTML = rotatingText[ctr]; } window.onload = initRotateText; </script> </head> <body> <span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> </body> </html> hi, anyone knows how to get the past 6th month date using time difference? like if the current date is given 18-April-2011 then the past 6th month date is 18-October-2010...how can this be done by using time difference? Thanks, verve I am trying to create a drop down menu for dates that starts with today's date, but allows people to choose 50 years into the past and 10 years into the future. Here's what I have for the years: 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> </head> <body> <h4>Select a date to see the energies for that day <script type="text/javascript"> var mesparaluna=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec']; function populatedropdown(mesparaluna, diaparaluna, axxa1){ var today=new Date() var mesparaluna=document.getElementById(mesparaluna) var diaparaluna=document.getElementById(diaparaluna) var axxa1=document.getElementById(axxa1) for (var i=0; i<31; i++) diaparaluna.options[i]=new Option(i, i+1) diaparaluna.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day for (var m=0; m<12; m++) mesparaluna.options[m]=new Option(mesparaluna[m], mesparaluna[m]+1) mesparaluna.options[today.getMonth()]=new Option(today.getMonth(), today.getMonth(), true, true) //select today's month var thisyear=today.getFullYear() for (var y=0; y<20; y++){ axxa1.options[y]=new Option(thisyear, thisyear) thisyear+=1 } axxa1.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year } </script> <script> sacakindias() </script> <SCRIPT SRC=tzolkin.js></script> <script> armatzolkin() </script> <p><font size="2" face="Verdana"> <SELECT class="input_tex" name=mesparaluna id="mesparaluna"></SELECT> </font> <SELECT class="input_tex" name="diaparaluna" id="diaparaluna"></SELECT> </font> <SELECT class="input_tex" name="axxa1" id="axxa1"></SELECT></p> <p><INPUT class="input_tex" onclick="sacakinpersonal()" type="button" value="Search"><img border="0" name="pirav" src="blanco.gif" class="shakeimage" width="10" height="10"> <INPUT class="input_tex" onclick="sacakindias()" type="button" value="Today"></p></form> <script type="text/javascript"> //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select) window.onload=function(){ populatedropdown("diaparaluna", "mesparaluna", "axxa1") } </script> </h4> </body> </html> I am also having a problem with the month. I wanted it to show the name of the month, but I am getting a number (and a wrong one at that). Apologies... I am a terrible newbie with Javascript. The problem stems from Internet Explorer's inability to expand questions in the FAQ section of my website ( link: http://phonesforyourcharity.com/faq.php ). Of course the expand function works in Firefox and Safari. The <script type="text/javascript" src="js/faq.js"></script> in the source refers to: PHP Code: $(function(){ $("dd.answer") .hide(); $("dl.faq dt") .append("<br /><a href='#' title='Reveal Answer' class='answer-tab'>Answer</a>"); $(".answer-tab") .click(function(){ $(this) .parent().parent() .find("dd.answer") .slideToggle(); return false; }); }); Hello all, Sorry for not reading the "posting guidelines" earlier. I understand that you guys are not reading/loading complete codes, my bad. Let me try again. This is a code for checking numbers A1 -> B1, when there is a match, the code will be green, otherwise black. Can somebody explain to me how I can extend this script, that more then one array is checked?? Code: <script type = "text/javascript"> var a1 = ["2","5", "11","16","23","45", "46"]; var b1 = ["2","3","8","12","23", "37", "41", "45", "48"] for (var i = 0; i< a1.length; i++) { for (var j = 0; j< b1.length; j++) { if (a1[i] == b1[j]) { a1[i]= "g"+ a1[i]; } } } for (var i = 0; i< a1.length; i++) { if (a1[i].substr(0,1) == "g") { a1[i] = a1[i].substr(1,20); document.write("<font color = 'green'>", a1[i] + "    "); } else { document.write("<font color = 'black'>", a1[i] + "    "); } } document.write("<br><br>"); for (var j = 0; j< b1.length; j++) { document.write("<font color = 'black'>", b1[j] + "    "); } </script> Thanks a ton in advance can I use javascipt to put in perl <head> for description. what I want to do is something like this <head> <script type="text/javascript"> if $description != (not == to)" " { <meta name="description" content=" $description"> } else { <meta name="description" content=" my site"> } </scipt> </head> <body> run the java script </body> thanks. I am trying something like Code: <script type=\"text/javascript\"> var description == \"mysite\"; if(description != \"$description\"){ document.write(\"<meta name=\"description\" content=\"mysite\">\"); }else{ document.write(\"<meta name=\"description\" content=\"$description\">\"); } </script> I've started studying JavaScript recently. The following simple scenario from the Russian textbook is not implemented properly on my PC. Code: <HTML> <HEAD> <TITLE>Link Description</TITLE> <SCRIPT LANGUAGE="JavaScript"> function describe(text) { window.status = text; return true; } function clearstatus() { window.status=""; } </SCRIPT> </HEAD> <BODY> <h1>Link Description</h1> <P><i>Put mouse pointer over links to display their description</i></P> <ul> <li><A HREF="order.html" onMouseOver="describe('Закажите товар'); return true;" onMouseOut="clearstatus()";> Заказ товаров</A> <li><A HREF="email.html" onMouseOver="describe('Направьте письмо'); return true;" onMouseOut="clearstatus()";> Email</A> <li><A HREF="complain.html" onMouseOver="describe('Раскритикуйте все'); return true;" onMouseOut="clearstatus()";> Отдел защиты прав потребителей</A> </ul> </BODY> </HTML> I just typed the script from the book char by char. I use Firefox browser, v.3.5.7. The error console does not display any mistakes. Please, explain me why on placing mouse over a link the status bar displays A HREF text instead of the link description. I have been working with the double combo box w/ description script from javascriptkit, and I attempted to add an additional 3rd combo box that would switch selects based upon selection of the 2nd combo box, but I am having difficulty with this. Any help would be appreciated. Here is the code: Code: <script language="JavaScript"> <!-- //Double Combo Box with Description Code- by Randall Wald (http://www.rwald.com) //Visit JavaScript Kit (http://javascriptkit.com) for script //Credit must stay intact for use var num_of_cats = 4; // This is the number of categories, including the first, blank, category. var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no. var option_array = new Array(num_of_cats); option_array[0] = new Array("You need to select a category"); // This is the first (blank) category. Don't mess with it. option_array[1] = new Array("-- Select One --", "JavaScript Kit", "News.com", "Wired"); option_array[2] = new Array("-- Select One --", "CNN", "ABC News"); option_array[3] = new Array("-- Select One --", "Google", "Ask Jeeves"); var text_array = new Array(num_of_cats); text_array[0] = new Array("Here's how you use this box: First, you select a category in the Category drop-down. Then, select a link from the Link drop-down. Then, read the description in this box, or click Go to go to the page. If you ever need to see this help again, just go back to the top option in the Category box."); // These are general instructions. Change them if you want, or keep them if you don't. text_array[1] = new Array("These are some of my favorite technology sites. You should visit them.", // Note that the first entry here is a general description of this category. After than, they're descriptions of each link. Make sure that you don't put the first link first; the general description must be first. "This is a page with a bunch of nice JavaScripts that you can use. They also have tutorials in all sorts of subjects.", "CNet news. If it's in technology, it's in here.", "Wired magazine is the type of magazine which needs no introduction."); text_array[2] = new Array("These days, it's important to keep up on the news. These sites will help you do that.", "CNN. What list of news sites would be complete without it?", "Here, you can get links to World News Tonight, or see video clips."); text_array[3] = new Array("If you can't find it via other means, you'll need to find it with a search engine. These are some of the best.", "Undoubtedly, the best search engine out there.", "Their natural-language search sometimes comes up with results you won't get with other engines."); var url_array = new Array(num_of_cats); url_array[0] = new Array("#"); // The first category. This should have no items other than "#". url_array[1] = new Array("#", // The second category; the first "real" category. Note the initial #. That is the category which says "Please select a link." It doesn't need a URL. Start putting the other URL's in after that first line. "http://javascriptkit.com/", "http://www.news.com/", "http://www.wired.com/"); url_array[2] = new Array("#", "http://www.cnn.com/", "http://abcnews.go.com/"); url_array[3] = new Array("#", "http://www.google.com/", "http://www.aj.com/"); function switch_select() { for (loop = window.document.form_1.select_2.options.length-1; loop > 0; loop--) { window.document.form_1.select_2.options[loop] = null; } for (loop = 0; loop < option_array[window.document.form_1.select_1.selectedIndex].length; loop++) { window.document.form_1.select_2.options[loop] = new Option(option_array[window.document.form_1.select_1.selectedIndex][loop]); } window.document.form_1.select_2.selectedIndex = 0; } function switch_text() { window.document.form_1.textarea_1.value = text_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex]; } function box() { if (window.document.form_1.select_2.selectedIndex == 0) { alert("Where do you think you're going?"); } else { if (open_in_newwindow==1) window.open(url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex],"_blank"); else window.location=url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex] } } function set_orig() { window.document.form_1.select_1.selectedIndex = 0; window.document.form_1.select_2.selectedIndex = 0; } window.onload=set_orig // --> </script> <form name="form_1" onSubmit="return false;"> <textarea WRAP="virtual" name="textarea_1" rows=6 cols=60>Here's how you use this box: First, you select a category in the Category drop-down. Then, select a link from the Link drop-down. Then, read the description in this box, or click Go to go to the page. If you ever need to see this help again, just go back to the top option in the Category box.</textarea><br /> <!-- This should be the same as the general instructions in the above code. --> <select name="select_1" onChange="switch_select(); switch_text();"> <option>-- Categories --</option> <option>Technology Sites</option> <option>News Sites</option> <option>Search Engines</option> </select> <select name="select_2" onChange="switch_text();"> <option>You need to select a category</option> <option> </option> <option> </option> </select> <input type="submit" onClick="box();" value="Go!"> </form> <p align="center">This free script provided by<br /> <a href="http://javascriptkit.com">JavaScript Kit</a></p> is there a way to set the meta description to x amount of charictars from the content of a div in the body? i was going to start toying with this but i though i would jump on here and ask the experts to see if it can actually be done first. thanks!!! |