JavaScript - Image Paths Inside Javascripts
Hi All,
Although I have done a fair bit of html coding after taking several HTML courses, I have never become involved in JavaScript beyond adding the occasional pre-made script for a particular function. Which is what I am trying to do at the moment. I want to insert a slide show into a page and have tried 2 scripts from Java Kit Scripts. Both are similar and I am having the same problem with both. The problem: Inserting the image path. They both ask for the image path (naturally) and give the following examples: =========================== Example 1: //configure the paths of the images, plus corresponding target links slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg") ============================ Example 2: //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['dinosour.gif', '', ''] ultimateshow[1]=['crow.gif', 'http://www.dynamicdrive.com', '_new'] ============================= But there is no reference to an "image" folder. I have tried inserting the folder name: "images/iss-bunker-1tn.jpg", I have also tried leaving the word "images" out and also tried saving the related images in the same folder as the html coded pages. I have also tried using "shtml" pages. But nothing seems to work. My lack of JavaScript knowledge is obviously the problem, but I would greatly appreciate some help. Sincerely RufusB Similar TutorialsBackground on my task: My page accepts a url with various parameters passed in querystring. One of the parameter is the URL of the Image I wish to display on the page. I save this URL in a variable "imagesource" To ensure the image is not bigger than the size permitted, I use image object to get the height and width of the image. Now here's my code: function foo(){ ...... var imagesource = URL of the image; .... var newImg = new Image(); newImg.src = imagesource; var height = newImg.height; var width = newImg.width; .... } Now, say if, imagesource = http://www.yourwebsite.com/yourimage.jpg I expect newimage.src to be http://www.yourwebsite.com/yourimage.jpg But I get newimage.src = http://www.mywebsite.com/http://www.yourwebsite.com/yourimage.jpg Browser in use : IE 8 (if it matters in this case) Am I wrong in my assumption to begin with? Hi, i'm new to javascript, im managing to find out how to do most things, but i need to validate two paths. I want to know how to check whether path1 is a subpath of path2. e.g. 1: /files/stuff/mypics/anotherfolder/etc 2:/files/stuff/mypics i want to be able to return a boolean given whether i can move folder 1 in to folder 2 in this case yes. but if you swap them its a no. please help. oxide I am trying to use JavaScript to change the path to my pics on my web site at the same time that I change the css sheet. I found the code to change the css but I want to change the pic paths at the same timeI got the css changing code from http://javascript.internet.com/css/change-style.html thanks
I have a page with several javascript (.js files) in the header, is it possible to preload all of these before the actual page content is loaded? I want to hide the javascript execution from taking place after the page has loaded. Any ideas? Thanks! hello .. - I want ask about function in js file , when is it start work ? after calling in somewhere ? or in sequence - can I call function in js file from another js file ? thank you . . Hey, I've been trying to make two javascript files kiss and make up in my web site code. I tried the "noconflict" function, but either I did it wrong, or it didn't work out. Here is the page with the conflict. Help? So i have this one problem and its been a major pain for a while. I have both a light box function and a fade into page intro on my website. The issue i have is when i put in the lightbox, lightbox seems to not work whats so ever. So i made another page and first put in the lightbox...that worked like a charm but once i put in the fade in intro it basically gets me back to lightbox not working...So...any way to solve this? 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> <link href="css/lightbox.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="jquery-1.4.2.min.js" ></script> <script type="text/javascript"> $(document).ready(function() { // fade in content. $( '#wrapper' ).fadeIn("slow"); }); </script> </head> <body> <div id="wrapper"> <table><tr><td><a href="air_pollution copy.jpg" rel="lightbox" ><img src="air_pollution.jpg" /></a></td></tr></table></div> </body> </html> Hi, I am using several Javascripts into a html file. Individually all scripts working fine, however when I put them on the onclick event someof them not works. Example: <html> <head> <script> function one; </script> <script> function two; </script> <script> function three; </script> </head> <body> <form type=post action=newfile.asp> .................... ................... ................... <input type=submit onclick="one(); two(); three();"> </form> </body> </html The schema is right? How is the best way to force many scripts working fine? Bob So I am not great at Javascript, but i have 2 scripts that i want to work with each other. When i use one by itself, they each work fine, but when i add them together it does not work. I have a user form with a bunch of fields on it. If they choose an option on the drop down menu, some fields either show or disappear. Those fields have an "On Change" event that subtracts one field form another and gives us a total. ////////////////////////////////////// Drop Down Menu ///// rel sets to show the Code: <tr> <select name="checkout_by" class="textLeft" id="checkout_by" value="<?php if($cont == 'no') { echo $checkout_by; } ?>" > <option value="serial" selected rel="show">Item Series / Serial Number</option> <option value="isbn" rel="none">Barcode / ISBN Number</option> //////////////////////////////////// Fields used to subtract Code: <input name="serial_start" onChange="updatesum()" type="text" class="textLeft" id="serial_start" value="<?php if($cont == 'no') { echo $serial_start; } ?>" size="15"> Code: <input name="serial_end" onChange="updatesum()" type="text" class="textLeft" id="serial_end" value="<?php if($cont == 'no') { echo $serial_end; } ?>" size="15"> //////////////////////////////////// Field used to add the total up from above Code: <input name="org_quantity" type="text" id="org_quantity" value="<?php if($cont == 'no') { echo $orig_quantity; } ?>" size="10"> ///////////////////////////////////////Update total script Code: <script type="text/javascript"> function updatesum() { document.form1.org_quantity.value = (document.form1.serial_end.value -0) - (document.form1.serial_start.value -0); } </script> //////////////////////////////////// Hide Filed Script Code: var containerTag = 'TR'; var compatible = ( document.getElementById && document.getElementsByTagName && document.createElement && !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1) ); if (compatible) { document.write('<style>.accessibility{display: none}</style>'); var waitingRoom = document.createElement('div'); } var hiddenFormFieldsPointers = new Object(); function prepareForm() { if (!compatible) return; var marker = document.createElement(containerTag); marker.style.display = 'none'; var x = document.getElementsByTagName('select'); for (var i=0;i<x.length;i++) addEvent(x[i],'change',showHideFields) var x = document.getElementsByTagName(containerTag); var hiddenFields = new Array; for (var i=0;i<x.length;i++) { if (x[i].getAttribute('rel')) { var y = getAllFormFields(x[i]); x[i].nestedRels = new Array(); for (var j=0;j<y.length;j++) { var rel = y[j].getAttribute('rel'); if (!rel || rel == 'none') continue; x[i].nestedRels.push(rel); } if (!x[i].nestedRels.length) x[i].nestedRels = null; hiddenFields.push(x[i]); } } while (hiddenFields.length) { var rel = hiddenFields[0].getAttribute('rel'); if (!hiddenFormFieldsPointers[rel]) hiddenFormFieldsPointers[rel] = new Array(); var relIndex = hiddenFormFieldsPointers[rel].length; hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0]; var newMarker = marker.cloneNode(true); newMarker.id = rel + relIndex; hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]); waitingRoom.appendChild(hiddenFields.shift()); } setDefaults(); addEvent(document,'click',showHideFields); } function setDefaults() { var y = document.getElementsByTagName('input'); for (var i=0;i<y.length;i++) { if (y[i].checked && y[i].getAttribute('rel')) intoMainForm(y[i].getAttribute('rel')) } var z = document.getElementsByTagName('select'); for (var i=0;i<z.length;i++) { if (z[i].options[z[i].selectedIndex].getAttribute('rel')) intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel')) } } function showHideFields(e) { if (!e) var e = window.event; var tg = e.target || e.srcElement; if (tg.nodeName == 'LABEL') { var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor'); tg = document.getElementById(relatedFieldName); } if ( !(tg.nodeName == 'SELECT' && e.type == 'change') && !(tg.nodeName == 'INPUT' && tg.getAttribute('rel')) ) return; var fieldsToBeInserted = tg.getAttribute('rel'); if (tg.type == 'checkbox') { if (tg.checked) intoMainForm(fieldsToBeInserted); else intoWaitingRoom(fieldsToBeInserted); } else if (tg.type == 'radio') { removeOthers(tg.form[tg.name],fieldsToBeInserted) intoMainForm(fieldsToBeInserted); } else if (tg.type == 'select-one') { fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel'); removeOthers(tg.options,fieldsToBeInserted); intoMainForm(fieldsToBeInserted); } } function removeOthers(others,fieldsToBeInserted) { for (var i=0;i<others.length;i++) { var show = others[i].getAttribute('rel'); if (show == fieldsToBeInserted) continue; intoWaitingRoom(show); } } function intoWaitingRoom(relation) { if (relation == 'none') return; var Elements = hiddenFormFieldsPointers[relation]; for (var i=0;i<Elements.length;i++) { waitingRoom.appendChild(Elements[i]); if (Elements[i].nestedRels) for (var j=0;j<Elements[i].nestedRels.length;j++) intoWaitingRoom(Elements[i].nestedRels[j]); } } function intoMainForm(relation) { if (relation == 'none') return; var Elements = hiddenFormFieldsPointers[relation]; for (var i=0;i<Elements.length;i++) { var insertPoint = document.getElementById(relation+i); insertPoint.parentNode.insertBefore(Elements[i],insertPoint); if (Elements[i].nestedRels) { var fields = getAllFormFields(Elements[i]); for (var j=0;j<fields.length;j++) { if (!fields[j].getAttribute('rel')) continue; if (fields[j].checked || fields[j].selected) intoMainForm(fields[j].getAttribute('rel')); } } } } function getAllFormFields(node) { var allFormFields = new Array; var x = node.getElementsByTagName('input'); for (var i=0;i<x.length;i++) allFormFields.push(x[i]); var y = node.getElementsByTagName('option'); for (var i=0;i<y.length;i++) allFormFields.push(y[i]); return allFormFields; } /** ULTRA-SIMPLE EVENT ADDING **/ function addEvent(obj,type,fn) { if (obj.addEventListener) obj.addEventListener(type,fn,false); else if (obj.attachEvent) obj.attachEvent("on"+type,fn); } addEvent(window,"load",prepareForm); /** PUSH AND SHIFT FOR IE5 **/ function Array_push() { var A_p = 0 for (A_p = 0; A_p < arguments.length; A_p++) { this[this.length] = arguments[A_p] } return this.length } if (typeof Array.prototype.push == "undefined") { Array.prototype.push = Array_push } function Array_shift() { var A_s = 0 var response = this[0] for (A_s = 0; A_s < this.length-1; A_s++) { this[A_s] = this[A_s + 1] } this.length-- return response } if (typeof Array.prototype.shift == "undefined") { Array.prototype.shift = Array_shift } Hi All, I know this has been covered many times on this site, but I just cannot figure out what I'm doing wrong. I've got a jquery slideshow and some lightbox galley images that I'm trying to get to work together. I thought I had taken out the parts that were conflicting but I apparently haven't. Any help would be much appreciated. Here's the page I'm working on: oneeightyone.com/new/index.html Hi, I need javascript to sort as windows sorts its file. For eg: When the files name contains special characters, number and alphabets(#@!$%.doc, test1.doc,test2.doc, 1.doc) javascript sorts alphabets first and then special characters, but windows sorts special characters first and then alphabets in ascending. I want javascript to sort my array as windows. Kindly help me out in this case. Thanks, Deva. Hey! I'm working on a website that has the bubble navigation jquery script in it, but every time I combine it with another jquery script, it kind of goes bonkers. Right now, I'm trying to combine it with this circular image slider, here are the tutorials from the two scripts I'm using: http://tympanus.net/codrops/2010/04/...n-with-jquery/ http://www.baijs.nl/tinycircleslider/ And here's my script so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tiny Carousel: A lightweight jQuery plugin</title> <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/> <!--[if lte IE 6]> <style type="text/css"> /* Internet Explorer 6 PNG transparency fix */ #rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); } #rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); } </style> <![endif]--> <script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true }); }); </script> <title>Awesome Bubble Navigation with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Awesome Bubble Navigation with jQuery" /> <meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <style> *{ margin:0; padding:0; } body{ font-family:Arial; background:#fff url(images/bg_scoot1.png) no-repeat top left; } .title{ width:548px; height:119px; position:absolute; top:300px; left:250px; background:transparent url(title.png) no-repeat top left; } a.back{ background:transparent url(back.png) no-repeat top left; position:fixed; width:150px; height:27px; outline:none; bottom:0px; left:0px; } #content{ margin:0 auto; } </style> </head> <body> <div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a href="http://www.baijs.nl"><img src="example/images/hdr3.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr2.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr1.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr4.jpg" /></a></li> <li><a href="http://www.baijs.nl"><img src="example/images/hdr5.jpg" /></a></li> </ul> </div> <div class="dot"></div> <div class="overlay"></div> <div class="thumb"></div> </div> <div id="content"> <a class="back" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery"></a> <div class="title"></div> <div class="navigation" id="nav"> <div class="item user"> <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>User</h2> <ul> <li><a href="#">Profile</a></li> <li><a href="#">Properties</a></li> <li><a href="#">Privacy</a></li> </ul> </div> <div class="item home"> <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Home</h2> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="item shop"> <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Shop</h2> <ul> <li><a href="#">Catalogue</a></li> <li><a href="#">Orders</a></li> <li><a href="#">Offers</a></li> </ul> </div> <div class="item camera"> <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Photos</h2> <ul> <li><a href="#">Gallery</a></li> <li><a href="#">Prints</a></li> <li><a href="#">Submit</a></li> </ul> </div> <div class="item fav"> <img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/> <a href="#" class="icon"></a> <h2>Love</h2> <ul> <li><a href="#">Social</a></li> <li><a href="#">Support</a></li> <li><a href="#">Comments</a></li> </ul> </div> </div> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('#nav > div').hover( function () { var $this = $(this); $this.find('img').stop().animate({ 'width' :'199px', 'height' :'199px', 'top' :'-25px', 'left' :'-25px', 'opacity' :'1.0' },500,'easeOutBack',function(){ $(this).parent().find('ul').fadeIn(700); }); $this.find('a:first,h2').addClass('active'); }, function () { var $this = $(this); $this.find('ul').fadeOut(500); $this.find('img').stop().animate({ 'width' :'52px', 'height' :'52px', 'top' :'0px', 'left' :'0px', 'opacity' :'0.1' },5000,'easeOutBack'); $this.find('a:first,h2').removeClass('active'); } ); }); </script> </body> </html> i have been tryin for a long time to get both of the javascripts(for the thumbnail to main img swap and the navigational arrow swap) to work in synch http://***.com/nn.html it needs to be so that after clicking on a thumbnail then on an arrow, the correct image in the correct order appears. as of now they are running separately and one has no influence on the other. forgive me if im not being clear. i keep trying to replace the id that one script is looking for with the same id from the other but this will not work..why? please help me...believe me ive tried to help myself by reading all i can understand on the web about this but im in the dark thanks I'm sure people have answered this question multiple times but I have done all the research and tried everything but nothing works. My problem: I'm building a website for my gaming clan and I want a Javascript news ticker/date & time and a Javascript navigation bar. However, when I put these codes in, they don't run with each other on the same page. Possibly an onload issue but like I said, I tried all the solutions. Note: they use jquery. I'll post the html and javascript files as txt files since I can't attach them in their normal form. Index.txt is my HTML Sliding_effect.txt is the Javascript for the menubar Newsticker.txt is the Javascript for the ticker that goes at the bottom of the <body> The actual ticker.js code that runs with newsticker.js was too large to attach. It's 7000 lines long. Any help is appreciated Hi .. I should start off saying I dont know the first thing about java script programming. I have 3 scripts on one of my pages, the first script is for a slide animation, the second is a hover intent script and the third is a headline animation script. I know if I comment out the hover intent script, the first and third script work. So my question is how to get the hover intent script to work correctly and behave with the other 2 scripts on the page. I read your post on "on body load" or "runscripts" calls with 2 scripts but I could not find such calls in these 3 javascripts. The hover intent script does not do what I want it to do on any of the pages that I have installed it on. When you first load the page the menu items are sitting above the slideshow and when you hover your mouse over the navigation from left to right they sort of jump and its not until you get to the contact image at the end that the slideshow moves into the correct position and then if you go back and hover over the home image the slideshow jumps up and down. The three script page is http://www.kimberleywebdesign.com.au/test/reviews.html Thanks in advance for your valuable time. I have 2 different scripts which works fine by them self, but now I need to combine them, and don't know how... The first script is populating dependent selectboxes like this: Code: function getXMLHTTP() { //fuction to return the xml http object var xmlhttp=false; try{ xmlhttp=new XMLHttpRequest(); } catch(e) { try{ xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e1){ xmlhttp=false; } } } return xmlhttp; } function getState(countryId) { var strURL="js/searchRoundState.php?ccountry="+countryId; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('statediv').innerHTML=req.responseText; document.getElementById('citydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } function getCity(countryId,stateId) { var strURL="js/searchRoundClub.php?ccountry="+countryId+"&cstate="+stateId; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('citydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } function getCourse(countryId,stateId,courseId) { var strURL="js/searchRoundCourse.php?ccountry="+countryId+"&cstate="+stateId+"&ccourse="+courseId; var req = getXMLHTTP(); document.getElementById('coursediv').innerHTML ='<center><br><br><img src="images/ajax-loader3.gif"><br><br><br></center>'; if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('coursediv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } It gets the data from the selectfiled like this: Code: <select id="ccountry" onchange="getState(this.value);getCourse(this.value)" class="input_field"> <option value="1" selected>Test1</option> <option value="2" selected>Test2</option> </select> Now the other script is a ajax script which loads the page and gets called like this: Code: <select id="ccountry" onchange="ajaxcombo(\'ccountry\', \'contentarea\');" class="input_field"> <option value="ajax.php?ga=roundsearch&id=1" selected>Test1</option> <option value="ajax.php?ga=roundsearch&id=2" selected>Test1</option> </select> As you can see, the ajax part is called using a url and the selectpart is called by Value... Is there a way that the slectpart could be using the url instead af an "id"... Thanks in advance... I'm trying to run two javascript files on a web page and there appears to be a conflict. Im using InnerFade with JQuery which can be seen at: http://medienfreunde.com/lab/innerfade/ And Im using Lightbox2 which is at http://www.huddletogether.com/projec...box2/#download If I use them individually they work fine but as soon as I call them together the one won't work. I'm not fluent in javascript so I would really appreciate any help with this. Thanks. Hello, A client asked me to create this site with modals that each contain a small gallery. I used Colorbox to create the windows and Highslide for the galleries. See link; http://www.garrigan.net/Furryteeth/ Then he saw an example of a script named Mosaic and wanted it incorporated into the original design. Mosaic creates sliding boxes that pop up with captions when you rollover an image. Working from the base html file I got everything to work perfectly locally on my machine. After I uploaded everything to my site to test it out things went very wrong. See link; http://www.garrigan.net/Nakata/ Everything works until you click on one of the images to launch a gallery. Then the entire site seems to fall to pieces. Any idea what I did wrong or where I can correct my mistake? I am assuming there is a server issue since it works on my machine. Thanks for any help you can offer. These are the JQuery scripts I used; http://buildinternet.com/project/mosaic/ http://highslide.com/ http://colorpowered.com/colorbox/ |