JavaScript - Jquery Gallery (selecting Elements)
Hi,
I'm new to jQuery and I've set up a very basic image gallery. When the mouse is hovered over an image the description should disappear but at the moment when the mouse is hovered over any image all the descriptions for all the images are hidden. Is there any way to just apply the effect to one instance of the class rather than all of them at the same time? Thanks in advance. Code: <html> <head> <link rel='stylesheet' type='text/css' href='gallery7.css'/> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript'> $().ready(function(){ $(".images").hover(function(event){ $(".description").hide("slow",function(){ // Hides element i.e. it dissapears!! }); }); }); </script> <title>Basic Gallery</title> </head> <body> <div class='images'> <img src='images/cow.jpg'/> <div class='description'> This is a picture of a cow </div> </div> <div class='images'> <img src='images/indiana.jpg'/> <div class='description'> This is a picture of Indiana Jones </div> </div> <div class='images'> <img src='images/trek.jpg'/> <div class='description'> This is a picture of Enterprise </div> </div> </body> </html> Code: .images{ float: left; } .description { position: relative; top:-18px; color: blue; text-align: center; background-color: gray; opacity: 0.6; } Similar TutorialsHi, could someone please take a look at my page with a jQuery gallery that refuses to work, however, it works perfectly on my local computer. View Page What is the problem, and how do I fix it? does anyone know if there is a jquery image gallery/slider plugin that can be used multiple time on one page?
Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var initial = 0 var total = 0; var services = 0; function addServices() { initial = 150 total = initial services = 0; $("input:checked").each(function(){ value = $(this).attr("value"); services += parseInt(value); }); } $(function() { addServices(); total += services; $("form").before('<p class="price"></p>') $("p.price").text("Total Price: US$" + total); }); $("input:radio, input:checkbox").click(function () { addServices(); total += services $("p.price").text("Total Price: US$" + total); }); }); </script> I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I'm using the jquery plugin found here. I love the look but I have a form that uses functions like this: Code: function cascadeCountry(value) { if (document.getElementById("srchlookstate_province") != null) { http.open('get', 'cascade_search.php?a=country&v=' + value ); document.getElementById('srchlookstate_province').innerHTML=" "+loadingTag; http.onreadystatechange = handleResponse; http.send(null); } } So, when you select a country and it retrieves the state/province text input, the jquery css is not applied to it. Is there something I need to add to the code above or to the jquery initialization code he Code: $(function() { $("form.jqtransform").jqTransform(); }); So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Hi guys, new to javascript and need some basic help or advice. I have this code which changes the the background postion of the parent(ul) Code: <ul> <li class="highways" onmouseover="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 -149px';" onmouseout="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 0';"><a href=" " title="Highways">Highways</a></li> </li> </ul> I would like to do the same thing change the backgroundpossition/images of the div (id="flash") on the hover of the a within the the (div="mySlides2" > div ) Code: <div id="flash"> <img src="images/img1.jpg" width="886" height="229" /> <div id="myController2"> <span class="jFlowControl2">No 1 </span> <span class="jFlowControl2">No 2 </span> </div> <div id="mySlides2"> <div> <a (would like to do somthing on the hover of this) class="vm" href="#" title="Vulnerability Management"></a> <a class="grc" href="#" title="grc"></a> <a class="pci" href="#" title="pci"></a> <a class="gcs" href="#" title="gcs"></a> <a class<div id="flash"> <img src="im="pt" href="#" title="Penetration Testing"> </a> <span class="jFlowNext2 NextFlash"> </span> </div> <div> <span class="jFlowPrev2 BackFlash"> </span> </div> </div> </div> any help of advice would b appricated Specifically i was wondering if anyone had any ideas on how to select the specific character when hovering over a word? I have not been able to find any documentation on this however, there is a demo site i found for a plugin that allows character selection. http://labs.bitmeister.jp/moamoa/demo.html i dont need anything that large and elaborate... Edit I'm pretty wel experinced with jquery, I know it's possible with jquery I've got this JavaScript code that is doing stuff to the content of <TR> rows.. but it's overselecting and I need to filter the <TR>s it selects in the bold line. var theRows = document.getElementsByTagName("TR"); var r = 0; var strTitle = ""; while (r < theRows.length) { try { strTitle = theRows[r].innerText || theRows[r].textContent; strTitle = strTitle.replace(/\n|\r|\t|\^ /g,""); if (strTitle.substring(0,1) == "(") { if (strTitle.indexOf("STAT") == -1) { theRows[r].style.display = "none"; ... continues Below is the rendered html. What I really want to do instead of if (strTitle.substring(0,1) == "(") Is only perform the operation when a row that is using class="ms- formlabel, or maybe has a FieldInternalName. I understand that strTitle is just pulling content, so how do I condition on other properties or strings within the <TR> row given my currently logic? Rendered HTML. <TR> <TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader"> <nobr>1. Do you become short of breath or develop chest pain when climbing a flight of stairs?</nobr> </H3></TD> <TD valign="top" class="ms-formbody" width="400px"> <!-- FieldName="1. Do you become short of breath or develop chest pain when climbing a flight of stairs?" FieldInternalName="ShortofBreath" FieldType="SPFieldBoolean" --> <span dir="none"> Thanks for any help or information! I have 10 feedburner feeds that are for different categories on a wordpress site. I would like to modify the subscribe form code feedburner supplies to include radio buttons to select which of the feeds to subscribe to. Code: <HTML> <HEAD> <TITLE> Radio Window </TITLE> <script> function OpenWindow(){ for(i=0;i<document.FormName["RB1"].length;i++){ if(document.FormName["RB1"][i].checked){ window.open(document.FormName["RB1"][i].value); break; } } } </script> </HEAD> <BODY> <form name="FormName" style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="OpenWindow()";return true"> <p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed1&loc=en_US">Option 1<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed2&loc=en_US">Option 2<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed3&loc=en_US">Option 3<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed4&loc=en_US">Option 4<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed5&loc=en_US">Option 5<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed6&loc=en_US">Option 6<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed7&loc=en_US">Option 7<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed8&loc=en_US">Option 8<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed9&loc=en_US">Option 9<BR> <input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed10&loc=en_US">Option 10<BR> <input type="submit" value="Subscribe"> </form> </BODY> </HTML> This is the code I have put together searching the web, when hitting the subscribe button after entering a email address and selecting an option it load two new windows, one for the relevant feed but does not transfer the email address entered in the text box. The second for to http://feedburner.google.com/fb/a/mailverify All help would be greatly received. Hi. I've dynamically created some divs, how do I select a specific div to use? Code: //create box for length of letters in word var i = 0; for(i=0;i<wL;i++){ cBoxes = document.createElement("div"); cBoxes.className = "letterBoxes"; hangMan.appendChild(cBoxes); } So I'm creating the amount of divs equal to the amount of letters in my word (I'm making a hangman game). On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created). I have the correct position stored in a variable (letPos), and the correct guess (userGuess), I need to show userGuess at the div equal to letPos, ie div 4 or div 5, etc. If I simply go cBoxes.innerHTML = userGuess, the correct userGuess always shows at the last position in my cBoxes divs. I need it to show at the correct position (letPos). Any hints? I have up to 3 dropdown lists that I can select using javascript functions. Depending on what I select in the first dropdown loads what is in the 2nd drop down and so on. i want to be able to select the first drop down and it skips the 2nd one and displays the 3rd one. How do I do that with the current functions I am using. Code: function cboSourceChange(){ var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value; var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value; var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value; var dtBeginDate = document.frmHarvestForm.txtBeginDate.value; var dtEndDate = document.frmHarvestForm.txtEndDate.value; var iIndCert = document.frmHarvestForm.cboIndCert.value; location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1=0&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert); } function cboSub1Change(){ var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value; var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value; var dtBeginDate = document.frmHarvestForm.txtBeginDate.value; var dtEndDate = document.frmHarvestForm.txtEndDate.value; var iIndCert = document.frmHarvestForm.cboIndCert.value; location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert); } function cboSub2Change(){ var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value; var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value; var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value; var dtBeginDate = document.frmHarvestForm.txtBeginDate.value; var dtEndDate = document.frmHarvestForm.txtEndDate.value; var iIndCert = document.frmHarvestForm.cboIndCert.value; location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert); } function cboSub3Change(){ var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value; var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value; var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value; var iSub3 = document.frmHarvestForm.cboSub3.options[document.frmHarvestForm.cboSub3.selectedIndex].value; var dtBeginDate = document.frmHarvestForm.txtBeginDate.value; var dtEndDate = document.frmHarvestForm.txtEndDate.value; var iIndCert = document.frmHarvestForm.cboIndCert.value; location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3="+iSub3+"&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert); } Greetings experts, this is my first time here. So, please take easy on me. I have makup with 2 sections. The first section contains 5 form fields and are required. The second second has 2 form fields and are optional. Users can only choose from one section or the other but not both. The js script below ensures that if users select from section 2, section one will not challenge for validation and works a treat. The challenge I have now is to ensure that if users choose from section 1, the 2 form fields in section are automatically disabled so they won't be attempted to choose from it. Similarly, if users select from section 2, all form fields in section one are automatically disabled so they won't be tempted to choose from that section. Is this possible? If not possible, is it possible to raise an error? For instance, a user selects from section 1 and attempts to select from any of the 2 form fields in section 2, a message that says, "You can only select from one section but from both. Similarly if a user selects from section 2 first, same thing happens. Thanks very much for your assistance. function validate() { if(document.getElementById("<%=txtrequest.ClientID%>").value != "" && document.getElementById("<%=txtreceived.ClientID %>").value != "") { if (document.getElementById("<%=txtName.ClientID%>").value == "") { alert("Please enter name"); document.getElementById("<%=txtName.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtCity.ClientID %>").value == "") { alert("Please enter city"); document.getElementById("<%=txtCity.ClientID %>").focus(); return false; } if (document.getElementById("<%=txtState.ClientID%>").value == "") { alert("Please enter state"); document.getElementById("<%=txtState.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtZip.ClientID%>").value == "") { alert("Please enter zip"); document.getElementById("<%=txtZip.ClientID%>").focus(); return false; } if (checkradio() == false) { alert("Please enter contacts"); document.getElementById("<%=txtContacts.ClientID%>").focus(); return false; } } return true; } I don't know anything about javascript so the way I word this might be a bit confusing. I am making an online store using corecommerce but I am having difficulty finding a code that will allow my visitors to determine how many items they see per pg. The options would be: 25 items 50 items 75 items View All. I have been playing around with codes that I find.. but like I said earlier, I know absolutely NOTHING about javascript. Can anyone help me out by either giving me the code or pointing me to a tutorial or anything! PLEASE! thx a bunch P.S. if you know of a program or software thats also great too! Below I have dynamical generated radio buttons, the names($approve variable is the name) per radio button pairs are different(dynamically created names using looping). When I create two buttons, one is for if you click it, all the radio button with the label approve will be selected all, and the other button is for the disapprove label button that will select the radio button with the label disapprove. How can I make this right. Below are the codes I created. Thanks Code: <script> function selectAll() { var i = 0; objElems = document.t4.elements; for(i=0;i<objElems.length;i++){ objElems[i].checked =true; } </script> PHP Code: <form action="viewall.php" method="post" name="t4"> while(condition) { echo "<td ><input type='radio' name='". $approve."' id='app' value='approve' /> Approve<br /> </td> <td ><input type='radio' name='". $approve."' id='disp' value='disapprove' /> Disapprove<br /> </td> "; } <tr><td><input type="button" name="all_app" value="Select All Approve" onclick="selectAll(this.value);" ></td> <td><input type="button" name="all_app2" value="Select All disapprove" onclick="selectAll(this.value);" ></td> </tr> </form> Hey guys. I need little bit of help which i know it will be piece of cake for you. In emp_rota.php , i want the user to select multiple dates (through a calendar) which will be fetched in the php in the next page. everything works except that the calendar script works only on DATE1, when user clicks to add another date then though everything works , except the calendar doesnt come up. help MEE !! P.s. i am attaching the whole script along with this http://www.mediafire.com/?ayz7mpiauba4dya I currently have two html select list boxes side by side on a form, two buttons in between the boxes to move items from list box to the other, and a javascript function to control the movement of the items from one box to the other. Here is the javascript: Code: function MoveSelected(from, to) { var lstFrom = $(from); var lstTo = $(to); for (var i = 0; i<lstFrom.length;i++) { if ( lstFrom[i].selected ) { var elOptNew = document.createElement('option'); elOptNew.text = lstFrom[i].text; elOptNew.value = lstFrom[i].value; try { lstTo.add(elOptNew, null); // standards compliant; doesn't work in IE } catch(ex) { lstTo.add(elOptNew); // IE only } } } for (var i = lstFrom.length-1; i>=0;i--) { if ( lstFrom[i].selected ) { lstFrom.options[i] = null; } } } Here are the two html form select list boxes (lstAvailProd is the starting list box that lists the initial data and lstSelectProd is the destination list box): Code: <td width="10%" valign="center"> <a href="javascript: MoveSelected('lstAvailProd','lstSelectProd');"><IMG SRC="buttons/right_arrow.gif" style="padding-bottom: 2px;" /></a><br /><br /> <a href="javascript: MoveSelected('lstSelectProd','lstAvailProd');"><IMG SRC="buttons/left_arrow.gif" /></a> </td> I was wondering if anyone could tell me how I could modify my code to allow for the selection of all the data in the starting list box by only selecting and moving the first item in the list to the destination list box? The first item is called "All Products", so instead of actually selecting every product in the starting list and moving them to the destination list, I would like the code to see that if the "All Products" list item is moved to the destination list, move all the other list items in the destination list back to the starting list. Here's an example of what the code for each list box looks like: Starting List Box: Code: <select name="lstAvailProd" id="lstAvailProd" multiple="true" size="8" style="width: 250px;"> <option value="-1">{All Products}</option> <option value="1">Product 1</option> <option value="2">Product 2</option> <option value="3">Product 3</option> <option value="4">Product 4</option> <option value="5">Product 5</option> </select> Destination List Box: Code: <select name="lstSelectProd" id="lstSelectProd" multiple="true" size="8" style="width: 250px;"> </select> Any help would be appreciated, thanks!! |