JavaScript - Gallery Current Page Color
So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction.
I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons. I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value. Code: <script type="text/javascript"> var imgList = [ "../Assets/Images_Revised/40_kitchen.jpg", "../Assets/Images_Revised/40_stair.jpg", "../Assets/Images_Revised/C_front2.jpg", "../Assets/Images_Revised/C_rear_side_combo.jpg", "../Assets/Images_Revised/C_side.jpg", "../Assets/Images_Revised/Y_combo.jpg", "../Assets/Images_Revised/Y_window.jpg" ]; var clientData = [ "This is a place holder for the first set of text.", // index 1 "This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2 "This is a place holder for the third set of text.", "This is a place holder for the fourth set of text.", "This is a place holder for the fifth set of text.", "This is a place holder for the sixth set of text.", "This is a place holder for the first seventh of text.", ]; var currentMain = 0; var currentMainT = 0; function Prev() { return ShowMain(currentMain-1); return ShowMainT(currentMainT-1); } function Next() { return ShowMain(currentMain+1); return ShowMainT(currentMainT+1); } function ShowMain(which) { currentMain = which; currentMainT = which; if ( currentMain < 0 ) currentMain = 0; if ( currentMainT < 0 ) currentMainT = 0; if ( currentMain > imgList.length-1) currentMain = imgList.length-1; if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; document.getElementById('mainImg').src = imgList[currentMain]; document.getElementById('mainText').innerHTML = clientData[currentMainT]; var PD = document.getElementById('Pg'); var PD2 = document.getElementById('Pg2'); if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length; if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length; document.getElementById("mainText").style.display = 'inline' document.getElementById("gallery").style.color="#ff0000"; return false; } onload = function() { ShowMain(0); } onload = function() { ShowMainT(0); } </script> <script language="JavaScript"> function preloader() { // counter var i = 0; // create object imageObj = new Image(); // set image list images = new Array(); images[0]="../Assets/Images/pt_entry+hall2.jpg" images[1]="../Assets/Images/pt_stair+hall.jpg" images[2]="../Assets/Images_Revised/40_kitchen.jpg" images[3]="../Assets/Images_Revised/40_stair.jpg" images[4]="../Assets/Images_Revised/C_front2.jpg" images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg" images[7]="../Assets/Images_Revised/C_side.jpg" images[8]="../Assets/Images_Revised/Y_combo.jpg" images[9]="../Assets/Images_Revised/Y_window.jpg" images[10]="../Assets/Images_Revised/V_stair.jpgg" // start preloading for(i=0; i<=3; i++) { imageObj.src=images[i]; } } </script> Code: <div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p> </td> <td id="cell5 images"> </td> </tr> <tr> <td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a ><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a ><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a ><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a ><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a ><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a ><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a ><a href="#" onclick="return Prev();" class="gallery"><</a ><a href="#" class="gallery" onclick="return Next();">></a></div> Similar TutorialsHi, I created a simple menu: Code: <html> <head> <style type="text/css"> table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000} td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555} </style> </head> <body> <table border="1" bordercolor="#000"> <tbody> <tr> <td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td> <td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td> <td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td> </tr> </tbody> </table> </body> </html> Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on. Regards Rain Lover Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php I would like to display the current page the user is on somewhere on the page. Example: You are currently viewing index.php How would I be able to accomplish this? Hey Basically all i want to do is highlight the pages hyperlink the user is currently on. So when the home page loads, the home page hyperlink is a different colour to the other hyperlinks, and then when another is page is pressed it is that pages hyperlink that is a different colour to the others Hi all I have created a single page horizontally scrolling website comprised of 5 sections with a fixed navigation bar in the top right of the screen at http://www.clickmunki.com and I am trying to figure out how to highlight the active section of the site in the nav bar as the user navigates through the site so that the user knows exactly which section of the site they are in. I assumed this would be a pretty basic thing to try and do but I have not been able to achieve it so far. I have tried a few different methods but no success as yet. Can anyone point me in the right direction as to how best achieve this? Can I do it just using css or would i need some js? Any assistance would be very much appreciated.111 Kind regards Anne This is my js: Code: $(".nav").click(function(){ $(".nav.a").toggle("fast"); $(this).toggleClass("active"); }); This is my css; Code: .nav { text-align: center; overflow: hidden; margin: .3em ; width: 500px; position: fixed; padding: 0px 0px 0 830px; } .nav a { position: relative; float: left; padding: 2.2em 0 3.1em; width: 20%; text-decoration: none; color: #484848; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .nav a:hover { color: #c6342e; } .effect { position: absolute; left: 120%; -webkit-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; -ms-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; } .nav a:nth-child(1):hover ~ .effect { left: 66.3%; } .nav a:nth-child(2):hover ~ .effect { left: 73.8%; } .nav a:nth-child(3):hover ~ .effect { left: 81.2%; } .nav a:nth-child(4):hover ~ .effect { left: 89%; } .nav a:nth-child(5):hover ~ .effect { left: 96.4%; } /* ----- dot effect -----*/ .ph-dot-nav:after { content: ""; display: block; position: absolute; width: 100%; height: 1px; background: #484848; bottom: 40px; } .ph-dot-nav a:after { content: ""; position: absolute; width: 6px; height: 6px; bottom: 38px; left: 50%; margin-left: 0px; background: #484848; border-radius: 100%; } .ph-dot-nav .effect { width: 10px; height: 10px; bottom: 36px; margin-left: -5px; background: #fff; border-radius: 100%; z-index:999;} Hi Guys, I want to output my pagetitle in javascript. An idea of syntax? <title> products</title> eg My page title is javascript code outputs... My page title is products no joy with Code: <body> <script TYPE="text/javascript"> document.write(document.title); </script> </body> Thanks Hi there I've created a nav bar for this site - http://web11.3essentials.com/~cp27358/ - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image: menu1buttonup = new Image(); menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ; menu1buttondown = new Image() ; menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ; followed by.... function buttondown( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "down.src" ); } } function buttonup ( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "up.src" ); } } and this is what my list items look like: <a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')" onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a> thank you hi, have a series of 2 pages. The first is a drop down select box that gathers the state name. Onclick we are using a window.open to open a page with a list of cities for that state. Again using a drop down select box to select the city and then, onclick, we send the user off to the appropriate page based on state/city selection while at the same time updating the 1st (parent) page with a new location.href. Problem is that instead of updating the parent page, it updates the page with the list of cities (the child page). On the first page script we generate the following warning: Warning: XUL box for _moz_generated_content_after element contained an inline #text child, forcing all its children to be wrapped in a block. Source File: chrome://browser/content/browser.xul Line: 0 First page is not generated via javascript but standard html. This happens both locally and when pages are moved to the server (Apache). First page script is as follows Code: <HTML> <HEAD> <TITLE>J1</TITLE> <SCRIPT LANGUAGE="JavaScript"> function StateSelect (form) { Item = form.state.selectedIndex; Result = form.state.options[Item].value; window.open('j2.htm?value='+ Result,'myWindow','resizeable=no,resizeable=0,scrollbars=no,scrollbars=0,location=no,location=0,toolbar=no,toolbar=0,directories=no,directories=0,menubar=no,menubar=0,status=no,status=0,copyhistory=no,copyhistory=0,width=300,height=100,left=300,top=300,screenX=300,screenY=300') } </SCRIPT> </HEAD> 2nd page (where user selects city) code is as follows: Code: <SCRIPT LANGUAGE="JavaScript"> function CitySelect (form) { Item = form.city.selectedIndex; city = form.city.options[Item].value; state = document.myform.state.value; window.open('j3.htm','mywindow3') setTimeout("Func1()",3000); } function Func1() { parent.location.href='j4.htm?st='+ state + '&city=' + city,'mywinow2'; } </SCRIPT> Ideas on why and what the error (actually a warning) is trying to tell us? Thank you all! Jim I have a minor problem with opening multiple pages with onclick. The code work perfectly (I run it with some PHP features). So far so good. Here are the problems: Left mouse button will open 4 new tabs, and the view will jump to 'http://www.domain1.com Middle mouse button will only open http://www.domain1.com What I want: Open all 4 pages in new tabs in the background and stay at the current page. PHP Code: <a href='http://www.domain1.com' onclick="window.open('http://www.domain2.com'); window.open('http://www.domain3.com'); window.open('http://www.domain4.com')\" rel="nofollow" target='new'>Open 4</a> Hi. I am trying to set up a photo gallery on a website using the Galleria Javascript. I managed to setup one gallery but I don't know the code to setup another or another two galleries on the same one page. Can anyone help me urgently? When I try to post the code twice, it gives an error message. The java script code is below: Code: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script src="galleria/galleria-1.2.5.min.js"></script> </head> <body> <div align="center"> <div id="gallery"> <img alt="Admin team." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo1.jpg" /> <img alt="Ladies In Session!" src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo2.jpg" /> <img alt="Ladies in Worship." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo3.jpg" /> </div></div> <script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); $("#gallery").galleria({ width: 540, height: 540 }); </script></div> </body> </html> I am still new to programming and so have no idea in how to adapt this script to make two or three galleries on the same page. The website address is: http://www.raisingsistersconference....togallery.html Thanks so much. Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets. Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets. My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason. Is there any solution that comes to mind for anyone out there? You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found: Get The Bookmarklet on this page Again, it works great if you don't start the script from a sites home page. I've tried the following: Code: <script type="text/javascript" language="javascript" charset="utf-8"> // <![CDATA[ if ( top.location.href!= window.location.href ) { document.getElementById( 'bodybg' ).style.background='#12111C'; } // ]]> </script> and Code: <script type="text/javascript" language="javascript" charset="utf-8"> // <![CDATA[ if ( top.location == location ) { document.getElementById( 'bodybg' ).style.background='#12111C'; } // ]]> </script> I've tested the if statement and the set background code, using a button. I'm guessing it fails since there is no background when the script runs. Any ideas? Hi, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. 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=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript"> var btn = function () { var active = null, bcolor = '#84DFC1'; if (this.attachEvent) this.attachEvent('onunload', function () { active = null; }); return function (element) { if ((active != element) && element.style) { if (active) active.style.backgroundColor = ''; element.style.backgroundColor = bcolor; active = element; } }; }(); </script> </head> <body> <div onclick="btn(this);">ONE </div> <div onclick="btn(this);">TWO </div> </body> </html> Hi all, I'm not sure how can i do that but i think it's possible with js. What i want to do is letting visitors save the page as a html shortcut. Can i do that with JS? Or should i search an other solution by an other language? Thanks, Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id) { var txtObj = document.all(id); if (txtObj.style.display == 'none') { txtObj.style.display = '' txtObj.style.backgroundColor = 'grey'; } } function hideLayer793BKColor(id) { var txtObj = document.all(id); if ( txtObj.style.backgroundColor == 'grey' ) txtObj.style.display = 'none'; } These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title> <script language=javascript> colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"]; cRGB = []; function toRGB(color){ var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")"; return rgb; } for(var i=0; i<colors.length; i++){ cRGB[i] = toRGB(colors[i]); } function changeColor(target){ var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor; var set = false; var xx; for(var i=0; i<cRGB.length; i++){ if(swapper == cRGB[i]){ if(((i+1)) >= cRGB.length){ xx = 0; }else{ xx = i+1; } document.getElementById(target).style.backgroundColor = colors[xx]; document.getElementById(target).style.backgroundImage.show; set = true; i=cRGB.length; } } set ? null : document.getElementById(target).style.backgroundColor = colors[1]; } </SCRIPT> </head> <body bgcolor="#333333"> <div> <div id="a1" onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div> <div id=a2 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div> <div id=a3 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div> </body> </html> Demo: http://theclutch.com/rollover_color_..._bgndimage.htm Hi Guys, Hope you can help. How do you simply output the current url in the browser i.e if i am in google.com I want google.com outputted and so on. Also on multilanguage sites if my url is say www.mydomain.com/en/about.html or http://www.mydomain.com/en/animals/h...stallions.html I want to be able to manipulate the url so I can change en to fr for example when I jump between english and french pages. I want users to be able to switch the language of that particular page by clicking a link. I need to be able to switch segment one of the url (en,fr,de etc...)dynamically somehow instead of hardcoding a link into each page. Any ideas? THANKS Hey, I have a script that needs to see the current opacity value of divs but I can not find the code to make it work in IE. I've googled it for over an hour with no answer. Any suggestions? For non-IE browsers, here is the code I am using Code: div_opac = document.getElementById(some_div).style.opacity; Thanks for the help! I need to get an add on JS for this form to go with the current JS that is on it I need the add on JS to Validate all the fields have been filled out and then pop up an error if any of the fields are not filled out <FORM NAME="gather"><form onclick="return check(this);"> <fieldset> </p> <table width="200" border="0" cellpadding="10"> <tr> <th scope="row"><p align="left" class="style1">First Name*</p> <p> <div align="left"><input type="text" name="data_NameFirstName2" id="data_NameFirstName2" value="[Fname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Last Name*</p> <p> <div align="left"><input type="text" name="data_NameLastName2" id="data_NameLastName2" value="[Lname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Phone*</p> <p> <div align="left"><input type="text" name="phone1" id="phone1" /> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Email*</p> <p> <div align="left"><input type="text" name="email" id="email" /> </p></th> </tr> </table> </p> <p> <p><span class="style5">Please confirm your contact information.</span> <p><span class="style5"> (* = required) </span> <br /> <br /> <span class="style1"> <input type = "radio" name = "rad1" value = "Contact me"> <strong> Please contact me</strong></span></p> <p> <span class="style1">Please have my personal advisor</span></p> <p class="style1">contact me as soon as possible. <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Send me more info"> <strong>Send me more info</strong> </span></p> <p class="style1">I'm not ready to enroll yet, but</p> <p class="style1">please continue to send me more</p> <p class="style1">information and updates about </p> <p class="style1">going back to school <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Remove me from your mailing list"> <strong> No thanks </strong></span></p> <p class="style1"> Please remove me from your </p> <p class="style1">mailing list. <br /> <br /> </p> <label> <input type = "button" value = "submit" onclick ="chkrads()"> </label> </fieldset> </form> <script type = "text/javascript"> function chkrads() { var chosen = "None"; var which = -1; var len = document.gather.rad1.length; for (i = 0; i < len; i++) { if (document.gather.rad1[i].checked) { chosen = document.gather.rad1[i].value; which = i; } } if (chosen == "None") { alert("No Location Chosen"); } else { } if (which == 0) {window.location = "http://www.hudsonsd.com/national2010/thankcontact.html"} if (which == 1) {window.location = "http://www.hudsonsd.com/national2010/thanksend.html"} if (which == 2) {window.location = "http://www.hudsonsd.com/national2010/thanknocontact.html"} } </script> Thanks! Presently am using below code, and it is showing an error message says "Cannot call method "getCurrentWindow" of undefined (<Unknown source>#4) in <Unknown source> at line number 4" ========================================= function insertDataIntoHtmlEditorIE() { currentwindow = this.browserbot.getCurrentWindow(this); var iFrame = currentwindow.getElementById ('ctl00_MainContent_editor_ctl02_ctl00'); var iFrameBody; iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; iFrameBody.innerHTML = "xyz"; } ================================================ please help me out to resolve this issue.. *am calling this script in Selenium RC through Eclipse Hey, i'm building my own wyiwyg-editor, and all works very good, exept getting the current focused element, i mean i wan't to show a path where the user is, and this function came out: Code: wysiwyg.getPath = function(i) { if(wysiwyg.getMode(i) == 'source') return; curr = document.getElementById('wysiwyg_frame_' + i).contentWindow.document; sel = curr.selection; if(sel == undefined) return; if (sel.type=="Control") { // control selection range = sel.createRange(); if (range.length==1) { elem = range.item(0); } else { // multiple control selection return; } } else { range = sel.createRange(); elem = range.parentElement(); } p = elem.tagName; while(elem == elem.parentNode && elem.tagName != 'BODY'){ p = elem + ' > ' + p; } document.getElementById('wysiwg_path_' + i).innerHTML = p; } unfortunaly sel is always undefined, how can i fix it? i hope you can help me Morri |