Solved

Why do i allways have to click 2 times to fully execute javascript

Posted on 2013-06-03
9
171 Views
Last Modified: 2013-06-17
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.



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');					

    }

}

Open in new window



<div id="BigPicDiv">
	<img src="images/gshades/Z8408-23.jpg" id="bigPic" alt="MainPic" >
</div>

Open in new window


                        <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>

Open in new window

0
Comment
Question by:24Carat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39215741
can you give me a live example or URL so that I can analyze better and see whats happening...
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39216101
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');					

    }

}

Open in new window

0
 

Author Comment

by:24Carat
ID: 39216653
Hi,

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>

Open in new window

0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39216680
Can you please upload this to your server.
0
 

Author Comment

by:24Carat
ID: 39218598
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
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39219570
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)"

   <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>

Open in new window

0
 

Author Comment

by:24Carat
ID: 39222172
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('stills/mo201209/JS12-068.jpg')"

The far left, and far right picture-links (with white background)
onClick="bigPic.src='xxx.jpg';CngClassNP(bigPic)"
are just to reload and to remove any picture atributes

(on the second example there seems to be a missing thumbnail)
0
 

Accepted Solution

by:
24Carat earned 0 total points
ID: 39243758
Hi,

I 've found the sollution.

So i've just put some alerts in between the codes to check if the height and width values werer passed thru from the beginning. And i was surprised that at that point it did execute in one click.

So i don't know why.

But splitting it up and putting a setTimeout in there fixed it.

onClick="bigPic.src='stills/mo201209/JS12-075.jpg';setTimeout(picsourceresize, 500)"

Regards,
0
 

Author Closing Comment

by:24Carat
ID: 39252628
I don't know why it works, but it works,
 so i can't give any additional information to assist in understanding this solution
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Trying to use &NBSP to line up 3 rows 12 39
iframe stay to the left of page 5 30
Natural height and jquery 6 40
Why is my select returning NaN 23 39
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question