JavaScript - Updating Href Of Link With Shadowbox & Flash
Hello,
I have a site that uses JS to swap images e.g. user clicks on a thumbnail and then the main image changes to show the thumb they've clicked on. So now I'd like that main image to link somewhere, and to change where it links to when the thumb is clicked on also. The link updates ok using my JS, but the shadowbox always loads the flash using the same image variable, not the new one my JS is specifying. Here's my code: Image in Source Code: Code: <div id="show_main_image"> <a href="http://www.mysite.co.uk/zoom/zoom.swf?image=http://www.mysite.co.uk/uploads/1234153173_original_1.jpg" rel="shadowbox;width=600;height=400" id="myAnchor"> <img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_original_1.jpg&w=333&h=284" border="0" name="mainimage" alt="some alt"/></a> </div> Thumb in Source code: Code: <div id="thumbpics"> <p><a href="javascript:selectPicture('1234153173','1');"><img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_thumb_1.jpg&w=50&h=50" border="0" class="thumbpic" alt="some alt"/></a> <a href="javascript:selectPicture('1234153173','2');"><img src="../thumbnails/phpThumb.php?src=/home/sites/mysite.co.uk/public_html/uploads/1234153173_thumb_2.jpg&w=50&h=50" border="0" class="thumbpic" alt="some alt2"/></a></p> </div> Javascript to change the main image: Code: function selectPicture(uniqueid,imgno) { var filenamepic = '../thumbnails/phpThumb.php?h=333&w=284&src=../uploads/' + uniqueid + '_original_' + imgno + '.jpg'; var linkurl = 'http://www.mysite.co.uk/zoom/zoom.swf?image=../thumbnails/phpThumb.php?h=333&w=284&src=../uploads/' + uniqueid + '_original_' + imgno + '.jpg'; document.getElementById('myAnchor').href=linkurl; document.mainimage.src=filenamepic; } So the document.mainimage.src bit works, as it updates the main image, the link is updated but the shawdowbox and Flash is always showing the image it is first sent when the page is loaded. Does anyone have any ideas on how to get round this? Thanks, Nicola Similar Tutorialsis it possible to link to a page and then run a javascript all in the same href? for example, i want to redirect back to the home page after a user makes a comment and show the hidden comment div this is my javascript command: Code: <a href="javascript:InsertContent('competitiveevents'); RemoveContent('stories'); InsertContent('blog-comments');"> but can i do something like this..? Code: <a href="../index.php:javascript:InsertContent('competitiveevents'); RemoveContent('stories'); InsertContent('blog-comments');"> i have a little function that uses a checkbox to turn off or on a map layer Code: function toggleGeoXML(id, checked) { if (checked) { var geoXml = new GGeoXml(layers[id].url); layers[id].geoXml = geoXml; if (layers[id].zoom) { map.setZoom(layers[id].zoom); } else { map.setZoom(1); } if (layers[id].lat && layers[id].lng) { map.setCenter(new GLatLng(layers[id].lat, layers[id].lng)); } else { map.setCenter(new GLatLng(39.909736,-35.859375)); } map.addOverlay(geoXml); } else if (layers[id].geoXml) { map.removeOverlay(layers[id].geoXml); } } i'm trying to use an image instead of a checkbox (can be a styled button or a link) the problem is trying to get rid of the "checked" part of the function and integrate it with a normal link but still toggle it off and on this check box input works Code: <input type="checkbox" value="" id="name id of layer" onClick="toggleGeoXML(this.id,this.checked)" /> ive seen loads of ways of showing and hiding layers but nothing that seems relevant to this instance ive tried loads of different things like Code: <a id="name id of layer" href="#" onClick="toggleGeoXML(this.id,this.checked);return false;">on/off</a> also removing the checked part in the function - the link turns layer on but then wont turn it off ie: Code: <a id="name id of layer" href="#" onClick="toggleGeoXML(this.id);return false;">on/off</a> i'm sure its something stupid but ive been looking at this all afternoon and just keep going round in circles thx Hi-- I have a link that has an mp3 sound as its href: Code: <a href="sounds/genealogy.mp3" class="track track-default">this is a link</a> Unfortunately, I also need that same link to go to a part on the site (href=#greenhouse) so that the sound plays on that part of the site. Does anyone know how to accomplish this? I am imagining it would be with javascript, but honestly, I do not know. Any help would be greatly appreciated. Many thanks...! Hi, here is what I am trying to do, mind if I sound simple this is my first major javascript attempt. You click the checkbox and it changes a link. You click the checkbox again and it changes it back. So you have a page with a link : <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN" id="pay"><img src="go.gif"></a> and a checkbox : <a nohref style="cursorointer;color:blue;text-decoration:underline" onclick="changeTarget()"><input type="checkbox" OnClick="changeTarget()" checked="yes" name="opt-in" id="opt-in" align="center" /></a> </p> Clicking the checkbox runs the javascript function ChangeTarget(). Here is what I want the javascript to do: Code: 1. Write current pay value to variable 2. Compare variable to paypal link -3. change to clickbank link -else change to paypal link. Here is the code I have tried that doesnt work: Code: <script type="text/javascript"> var link = document.getElementById('pay'); function changeTarget() if(link == "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN") document.getElementById('pay').href="http://1.60years.pay.clickbank.net"; else document.getElementById('pay').href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN"; </script> Any help would be very much appreciated, I don't know why it isnt working. It just doesnt do anything when you click it. I know the following DOES work, but it only changes the link to the value chosen... no way of changing it back when you click the checkbox a second time. Code: //WORKING CODE <script type="text/javascript"> function changeTarget() { document.getElementById('pay').href="http://1.60years.pay.clickbank.net"; } </script> Dear friends, Industry feedback in 'advertising world' is that I really could do with moving mini flash vids as thumbnail links, not static thumbnails if possible. This is where I am up to for you kind folk to see - http://www.spectral.org.uk/test5/work7.htm The playback of the flash vids (in the big playback area right/mid of screen) from the JPG thumbnail links on the TOP ROW works FINE, but how do I similarly call that 'BIGFLASH' function to display the video right-centre linking from the JW Flash Player vid thumbnail equivalents on rows TWO and THREE? Do Flash vids defo overide all other functionality (and thus the 'linking hand' hovering icon) we could otherwise use to "couch" the object (ie, in this case, the calling of the flash routine) like using javascript OnClick, etc or do we need to try and "con" the FLASHVARS within the flash player using the flashvar "DISPLAYCLICK:" ( http://developer.longtailvideo.com/trac/wiki/FlashVars ) to do something javascripty and invoke the 'BIGFLASH' function? The parameter options seem limited though don't they... as far as I can tell you can't use the DISPLAYCLICK flashvar to call a bespoke JS routine. I wonder if it is possible to put a transparent layer OVER the flash vid in JW Player and use that as the link, or does flash not allow other layers superimposed over it? My hands seem to be bound unless I am not seeing the wood for the trees! I really like the layout as it is and the coding and the fact I'm nearly there so I would hate to have to do something radically different at this stage. Why is such an obvious function so difficult to achieve?! Looking forward to your input as ever guys! Best - Dom Hello everyone! I'm trying to use Shadowbox with an Image Gallery on my page, and both are working except for this little thing: Both work fine by themselves on the same page: I have a clickable "contact me" button that brings up my contact page in a Shadowbox, and I have an Image Gallery that is working fine. My problem is that I want to make my images in the Image Gallery also bring up a Shadowbox box when clicked. I tried to use the same (a rel="shadowbox;width=...;height=..." href="...") in the anchor tags of the images, but when I click an image, the link loads over the page, not in a Shadowbox while it works perfectly on the contact button It doesn't look like a Javascript conflict because each one is working, just not in that particular situation. Please can someone help me sort this out! You can preview my page from he http://dl.dropbox.co...eshow/Home.html And save it from he http://dl.dropbox.co...y-slideshow.zip The slideshow is a "mootools qscroller" (included). Please help me out! I'll be very grateful! <3 <3 :* I plan to set up a photo gallery using ShadowBox, but I also want to add a zoom feature within the gallery for individual elements. Preferably using the CloudZoom plugin. How it should (hopefully) work: Click on any thumbnail --> A resized large image opens up inside ShadowBox --> CloudZoom is activated on this image on mouseover. What I've obviously got so far is this: Code: Shadowbox.init({ skipSetup: true }); window.onload = function() { Shadowbox.setup("a.mygallery-elements", { gallery: "mygallery" }); }; Is there a way to call CloudZoom after the gallery is invoked. Have already scoured this forum. No luck. Can anyone out there advise me on this? Hi, so the page is http://blackpaint.co.uk/BlackPaint09/films/ if you click on 'Tide' you can see the password prompt appears. But the problem I am having is that even if you press cancel or do the wrong password a few times it still open up the shadow box. This is the script for the password protection Code: var getPass = function(el){ var ct = 3, thePrompt = 'Please Enter Your Password', theDefault = ' ', pw = ''; while(ct-- && pw !== 'pass'){ pw = prompt(thePrompt, theDefault); if(pw === null){ ct = 0; } thePrompt = 'Password Incorrect, Please Try Again'; theDefault = 'Password'; } if(pw === 'pass'){ Shadowbox.open(el); } return false; }; This is an example of how a working (non shadowbox) version works successfully. http://www.tidefilm.com/ I would really appreciate some help with this, thanks, Luke p.s. - I know the protection is very low - I don't care if people can find it in the code - that is not important. Hi, I would like to know how I can use JavaScript to find the size of my iFrame and feed it to Shadowbox to launch the appropriate sized shadowbox on different browsers and resolutions. For me, the parent page is called 'demo.html' and the iFrame is 'gallery/archive_iframe.html'. Currently, the shadowbox is launched with a fixed height and width (which you will see in the HTML code below). The problem is that 'gallery/archive_iframe.html' displays differently on every browser and every resolution, causing unwanted horizontal and vertical scroll bars. An example can be seen he http://www.mikegermond.com/demo.html Here is the code that I use in 'demo.html' to launch the iFrame: Head Code: <script type="text/javascript" src="/shadowbox/libraries/mediaplayer/jquery.js"></script> <script type="text/javascript" src="/shadowbox/shadowbox.js"></script> <script type="text/javascript" src='/shadowbox/libraries/mediaplayer/swfobject.js'></script> <script type="text/javascript"> function moveCloseLink(){ var cb=document.getElementById('sb-nav-close'); var tb=document.getElementById('sb-title'); if(tb) tb.appendChild(cb); } Shadowbox.init({ onOpen: moveCloseLink, flvPlayer: '/shadowbox/player.swf', language: 'en', players: ["flv","iframe"], flashParams: {allowfullscreen:'true'}, flashVars: { skin: '/shadowbox/modieus.swf', image: '/upload/demo-poster.jpg', autostart: true } }); </script> Body Code: <A HREF="/gallery/archive_iframe.html" rel="shadowbox;width=750;height=486" class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A> What do I need to do in 'gallery/archive_iframe.html' if anything? My thought is that I need to wrap it in a DIV tag and find the width and height of that. And what do I need to do in 'demo.html'? I'd assume some code is needed to pull the dimensions discovered in my iframe document, and insert those into the link that launches Shadowbox. Consider me a JavaScript newbie! You're help is greatly appreciated!! Hi, I'm using the following Javascript code to show a div layer depending on the URL Code: <script type="text/javascript"> if (location.href.match(/folder/)) { document.getElementById("div-layer").style.display="block"; } </script> This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example: http://www.domain.com/folder/sub-folder http://www.domain.com/folder/sub-folder2 etc. Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it? Thank you in advance. Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. hi guys, i was wondering if anyone could help me. Ive been looking into the above and want to implement it on my site. I have created no flash pages and flash pages, but instead of creating a portal at the front of the site that leads you to a flash site and a no flash site id like to do it so the page detects flash or not, and redirects to whichever URL. Is this possible, or do multiple browsers cause problems ? cheers if f returns true then href gets 'executed', else not. Works in FF, GC. In IE 7 does not work. How to get this working in IE ? Code: <a onclick="return f();" href="../jsp/..."> Code: function f() { return true; } Hi everyone, I am looking for JS script to replace find all the href values on a page and replace those href values matching them with an array of values. my array, lets say is a = {'some.ex.com', 'abc.ex.com/tv', 'some.name.ex.com', 'bcd.ex.com/dir1/dir2/some.jsp' }; etc i want to find all the URLs on a given page, check if each found url matches with any of the values in the array, if match found, just replace only "ex.com" with "example.com" for every match. I am all new to JS and please please help Many thanks Please check out the code and tell me how can i use the variable as a href link. var rand_link = new Array (); rand_link[0]="asdhrfe22k"; rand_link[1]="iqh3wjhs8s"; rand_link[2]="snbds7s8h3"; rand_link[3]="=jh99shhs99"; rand_link[4]="shdbfh3h83"; var rand = Math.floor(5 * Math.random()); var ref = rand_link[rand]; document.write("<a href=http://www.youtube.com/watch?v= [with the variabel "ref"]>Click here</a>"); where, the array of links are in rand_link. I have to rework a script now, and I'm wondering how to change the script below to find the text inside of a href tag that is nested inside div class "posted-by". I want the result "Name Surname" here's what it's searching in: Code: <span class="posted-by"> <a href="/from_the_heart/author/namesurname"> <img class="inline-icon user-registered-icon" src="/universal/images/transparent.png" alt="Author" title="Author"> Name Surname </a> </span> And here's the existing code. I got some help on codingforums to create the script below that strips down to the 'a href' but now I need the text inside (because there's a space between the first and last name) Code: function doit() { if($('div').hasClass('single-journal-entry-wrapper')) { var theURL = null; var spans = document.getElementsByTagName("span"); for ( var s = 0; s < spans.length; s++ ) { // searching through spans for the class name: var span = spans[s]; if ( span.className.indexOf("posted-by") >= 0 ) { var useit = span.getElementsByTagName("a")[0]; theURL = useit.href; break; // Here things deviate.I need the text inside the href } } if ( theURL == null ) { alert("failed!"); } else { var parts = theURL.split('/'); var result = parts[parts.length-1]; if (result == "christopheryen") { var txt=document.getElementById("author"); txt.innerHTML="adsfasdfasdf"; } else if (result == "juliapatrick") {etc.} Hello, I am needing help in copying a url to another href on a page. Here is the scenario: I have a page with multiple <LI>. Within each <LI> there is A hidden link An image A visible link This is the code within each <LI>: Code: <h2 class="postTitle" style="display: none;"><a href="URL to copy">LI Name</a></h2> <a href="Copied URL"><img alt="" src="LI Image" /></a> <a href="Copied URL">LI Name</a> Each <LI> will contain a different image, LI name, and link. I am needing a way to get the hidden URL for each LI copied into the visible href. Hope this makes sense. Thanks in advance for your help. Ok so i'm trying to write a Greasemonkey script to change all the hrefs on a single page. The href by default looks like this: Code: <a href="javascript:get('246154895')" class="postid">ID</a> What i'm trying to do is make the number from get() appear in stead of "ID". How should i get this done? I started up with this: Code: var posts = document.getElementsByClassname('postid'); for (i=0; i<posts.length; i++) { //Replacing } But i doubt it will work, since there are other items with the class "postid" that aren't related to these tags i'm trying to change. P.S. I'm new to JS so yeah :P At first : Peace of code i have now: Code: <a onclick="doRate('-1', '{$id}'); return false;"><img src="{THEME}/dleimages/down.gif" title="Blogai(-)" alt="Blogai(-)" class="r2-unit" width="16" height="16" align="absmiddle" /></a> So i thinking that if user has JavaScript in his browser disabled it won't work. So gonna change it to this : like i saw in other webs: Code: <a onclick="doRate('-1', '{$id}'); return false;" href="llink.html"><img src="{THEME}/dleimages/down.gif" title="Blogai(-)" alt="Blogai(-)" class="r2-unit" width="16" height="16" align="absmiddle" /></a> But i'm afraid that if user WILL have JS support enabled, href tag will be executed anyways. Any ideas? We have a function that validates a form and then does submit (and a bunch of other stuff) We called it using: Code: <td class="MyButtonStyle"> <a href="#" OnClick="MyFunction();" title="Save changes and continue">SAVE</a> </td> This worked fine on the browsers we were using (IE6 in the main), but we now find doesn't work on IE5.01, Mac and some others. OK, so having done some research I now realise I needed RETURN FALSE in OnClick. So ... faced with having to change a lot of pages I'd like to have the best possible syntax (by which I suppose I rellay mean most-browser-compatible), and I've seen a number of options; advice on picking a good'un would be much appreciated. Amongst the stuff I've seen is: Code: 1. href="#" onclick="MyFunction();return false;" 2. href="#null" onclick="MyFunction();return false;" 3. href="NoJavaScriptAbility.htm" onclick="MyFunction();return false;" 4. href="#" onclick="return MyFunction();" 5. href="javascript:;" onclick="return MyFunction();" 6. href="javascript://" onclick="return MyFunction();" 7. href="javascript:void(0);" onclick="return MyFunction();" 8. href="javascript:MyFunction();" What about what shows in the Status bar? Should I have an OnMouseOver event too to describe what MyFunction is going to do? Rather than displaying a meaningless link. Anything else to note? (This function is part of a library being reused for major web site development over the next however many years, and not for single-project build-and-throw-away, so all possible functionality, including The Kitchen Sink!, is up for consideration). Thanks Kristen |