Why do i allways have to click 2 times to fully execute javascript
Hi all experts,
I have a little javascript in which i change the source of a picture and resize it as well.
But on the browser i need to click 2 times. I would like it to be fully executed in 1 click.
On the first click it reloads the source.
On the second click it resizes the newly loaded source.
I have a little javascript in which i change the source of a picture and resize it as well.
But on the browser i need to click 2 times. I would like it to be fully executed in 1 click.
On the first click it reloads the source.
On the second click it resizes the newly loaded source.
function picsourceresize(spimg){
bigPic.removeAttribute("width");
bigPic.removeAttribute("height");
bigPic.src=spimg
var orwidth = bigPic.width;
var orheight = bigPic.height;
var maxwidth = 600;
var maxheight = 450;
if (bigPic.width/bigPic.height < maxwidth/maxheight)
{
var ratio = maxheight / orheight;
var newwidth = orwidth * ratio;
bigPic.setAttribute("height", '450px');
bigPic.setAttribute("width", newwidth+'px');
} else {
var ratio = maxwidth / orwidth;
var newheight = orheight * ratio;
bigPic.setAttribute("width", '600px');
bigPic.setAttribute("height", newheight+'px');
}
}<div id="BigPicDiv">
<img src="images/gshades/Z8408-23.jpg" id="bigPic" alt="MainPic" >
</div> <a href="#top">
<img
src="stills/2011-10/thumbs/FVD-010.jpg"
onClick="picsourceresize('stills/2011-10/FVD-010.jpg')"
id="Pic0"
alt="Pic0"
border="0"
width="67.5"
height="90"
/>
</a>
<a href="#top">
<img
src="stills/2011-10/thumbs/FVD-013.jpg"
onClick="picsourceresize('stills/2011-10/FVD-013.jpg')"
id="Pic1"
alt="Pic1"
border="0"
width="67.5"
height="90"
/>
</a>
<a href="#top">
<img
src="stills/mo201209/thumbs/JS12-010.jpg"
onClick="picsourceresize('stills/mo201209/JS12-010.jpg')"
id="Pic2"
alt="Pic2"
border="0"
width="58.5"
height="90"
/>
</a>
Ishaan Rawat
can you give me a live example or URL so that I can analyze better and see whats happening...
See if this js works http://jsbin.com/ufixar/2/edit
function picsourceresize(spimg){
var orwidth = bigPic.width;
var orheight = bigPic.height;
bigPic.removeAttribute("width");
bigPic.removeAttribute("height");
bigPic.src=spimg;
var maxwidth = 600;
var maxheight = 450;
var ratio=1;
if (bigPic.width/bigPic.height < maxwidth/maxheight)
{
ratio = maxheight / orheight;
var newwidth = orwidth * ratio;
bigPic.setAttribute("height", '450px');
bigPic.setAttribute("width", newwidth+'px');
} else {
ratio = maxwidth / orwidth;
var newheight = orheight * ratio;
bigPic.setAttribute("width", '600px');
bigPic.setAttribute("height", newheight+'px');
}
}ASKER
Hi,
below is the full code.
The function is being called starting from row 220.
Regards,
below is the full code.
The function is being called starting from row 220.
Regards,
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test 03 </title>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox/example1/colorbox.css" />
<link rel="stylesheet" type="text/css" href="scriptscss/jstyle01.css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function valid(o,w){
o.value = o.value.replace(valid.r[w],'');
}
valid.r={
'special':/[\W]/g,
'quotes':/['\''&'\"']/g,
'numbers':/[^\d]/g
}
</script>
<script language="JavaScript" type="text/javascript">
function picsourceresize(spimg){
bigPic.removeAttribute("width");
bigPic.removeAttribute("height");
bigPic.src=spimg
var orwidth = bigPic.width;
var orheight = bigPic.height;
var maxwidth = 600;
var maxheight = 450;
if (bigPic.width/bigPic.height < maxwidth/maxheight) // bigPic.width;
{
var ratio = maxheight / orheight;
var newwidth = orwidth * ratio;
bigPic.setAttribute("height", '450px');
bigPic.setAttribute("width", newwidth+'px');
} else {
var ratio = maxwidth / orwidth;
var newheight = orheight * ratio;
bigPic.setAttribute("width", '600px');
bigPic.setAttribute("height", newheight+'px');
}
}
function CngClassNP(obj){
bigPic.removeAttribute("width");
bigPic.removeAttribute("height");
}
function aaaCngClassBP(obj){
if (Lst) Lst.className='';
obj.className='adjusted';
Lst=obj;
}
function aaaCngClassNP(obj){
if (Lst) Lst.className='';
obj.className='noeffect';
Lst=obj;
}
</script>
<style type="text/css">
body {
background-color: #FFFFFF;
color: #9D9D9D;
font-family: Courier New, Courier, monospace;
font-size: 12px;
}
#proddetouterdiv {
position:absolute;
width:955px;
height:585px;
z-index:1;
left: 0px;
top: 0px;
}
#BigPicDiv {
position:absolute;
width:600px;
height:450px;
z-index:1;
}
#ColorsDivPic {
position:absolute;
width:355px;
height:450px;
z-index:2;
left: 600px;
top: 0px;
overflow:auto;
}
#proddetThumbsDiv {
position:absolute;
width:955px;
height:130px;
z-index:2;
left: 0px;
top: 452px;
}
img.adjusted {
-webkit-transform:scale(0.75);
}
img.noeffect {
-webkit-transform:scale(1);
}
</style>
</head>
<body >
<div id="proddetouterdiv">
<div id="BigPicDiv">
<img src="images/gshades/Z8408-23.jpg" id="bigPic" alt="MainPic" >
</div>
<div id="ColorsDivPic">
<p>
Z8408<br>
8" (20Cm) Empire Shade - (Reversible) (D20:h16:d13) <br> </p>
<form name="form1" method="post" target="mainFrame" action="11_add2basket.php?log=2&mi=cfmya&test=tralalala" >
<input type="hidden" name="artcode" id="artcode" value=Z8408>
<label for="iQTY">order</label>
<input style="width:50px" onKeyUp="valid(this,'numbers')" type="text" name="iQTY" id="iQTY">
<label for="iQTY">pieces</label>
<input style="width:50px" value = "order" type="submit" /> <br> <br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd1" value="1">
<label for="klrcode1">1: Gath. Cream Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd2" value="2">
<label for="klrcode2">2: Gath. Gold Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd3" value="3">
<label for="klrcode3">3: Gath. Black Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd4" value="4">
<label for="klrcode4">4: Gath. Grey Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd5" value="5">
<label for="klrcode5">5: Gath. Tt Red Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd6" value="6">
<label for="klrcode6">6: Gath. Fire Red _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd7" value="7">
<label for="klrcode7">7: Gath. Orange J Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd8" value="8">
<label for="klrcode8">8: Gath. Pearl Satin _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd10" value="10">
<label for="klrcode10">10: Gath. White Linen _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd11" value="11">
<label for="klrcode11">11: Gath. Naturel Linen _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd12" value="12">
<label for="klrcode12">12: Gath. Choco Linen _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd13" value="13">
<label for="klrcode13">13: Gath. Cream Stripes _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd14" value="14">
<label for="klrcode14">14: Gath. Orange Stripes _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd15" value="15">
<label for="klrcode15">15: Gath. Old Gold Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd16" value="16">
<label for="klrcode16">16: Gath. Magenta Satin _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd18" value="18">
<label for="klrcode18">18: Gath. Yellow Velvet _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd21" value="21">
<label for="klrcode21">21: Gath. Gr. Stripes _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd22" value="22">
<label for="klrcode22">22: Gath. Prune Silk _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd25" value="25">
<label for="klrcode25">25: Gath. Champagne Velvet _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd28" value="28">
<label for="klrcode28">28: Gath. Purple Velvet _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd29" value="29">
<label for="klrcode29">29: Gath. Green Velvet _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd30" value="30">
<label for="klrcode30">30: ETRO Paisley _ 101- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd31" value="31">
<label for="klrcode31">31: Air Force Satin _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd34" value="34">
<label for="klrcode34">34: Sage Satin _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd35" value="35">
<label for="klrcode35">35: Sable Satin _ 61- EUR</label>
<br>
<input type="radio" onMouseUp="document.forms['form1'].elements['iQTY'].focus();" name="klrcode" id="klrcd37" value="37">
<label for="klrcode37">37: Gath. Mokka Velvet _ 61- EUR</label>
<br>
<br>
</form>
</div>
<div id="proddetThumbsDiv">
<br>
<img src="" onClick="bigPic.src='';CngClassNP(bigPic)" alt="AltPic1" border="0" />
<a href="#top">
<img
src="stills/2011-10/thumbs/FVD-010.jpg"
onClick="picsourceresize('stills/2011-10/FVD-010.jpg')"
id="Pic0"
alt="Pic0"
border="0"
width="67.5"
height="90"
/>
</a>
<a href="#top">
<img
src="stills/2011-10/thumbs/FVD-013.jpg"
onClick="picsourceresize('stills/2011-10/FVD-013.jpg')"
id="Pic1"
alt="Pic1"
border="0"
width="67.5"
height="90"
/>
</a>
<a href="#top">
<img
src="stills/mo201209/thumbs/JS12-010.jpg"
onClick="picsourceresize('stills/mo201209/JS12-010.jpg')"
id="Pic2"
alt="Pic2"
border="0"
width="58.5"
height="90"
/>
</a>
<a href="#top">
<img
src="stills/mo201209/thumbs/JS12-028.jpg"
onClick="picsourceresize('stills/mo201209/JS12-028.jpg')"
id="Pic3"
alt="Pic3"
border="0"
width="60.136363636364"
height="90"
/>
</a>
<a href="#top">
<img
src="stills/mo201209/thumbs/JS12-050.jpg"
onClick="picsourceresize('stills/mo201209/JS12-050.jpg')"
id="Pic4"
alt="Pic4"
border="0"
width="90"
height="59.727272727273"
/>
</a>
<a href="#top">
<img
src="stills/mo201209/thumbs/JS12-068.jpg"
onClick="picsourceresize('stills/mo201209/JS12-068.jpg')"
id="Pic5"
alt="Pic5"
border="0"
width="60.136363636364"
height="90"
/>
</a>
<a href="#top">
<img
src="images/gshades/thZ8408-23.jpg"
onClick="bigPic.src='images/gshades/Z8408-23.jpg';CngClassNP(bigPic)"
id="Pic6"
alt="Pic6"
border="0"
/>
</a>
</div>
</div>
</body>
<script type="text/javascript" language="JavaScript">
// parent.$.fn.colorbox({width:1200, height:800});
document.forms['form1'].elements['iQTY'].focus();
</script>
</html>
Can you please upload this to your server.
ASKER
Hi,
sorry for this late reply, i wasn't at my desk until now.
It is placed here:
http://www.judeco.be/Judeco/EEtest20130604.php
there are 2 links on there with 2 examples
With Firefox:
opening in the colorbox, need to click 2 times for script to work
rightclicking and opning in new tab, need to click 2 times for script to work
with Internet Explorer:
opening in the colorbox, need to click 2 times for script to work
rightclicking and opning in new tab, ONLY loads the new picture source not even resizing
sorry for this late reply, i wasn't at my desk until now.
It is placed here:
http://www.judeco.be/Judeco/EEtest20130604.php
there are 2 links on there with 2 examples
With Firefox:
opening in the colorbox, need to click 2 times for script to work
rightclicking and opning in new tab, need to click 2 times for script to work
with Internet Explorer:
opening in the colorbox, need to click 2 times for script to work
rightclicking and opning in new tab, ONLY loads the new picture source not even resizing
Are you hand coding this?
Look at the two examples. The bottom one breaks. It looks like it's not handeling the extra, "CngClassNP(bigPic)"
Look at the two examples. The bottom one breaks. It looks like it's not handeling the extra, "CngClassNP(bigPic)"
<a href="#top">
<img
src="stills/mo201209/thumbs/JS12-068.jpg"
onClick="picsourceresize('stills/mo201209/JS12-068.jpg')"
id="Pic5"
alt="Pic5"
border="0"
width="60.136363636364"
height="90"
/>
</a>
<a href="#top">
<img
src="images/gshades/thZ8408-23.jpg"
onClick="bigPic.src='images/gshades/Z8408-23.jpg';CngClassNP(bigPic)"
id="Pic6"
alt="Pic6"
border="0"
/>
</a>ASKER
Hi,
I just use a standard dreamweaver CS5.5 for coding
I don't understand what you mean when you mean the bottom one breaks.
If you mean there are missing brackets they all seem to open and close.
picsourceresize is the script not working in 1 click
CngClassNP seems to be working from the first click.
On both examples picsourceresize is for the pictures with backgrounds
onClick="picsourceresize('
The far left, and far right picture-links (with white background)
onClick="bigPic.src='xxx.j
are just to reload and to remove any picture atributes
(on the second example there seems to be a missing thumbnail)
I just use a standard dreamweaver CS5.5 for coding
I don't understand what you mean when you mean the bottom one breaks.
If you mean there are missing brackets they all seem to open and close.
picsourceresize is the script not working in 1 click
CngClassNP seems to be working from the first click.
On both examples picsourceresize is for the pictures with backgrounds
onClick="picsourceresize('
The far left, and far right picture-links (with white background)
onClick="bigPic.src='xxx.j
are just to reload and to remove any picture atributes
(on the second example there seems to be a missing thumbnail)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I don't know why it works, but it works,
so i can't give any additional information to assist in understanding this solution
so i can't give any additional information to assist in understanding this solution