How to make elements on page fade in!!!

  • 1
  • Praise
  • Updated 8 years ago
Hi everyone! Have you ever wanted to fade in just one or two elements (or whatever elements you'd like) on the page? Well, now you can! You know Google's fade in thing? I found a way to do this! All you have to do is use some Jquery and then when you load the page it will fade in instead of just already being on the page! So, follow these steps:

1. First, create a div (or a span, something you can add a id or class to) with an HTML widget

2. Then, give it an id or a class name. (With class="" or id="")

3. Now, right before that div, add this code:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#div_id_or_class').fadeIn(4000);

});

</script>



Now, you'll need to replace "#div_id_or_class" with the actual div id or class name. But, if it is a class, replace # with . and then put the name (with no spaces in between the . or # and the letters)

Here is an example code:



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#fade_div').fadeIn(4000);

});

</script>

<div id="fade_div" style="display:none;">

<font color="green" size="3" style="font-weight:bold;">I just faded in!</b>

</div>



This is what this code looks like on the page: http://free-scripts.yolasite.com/fade...

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
P.S http://free-scripts.yolasite.com is now going to be where I make all of the example pages and stuff! Also, am building a site with tons of codes on there right now! http://free-scripts.yolasite.com is what I'm making right now!
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Thank you for a useful post Nathan - I hope people find it useful :)
Photo of Marielena Abruna

Marielena Abruna

  • 3 Posts
  • 0 Reply Likes
This code did not work on my site. I created a html widget and copied the exact code. Any ideas. I used google crome, IE and still does not work.

<!--

Created by Free Scripts & HTML codes - http://free-scripts.yolasite.com

Get more FREE scripts and codes here: http://free-scripts.yolasite.com

THIS NOTICE MUST STAY INTACT IN ORDER FOR THIS TO BE LEGAL FOR YOU TO USE

-->



I just faded in!

Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, could you wrap <!-- and --> around the code and then take out those extra ones (around the notice) just for this forum reason because it wont work with those ones in for some reason.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I couldn't help but notice this post... look at my site... http://a-better-community.zymichost.com and note the Location box, select a state, not all states have been completed yet, so try Alabama for example, and watch closely as a box of Alabama cities fade in... it's kinda cool, let me know if you want the code to that, although you can get it simply by viewing my page source.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
My code and Nathan's code are pretty much the same thing, however, my code includes a showLinks - which means, the action of clicking in option in the drop down box will pull up the fade in instead of on a page refresh or opening the page. The fade in can be any element you want it to be, drop down box (such as I have) or a list of contacts and mailing addresses - you can put in the first box for example "webmaster", "customer service", "chief executive officer", etc... and clicking on one of those options for example could fade in their contact information
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You said the code doesn't work? It should, are you viewing it in the preview or just in the site builder? It probably wont fade in, in the site builder. Just click "Preview", here's a screen shot of that link:



Hopefully this works out!

Kind regards,
Nathan
Photo of Marielena Abruna

Marielena Abruna

  • 3 Posts
  • 0 Reply Likes
Can you send me the code?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
my code or Nathan's?
Photo of Marielena Abruna

Marielena Abruna

  • 3 Posts
  • 0 Reply Likes
YOURS
Photo of maxgas1

maxgas1

  • 3 Posts
  • 0 Reply Likes
what does this exactly do?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
<!--

<script language="javascript">
selectedCategory='';
function showLinks() {
if(selectedCategory != '') {
$('#'+selectedCategory).css('display', 'none');
}

newState = $('#departments option:selected').val();

if($('#'+newState)) {
selectedCategory = newState;
if($.browser.msie)
{
$('#'+selectedCategory).css({
'background-color' : 'white',
'margin-top' : '12px'
});
}
textToFadeIn = $('#'+selectedCategory);
$(textToFadeIn).fadeIn(1000);
} else {
selectedCategory = '';
}
}

selectedState='';
function showStateLinks() {
if(selectedState != '') {
$('#'+selectedState).css('display', 'none');
}

region = $('#states option:selected').val();
newState = $('#states option:selected').text();
if(region != 'not'){$('#statechange'+region).html(newState);}

if($('#'+region)) {
selectedState = region;
if($.browser.msie)
{
$('#'+selectedState).css({
'background-color' : 'white',
'margin-top' : '12px'
});
}
textToFadeIn = $('#'+selectedState);
$(textToFadeIn).fadeIn(1000);
} else {
selectedState = '';
}
}

</script>

<script language="javascript">
$(document).ready(function(){
showLinks();
showStateLinks();
});
</script>

<script language="JavaScript">
<!--

function locate() {

var url=document.Form.Select.value
document.location.href=url

}

// -->

<!-- START FIRST BOX -->

Select State
Contact Us
Report Bug

<!-- END FIRST BOX -->

<!-- START FADE IN -->



CONTACT INFO HERE





REPORT BUG EMAIL OR INSTRUCTIONS HERE

<!-- END FADE IN -->

After the , read through for changes you will need to make to suit your site.

Also, you will need to apply the following css...

.optional
{
display: none;
}

this is the class optional as specified above, it displays nothing UNTIL something is clicked in the first box.

-->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I had to edit this here in getsatisfaction to any purpose you would use it for since mine is unique to my site. Let me know if there are any problems. I don't have much experience with css in yola so I would ask someone about inserting the optional class, my experience with css lies outside of yola.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, I have experience with CSS (CSS in Yola is the same as regular CSS). So, you can ask me anything about it and I will give you your answer.

Regards,
Nathan
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
well yea, just add to an html widget? With my css, I create a new file with a css file extension, I guess writing the actual css is the same, just the placement is different.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, you can also do external CSS style sheets in yola too if you did not know that. Just upload the CSS to the file manager (CSS can be uploaded on Yola free!) and then link to it with the link tags with resources/ in front of the css file name.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
well yea, I knew that too, however, it is "improper" but not necessarily wrong to link to a stylesheet outside of the head. Yola should allow users more access to certain parts of the html - such as the head - in my opinion.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yes, I agree with you! They should let us have access to the head and the actual HTML coding for us who know HTML.