JavaScript - Newbie Needs Help Using Highslide Image Javascript With Ebay Listings
Hi, I am a Javascript newbie and I am trying to add a Javascript image application (called "HighSlide JS: http://highslide.com/#examples) to eBay listings. I am somewhat experienced with HTML and computers in general, but this javascript is all very confusing to me.
My question is quite broad: How can I get this HighSlides script to show my images on my eBay listings? I am having trouble figuring out how to upload images to FTP servers or something, so that the script can use my images. I have Windows 7, and I do have Expression Web, if that means anything! I would be extremely grateful for any help! Thanks in advance! Similar TutorialsQUESTION 1: Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction. Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings. I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image. So, let's say this is the URL: www.adomainname.com/image.jpg and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k. So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px. For an image that's 300 px x 500 px, it should remain as such. For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px. I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited. Note: The part that I am most interested in is in being able to detect the size / dimensions of the image. QUESTION 2: On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.) I am new to this forum and self taught (amateur) programmer. I am making my eBay template for items that I sell (vintage clothing). I use the auction management system Blackthorne. I am trying to make my images swap over like this seller: Image rollover i want to replicate. It is not difficult to this in most listings but because I use Blackthorne, I have to put tags rather than the exact url of the image in my template. for example, [[picture1]], [[picture2]], etc. I do have a script which works so that the user can click on the photo to change it but I would prefer it if they could mouseover. The script I have been given to use is on this link: picture show script Thanks in advance. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink1 } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages(my images here) </script> For the Links: <a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br> For the Image: <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hello, I am having problems trying to figure out how to do this. Basically, we are using a turn-key software package to run a website, and this software has included the Highslide software for image viewing. Here is an example: http://www.gem-tech.com/store/pc/vie...&idcategory=15 Notice the (3) images at the bottom. If you click one of them, the image will pop up and you can see the Highslide JS at work. Problem is, the store owner wants to change up the buttons so they look more like this website: http://morris-photographics.com/photography/ Off to the right corner, so they won't get in the way of the product, and the ability to put a description in is cool - that way when we have multiple types of similar products, we can label that particular photos to show what it is. Would anybody be willing to assist on helping me get this setup? I have found some 'Highslide Configurators' online but Im very confused on the whole process Hi How can I use this code so that it searches for multiple strings? if(document.URL.indexOf("strings here") > 0){ Regards Mark Hi guys, Started studying HTML , but having a bit of a problem creating <table>s. My instruction is to :"format the row in the table so that they alternate from white to grey. Within the grey rows format the text to white, Withing the white rows, format the text to black. I created a table for this in a previous exercise which I'll paste in the bottom. If I understand correctly, I need to use the table's <tr> element, but I don't know how it should be formatted. Any suggestions would be greatly appreciated. Here is what I got so far; <form action="" name="newsHeadlines"> <table border="0" width="100%"> <tr valign="top"> <td> <select name="headline" multiple="multiple" style="height: 93px"> <option onclick="document.newsHeadlines.news.value=newsItem1"> Investigation of building standards in quake zone </option> <option onclick="document.newsHeadlines.news.value=newsItem2"> Obama sees signs of economic progress </option> <option onclick="document.newsHeadlines.news.value=newsItem3"> Apple aplication downloads approach 1 Billion </option> <option onclick="document.newsHeadlines.news.value=newsItem4"> Jones, Braves beat winless Nationals 8-5 </option> <option onclick="document.newsHeadlines.news.value=newsItem5"> America's uninsured haven't shown collective power </option> </select> </td> <td> <textarea name="news" cols="50" rows="10" style="background-color : Transparent"></textarea> </td> </tr> </table> <script type="text/javascript"> /* <![CDATA[ */ /8 ]]> */ var newsItem1 = "Example1"; var newsItem2 = "Example2"; var newsItem3 = "Example3"; var newsItem4 = "Example4"; var newsItem5 = "Example5"; </script> </form> i am trying to create a simple counter that will start with a fixed number, say 5,000,000 and count up in increments of 1 every ten seconds with no end value set (infinitely).. This is for the non-profit I work for, and it is to show the number of bars of soap we have recycled to distribute to third world countries. Any help is greatly appreciated.
Hello, everyone i have a mini problem on my hands. I wrote a javascript file, which was linked to a html file. The issue here is that i cannot seem to load my table of contents. i have checked my syntax countless times and my compiler shows no error message. i hope anyone of you out there could help me out. thanks! here are the codes: unsconttxt.htm - <?xml version="1.0" encoding="UTF-8" ?> toctxt.js - /* Author: Date: Filename: toctxt.js function addEvent(object, evName, fnName, cap) { if (object.attachEvent) object.attachEvent("on" + evName, fnName); else if (object.addEventListener) object.addEventListener(evName, fnName, cap); } addEvent(window, "load", makeTOC, false); //the code to run makeTOC() function when the page loads var sections = new Array("h1", "h2", "h3", "h4", "h5", "h6"); //list of elements that act as section headings var sourceDoc; //document on which the TOC is based function makeTOC() { var TOC = document.getElementById("toc"); //html codes added to the TOC object. TOC.innerHTML = "<h1>Table of Contents</h1>"; var TOCList = document.createElement("ol"); //creates an element node for the ol element TOC.appendChild(TOCList); //appends the ol element to the table of contents element sourceDOC = document.getElementById("doc"); //generate list items containing section headings createList(sourceDoc, TOCList); } function levelNum(node) //this function returns the level number of the section heading or -1 if not a section heading. { for (var i = 0; i < sections.length; i++) { if (node.nodeName == sections[i].toUpperCase())return i; } return -1 //node is not a section heading } function createList(object, list) //this function creates the list items for the table of contents { for (var n = object.firstCHild; n != null; n = n.nextsibling) { //loop through all of the nodes within the object var nodeLevel = levelNum(n); //locates section headings within an object if (nodeLevel != -1) //locates section headings within an object { //node represents a section heading //creates a list item to match var listItem = document.createElement("li"); //text of the list item comes from the text of the section heading listItem.innerHTML = n.innerHTML; //text of the list item comes from the text of the section heading list.appendChild(listItem); //text of the list item comes from the text of the section heading } } } I am very new to JavaScript and am trying to create a page that calculate net annual pay and pops up an alert box that states what they will take home as well as pay in taxes. I have figured my way out of created the boxes to enter fields and even got a calculate button. I cannot figure out the code the actually calculate the taxes! Field one is for first name and referenced by id: num1 Field two is for last name and referenced by id: num2 Field three is enter gross salary with id: num3 I am using 20% for federal taxes and 10% for state taxes and need it to show up in an alert box... Any ideas? Thanks! Hi everyone, I'm currently stuck with a transition problem in my javascript (actually it's not mine) but since it's a little tricky to explain I've uploaded the page to a friend website so you can take a look at it. http://www.tanzstelle.net/simon/coel...red/index.html So when you hover between the link "car1" and "car2" the fading animation is absolutely correct but as soon as you hover lets say between "car2" and "car3" you'll see how during the transition "car1" shows up for a second - which is imho very annoying. Does anyone know how to tell js not to use "car1" between other transitions? I'm absolutely open to any new ideas but please remember I'm really a javascript/css newbie. Thank you. simon Hello I am totally new to javascript and am overwhelmed with this problem. I have tried a few different things but can't figure it out. I am trying to create a calculation of a total amount based on some fields. Here is what i am trying to do: I have five materials: Flex Vinyl, PSV, Rigid PSV, Vinyl Mesh, and Vinyl Banners Each material has a cost based on a total sq foot. Then two dropdown fields that add a certain amount. Here is what I have so far: Material [DROPDOWN MENU] Width [TEXT FIELD] Height [TEXT FIELD] Grommets [DROPDOWN] UV Coating [DROPDOWN] Total $ [TEXT FIELD AUTO-FILL AMOUNT] Is there a place that I can read about how to figure this out? I believe it would be something like: Width x Height = Total If Material One is selected then below numbers: If Total is greater than 1200 then Cost = .85 If Total is between 200 and 1200 then Cost = .50 If Total is between 20 and 49 then Cost = 1.00 If Less than 20 then Cost = 2.50 If PSV is selected then below numbers: If Total is greater than 1200 then Cost = .90 if Total is between 50 and 1200 then Cost = .75 ....and so on Amount = Cost x Width x Height + Grommets Selected Value + UV Coating Selected Value Any suggested reading/help that I can do to create this form? Hi There - I am a bit new to javascript and I am having a tough time coming to a solution to this problem I am having! I will try to explain.. first I have a call to a javascript button in a form of a form button: Code: <input type="submit" value=" Click This Button" onClick="fireMyPopup()"> Now the code for firemypopup() Code: function fireMyPopup() { myPopupRelocate(); document.getElementById("mypopup").style.display = "block"; document.body.onscroll = myPopupRelocate; window.onscroll = myPopupRelocate; } Now for the other function referenced there Code: Code: function myPopupRelocate() { var scrolledX, scrolledY; if( self.pageYOffset ) { scrolledX = self.pageXOffset; scrolledY = self.pageYOffset; } else if( document.documentElement && document.documentElement.scrollTop ) { scrolledX = document.documentElement.scrollLeft; scrolledY = document.documentElement.scrollTop; } else if( document.body ) { scrolledX = document.body.scrollLeft; scrolledY = document.body.scrollTop; } var centerX, centerY; if( self.innerHeight ) { centerX = self.innerWidth; centerY = self.innerHeight; } else if( document.documentElement && document.documentElement.clientHeight ) { centerX = document.documentElement.clientWidth; centerY = document.documentElement.clientHeight; } else if( document.body ) { centerX = document.body.clientWidth; centerY = document.body.clientHeight; } var leftOffset = scrolledX + (centerX - 850) / 2; var topOffset = scrolledY + (centerY - 200) / 2; document.getElementById("mypopup").style.top = topOffset + "px"; document.getElementById("mypopup").style.left = leftOffset + "px"; } As you might have guessed I am using this javascript to show a hidden div and keep it centered and following the screen scroll. This is working fine! It's the next part I am lost on! Here is the code for the div... Code: <div id="mypopup" name="mypopup" style="position: absolute; width: 800px; height: 400px; display: none; background: #ddd; border: 10px solid #000;"> <form action=(this will call a PL SQL package eventually)> <input type="hidden" name="CRN" value="'11111'"> <input type="hidden" name="TERM" value="1111"> <input type="hidden" name="CONF" value="y"> <input type="hidden" name="email1" value="1@aol.com"> <input type="hidden" name="email2" value="2@aol.com"> <input type="hidden" name="email3" value="3@aol.com"> <input type="hidden" name="activeemail" value="3"> <input type=''submit'' value='' Yes I Am 100% Sure'' onClick=''document.getElementById("mypopup").style.display="none"''>'); </form> </div> Ok now I will get to the nitty gritty here - the first issue is I would like to call the popup function and pass it a variable to signify which email is "active" amongst the hidden email fields. So when I call the popup function I want to say something like: Code: <input type="submit" value=" Click This Button" onClick="fireMyPopup(3)"> In a perfect world this 3 is passed along to fireMypopup and then somehow I would like to somehow change the active email hidden field to 3 as well. So my question is how would I change the code I provided to help me to figure out which email is active in the div. I am open to page refreshes etc, just has to be seemless i suppose. What am I trying to do? To sum it up I am printing an html form with lets say 15 rows. Each row has a column with an "email" button - which is this submit button. This submit button opens the "popup" or shows the div. Depending on which button is clicked I need to determine which email to send the email to. The popup window will be a simple form with 2 text fields and a submit button (which will call a PLSQL script to send the email) - but I need to know which hidden field email is the one that represents the click made. So the email gets sent to the proper email address :-) I am not opposed to new ways to do this - but the one constant is that these hidden fields containing all emails will be there. So if theres 15 emails, there will be 15 hidden fields + 1 for the active indicator (unless theres a better way) Thanks in advance - I am super confused! :-) - Jeff I have been told that what I want to accomplish can be done with javascript. I have never used it, so I am at this forums mercy. I basically have to HTML inputs, the first are simple radio buttons, Yes and No. If no is checked (which is selected by default), then I want the 2nd input to be invisible to the user. Unfortunately I am not the original developer of the code. I have been asked to complete this in a very short amount of time. From the looks of the code, it looks like the condition will have to hide the entire table row with the id of 'voiceintrorow' if radio button 'playintro' with the value of 0 is checked. Here is my code. <tr id="playIntroRow"> <td class="editLabel"><span>*</span>Play Intro:</td> <td>Yes<input type="radio" name="playintro" value="1" /> No<input type="radio" name="playintro" value="0" checked /></td> </tr> //Hide this table row if the above radio button is checked NO <tr id="voiceIntroRow"> <td class="editLabel"><span>*</span>Intro Message:</td> <td><cfscript>voiceIntroRenderer.Render();</cfscript></td> </tr> Iguess javascript can accomplish this, but I don't know. I hope I posted this question correctly. I have a script but the script links to the email link, I need it to link the email but I also want to add the image of the email for people who do not have JS. How would I do this? Code: <script type="text/javascript" language="javascript"> <!-- // Email obfuscator script 2.1 by Tim Williams, University of Arizona // Random encryption key feature by Andrew Moulden, Site Engineering Ltd // This code is freeware provided these four comment lines remain intact // A wizard to generate this code is at http://www.jottings.com/obfuscator/ { coded = "gUivfkUiz@Vzz38CfC.3ip.Uj" key = "gOoyt8wF74qDiElQcJTb6KXhNpS3skn510ueAfLV9BaHZxdGmrIW2CjvRYPUzM" shift=coded.length link="" for (i=0; i<coded.length; i++) { if (key.indexOf(coded.charAt(i))==-1) { ltr = coded.charAt(i) link += (ltr) } else { ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length link += (key.charAt(ltr)) } } document.write("<a href='mailto:"+link+"'>"+link+"</a>") } Hello, i'm newbie on javascript. I'm not go to any programming college, but i really want to learn about java script. So my work here is not any assignment or homework. I try to learn javasript so i encourage myself to enter this community. I made this script & form but i have question: 1. How to ceiling the result? ex. if i got result 12.3333 then i prefer set it as 13 2. how to make maximum 2 decimal on it? ex. if i got result 12.3333 then i prefer set it as 12.33 3. i already attach this script to my website, why it always reset automatically after i click "calculate"? i want the aplication didn't reset by itself, somebody can help and explain me why? Thank you very much. Here is the script & form: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JSLEARN</title> </head> <SCRIPT language = "javascript"> var currency_rates = new Array(); currency_rates["GBP"]= 1.60132; currency_rates["CAD"]= 1.00002; currency_rates["EUR"]= 1.39752; currency_rates["AUD"]= 1.04824; currency_rates["JPY"]= 0.01315; function getCurrencyRates() { var currencyRates=0; var theForm = document.forms["jslearnform"]; var selectedCurrency = theForm.elements["currency"]; currencyRates = currency_rates[selectedCurrency.value]; return currencyRates; } function calculateTotal() { A = parseFloat(document.jslearnform.insert.value); X = A * getCurrencyRates() document.jslearnform.total_USD.value = X; } </SCRIPT> <body> <form name="jslearnform" method="post" action=""> <table width="66%" border="0" id="form_table"> <tr> <th width="41%"> <p>Insert ›</p></th> <td width="59%"><p> $ <input type="text" size="7" id="insert" name="insert"> <select id="currency" name="currency" onchange="calculateTotal()"> <option value"GBP">GBP</option> <option value"CAD">CAD</option> <option value"EUR">EUR</option> <option value"AUD">AUD</option> <option value"JPY">JPY</option> </select> <br> </p></td> </tr> <tr> <th>TOTAL ›</th> <td><strong>US$</strong> <input type="text" style="background-color: #DCDDDD;" size="14" id="total_USD" name="total_ USD" value="" /></td> </tr> <tr> <th> </th> <td> <input type="button" value="Calculate" onClick = "javascript:calculateTotal()"> <input type="reset" value="Reset"> </td> </tr> </table> </form> </body> Hello, Actually i know nothing about javascript. i have form and i need help to make javascript this is the form: </head> <SCRIPT language = "javascript"> function checkTotal() { function calculate() { A = parseFloat(document.form1.Qty.value); B = document.form1.selection.value; ---> 'please help i don't know the script command about onClick' and onChange combination' C = (A + B) * document.form1.total.value = C; } </SCRIPT> <body> <form name="form1" method="post" action=""> <table width="66%" border="0" id="form_table"> <caption> My Form </caption> <tr> <th width="41%"> <p>Qty ›</p></th> <td width="59%"><p> <input type="text" size="7" name="Qty"> <select name="selection" id="selection" onChange='Value'> <option value"1.00">Doll 1</option> <option value"2.00">Doll 2</option> <option value"3.00">Doll 3</option> <option value"4.00">Doll 4</option> </select> <br> Enter Qty and selection</p></td> </tr> <tr> <th>Merchandise ›</th> <td> <p> <input type="radio" name="None" value="0.00" onClick=""> None<br> <input type="radio" name="Key Chain 1" value="2.00" onClick=""checked> Key Chain 1<br> <input type="radio" name="Key Chain 2" value="3.00" onClick="" /> Key Chain 2</p></td> </tr> <tr> <th>Additional ›</th> <td><input type="checkbox" name="Story Book" value="4.00" onClick="" checked="checked" /> Story Book <br> <input type="checkbox" name="Mug" value="3.00" onClick="" /> Mug <br></td> </tr> <tr> <th>TOTAL›</th> <td><input type="text" style="background-color: #DCDDDD;" size="17" value="" name="Total" /></td> </tr> <tr> <th> </th> <td> <input type="submit" name="submit" value="Calculate" onClick = "javascript:calculate()"> <input type="reset" value="Reset"> </td> </tr> </table> </form> </body> </html> i need to get result from TOTAL checkout(input text) that sum from the value of options above (dropdown menu, checkbox, and radio button) multiplied by tax (4%) Coding master please help. Thank you very much. Hi, I am just beginning out with Javascript and trying to complete a simple login page. Clicking on the Login button should bring up a message 'Access authorised' or 'Access denied' in the 'output' div of the page. Unfortunately only 'Access Denied' displays, even if the password entered is correct. There are no messages displayed in the Error Console. Any advice greatly appreciated! Code: <html> <head> <title>Function Example</title> <script language="javascript" type="text/javascript"> function isAccessAuthorised(enteredPassword) { var result; if(enteredPassword=="password") { result=true; } else { result=false; } return result; } function buttonClicked() { var isAuthorised = isAccessAuthorised("enteredPassword").value; if(isAuthorised==true) { document.getElementById("output").innerHTML=<p>Access authorised</p>; } else { document.getElementById("output").innerHTML=<p>Access denied</p>; } } </script> </head> <body> <form> <input type="text" id="username" /> <br/> <input type="text" id="enteredPassword" /> <br/> <input type="button" onClick="buttonClicked()" value="Login"> </form> <div id="output"> </div> </body> </html> Hi I am populating the textboxes using a button . The code is Code: <input type="button" name="bt_autoFill" id="id_autoFill" value="Auto Fill" onclick="fillComponents()"/> this calls the javascript function Code: <script type="text/javascript"> function fillComponents() { document.getElementById("id_name").setAttribute("value","zedan"); document.getElementById("id_country").setAttribute("value","USA"); document.getElementById("id_Address").setAttribute("value","South Boulev."); } </script> Now the code works fine when i click it the first time. However if i change a value or erase something in the textboxes the function dosnt work. all the elements are text boxes. Could you tell me what I am doing wrong ?? why doesnt it work the second time?? I have a few buttons on a page I'm developing and I want the onclick event to call a javascript function in an external file and execute it. I would like to be able to pass a parameter to that function and then either have the function take the user to a new URL or make changes to the webpage content. Initially (just to test) I had inline javascript that caused an alert to popup. That worked fine. Next I took the inline code and put it in a function in an external javascript file that was referenced in the HTML: Code: <script type="text/javascript" src="../assets/js/ews-js.js"></script> <a link="www.xx.com" class="sk-shop-button" onClick="onclick_shop_button">Shop for Supplies</a> The function is as follows: Code: function onclick_shop_button() { window.alert('Life Is Good!'); return false; } When I attempt to call it this way nothing happens. I'm guessing I should not be using a link there since I have to build the URL inside the Javascript (for now though the Javascript is just showing an alert). In one use case I want to be able to pass a parameter which would contain a product name so the function could load the correct webpage. So the function would have to build the URL using the product name as part of the URL then load that page. In a different use case (for a different button) the user would click on an EDIT button that would then update parts of the webpage allowing the user to click on areas to delete content. I am not sure how to implement either use case. I know I can use CSS to modify the look of the webpage and then use subsequent onclick events to do the deleting but am not sure how to delete HTML from within Javascript. Same with how to go to a new URL from within Javascript. Finally I am not sure why the inline Javascript works but the external does not. Any help would be GREATLY appreciated! |