473,837 Members | 1,551 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

question about <div> tag switching, browser conformity

Is there a <a href="javasc... approach to switch between two images
inside a div tag so it doesn't slightly flicker when clicked on, and
transitions between images smoothly in Netscape? I can get something to
work in IE, but in Netscape there is a slight but obvious flicker. Is
there some other way to do this or some solution to making this work?
Try my Google referenced images below in IE and Netscape/Firefox and
see what I am talking about!


<script>
function image1()
{
document.getEle mentById("image _display").inne rHTML = "<img
src=http://www.google.com/images/logo.gif>"
}

function image2()
{
document.getEle mentById("image _display").inne rHTML = "<img
src=http://www.google.com/intl/en_ALL/images/images_hp.gif>"
}
</script>

<br><a href="javascrip t:image1();">Im age One</a><br>
<a href="javascrip t:image2();">Im age Two</a>
<div id=image_displa y></div>

Jul 23 '05 #1
5 1367
an idea:
if the flickering bothers you so much, you may consider add a quick
fade out effect on image1 and a quick fade in effect for image2

Jul 23 '05 #2
or try to use style.display=' block' or 'none' and see if it works

Jul 23 '05 #3
On 29 Jan 2005 22:29:26 -0800 xi**********@gm ail.com wrote:
or try to use style.display=' block' or 'none' and see if it works

The flickering problem seems to be a trait of firefox.
When ever you do onmouseover or onclick, the flickering happens.
Even with a "block" or "none". Makes no difference.
Jul 23 '05 #4
rf
"Julia Briggs" <ju*******@yaho o.com> wrote
Is there a <a href="javasc... approach to switch between two images
inside a div tag so it doesn't slightly flicker when clicked on, and
transitions between images smoothly in Netscape? I can get something to
work in IE, but in Netscape there is a slight but obvious flicker. Is
there some other way to do this or some solution to making this work?


<snip code>

What an odd way to "swap images". You are not, in fact, swapping between two
images, you are swapping between two different "contents" for the div. The
browser can only assume that the entire bit of the DOM inside that div has
changed and so does a complet re-layout of the entire document. FF seems to
do a couple of extra viewport paints, hence the flicker.

Why not simply change the src attribute of an image?

http://users.bigpond.net.au/rf/temp/image.html

No flicker on my firefox.

BTW the code in that example is based directly on yours. You should not be
using href="javascrip t...

Jul 23 '05 #5
[ciwah not included in follow-ups]

On Sun, 30 Jan 2005 00:42:30 -0600, Richard <An*******@127. 001> wrote:

[snip]
The flickering problem seems to be a trait of firefox.


The flickering is a result of page reflow. For a brief moment, both
elements are shown before the previously shown element is hidden. I'm sure
I told you that when you asked why it happens with your "experiment ".

No reflow, no flicker. Simple.

[snip]

The OP should see rf's post for a sensible solution, though with two
suggestions (he already mentions avoiding the javascript: pseudo-scheme).

1) The URL for the src attribute must be quoted.
2) The images collection, rather than the getElementById method,
should be used to access the image:

document.images['image'].src = '...';

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #6

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

Similar topics

13
3408
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to <foo/>) From XHTML specification:
3
84629
by: Paul Thompson | last post by:
When I put a <div ...> inside a <table> specification, functionality is not there. When I put the <table> inside the <div> everything works. Why is that?
8
5166
by: slim | last post by:
hi again all, i am still working on the website as mentioned in earlier threads and have hit another snag... http://awash.demon.co.uk/index.php http://awash.demon.co.uk/vd.css the php is pulling a name and placing it under the thumbnail (the text is
44
919
by: Jim M | last post by:
I have had great success with using <iframe> with overflow-y set to auto. I can get a similar look with the <iframe> tag. BUT... In all cases I need to have fixed heights. Is there a way to put either tag inside an HTML <TD> and have the same kind of scrolling effect. This would allow me to fill the screen and have the size of the scrolling box change on resize. Thanks in advance.
5
2231
by: Mark Preston | last post by:
Admission first - I don't actually have a problem here but have noticed that a lot of people have been asking similar questions and getting very varied answers. What I've done is to sort of "compile the questions" into a theoretical problem to see what people think should be done to solve it. Maybe it will be a worthwhile discussion, but more importantly maybe it will find out the very best way to sort this kind of problem out so that...
5
2303
by: Julia Briggs | last post by:
Is there a <a href="javasc... approach to switch between two images inside a div tag so it doesn't slightly flicker when clicked on, and transitions between images smoothly in Netscape? I can get something to work in IE, but in Netscape there is a slight but obvious flicker. Is there some other way to do this or some solution to making this work? Try my Google referenced images below in IE and Netscape/Firefox and see what I am talking...
8
1442
by: Patrick | last post by:
Hi you all, I've just downloaded the latest beta of the .Net Framework and Visual Studio Expression 2005 edition. I only created a simple ASPX file with some code-beside/behind (however you want to call it). First thing I checked was the generated html-output and I was shocked! I found <div>-tags everywhere .... what are they for? which w3c standard or recommendation was intended to be covered by this tags??? However I thought I could...
28
5387
by: Kent Feiler | last post by:
1. Here's some html from a W3C recommendations page. <P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>cccccccc<P>dddddddd</DIV> 2.Although I didn't think it would make any difference, I tried it with the </p>s included as well. <P>aaaaaaaaa</p><DIV>bbbbbbbbb</DIV><DIV>cccccccc<P>dddddddd</p></DIV>
8
10056
prino
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF editor. A fellow member of the PCG has helped me by creating a bit of Javascript to emulate the scrolling and using Google I've now gotten it into a state where it almost passes the W3C Markup Validation Service. However, the one error, Error Line 166,...
0
10883
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
10578
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
10631
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9409
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7813
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
7006
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5851
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4477
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
3
3126
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.