Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 05-22-2009, 03:55 AM
thebigO thebigO is offline
Junior Member
 
Join Date: 05-07-09
Posts: 8
iTrader: 0 / 0%
jquery help, fade in title.

I need a bit of help with something that seems to be so basic I can only find more advanced versions thru google.

I simply want the title on this page to fade in smoothly and nicely as soon as the page has finished loading. The title being "Kontakta Oss". Same position, font, color etc. just slowly fade in.

I spent a lot of time searching on google; first alternative I tried out was actually meant for fade-transitioning between two images, setting it up in <ul>-<li>-form. I found this here and it turned out like this. Here I made two <li>'s, one being the title and the other a space (&nbsp. Ignore the excessive line breaks etc., but the problem is I want it to fade in and stay in.

I went on and tried with an example off jQuery's own website: this one. I couldn't get the thing to work at all, it ended up making the whole page blank.

I would greatly appreciate any help!
Oscar

ps. with the first example, with the <li>, I also tried changing the code myself to onLoad etc., but with no success.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 05-25-2009, 11:54 AM
Capo64 Capo64 is offline
Contributing Member
 
Join Date: 06-11-07
Posts: 238
iTrader: 0 / 0%
Have your title inside of a <div class="fader">

Then in your
$(document).load(function() {

$(div.fader).fadeIn("slow");

});

You need the .fader class to have display:hidden;

Last edited by Capo64; 05-25-2009 at 11:59 AM.
 
Reply With Quote
  #3  
Old 05-26-2009, 08:32 AM
thebigO thebigO is offline
Junior Member
 
Join Date: 05-07-09
Posts: 8
iTrader: 0 / 0%
Capo64,

I tried applying what you said.. i added the following to my <head>:

Code:
<script type="text/javascript"> $(document).load(function() { $(div.fader).fadeIn("slow"); }); </script>
and in my html I had the following:

Code:
<div id="title" class="fader">Kontakta oss</div>
where I tried both with and without the id, although I would like to keep it if possible. my css was the following:

Code:
.fader { display: hidden; color: #000000; font-family: 'Trebuchet MS', 'Arial', sans-serif; font-size: 29px; letter-spacing: 5px; line-height: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 5px; margin-top: 50px; text-align: center; } #title { width: 950px; height: 13px; }
I don't know if I'm doing anything wrong here, I'm not very experienced with javascript, most of what I've done has been following step by step instructions on dynamic drive and similar sites.

Thanks a bunch!
Oscar
 
Reply With Quote
  #4  
Old 05-29-2009, 02:36 PM
nix nix is offline
Junior Member
 
Join Date: 05-29-09
Posts: 1
iTrader: 0 / 0%
change the display in the fader class.

display: none;
 
Reply With Quote
  #5  
Old 05-29-2009, 02:43 PM
Capo64 Capo64 is offline
Contributing Member
 
Join Date: 06-11-07
Posts: 238
iTrader: 0 / 0%
My mistake, I meant display: none. I wrote that on the go
 
Reply With Quote
  #6  
Old 06-04-2009, 02:01 PM
thebigO thebigO is offline
Junior Member
 
Join Date: 05-07-09
Posts: 8
iTrader: 0 / 0%
I still can't get it right .. I did the exact same thing as before except I changed it to display: none; instead of hidden. Is that really all the javascript I need? Don't I need to install a jquery library or somehting?

Thanks,
Oscar
 
Reply With Quote
  #7  
Old 06-05-2009, 12:43 PM
Hades's Avatar
Hades Hades is offline
Senior Web Developer
 
Join Date: 01-23-07
Location: Argentina
Posts: 2,273
iTrader: 0 / 0%
Included a possible solution in this attachment.

Note that I made the following changes:
1-replaced the logo background for an <img> tag.
2-put visibility: hidden, to the image.
3-I changed the jquery event from document-load to document-ready.
4-through jquery I added the css properties: opacity: 0 and visibility: visible.
5-through jquery I added an animation, to make the <img> be have opacity: 1.

The only problem I found is that the page only works with Firefox, but it's not because of this script, it must be because I saved the page through menu File-save and something didn't get exported correctly.

I suggest you don't use the whole file as I attached it, but only copy the pieces of code that I modified into your own page, because I made these changes based on a Firefox-export.
Attached Files
File Type: zip fade.zip (80.3 KB, 32 views)
 
Reply With Quote
  #8  
Old 06-25-2009, 07:04 AM
thebigO thebigO is offline
Junior Member
 
Join Date: 05-07-09
Posts: 8
iTrader: 0 / 0%
Finally working!

Thank you all, I finally got it to work following Hades's example.

Oscar
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

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

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
jQuery - Date Picker Sketch Coding Forum 2 01-22-2009 10:44 PM
my contact form isnt sending all avriables through to the email. (jquery/ajax/php) sambkk Coding Forum 1 10-28-2008 12:14 AM
HOW DO I FADE AN IMAGE INTO ANOTHER?? marcsam Graphic Design Forum 11 05-13-2006 03:16 PM
Invision Board - Display Topic Title as Page Title? gunface Coding Forum 3 07-05-2004 11:37 AM
GALAXY FADE TranceSpeeder Graphic Design Forum 15 01-14-2004 11:17 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 10:04 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC