Jump to content

Javascript not working on IE but works on others


sigung_q

Recommended Posts

Hi folks!

 

OK, here's the scoop. I have the following code (which is part of a larger HTML file):

 

 

<img id="pic_no3" onmouseover="expand_pic3()" onmouseout="norm_pic3()" class="xr_ap" src="member_album3_htm_files/picno2.jpg" alt="" title="Dashka sitting on a log." style="left: 0112px; top: 00000860px; width: 147px; height: 220px;"/>

 

<img id="pic_no1" onmouseover="expand_pic1()" onmouseout="norm_pic1()" class="xr_ap" src="member_album3_htm_files/picno1.jpg" alt="" title="Amina in the hay." style="left: 0355px; top: 00000610px; width: 330px; height: 220px;"/><script>function expand_pic3(){document.getElementById("pic_no3").style="left: 0112px; top: 00000860px; width: 294px; height: 440px;"}function norm_pic3(){document.getElementById("pic_no3").style="left: 0112px; top: 00000860px; width: 147px; height: 220px;"}function expand_pic1(){document.getElementById("pic_no1").style="left: 0335px; top: 00000610px; width: 660px; height: 440px;"}function norm_pic1(){document.getElementById("pic_no1").style="left: 0355px; top: 00000610px; width: 330px; height: 220px;"}</script>

 

Basically, this doubles the size of the photo when the mouse is over the photo, and when the mouse leaves the photo, it goes back to normal size. This works fine on Firefox, but not on IE. I'm thinking it may be some setups in IE, but not sure. Any thoughts anyone?

 

Thanx in advance - Q. :-)

Link to comment
Share on other sites

I don't see any obvious errors, although I wouldn't use leading zeros on the numbers for fear the browser would interpret that as octal numbers. that might be problem, 0860 is not a valid octal number. Otherwise, check IE's error console for error messages.

Link to comment
Share on other sites

OK, here's the scoop. I have never seen a Javascript example where the style was set in one long string.

 

document.getElementById(id).style is an object -- not a string.

 

If you break it up it works fine.

 

http://www.w3schools.com/jsref/dom_obj_style.asp

function norm_pic3(){var pic = document.getElementById("pic_no3");pic.style.left = '112px'; pic.style.top = '860px'; pic.style.width = '147px'; pic.style.height = '220px';}
Link to comment
Share on other sites

 

OK, here's the scoop. I have never seen a Javascript example where the style was set in one long string.

 

 

Same here. I was thinking maybe it was an alternative way in JavaScript of styling the element in an 'inline' styling way like <div style="width: 100px; height: 100px; margin: 0 auto"></div>

Link to comment
Share on other sites

Hi Davej,

 

I tried what you suggested, by breaking it all out. It still acts the same. I can resize on Firefox, but not on IE. This is part of the code for a picture album of sorts. Another problem, is that as pictures are added, I have programmed it to push the other pictures to the right, and down rows as each row fills up. However, it doesn't seem to matter what coordinates I tell the pictures to take (left and top), they seem to get placed rather "willy-nilly" all over the page. I can place pictures statically with a web page builder, and they turn out perfect, yet when I use PHP to upload a picture, and it places the HTML code into the file for positioning the picture, the browsers seem to ignore it. I've even used winmerge to compare the code between the two, and it's identical. It makes no sense to me why one set of code works, and another set of identical code does not. I'm quite new at this whole HTML stuff, so please have patients. Any suggestions?

Link to comment
Share on other sites

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>.xr_ap{border:1px solid #555;/*position:relative;*/}</style></head><body><img id="pic_no3" onmouseover="expand_pic3()" onmouseout="norm_pic3()" class="xr_ap" src="member_album3_htm_files/picno2.jpg" alt="alt3" title="Dashka sitting on a log" style="left: 112px; top: 860px; width: 147px; height: 220px;"/><script>function expand_pic3(){var pic = document.getElementById("pic_no3");pic.style.left = '112px'; pic.style.top = '860px'; pic.style.width = '294px'; pic.style.height = '440px';}function norm_pic3(){var pic = document.getElementById("pic_no3");pic.style.left = '112px'; pic.style.top = '860px'; pic.style.width = '147px'; pic.style.height = '220px';}</script></body></html>

This works in IE11.

Link to comment
Share on other sites

Have you considered non js all css3

<!DOCTYPE HTML><html>    <head>        <title>Untitled Document</title>        <style type="text/css">            html, body{                height:100%;                padding:0;                margin:0;            }            #wrapper {width: 960px; margin: 0 auto; background-color: #ccc;}            #container {margin: 0 8px; padding-bottom: 480px;}            #container p {text-align: justify;}            .image_enlarge_container {overflow:hidden;}            .image_enlarge_container img:nth-of-type(odd) {float:left;}            .image_enlarge_container img:nth-of-type(even) {float:right;}            .image_enlarge_container img {max-width: 200px; margin: 0.5em;  }            .image_enlarge_container img:hover {                transform:scale(2.5,2.5); /*control img sizing by scale*/            }            .image_enlarge_container img:nth-of-type(odd):hover {transform-origin:0 0;} /* expand img from left*/            .image_enlarge_container img:nth-of-type(even):hover { transform-origin:100% 0;}/* expand img from right*/            .image_enlarge_container p {clear: both;            }        </style>    </head>    <body>        <div id="wrapper">            <div id="container" class="image_enlarge_container">                <p><img src="../image2.jpg" alt="bama" /><img src="../images/mod_jq4.jpg" alt="bama" />In order to build a shared view of what can be improved, the components                    and priorities for the change program while those at the coal face don't                    have sufficient view of the overall goals. Big is no longer impregnable whether                    the organization's core competences are fully in line, given market realities                    presentation of the process flow should culminate in idea generation. Defensive                    reasoning, the doom loop and doom zoom empowerment of all personnel, not                    just key operatives, as knowledge is fragmented into specialities. Taking                    full cognizance of organizational learning parameters and principles, to                    ensure that non-operating cash outflows are assessed. Exploitation of core                    competencies as an essential enabler, an important ingredient of business                    process reengineering to focus on improvement, not cost.</p>                <p>Measure the process, not the people. Building flexibility through spreading                    knowledge and self-organization, the components and priorities for the change                    program motivating participants and capturing their expectations. To ensure                    that non-operating cash outflows are assessed.</p>                <p><img src="../images/mod_jq4.jpg" alt="bama" /><img src="../image2.jpg" alt="bama" />In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>                <p>In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>                <p><img src="../images/mod_jq4.jpg" alt="bama" /><img src="../mage2.jpg" alt="bama" />In order to build a shared view of what can be improved, to experience a                    profound paradigm shift, as knowledge is fragmented into specialities. The                    vitality of conceptual synergies is of supreme importance by adopting project                    appraisal through incremental cash flow analysis, combined with optimal use                    of human resources. While those at the coal face don't have sufficient view                    of the overall goals.</p>            </div>        </div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...