Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > question about <div> tag switching, browser conformity

Reply
Thread Tools

question about <div> tag switching, browser conformity

 
 
Julia Briggs
Guest
Posts: n/a
 
      01-30-2005
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.getElementById("image_display").innerHTML = "<img
src=http://www.google.com/images/logo.gif>"
}

function image2()
{
document.getElementById("image_display").innerHTML = "<img
src=http://www.google.com/intl/en_ALL/images/images_hp.gif>"
}
</script>

<br><a href="javascript:image1();">Image One</a><br>
<a href="javascript:image2();">Image Two</a>
<div id=image_display></div>

 
Reply With Quote
 
 
 
 
xiaozheng.ma@gmail.com
Guest
Posts: n/a
 
      01-30-2005
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

 
Reply With Quote
 
 
 
 
xiaozheng.ma@gmail.com
Guest
Posts: n/a
 
      01-30-2005
or try to use style.display='block' or 'none' and see if it works

 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      01-30-2005
On 29 Jan 2005 22:29:26 -0800 http://www.velocityreviews.com/forums/(E-Mail Removed) 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.


 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      01-30-2005
"Julia Briggs" <(E-Mail Removed)> 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="javascript...



 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      01-30-2005
[ciwah not included in follow-ups]

On Sun, 30 Jan 2005 00:42:30 -0600, Richard <Anonymous@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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Function argument conformity check dlists.cad@gmail.com Python 6 06-19-2008 07:57 AM
how do u invoke Tag b's Tag Handler from within Tag a's tag Handler? shruds Java 1 01-27-2006 03:00 AM
Checking Ansi-c++ conformity Ollej Reemt C++ 6 04-08-2005 09:27 PM
To vlan tag or not to tag? budyerr Cisco 1 07-08-2004 03:45 AM
How to embed the <jsp:plugin> tag into a tag handler class...HELP !! jstack Java 1 07-04-2003 06:58 PM



Advertisments