Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Yahoo! UI Library: ImageLoader problem

Status
Not open for further replies.
wysiwygGER01

wysiwygGER01

Programmer
Feb 18, 2009
188
AU
Hi,
I'm trying to get a working example of the Yahoo! Imageloader.
I've done everything as explained here - - but can not get it to work.
The aim is to have 2 separate images loading together at the same time.
What it does though is just showing me my background images as defined in the CSS code.
I need it to overwrite these settings with the images defined in the javascript code.


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/transitional.dtd">[/URL]
<html>
<head>
<script type="text/javascript" src="[URL unfurl="true"]http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>[/URL]
<script type="text/javascript" src="[URL unfurl="true"]http://yui.yahooapis.com/2.7.0/build/imageloader/imageloader-min.js"></script>[/URL]
<script>

var duoGroup = new YAHOO.util.ImageLoader.group('content_start', 'load', 5);
duoGroup.registerBgImage('content_start', '[URL unfurl="true"]http://www.hima.de/images/rotation_startseite_links/01_safety_nonstop.gif');[/URL]
duoGroup.registerBgImage('toolbox_pic', '[URL unfurl="true"]http://www.hima.de/images/rotation_startseite_rechts/01_safety_nonstop_re.gif');[/URL]
duoGroup.addTrigger('toolbox_pic', 'load');
duoGroup.name = 'group 2';
</script>

<style type="text/css">
<!--
#left {
		background-image: url([URL unfurl="true"]http://www.hima.de/images/01_safety_nonstop_2410.gif);[/URL]
		background-position: left top;
		background-repeat: no-repeat;
		float: left;
		height: 196px;
		width: 754px;
		/*position: absolute;*/
}

#right {
  	background-image: url([URL unfurl="true"]http://www.hima.de/images/01_safety_nonstop_re_2411.gif);[/URL]
  	background-repeat: no-repeat;
	height: 109px;
	width: 215px;
 	margin: 0 0 0 754px;
	/*position: absolute;*/
}
-->

</style>
</head>

<body>
<div id="left">
	<div id="content_start" />
</div>
<div id="right">
	<div id="toolbox_pic" />
</div>

</body>
</html>
 
Sort by date Sort by votes
You cannot self-close DIV elements like that - it is illegal and erroneous markup. Use proper closing tags on your DIV elements and you should be sorted.

I'm guessing validating your pages would have shown this up...

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi Dan,

thanks for your quick reply.

Closing the div tags properly did not fix the problem.
It still only shows my background images as defined in CSS.

I found a workaround however, but it creates another problem.
I've changed the code marked as red.
Now it correctly displays the css background image and after 10 sec it displays the images from javascript.
Problem here is the img element in the div tags is not defined in the first 10 seconds so Internet explorer displays an image placeholder on top of the background image which of course I don't want to see.

Is there a way to hide this placeholder image or any more ideas to get my original code working?

