JavaScript - Need Help Displaying Multiple Galleries
I would like to use the gallery whose code is provided on this page: http://www.meadmiracle.com/SlidingGallery.aspx
I tried to display two galleries with the same settings and so I put: $(function() { $('div.gallery img').slidingGallery({ container: $('div.gallery') }); $('div.gallery2 img').slidingGallery({ container: $('div.gallery2') }); }); with the divs being "gallery2" but the coding only works when I put the code without "gallery2". Am I coding it wrong? Similar TutorialsIs it possible to modify the code I am using in this example to create multiple photo galleries on the same page (basically one for each horse - set up exactly like the example)? There is also some CSS that is connected to this photo gallery. I know CSS a bit more than I know javascript...which I suppose isn't really saying much, since I don't know javascript at all. Also, how much of the code should I post, considering it's a multiple parter? Many thanks! Hello, I need to resolve a problem. First, my english may be bad, sorry for this Here's my problem. I'm filling my galleries manually, which is soooo ****ing long. I must change page by page so the most recent tubes be on first one. Here's what I'd like to have : put all my links (divs) in a .txt file for each category, then a script would assemble divs one by one to fill pages. This would be a lot easier to manage my website Thanks for tha help Hello all! Quick question regarding basic cookies. I have a button that runs a function that creates a cookie onclick; document.cookie = ("cookie1=500"); whenever i display this later, despite the fact i've clicked the button 3 times. It only displays once. Is there a way I could display this AS MANY TIMES as the button was clicked. Any help is appreciated. Code: <script type="text/javascript"> var cookies = document.cookie; var cookie_name = new Array(); var cookie_value = new Array(); if (cookies.length > 0 ) { var cookies = cookies.split("; "); for( var x = 0 ; x < cookies.length ; x++ ) { var cookie_parts = cookies[x].split("="); cookie_name[x] = cookie_parts[0]; cookie_value[x] = cookie_parts[1]; } } function writeProducts() { function removeItem() { cookie_name[x] + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"; } var total = 0; var tempstring = ""; var prodTable = document.getElementById('tblProducts'); var prodRow; var prodQuantity; var prodName; var prodPrice; for( var x = 0 ; x < (cookie_name.length) ; x = x + 1) { prodRow = document.createElement('tr'); prodName = document.createElement('td'); prodPrice = document.createElement('td'); prodCheck = document.createElement('td'); prodName.innerHTML = cookie_name[x]; prodPrice.innerHTML = "$" + cookie_value[x]; prodCheck.innerHTML = tempstring + '<input type="button" value="Remove from Cart" />' total = parseInt(total + parseInt(cookie_value[x])); prodRow.appendChild(prodName); prodRow.appendChild(prodPrice); prodRow.appendChild(prodCheck); prodTable.appendChild(prodRow); } document.getElementById('spnProducts').innerHTML = tempstring; tempstring = tempstring + "Total :" + " " + '$' + total; document.getElementById('spnTotal').innerHTML = tempstring; } <script> Hey, I have a location lookup tool that pulls data from a Google Fusion table. User's type their address in and it drops a pin and info window at the place / result that matches their location. It works great with one location, but now I need it to display multiple results / drop multiple pins if they match the criteria Here's the working code that drops one pin (sorry it's a lot): Code: google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); var FusionTableID = 'tableid'; var map = null; var geocoder = null; var infowindow = null; var marker = null; function initialize() { geocoder = new google.maps.Geocoder(); infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) }); // create the map var myOptions = { zoom: 7, center: new google.maps.LatLng(41.9908, -93.4208), mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); layer = new google.maps.FusionTablesLayer({ query: {from:FusionTableID}, styles: [{ polygonOptions: { fillColor:'#000000', fillOpacity: 0.01, strokeColor:'#000000', strokeOpacity: 0.01 } }], suppressInfoWindows:true }); layer.setMap(map); google.maps.event.addListener(layer, "click", function(e) { var content = "<b>"+e.row['name'].value+"</b>"; infowindow.setContent(content); infowindow.setPosition(locationgeocode); infowindow.open(map); }); document.getElementById('submit').onclick = function() { document.getElementById("submit").value = "Searching"; }; } function showAddress(address) { var contentString = address+"<br>Outside Area"; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var point = results[0].geometry.location; contentString += "<br>"; // query FT for data var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));"; // document.getElementById('FTQuery').innerHTML = queryText; queryText = encodeURIComponent(queryText); var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); //set the callback function query.send(openInfoWindowOnMarker); } else { alert("Geocode was not successful for the following reason: " + status); } }); } function openInfoWindowOnMarker(response) { if (!response) { alert('no response'); return; } if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } FTresponse = response; //for more information on the response object, see the documentation //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse numRows = response.getDataTable().getNumberOfRows(); numCols = response.getDataTable().getNumberOfColumns(); var content = "<b>Outside of Iowa</b><!--"; var unionBounds = null; // alert(numRows); for (var i=0; i < numRows; i++) { var county = FTresponse.getDataTable().getValue(i,0); var precinct = FTresponse.getDataTable().getValue(i,1); var locationname = FTresponse.getDataTable().getValue(i,2); var locationaddress = FTresponse.getDataTable().getValue(i,3); var locationcity = FTresponse.getDataTable().getValue(i,4); var locationstate = FTresponse.getDataTable().getValue(i,5); var locationzip = FTresponse.getDataTable().getValue(i,6); var locationgeocode = FTresponse.getDataTable().getValue(i,7); // var kml = FTresponse.getDataTable().getValue(i,1); // create a geoXml3 parser for the click handlers content = "<b>"+locationname+"</b><br />"+locationaddress+"<br />"+locationcity+locationstate+" "+locationzip+"<br/><a href='http://maps.google.com/maps?daddr="+locationaddress+" "+locationcity+" IA "+locationzip+"' target='_blank' >Click here for Directions</a><br /></br></p><!--"; /* var geoXml = new geoXML3.parser({ map: map, zoom: false }); // alert(kml); geoXml.parseKmlString("<Placemark>"+kml+"<\/Placemark>"); geoXml.docs[0].gpolygons[0].setMap(null); if (!unionBounds) unionBounds = geoXml.docs[0].gpolygons[0].bounds; else unionBounds.union(geoXml.docs[0].gpolygons[0].bounds); */ } // zoom to the bounds // map.fitBounds(unionBounds); setTimeout(function() { google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); infowindow.setContent(content+marker.getPosition().toUrlValue(6)); google.maps.event.trigger(marker, 'click'); document.getElementById("submit").value = "Search"; }, 150); geocoder.geocode( { 'address': locationaddress+","+locationcity+locationstate+" "+locationzip}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var point = results[0].geometry.location; map.setCenter(point); map.setZoom(12); if (marker && marker.setMap) marker.setMap(null); marker = new google.maps.Marker({ map: map, position: point }); }; }); } I basically need it to drop multiple pins if multiple queries match var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'Hours', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));"; Any thoughts, fixes, or even a point in the right direction would be incredibly helpful. I'm really stuck on this one and have been trying at it for a couple of days now. Even something like getting it to print a second query that I can mark in the table as a second location would be helpful. Something like a second pin that matches: Code: var queryText2 ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'Hours', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01)); AND locationname = 'Location 2'"; Thanks!! Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? Hello, for some reason this code isnt showing anything: Code: <span id = "message" style="color:black; font-size:12pt; font-family:arial,verdana,sans-serif"></span> <script type = "text/javascript"> var targetURL="#"; var countdownfrom = 10; var currentsecond = countdownfrom +1; function countredirect() { if (currentsecond !=1 ){ currentsecond -=1; var mess = "You will be redirected to Points2shop in " + currentsecond + " seconds."; document.getElementById("message").innerHTML = mess; } else{ window.location=targetURL; } setTimeout("countredirect()",1000); } countredirect(); </script> ive tried: Code: <form name="message"> <span id = "message" style="color:black; font-size:12pt; font-family:arial,verdana,sans-serif"></span> </form> <script type = "text/javascript"> var targetURL="#"; var countdownfrom = 10; var currentsecond = countdownfrom +1; function countredirect() { if (currentsecond !=1 ){ currentsecond -=1; var mess = "You will be redirected to Points2shop in " + currentsecond + " seconds."; document.getElementById("message").innerHTML = mess; } else{ window.location=targetURL; } setTimeout("countredirect()",1000); } countredirect(); </script> Anyone know why? Thanks I am having a problem with my homework displaying an iframe using JavaScript. My homework states: Insert a script element that does the following: part a. Insert the following multiline comment: Display the daily schedule in an inline frame. Daily schedules are stored in the files sunday.html through saturday.htm. part b. Insert a command to write the HTML code <iframe src="weekday.htm'></iframe> to the Web page, where weekday is the text string returned by the weekDay() function. What I have so far: <script type= "text/javascript"> /* Display part a */ document.write("<iframe src='weekday.htm'></iframe">; </script> My Question: How do I display weekday.htm within my script on a specific day using the function weekDay() function. below is my weekDay() function: function weekDay(){ thisDate = new Date(); var thisWDay=thisDate.getDay(); var wdName = new Array("sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"); return wdName[thisWDay]; } Hello all, I'm trying to create a sub menu that displays based on what the user clicks on the main nav. Here's an image of what I'm trying to accomplish. The main nav is at the top right corner, when the click on one of the links, I want the sub nav to display in the gray area....how would I do this. Would it be through an if/else statement using document.getElementById with inner HTML? Or would there be a better way. I'm really trying to do this by myself, so please don't do it for me...just give me a couple of suggestions if you don't mind. THanks I wrote a function (shown below) that is to take numbers from <div> tags add them up and display the value in a different <div> tag. It also prints the total in a hidden input tag to be sent when submitted. All was working fine until today I noticed that the total was no longer showing up in either the <div> tag or the hidden input tag. on change of any of the select menus correctly displays the expected value in its corresponding <div> tag I have no Idea what might be causing this, so I need fresh eyes. (My JavaScript skills are way below my php skills, I can't see anything wrong with what I have) PHP Code: // I am using a php function that spits out these // (one for each item listed in the JS function: <select name="body" onchange="document.getElementById('total_body').innerHTML = this.options[this.selectedIndex].getAttribute('cost_body');calcTotal();" id="frm"> <option value="2" cost_body="0">2</option> <option value="3" cost_body="10">3</option> <option value="4" cost_body="20">4</option> <option value="5" cost_body="30">5</option> <option value="6" cost_body="40">6</option> <option value="7" cost_body="65">7</option> </select> //Which displays in: <div id="total_body">0</div> //AND Calls this JavaScript Function: <script type="text/javascript"> function calcTotal(){ var numVal1=parseInt(document.getElementById("total_body").innerHTML); var numVal2=parseInt(document.getElementById("total_agility").innerHTML); var numVal3=parseInt(document.getElementById("total_reaction").innerHTML); var numVal4=parseInt(document.getElementById("total_strength").innerHTML); var numVal5=parseInt(document.getElementById("total_charisma").innerHTML); var numVal6=parseInt(document.getElementById("total_intuition").innerHTML); var numVal7=parseInt(document.getElementById("total_logic").innerHTML); var numVal8=parseInt(document.getElementById("total_willpower").innerHTML); var numVal9=parseInt(document.getElementById("total_edge").innerHTML); var numVal10=parseInt(document.getElementById("total_magic").innerHTML); var totalValue = numVal1 + numVal2 + numVal3 + numVal4 + numVal5 + numVal6 + numVal7 + numVal8 + numVal9 + numVal10; document.getElementById("grand_total").innerHTML = totalValue; document.getElementById("point_total").value = totalValue; } </script> //Which until today had been displaying in: <div align="center" id="grand_total">0</div> //AND <input type="hidden" name="point_total" value="" id="point_total"> Here is a page that shows what it is (not) doing. http://rpg.5150press.com/test.php I thought I knew how, but I'm unclear how to get this function to display: "document.getElementById("txtHint").innerHTML=xmlhttp.responseText;" inside the div. Will you show me please? Code: xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var div = document.createElement('div'); div.setAttribute('id', 'txtHint'); div.setAttribute("style","background-color:red;"); div.style.width = '300px'; div.style.height = '100px'; document.getElementById("txtHint").innerHTML=xmlhttp.responseText; //var txt='hello world!'; document.getElementsByTagName('body')[0].appendChild(div); document.getElementById('textHint').innerHTML=txt; } } I can't seem to get my innerHTML to display my content. This works fine, if I was to put it all in one line. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>'+"My text goes here"+'</tr></td></table>'; If I was to break it up, which I wanted then nothing seem to show up. Code: document.getElementById('addedText').innerHTML = '<table><tr><td>'; document.getElementById('addedText').innerHTML = "My text goes here"; document.getElementById('addedText').innerHTML = '</tr></td></table>'; Here's my code Code: <html> <head> <script type="text/javascript"> function display() { document.getElementById('addedText').innerHTML = '<table border=1><tr><td>'; document.getElementById('addedText').innerHTML = "My text goes here"; document.getElementById('addedText').innerHTML = '</tr></td></table>'; } </script> </head> <body onload="display()"> <div id="addedText"></div> </body> </html> thanks Hi, I am trying to display some xml elements that are formatted like this: Code: <line> <route> <dirs>1. Head west on Calzada Roosevelt</dirs> <time>4.6 km - about 15 mins</time> <dirs>2. Continue on Carretera Interamericana/Pan American Hwy</dirs> <time>15 km - about 12 mins</time> <dirs>3. Look for turnoff at San Lucas and follow signs from there</dirs> <time>13.5 km - about 15 mins</time> </route> </line> using this js: Code: for (var a = 0; a < lines.length; a++) { routeInfo = lines[a].getElementsByTagName("route"); for (var p = 0; p < routeInfo.length; p++) { var time = GXml.value(routeInfo[p].getElementsByTagName("time")[0]); var dirs = GXml.value(routeInfo[p].getElementsByTagName("dirs")[0]); way+='<b>'+dirs+'</b>'+'<br>'+time+'<br>'; ("way" eventually gets passed as the text to display) Which works OK (as you can see here if you select from Guatemala City to Antigua), but the problem is that it only shows the first set of directions, ie Code: <dirs>1. Head west on Calzada Roosevelt</dirs> <time>4.6 km - about 15 mins</time> I can see that this is because of the [0] in the getElementsByTagName - if I change it to 1 or 2 it shows the 2nd or 3rd set of directions. But I want it to show all of them... and I thought that being in a loop it would, but I'm obviously missing something. Any ideas? Thanks in advance. I am creating a script to display some variable but it won't work. Did I do something wrong? Code: <script type="text/javascript"> /* <![CDATA[ */ var yotta = le24; var zetta = le21; document.write("<table border='1' width='100%'><tr><th>Prefix</th><th>Decimal Equivalent</th></tr>"); document.write("<tr><td>Yotta</td><td>" + yotta + "</td></tr>"); document.write("<tr><td>Zetta</td><td>" + zetta + "</td></tr>"); document.write("</table>"); /* ]]> */ </script> Everything looks right, I think. Anyone see something wrong? Thank you, I am a firefighter of 25 years. Hello all, I need your help. I know what I'm trying to do, just having a difficult time getting started. I want to display the user-name of an individual when they login. I know how this can be doing using php, but what about javascript? Ex: username: __________ password: __________ After Login: Welcome ['username'] I hope that makes sense. Thanks in advance Hi, I've got this bit if JavaScript that loads a Flash applet. It also has a noscript tag in case the user has JavaScript turned off. Works great in all browsers I've tried, but it doesn't work at all in IE8 (nor IE7 emulated). Even the noscript content isn't showing up. W3C validator shows no issues. No little exclamation point warning in IE's bottom-left corner. I've even tried lowering the browser security with no change -- but that wouldn't have been a good solution if it had worked anyway; I can't tell my visitors to lower their browser security. Any ideas of suggestions? Thanks for any help! You can see the page he http://www.girlscoutsmoheartland.org/test/vcattest.html If you look at the source, that's all there is to it. No undisplayed server-side scripting. And here's the code if you don't want to visit the page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="http://www.myvirtualpaper.com/js/miniflipper.js"></script> </head> <body> Below this line should be either a Flash applet, or a link if JavaScript is unavailable:<br> <noscript><a href="http://www.myvirtualpaper.com/doc/gs_missouri_heartland/girlscout2010catalog/">Click here to view all pages.</a></noscript> <script type="text/javascript"> var miniFlipperOptions = {'uid' : 'bfbe7aa59d'}; MVP_printMiniflipper(miniFlipperOptions); </script> <br> Above this line should be the mentioned item option. </body> </html> I'm not sure if java is the best way to go with this, I'm pretty inexperienced with java, but I have a workable knowledge of html, and couldn't see a way to do it that way... so here goes: For my job I work with a ton of different deadlines all the time. What I want to do is to make a webpage that displays the date N days ago, and N days into the future. So something like 7 days ago, 30 days ago, 60 days ago 75 days ago, 30 days from now, 60 days from now, 75 days from now. etc. I've found brief snippets for how to display today's date, but i'm having trouble with the calculations. Then I also need one that displays 18 years ago, I'm not sure if the change from days to years makes any kind of difference, but I suppose it's easy enough to convert years to days anyway.... How would I go about doing that? Thank you!!! Hello all i'm stuck on the last part of my program. Basically it will generate the score and players position but it will no show the following: I'm also having trouble stopping the loop from going over 80 Now add code to your program which will: ! declare and initialise a variable to keep count of how many goes the player takes to get out; ! add one to this count every time the loop is repeated; ! write out the count in a suitable message at the end. Any help is very much appreciated. [CODE] var countMoves = 0; while (playersPosition <80) { playersScore = rollDie(); document.write('Sco ' + playersScore); playersPosition = playersScore + playersPosition; document.write(' squa ' + playersPosition); indexOfNumber = findIndexOf(playersPosition, specialSquaresArray); if (indexOfNumber != -1) { document.write(' ladder to square ' + connectedSquaresArray[indexOfNumber]); document.write('<BR>'); document.write('Sco ' + playersScore); playersScore = connectedSquaresArray[indexOfNumber] + playersScore; document.write(' squa ' + playersScore); playersPosition = playersScore; } document.write('<BR>'); } for (count =1; count <=array.length; count = count + 1) if(array[count] > array[countMoves]) { countMoves = count; } document.write('it took ' + indexOfNumber + 'goes to get out'); [CODE] |