/    Sign up×
Community /Pin to ProfileBookmark

banner from single to random

I’ve got a banner that has a single image background in the CSS and it fades in but I’d like to set it up so it actually loaded an array of images. That is ‘if’ its possible so the users without JavaScript enabled still get the original image. Is this at all possible?

The original code is below

[code]function initImage()
{
imageId = ‘loader’;
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = “visible”;
fadeIn(imageId,0);
}

function fadeIn(objId,opacity)
{
if (document.getElementById)
{
obj = document.getElementById(objId);
if (opacity <= 100)
{
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout(“fadeIn(‘”+objId+”‘,”+opacity+”)”, 100);
}
}
}

function setOpacity(obj, opacity)
{
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = “alpha(opacity:”+opacity+”)”;
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

window.onload = function() {
initImage();
}

# now if I put images into an array like (without the hashes of course)

##var pics = new Array(3); // Change this to reflext the number of ##slides
##var num = 0;
##var totalPics = 2; // 3 slides numbered 0 to 2

// Command to preload the images into the array
##for (num = 0; num <= totalPics; num++) {
## pics[num] = new Image();
## pics[num].src = “graphics/pic” + num + “.jpg”;
##}[/code]

Then how do I go about melding the array with the randomness. Any clues????
?

Edited to add code tags.

to post a comment
JavaScript

47 Comments(s)

Copy linkTweet thisAlerts:
@David_HarrisonDec 07.2004 — This should do it, just make sure that all of the banners are the same size otherwise they'll be distorted.

[upl-file uuid=e107b870-b22a-4ac5-ac8b-78009a17e596 size=2kB]nortypig.zip[/upl-file]
Copy linkTweet thisAlerts:
@porcoauthorDec 07.2004 — Thanks a billion for that one I just couldn't see how to do it. ? Big smiles from Tasmania this morning....
Copy linkTweet thisAlerts:
@David_HarrisonDec 08.2004 — Happy to help. ?

Also works when JS is disabled/not supported, which is nice.
Copy linkTweet thisAlerts:
@porcoauthorDec 08.2004 — Mmm been chasing my tail for half the day trying to see how this one works out. Your code works perfectly by the way just straight cut and pasted into a HTML page - but it does some strange stuff on a PHP page? I don't know what would be the difference really so I've bitten the bullet and thought its best to ask if you've got any idea. The page in question only has some minor includes at this stage and not programmed yet...

I'm tossed up on whether the visual design I'm after outweighs my need for PHP. Mainly its only includes (not a huge site as yet thankfully) and original reason I changed to PHP extensions here was for some server side programming functionality later on like comments and database retrieval etc.

Have you got any clues what would be doing this? On the original script I posted it fades in fine on just one image. Whereas this will load the back image and jerkily put the other in when its fully loaded. No fade in. Yet change to a .html extension and its perfect. Go figure....

Signed stumped, bleeding and wiping my nose ?

Thanks for the help by the way its much appreciated...

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 08.2004 — ? Red faced and not so proud of it lol

mmm the meta tags were pretty handy.... funny how sometimes if you're not quite sure you can't see the grain on the barn floor for the bloody chooks!!

Sorry, figured it out at last. The moment I asked I figured out the problem. Cool work.... Thanks again (turns red faced and runs for the office coffee machine.. )

Norty Pig Web Development
Copy linkTweet thisAlerts:
@David_HarrisonDec 08.2004 — Er... OK. Glad you got it sorted. ?

For future reference though, if you've got a problem on a certain page can you post a link to it? It's just that it's a little bit harder having to guess at possible things that it might be.
Copy linkTweet thisAlerts:
@porcoauthorDec 08.2004 — Sure ok, was really only the cut and paste you sent me in the end.

One thing I never noticed though is even the original doens't transition in IE? Have you tried it? Just looking at your file now in its original state and is good in FF but no trans in IE for some reason... so hunting that up at the moment.

Sum times I just have a bad day ?

Thanks for the help.

Norty Pig Web Development
Copy linkTweet thisAlerts:
@David_HarrisonDec 08.2004 — Oops, I guess I should have tested it. Originally I had the "currOpac" variable counting up in steps of 0.05 and the I multiplied it by 100 to get the opacity in IE. Then, because of rounding errors when working with decimals, I decided to count up in steps of 5 and then divide by 100 for the other opacity rules. Thing is, I left the *100 in for the IE rules.

All you need to do is change this line: el.style.filter = "alpha(opacity:"+(currOpac*100)+")";To this: el.style.filter = "alpha(opacity:"+currOpac+")";Sorry about that. ?
Copy linkTweet thisAlerts:
@porcoauthorDec 08.2004 — Thanks you're a legend. I've just never really got JavaScript as well as say PHP or Java for some reason. i really need to get into the DOM more, especially now I'm trying to do stuff with getElementByID etc.... saved my bacon this day for sure ?

I envy you your coding skills for sure (and I'm doing software engineering at Uni 2nd year 'and' get pretty good marks at that!).

Thanx again... ?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@David_HarrisonDec 08.2004 — I think it'd have been better for me if I'd have gone down the PHP route, it's got pretty similar syntax to JavaScript. So I guess I envy you for your PHP skills. :p

If you're pretty good with CSS selectors then the JavaScript DOM should come pretty easily to you, of course you can do more stuff with the DOM, but a lot of it is the same.
Copy linkTweet thisAlerts:
@porcoauthorDec 08.2004 — I think my biggest trouble was only half understanding javascript one way and now trying to get my head around another. I really need to find a comprehensive resource that can give me an idea what can and can't be done with the DOM in regards to using ID with XHTML pages. Also getting stuff to work across all browsers and degrade gracefully is a bit of a major talent I'm finding.

So thanks again for that help ?

Norty Pig Web Development

ps. not that great with PHP even if I got good marks for it tho lol
Copy linkTweet thisAlerts:
@David_HarrisonDec 08.2004 — Well W3Schools is OK for learnin' JavaScript, but I learnt whet I know from these forums. Probably not the fastest way to learn, but I wasn't in a hurry. I do have a JavaScript book but it kinds sucks:

SAMS Teach Yourself JavaScript in 21 Days

Kind of an un-recommendation. The examples in the book use bad HTML, and the book just isn't very good at teaching JavaScript. That and it doesn't give any mention to the 10% of the web that do not have JavaScript enabled.
Copy linkTweet thisAlerts:
@porcoauthorDec 09.2004 — Hey how's tricks lol. Man this code has given me some grief over the last couple of days.... but have seemed to track down most of the issues.... Its the fade in banner thing still... so have some questions for your javascript knowledge base????

[URL=http://www.blog.lindenlangdon.com]Translucent[/URL]

The first time you go to the site it flicks the background image on each time in IE until they are all cached. There are 3 images in the array.

[URL=http://www.blog.lindenlandon.com/jslibrary/scripts.js]Javascript File[/URL]

It only works like this online i think. Is there any way to precache these? Maybe that will stop the glitch. Have a look and see what you think of it. Maybe I'm going crazy, its like after Midnight here lol.

Mrs is calling me to bed or I'll get slapped. Thanks in advance if you can see the problem. Its not the 100% original code though as I put the visibility hidden straight into my styles.css file. Could this be a part of it?
Copy linkTweet thisAlerts:
@David_HarrisonDec 09.2004 — I think what was happening was this:

Page loaded with dafault image in the HTML.

JavaScript changed the image source.

Fade in of image began BUT the new image hadn't loaded yet, so the old one was displayed, then when the new image loaded that was displayed instead, hence flicker.

I have now corrected this. You need to put a couple of script tags in the source code literally right after the image code. The function called will change the source of the image and set the images visibility to hidden (removing the need for the external style sheet).

When the fadeIn function is called onload you have a lovely fade in with no flicker. By the way, I have removed the onload code from the body tag and put it in the .js file now in an attempt to minimise the JavaScript in your HTML pages.

This new script changes the source of the image before the page has loaded, therefore when it does load and the fade beings, there will be no flicker.

Before you said that you had hidden the image with normal styles, however this would keep the image hidden from non-JS users (which is bad), that's why I used JavaScript to hide the image.

I also noticed that you used document.write to apply the styles originally with JavaScript, since you are using XHTML I think that you ought to know that if at some point you ever switch to application/xhtml+xml instead of text/html then document.write will NOT work. As Charles would say, one of the "pitfalls" of XHTML.

Edit: Now the ID of the banner is specified as an arguement in the "alter" function, so instead of littering the .js file with "banner" and having to change all of those if you have a different ID of image you'd like to fade, you only have to specify the ID once. I hope that makes sense, if not then erm... sorry. But trust me, it's easier like this. ?

[upl-file uuid=a9a9a942-910f-4bcc-808d-51df396d533b size=2kB]nortypig.zip[/upl-file]
Copy linkTweet thisAlerts:
@porcoauthorDec 09.2004 — Wow cool, thanks.

Yes I knew that XHTML couldn't handle document.write ? didn't know a way around that one admittedly until I saw what you'd done. Was looking but had been told there was nothing at this time to do it another way, which I now know there is.

I'd actually earlier had the window loading in the javascript though instead of in the body tag and put the hidden attribute in the styles stylesheet.

Another 'pitfall of XHTML' concerns the CSS file of course. I'd put the hidden attribute for the banner in my .styles stylesheet. Thats inside a norty @import declaration so older browsers won't see it ? A necessary evil if considering backward compatibility. The old browsers only get the default.css file. I only validate to the XHTML DTD to make sure I have good markup, its still delivered as text/html by choice as is allowable for XHTML 1.0. I guess its a transition to XML if people want to look at it that way, but really all I'm concerned about is having pages that work. They may as well be HTML 4 for that matter only I like to stay a little ahead of the ball in my learning curves. Its just sad when some don't see that at any given point in time we're all doing our best at the time with the skills we have. So I understand the pitfalls, in fact I saw another blog entry of mine linking to the definitively documented reasons for the XHTML issues.

[URL=http://hixie.ch/advocacy/xhtml]Pitfalls of XHTML[/URL]

So I understand them but like I say really I'm only delivering as HTML anyway.

I guess if I ever decide to deliver as XML then I'll probably not care about whether NN4 sees a text page because that's all my @import does, stops them seeing more than plain text. It'll make any changeover in the future easier for me if I just write better markup now is all. (plus I'd like to take a look at some XML applications hobbywise when I finally get time lol). This isn't irresponsible to validate to a DTD of any sort I dont' think. Most don't at all!!

Anyway thats my out of bed after 5 hours sleep rant lol ? Thanks for doing this for me its actually teaching me a lot about something I need to learn more about JavaScripting cross browser which degrades gracefully. I'm like you I got a crappy javascript uni text book that is about as useless as tits on a bull. I had to relearn most of whats in it to validate as anything other than HTML, too. But that's part of the fun part of doing this stuff. ? In fact that textbook has mostly turned me off considering javascript as a viable option, like a lot of people.

Over on Linden's real website, which is yuk but being redesigned as we speak.... was my first tableless full CSS site

[URL=http://www.lindenlangdon.com]Linden's Art Site[/URL]

on the multimedia page there's a small very basic JavaScript slideshow of the dress she printed last year. I'd originally had this with forward and back buttons and it worked great on some browsers but no buttons on others! Bugger. In the end my lack of JavaScript, plus wasn't worth outsourcing for the fee I was charging, and it went to a boring old slideshow and life moved on. So I know its quite rare around town to be able to program cross browser that degrades gracefully ? Wow...

How do you get the time to moderate on these forums? It must take a bit of your days and nights... I lose a morning when I have to send out a couple of long researched emails and go to a meeting! Anyway I'm extremely grateful for your help because the original would've been accepted by the client with the single picture fading in - but they ohhhh so loved the idea of feeding it in from an array. And it looks fantastic. I'll have to blog it later in the week so others can give it a try ?

Thanks again - and please don't tell charles I'm a norty pig using xhtml dtd's cos I've gotten into trouble here before lol. Just doing my best at the time. Mightn't like my yesterdays blog either about some guy from Baltimore giving me grief over it lol. Hey whats a blog for if not to release... ?

All the best

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 09.2004 — OK yeh resolved, here it is....

[URL=http://www.blog.lindenlangdon.com]Translucent - (Banner is working perfectly now)[/URL]

Thanks again for that... ?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@David_HarrisonDec 10.2004 — Thank-you for all of your kind words, I find that I don't have to take much action usually, most people here are so well behaved. ?

I'm glad that you got everything sorted. But...

There is just one thing. In Mozilla when you set the opacity to 1 there is a flicker, when the image will disappear and reappear again. That's why in this script (and you're previous script) the opacity was limited to 0.9999.

However, Mozilla still seems to show a flicker. I think that the problem is that Mozilla is rounding 0.9999 up to 1, therefore I have re-written the function slightly, could you change it to this and try giving it a try please, thanks.function fadeIn(el, currOpac){

el = document.getElementById(el);

el.style.visibility = "visible"; // Un-hides the image.

currOpac += 3;
currOpac = (currOpac&gt;100) ? 100 : currOpac;

el.style.filter = "alpha(opacity:"+currOpac+")";
el.style.KHTMLOpacity = currOpac / 100;
el.style.MozOpacity = (currOpac==100) ? 0.999 : currOpac; // Prevent flicker in Moz.
el.style.opacity = (currOpac==100) ? 0.999 : currOpac; // Prevent flicker in Moz.

if(currOpac &lt; 100){
setTimeout("fadeIn('" + el.id + "', " + currOpac + ")", 40);
}

}
If this still doesn't work, then the only option would be to limit the opacity to 0.99 but this might become notice-able, so it's probably not a good idea.

Sorry to keep throwing JavaScript at you, but I'm a bit of a perfectionist. :p
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — I put it into a prototype folder and works fine on Moz, see no flicker even after clearing cache (tho don't make me swear on it cos I'm wrong a lot lol).

[URL=http://www.blog.lindenlangdon.com/prototype]Linden' Blog - Prototype folder (may be subject to changes at any time)[/URL]

Is there an Opera specific line for

el.style.KHTMLOpacity = currOpac / 100;

In testing it doesn't fade in but degrades gracefully on my machine as far as I can see. If picture is in cache it shows the loading thing and then just full image when its loaded. It still works fine with the rest of it. Thanks for spotting the Moz flicker, I'd only tested so far on Firefox and IE, usually do Mozilla and Opera in there too at this stage but was very time consuming and I must have got lazy. Its good to be a perfectionist though, when things break its either 100 phone calls in a morning and 20 emails or you don't hear for a month and the whole planet saw how you messed up and left it there. Perfectionism works a lot better.

Thanks again ?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — Uhhh ok so I look straight back at it and Mozilla does flicker ?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — No on second thoughts i'm pretty sure Moz is cured unless you can see something showing on your end. Looks fine now, couldn't reproduce the flicker, maybe I'd messed up clearing cache or something to do with that. ?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@David_HarrisonDec 10.2004 — I'm still getting a flicker, no matter how many times I clear the cache or refresh the page. In your JS file all I see is the old function, that's even with a new browser install.

Opera doesn't support any kind of transparency, there was no CSS rule for transparency in the W3 spec so they didn't make one. The opacity rule has just been added to CSS3 but the spec isn't finalised yet and Opera hasn't released a new version in a while.

I have uploaded totally up to date code here in an attempt to quell the flicker in Moz (it is there, honest, try hitting Ctrl + F5).

Also, the function I posted before was [i]slightly[/i] flawed, so I fixed that. I guess that's what I get for not testing properly.

[upl-file uuid=9c7dc6b7-ff25-4dd5-9bc9-d44bcf56e304 size=2kB]nortypig.zip[/upl-file]
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — Once again red faced this piggy noticed finally he was testing an old version.... The new code only fades in in IE and the rest don't fade in at all... just the full image on loading. Sorry... The file I put up in the prototype folder is the old code.

I only saw the old version flicker once in Mozilla though. It was only a minute ago I looked down in my editor and noticed I'd edited an older version... ?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — Yes was the old code, my apoligies.... Ok will try the new one.. lol

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — The new code is up and running in

[URL=http://www.blog.lindenlangdon.com/prototype]Linden's Blog Prototype Folder - Subject to change at short notice[/URL]

I can't see any flicker in Moz, still testing online though but am on ADSL so that could be a factor maybe, speed of delivery?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@David_HarrisonDec 10.2004 — It's not the speed of delivery, the code is only run onload. Besides, I have 10Mbit/s broadband. :p

The flicker is still there but I woundn't take the maximum opacity down to 0.99 it might start to get noticeable and you wouldn't want that. I guess if you can't see a flicker then perhaps other people won't either, which is good. Out of interest, which version of Firefox are you running? And which OS?

If it's FF 1.0 on Win XP then I've got no idea what's causing it, unless perhaps your PC is the server.
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — Mmm OK. I've got Firefox 0.8 on Win XP still. I've got 1.0 in the drawer here and whack it on...

Could be the culprit, only you'd expect better support on the newer version logically wouldn't you? But I'll get back to you with one last post? Oh is the Flicker huge??? Or is it like a minor effect?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — Updated to Firefox 1.0 with security update and still working fine on this end. I guess I'd call it perfect in my own mind with a wait and see if I get messages of it happening widely... Flawless here on a couple of different machines. Don't be afraid of the purple background its not what its going to be lol I promise!!!

Well thanks especially for being a perfectionist, appreciated work. Better get back to scraping a living cos I've been non productive most of the week ?

Ciao

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — Just an update - yeh saw the flicker you mentioned in Firefox 1.0 on XP but only 2 times in a row all afternoon. I'd say its perfect enough for a blog situation.... thanks again.

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 10.2004 — Mmm yes can replicate it on Moz now, like a camera flash... Guess its live with it or not lol. Blown the budget already and have to get in and code the site up now. ? Ahhh who needs money as long as the coffee plunger works!!

Guess its the end of the thread lol. Cyas...

Norty Pig Himself.... ?
Copy linkTweet thisAlerts:
@David_HarrisonDec 10.2004 — OK then, it's a bit weird there being a flash, even when I've accounted for it and tried to stop it. Kind of aggravating but I guess there's nothing I can do.

Happy to help. ?
Copy linkTweet thisAlerts:
@David_HarrisonDec 10.2004 — Well I've only gone and figured out why it was flashing! The currOpac variable was going up in steps of 3, therefore the opacity got to 102% or 1.02. I was only checking and resetting for 100 not greater or equal to 100 therefore it went fully opaque and flickered!

Well anyway, here is the very very very last final version of it, and there's no flicker!

Perfectionist 1 : 0 Firefox ?

[upl-file uuid=3eb0a30e-f2ed-4ebc-91b9-65ab92401347 size=2kB]nortypig.zip[/upl-file]
Copy linkTweet thisAlerts:
@porcoauthorDec 11.2004 — Oh OK thanks, I'd just put the 1 to 10 part up to 5 again and it seemed to stop it but great I'll put the new code in there.

I'm thinking of putting a quick how-to tutorial on it on my blog somewhere during the week and saying where the original came from and pointing out some of the issues. If you like it'd be cool to link to you or cite your real name rather than saying Lavalamp at Webdevelopers.com. Credit where credit is due. About all I did was take another guys idea and play with a bit and then come to the forum where you created the answer. I just had the catalyst of a need to have it done lol. So anyway I thought a tutorial might be cool.... What do you think? Maybe you could wack up a page on what the coding issues under the hood were or something.... I could link to that. I've been meaning to put some tutorials on my site for a long time but never got spare time to do them lol.

Originally I'd thought ok lets feed it into an array and why should it be so hard to handle them randomly. But the cross browser issues were really pretty interesting.

Ok have to do some work now, its Saturday but I had most of last week not producing much except empty coffee cups ?

Thanks again

Steven Clark

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 11.2004 — As this was a pretty popular thread I put together a tute over on my blog and linked to your profile page here, credit where its due.

[URL=http://www.blog.nortypig.com/tutorials/index.php]Onload Image Fades Without Flash - Random Images[/URL]

Give it a read, I'm not really good at doing tutorials, I put your page (different pics) as a clean HTML example at the end of it. If you think anything needs further clarification or would like to explain more of the javascript science behind it I could always link to a page you put up somewhere else. What do you think?

Its just a simple how to page really.. nothing major. Its an extension of the tutorial over at Clagnut.

[URL=http://clagnut.com/sandbox/imagefades/]Onload image fades without Flash[/URL]

Hope you don't mind ?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@David_HarrisonDec 11.2004 — I wouldn't mind writing what's going on and why I did things a certain way etc.

OK, a few points about the article. I'm not sure why, but you keep saying .styles stylesheet, I think you mean .css stylesheet.

Another thing I'm not sure of is why you have omitted all of the <'s and >'s, if you're not sure how to get them to display in a page, it's just &amp;lt; and &amp;gt;.

To comply with the XHTML backward compatibility recommendations, it's best to leave a space before the closing / on empty elements. <meta /> <br /> <img /> etc.

These are not required by the script, they are recommended by the W3C so that the browser knows what language scripts and styles are in:&lt;meta http-equiv="content-script-type" content="text/javascript" /&gt;

&lt;meta http-equiv="content-style-type" content="text/css" /&gt;
Below this div a JavaScript call is used for hiding the base image from us, otherwise you would see the initial image followed by your desired fade in effect.[/quote]Actually, you wouldn't see any fade in effect, the onload call to the fade function is within the alter function.

Also, this: document.getElementById(el_id).style.visibility = "hidden";Is absolutely [i]essential[/i] for non-JavaScript compatibility, if you hide the image with the .css file then users with JavaScript disabled and CSS enabled simply won't see the image at all. You have admitted that you've done it, but what I'm unclear on is why you've done it? And you've done the same thing over at http://www.blog.lindenlangdon.com/.The id we called #loader in this tutorial will be written with JavaScript[/quote]Re-write:

The image with id "loader" will have it's source dynamically changed with JavaScript.but I've simply put it into my .styles stylesheet which is inside an @import statement and means only newer browsers will see it.[/quote]I'm not sure what this means.

In the fadeIn function you've missed out the line where the variable currOpac is increased, therefore the image will never actually fade in.<!-- As you can see this works equally well placing the image inside a div or a paragraph -->[/quote]And then you put it in a <div> tag anyway. :p

Re-write of the last paragraph:

Its been tested in Firefox 1.0, IE 5.01 5.5 & 6, NS 7.1, Mozilla 1.5 and Opera 7. Unfortunately Opera doesn't currently support any opacity rules and IE 5.01 doesn't the opacity filter, they still get a random image but it does not fade in. In fading scripts when the opacity reaches 100% there is sometimes a flicker in the Gecko based browsers (ie: Mozilla and Netscape), the flicker has been prevented with this script because the opacity is limited to 99.99% in Gecko browsers. Any further testing results would be appreciated at [email][email protected][/email]. Not tested on any Mac Platforms to date.



These are some of the points that spring out at me when I read through the article. Sorry that they're a bit negative, if you like I can write another post about the positive points. ?
Copy linkTweet thisAlerts:
@porcoauthorDec 11.2004 — Hehe no she's right, it was just a fast write up on a saturday arvo, not the bees knees lol. Will get to it today..... that's why at present there aren't any tags on the lines, just cut and pasted them straight out, all I had time for its the weekend ?

The @import statement isn't recognised by older browsers, so by making it visibility: hidden in that stylesheet it means that NN4 for example will only see the CSS file called default.css. Whereas browsers understanding the @import will see the styles.css file and get visibility: hidden. Both your way and my way work on that one if you look in NN4 as an example. Its a norty thing to do? If I'm wrong at all about it then its fine. The original you sent me, different pictures, is working as you sent it in its own separate folder done the way you wrote it exactly. So that's what .styles stylesheet means, sorry not a good tute writer and I'll reveiw that one. Its a bit icky having done it one way to explain it another when under the hood I've done it differently. I'll work on the ambiguity..

This is exactly why I wanted your feedback and input lavalamp ? Hey this is a cool geeky thing we're doing.

Oh the metatags aren't necessary. I was wondering about that one because at a certain stage putting them in or taking them out of the page actually stopped my version working. I made the assumption that it had to be necessary. Cool I'll pull those lines, the page is too heavy anyway. Sorry about that one...

Mmm yeh was rushing a bit at the stage I wrote this line about fading in lol. Bugger. Well below is a JavaScript call to alter the banner.... ? Something simple like that do?

Yep got that with the image we called loader in this tutorial line. Was ambiguously worded admittedly.... ?

The div vs paragraph? Well I remember that line being there but its early and 3 scours can't find it lol. So glad I didn't buy that whiskey last night ? I've used a div because I've got a busier page than the example... say I want to put a background image into the paragraph, it'd affect all paragraphs so I'd have to write a special class for p.something anyway. I arbitrarily chose to change it to a div which I think I was pointing out was really neither here nor there. As you noted I did it on Linden's blog too, therefore its consistency in my coding right or wrong. I won't go back and recode stuff elsewhere to fit another hole nor will I introduce unnecessary inconsistencies in my methods. The habit alone would make my life harder in the way of knowing where and how stuff was done in 5 months time... Lame excuse I know but so it goes ?

NOTE: Ok found the line, under the hood on your example.... sorry about that I don't remember why I did it except maybe for consistency. I'll put the p's back in, it doesn't change the page 'at all' I think it was just a consistency thing between that and my pages. Has changed back to p's already....... sorry. Would you like your images there instead of the amazing 'Porco Rosso'? I thought they would be easier to differentiate the 3 images maybe....

I'll recheck the lines again, didn't realise I missed one. Like I said it was late ?

OK the last paragraph will go like: 'As far as we know it is cross browser compatible and degrades gracefully in older browsers.' I have to say I was definately tired by that stage cos even I dont understand or totally agree with what it says lol.... ? Thats late nights for you...

Well I think that about covers it, am I wrong with the NN4 and @import rule? I think if tested you'd probably see I'm right though. That's the only reason I've changed that line on mine. Give me a few hours, its Sunday morning bright and early here, beautiful pre-summer day with the family wanting to do family stuff. There's not too much to do to it except clean it up and a few reworks of bad writing lol. And I'll get around to putting the >'s in... ?

I'll post you again when its done.... You don't mind I'm putting it up though? I'll pull it if you aren't happy with it because its your cred up there, or you can pull your name from it its up to you. The last thing I want to do is take credit for your work or make you feel misrepresented. Norty Pig will be around for a long time one way or another. The other thing I could do is just put the code with little explanation, then point to a page on your site for the nuts and bolts..

OK this is a long post on a popular thread, will get there in the end. You can just email me stuff at Norty Pig if you want or have any questions about what's going on?

Will have it fixed a bit better, version 1.2, in a couple of hours...

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — mmm on looking at the ambiguities i think its better if I just write the tute around your original file as its at the end of the tute anyway.... ? The references to my page throughout makes it too hard to understand, its really talking about 2 versions in a way. Not good for a tute, I get them like that sometimes at uni too. Insane... doing my best though...

Onward and upward

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — Ok here's an anomoly... you'll like this..

Because the tutorial is about getting the background 'loading' image in the p tag, so its CSS too, do you want me to just write it in under the line where you write visibility: hidden.

Personally that's why I would've gone for the hiding in @import but its all the same really....

Your example doesn't precisely fit the extension of Clagnut's image fades tutorial... how would you like to do it then?

document.getElementById(el_id).style.background = "#fff url('loading.jpg');";

Not quite the right syntax with the ; ??

Or external sheet?

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — sorry

document.getElementById(el_id).style.background = "#fff url('loading.jpg') 50% 50% no-repeat";

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — duhh slap on my forehead that's not going to work. Not wanting the image to have a loading image lol, the p!! The p!!
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — Its easiest in your example to just put it in a stylesheet called styles.css and using a link tag in the head

<link rel="stylesheet" type="text/css" href="styles.css"/>




p {

width: 250px;

height: 140px;

background: #fff url('loading.jpg') 50% 50% no-repeat;

}


Do you mind if I do that? That would save me writing a bunch of inconsistencies as I could just tute on your example...

????

Norty Pig Web Development

ps.. Funny that they put webmaster under my name for making 50 posts on the forum when all I've done really is ask questions lol
Copy linkTweet thisAlerts:
@David_HarrisonDec 12.2004 — You're perfectly correct about the @import rule and Netscape 4. But you're not taking into account CSS on JavaScript off. In that case the loading image will be shown and the other image won't be.

If you check thecounter.com's stats you'll notice that while less than 1% of users use NN4, 10% of people do not have JavaScript enabled.

[url=http://www.thecounter.com/stats/2004/November/browser.php]Browser stats[/url]

[url=http://www.thecounter.com/stats/2004/November/javas.php]JavaScript stats[/url]

Incidentally, it would be better to use a different @import method than the one you are currently using.

@import url(); hides from NN4, but @import ""; hides from NN4 and IE4. [url=http://centricle.com/ref/css/filters/]Here's[/url] a pretty handy hack chart with lots of info on it, comes in useful sometimes. If you ever lose this link there's on in PeOfEo's signature.

Since you seem a bit unclear about why I'm hiding the image with JavaScript I think I'd better get a move on detailing the script.
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — Cool thanks I never knew that about @import... always learning.
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — Mmm I looked back at Clagnut's tutorial and what's happened is I never realised that's why he used document.write. Not knowing JavaScript that well I knew I couldn't use document.write so I whacked it in my styles.css thinking it would work just the same. I therefore kept it that way not realising disabled JavaScript would be affected in this way.... There was my reasoning.

Ok thanks for that cos I'll be going back and changing my code on both sites to do it properly now lol.... red faced...

This is the way we learn these things though so thanks for that... will bookmark the links

Norty Pig Web Development
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — No hurry, am just putting Linden's blog right, working on tutorial, answering client email from Queensland about account administration stuff, trying to get an email together to part advise and part quote a national company that moves BP's fuel around the nation and I don't have a proper spec yet to work from lol, and maintaining my family bit ahhhhhh. I love sunday mornings ?

Will fix stuff as I can so I took the tute offline, as should be, until I can work out the nuances. I think the two most valuable things that came out of this are that I understand the @import a bit better and know the value of that one line of code to write the CSS to the page. Cool trick. I'd dismissed it quite out of hand ?

Onward and upward

Norty Pig
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — This one is worth mentioning just out of CSS interest and I'll track down today why it is so no doubt... You know how I use this setup

<link rel="stylesheet" type="text/css" href="stylesheets/default.css" />

<style type="text/css">

<!--

@import "stylesheets/links.css";

@import "stylesheets/styles.css";

-->

</style>



Well when I went back to using the default example of course I encountered a flash with the initial image briefly showing again. So pulling out bits to see what causes it led me to the stylesheets inside the @import. If either are removed individually then this problem doesn't occur. But, if both are removed, then the problem disappears.....

Thought I'd just mention that as it may be an issue for others doing the same thing as me there. That's a big part of why I went to writing into that stylesheet inside the @import line..... it cured it for me at the time.... but obviously there's an issue there.

I may have to review my use of @import entirely for this project....

Would you advise any other method, if its available? ?

Norty Pig (grows weary)

ps. I sometimes wonder why I do this....
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — Ok skipped lunch (or postponed) and rewritten a much more simplified tutorial that may even be followable....

[URL=http://blog.nortypig.com/testpages/tutorials/tute1.php]Preview of Tutorial for your Input[/URL]

The only two changes on your original final version are the images used - cos I like Porco Rosso movie - and I've included a stylesheet called .styles to give the p element a background of a loading image.

I hope this is getting a bit closer to a desirable outcome. Like I said before I would really like to link to a fuller explanation of the issues on your site as sometimes I get quite a bit of traffic (and others not admittedly). Not major but I've had over 300 unique visitors so far this month and steadily growing. I'm more aimed usually at web designers who are interested in the transition from non-standards to standards methods, general information and so forth. So I've been looking to get some tutorials up so we all don't have to reinvent the wheel.... Anyway give it a read this time out and get back to me...

Will be at work all day I reckon..

Norty Pig
Copy linkTweet thisAlerts:
@porcoauthorDec 12.2004 — Oh went back to Linden's blog and changed it all so that it works, no @import etc and deploying the solution properly. Sorry about that misunderstanding, the main thing that confused me was the ambiguities caused by using the @import in the first place on my pages. Don't tell Charles ?

Need a coffee now.....

Norty Pig
×

Success!

Help @porco spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...