Code: 
[COLOR=#ff0000]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/transitional.dtd">[/URL]
<html>
<head>

<script type="text/javascript" src="[URL unfurl="true"]http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>[/URL]
<script type="text/javascript" src="[URL unfurl="true"]http://yui.yahooapis.com/2.7.0/build/imageloader/imageloader-min.js"></script>[/URL]

<script>
var duoGroup = new YAHOO.util.ImageLoader.group('content_start', 'load', 10);
duoGroup.register[COLOR=#ff0000]Src[/color]Image('content_start', '[URL unfurl="true"]http://www.hima.de/images/rotation_startseite_links/01_safety_nonstop.gif');[/URL]
duoGroup.register[COLOR=#ff0000]Src[/color]Image('toolbox_pic', '[URL unfurl="true"]http://www.hima.de/images/rotation_startseite_rechts/01_safety_nonstop_re.gif');[/URL]
duoGroup.addTrigger('toolbox_pic', 'load');
duoGroup.name = 'group 2';
</script>

<style type="text/css">
<!--
#left {
		background-image: url([URL unfurl="true"]http://www.hima.de/images/01_safety_nonstop_2410.gif);[/URL]
		background-position: left top;
		background-repeat: no-repeat;
		float: left;
		height: 196px;
		width: 754px;
		/*position: absolute;*/
}

#right {
  	background-image: url([URL unfurl="true"]http://www.hima.de/images/01_safety_nonstop_re_2411.gif);[/URL]
  	background-repeat: no-repeat;
	height: 109px;
	width: 215px;
 	margin: 0 0 0 754px;
	/*position: absolute;*/
}
-->

</style>
</head>

<body>
<div id="left">
	<[COLOR=#ff0000]img [/color]id="content_start"></div>
</div>
<div id="right">
	<[COLOR=#ff0000]img [/color]id="toolbox_pic"></div>
</div>

</body>
</html>
 
Upvote 0 Downvote
What sort of markup is that? You've got closing DIV tags for IMG elements!

Again, I reiterate - validate your markup before trying to sort out ANY other visual problems.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Mate,

any chance you can let go on these div tags.
That's not it!
I forgot to delete the last bit after testing....



 
Upvote 0 Downvote
If you cannot post the code as you have it, we don't know if we're looking at your typos or bad code.

If your code doesn't validate, we could be chasing our tails.

You might call it pedantic, but I don't like wasting my own time for free unnecessarily.

Perhaps posting a URL to a version of the page online might be easier?

Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote

Code is working on that page and is exactly like my code. At least as far as I can see.
However it's working for them, not for me.

Alternatively just copy the code from this thread. That's why I've included full URLs.
 
Upvote 0 Downvote
Dan,

I'm looking for an error in my code.

The code on this website works. Mine doesn't.

Focus on the header picture of this website.
Obviously it is made up of 2 gifs. Both need to change at the same time, therefore they need to be in sync.
Now, the header picture is is loader in 2 stages.
1st stage: An background image is shown as defined in CSS (01_safety_nonstop_2410.gif).
2nd stage: After 10seconds the background image is overwritten with the image defined in javascript (01_safety_nonstop.gif).

It works well on that website but I can't get it to display the images from javascript after 10seconds.
I constantly see the background image as defined per css - the static image that is.

I want to see a static image (CSS) for the first 10seconds. After that it should display the images from javascript.

If you copy my code from this forum into a html file and run it, what do you see? A static file and after 10 seconds the gif from JS or just the static file as defined per CSS?
 
Upvote 0 Downvote
Focus on the header picture of this website.
Obviously it is made up of 2 gifs. Both need to change at the same time, therefore they need to be in sync.
Click to expand...

I'm still quite confused as to what I'm looking for, because I can only see 1 GIF as the background of the header, not 2, so where is the second image that needs to be 'in sync'?



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Well, this is exactly my question!
Where is the 2nd picture - the animated gif? Why isn't this displayed?

1. you visit the website.

2. you see 1 static header picture which is made up from 2 separate images. They are defined in CSS and are displayed like this:
[01_safety_nonstop_2410.gif][01_safety_nonstop_re_2411.gif]

3. The javascript timer counts down from 10.

4. Once the counter reaches 0 it should display the animated gif on top of the static gif like this.
[01_safety_nonstop.gif][01_safety_nonstop_re.gif]

Step 4 does not work for my example but it works here: Question is why?
 
Upvote 0 Downvote
OK - I've got over my confusion (I now see that the 2nd image was the one to the far right - I thought the 'main' header image was comprised of 2 images...)

Using your code above as-is (apart from the erroneous 'color' line at the top), it works for me perfectly in Fx 3.0.10 under Vista.

In IE 7 under Vista, the only issue I see is that the right-hand image is about 0.5 seconds out-of-sync with the left-hand image, but all works apart from that.

What browser / OS are you seeing the problem in?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Thanks Dan. That's driving me nuts.

I'm testing on XP FF 3.0.10, FF3.0.11, IE 7, IE8, IE8 compatibility mode, Apache 2.2, Apache 2, IIS 5.1

So what you see is the initial static image (grey, with the 3 symbols - infinity, safety, safety nonstop)?
And after 10 seconds the animated gif kicks in with a black picture showing some refinery at night, then some manufacturing robots and so on....?
 
Upvote 0 Downvote
And now the solution:
Add this code in CSS and it will work.

#content_start{
height: 196px;
}
#toolbox_pic{
height: 109px;
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
138
amrmnabil
amrmnabil
michael12061206
  • Locked
  • Question
free javascript library for airliner diagrams
Replies
1
Views
93
xwb
xwb
dannyo12
  • Locked
  • Question
Async library error in terminal while running Ethereum Smart Contracts test with mocha?
Replies
0
Views
63
dannyo12
dannyo12
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
95
bs6600
bs6600
CoolBreeze007
  • Locked
  • Question
jquery ui radio buttons will not accept selected checkbox
Replies
1
Views
100
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top