473,849 Members | 1,946 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Javascript Style Properties for Dynamic Images in Safari

I am having a problem with style properties for dynamic images in Mac OS X
Safari. By dymanic images, I mean images allocated with the javascript 'new
Image()' call.

With static images (created with the html <img> tag), I can make the image
visible or not, i.e. '<img style="visibili ty='hidden'" src='xxxx'/>'. But if
I create the image dynamically with javascript: new Image() then try to
modify the style, Safari chokes, and the Debug Javascript Console indicates
'Undefined value' at that point.

The following is a short test I put together to demonstrate the problem:

<html>
<head>
<title>test</title>
<script type="text/javascript">
function swap(){
if (this.id == 'image1') {
this.style.visi bility = 'hidden';
var img2 = document.getEle mentById('image 2');
img2.style.visi bility = 'visible';
}
if (this.id == 'image2') {
this.style.visi bility = 'hidden';
var img1 = document.getEle mentById('image 1');
img1.style.visi bility = 'visible';
}
}

function makeImgs(){
var container1 = document.getEle mentById('cont1 ');
var container2 = document.getEle mentById('cont2 ');
var img1 = new Image(150,130);
var img2 = new Image(150,130);
img1.id = 'image1';
img1.alt = 'image1';
img1.src = 'image1.gif';
img1.onclick = swap;
img1.style.visi bility = 'visible';

img2.id = 'image2';
img2.alt = 'image2';
img2.src = 'image2.gif';
img2.onclick = swap;
img1.style.visi bility = 'hidden';

container1.appe ndChild(img1);
container2.appe ndChild(img2);
}
</script>
</head>
<body onload="makeImg s()">
<div id="cont1" style="position : absolute; top: 100px; left: 100px;">
</div>
<div id="cont2" style="position : absolute; top: 100px; left: 300px;">
</div>
</body>
</html>

Of course you need to provide pictures for image1.gif and image2.gif in the
same folder as this file. It has been tested to work in Firefox, Internet
Explorer, and Opera, but it fails in Safari. After loading this in Safari,
you will find in the Debug Javascript Console an Undefined Value error
occurs at the statement "img1.style.vis ibility = 'visible'" in "function
makeImgs()" The problem doesn't seem to be with just .style.visibilt y. I
also tested with .style.border and Safari failed with that.

Has anyone dealt with this Safari issue before and hopefully found a
solution?

Thanks in advance,
Joe
Mar 31 '06 #1
3 6701
Joe Cox wrote:
I am having a problem with style properties for dynamic images in Mac OS X
Safari. By dymanic images, I mean images allocated with the javascript 'new
Image()' call.
new Image() is not W3C DOM compliant, though I guess it's DOM 0. It seems
Safari creates an image object, but errors when you try to do anything with
it. Use W3C document.create Element() instead.

[...]
function makeImgs(){
var container1 = document.getEle mentById('cont1 ');
var container2 = document.getEle mentById('cont2 ');
var img1 = new Image(150,130);
Replace with:

var img1 = document.create Element('img');
img1.style.heig ht = '150px';
img1.style.widt h = '130px';

var img2 = new Image(150,130);


Replace as above with createElement() .

[...]

--
Rob
Mar 31 '06 #2
Joe
Thanks. Actually, in the first version of my application I did use
document.create Element('img') statements. But, I read somewhere that if I
had many images I planned to swap out dynamically I could improve
performance by pre-caching from the server to the client with new Image()
calls. I guess this is not an option if I intend to support Safari browsers.

Trying to maintain cross browser compatibility is an extreme pain.

Thanks again.
Joe

"RobG" <rg***@iinet.ne t.au> wrote in message
news:44******** **************@ per-qv1-newsreader-01.iinet.net.au ...
Joe Cox wrote:
I am having a problem with style properties for dynamic images in Mac OS
X Safari. By dymanic images, I mean images allocated with the javascript
'new Image()' call.


new Image() is not W3C DOM compliant, though I guess it's DOM 0. It seems
Safari creates an image object, but errors when you try to do anything
with it. Use W3C document.create Element() instead.

[...]
function makeImgs(){
var container1 = document.getEle mentById('cont1 ');
var container2 = document.getEle mentById('cont2 ');
var img1 = new Image(150,130);


Replace with:

var img1 = document.create Element('img');
img1.style.heig ht = '150px';
img1.style.widt h = '130px';

var img2 = new Image(150,130);


Replace as above with createElement() .

[...]

--
Rob

Mar 31 '06 #3
Joe wrote:
Thanks. Actually, in the first version of my application I did use
document.create Element('img') statements. But, I read somewhere that if I
had many images I planned to swap out dynamically I could improve
performance by pre-caching from the server to the client with new Image()
calls. I guess this is not an option if I intend to support Safari browsers.
If you are doing this for caching, then there is no difference between new
Image and createElement(' img') - both create a DOM image object and
assigning a src attribute will load the image.

Trying to maintain cross browser compatibility is an extreme pain.


new Image is not a W3C method, so if you just use createElement you are
standards compliant and cross-browser. You might consider testing for
createElement and use new Image as a fall-back, but only if support for
version 4 browsers matters.

The W3C DOM HTML spec has a HTMLImageElemen t interface, but it only has
properties, not methods.

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-17701901>
[...]

--
Rob
Mar 31 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2696
by: loveshack | last post by:
Can anyone help me please (i am quite a novice, but having fun learning). Im not sure if this is an ASP problem, a javascript problem or a browser problem. Firstly, everything i have written works fine in IE7 and beta IE8. My pages do not work however in Safari or Firefox, and please dont beat me, but i use Frontpage to write my site, and i use iframes as ive not discovered how to do this any differently! So the issue is this, i have a...
0
9895
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9741
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11008
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10666
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
7899
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5929
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4545
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4140
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3177
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.