taggs74
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by taggs74
-
-
Dude, you are a hero.....works perfectly...
as you can tell I'm not a programmer and certainly need to increase my knowledge....but "playing" certainly helps...
thanks so much justsomeguy
-
I'm still struggling with the line
$("#prod_menu_image_1").on("click", currentDiv(imageindex1));
to get the element on click to change......
any help is much appricated...
-
Thank you justsomeguy that makes a lot more sense of what is going on. I had a little look at .bind() and read, as iwato says, that it is now deprecated, so started looking at .on() but to no avail. I am just a newbie so please be patient with my lack of coding skills.
dsonesuk here is my code (I think I have managed to anonymise it)
Quote<!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>
<title>Shop</title>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head><body>
<!--#include virtual="/includes/header.html" -->
<!--#include virtual="/includes/navigation.html" --><table width="1000px" align="center" border="1">
<tr>
<td class="style_shop_text" colspan="3">
<a href="/shop/shop_prod1_menu_1.shtml">
<img alt="Product 1" src="/images/site/shop/prod1.jpg"
</a>
</td>
</tr><div class="w3-content" style="max-width:1000px">
<tr>
<td style="width: 333px" valign="top">
<P class="style_shop_text"></br>
Product - £11</br></br>
Dimensions : 5cm (approx)</br></br>
BLAH BLAH BLAH</br>
</P>
</td>
<td valign="top" align="center" valign="top" colspan="2">
<img class="mySlides" src="/images/work/prod 1-1.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 1-2.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 1-3.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 2-1.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 2-2.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 2-3.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 3-1.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 3-2.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 3-3.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 4-1.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 4-2.jpg" width="400" height="400" alt="Product 1">
<img class="mySlides" src="/images/work/prod 4-3.jpg" width="400" height="400" alt="Product 1">
</td>
</tr>
<tr>
<td>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="xxxxxxxxxxx">
<table>
<tr>
<td>
<input type="hidden" name="on0" value="Product_combo">
</td>
</tr>
<tr>
<td>
<select name="os0" id="Product_combo">
<option value="Product 1-1" data-img-index="0" data-src1="/images/work/prod 1-1.jpg" data-src2="/images/work/prod 1-2.jpg" data-src3="/images/work/prod 1-3.jpg">Product 1 £11.00 GBP</option>
<option value="Product 1-2" data-img-index="3" data-src1="/images/work/prod 2-1.jpg" data-src2="/images/work/prod 2-2.jpg" data-src3="/images/work/prod 2-3.jpg">Product 2 £11.00 GBP</option>
<option value="Product 1-3" data-img-index="6" data-src1="/images/work/prod 3-1.jpg" data-src2="/images/work/prod 3-2.jpg" data-src3="/images/work/prod 3-3.jpg">Product 3 £11.00 GBP</option>
<option value="Product 1-4" data-img-index="9" data-src1="/images/work/prod 4-1.jpg" data-src2="/images/work/prod 4-2.jpg" data-src3="/images/work/prod 4-3.jpg">Product 4 £11.00 GBP</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="http://www.mywebsite.co.uk/images/site/button_add_to.jpg" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="xxxxxxxxxxxxxx">
<input type="hidden" name="display" value="1">
<input type="image" src="http://www.mywebsite.co.uk/images/site/button_view_cart.jpg" border="0" name="submit" alt="View Shopping basket">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</td>
<div class="w3-row-padding w3-section">
<td colspan="2" valign="top">
<table width="100%" border="0" valign="top">
<tr>
<div class="w3-col s4" valign="top">
<td style="width:33%" align="center">
<img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_1" height="200" src="/images/work/product 1-1.jpg" width="200" alt="Product" onclick="currentDiv(1)">
</td>
</div>
<div class="w3-col s4" valign="top">
<td style="width:33%" align="center">
<img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_2" height="200" src="/images/work/product 1-2.jpg" width="200" alt="Product" onclick="currentDiv(2)">
</td>
</div>
<div class="w3-col s4" valign="top">
<td style="width:33%" align="center">
<img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_3" height="200" src="/images/work/product 1-3.jpg" width="200" alt="Product" onclick="currentDiv(3)">
</td>
</div>
</tr>
</table>
</td>
</div>
<tr>
<td colspan="3">
</BR>
</td>
</tr>
</div>
</table><script>
$("#Product_combo").on('change', function(){
document.getElementById("prod_menu_image_1").src = $(this).find(":selected").attr("data-src1");
document.getElementById("prod_menu_image_2").src = $(this).find(":selected").attr("data-src2");
document.getElementById("prod_menu_image_3").src = $(this).find(":selected").attr("data-src3");
imageindex1=parseFloat($(this).find(":selected").attr("data-img-index")) +1;
imageindex2=parseFloat($(this).find(":selected").attr("data-img-index")) +2;
imageindex3=parseFloat($(this).find(":selected").attr("data-img-index")) +3;
$("#prod_menu_image_1").on("click", currentDiv(imageindex1));
$("#prod_menu_image_1").on("click", currentDiv(imageindex2));
$("#prod_menu_image_1").on("click", currentDiv(imageindex3));
});var slideIndex = 1;
showDivs(slideIndex);function plusDivs(n) {
showDivs(slideIndex += n);
}function currentDiv(n) {
showDivs(slideIndex = n);
}function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("product_slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace("w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script><!--#include virtual="/includes/footer.html" -->
</body>
</html>
-
if I use
document.getElementById("menu_image_1").onclick = currentDiv(1);
the page works fine and passes parameter with my function running correctly. I can change "currentDiv(to any number in my index )" and all is good.
the variable "this" is taken from another element that "helps" determine the parameter passed to the function.
My problem is, I need to change calculate the argument before it is passed.
-
Hi,
I'm having a problem changing my image onclick attribute. I think it is a syntax issue around the var imageindex1 but I'm not sure. I think the error is with line 3 because if I take it out the page runs without error albeit not to the desired effect. Any help is much appreciated.
document.getElementById("menu_image_1").src = $(this).find(":selected").attr("data-src1");
imageindex1=parseFloat($(this).find(":selected").attr("data-img-index")) +1
document.getElementById("menu_image_1").onclick = currentDiv(imageindex1);Many thanks
onclick function call with parameters
in JavaScript
Posted
Thanks so much dsonesuk. Your Code looks alot cleaner than mine and also could well make it easier for me to add extra data, if needed, later on.
spaces in file names noted.
Cheers dude!