Develop Reference

Jquery fadeIn() not working

Description: I am trying to fadeIn() my container using jquery, but it doesn't work. I'm kinda new to it, only fresh out of codeacademy jquery course.
Problem: the method I wrote in myScript.js file doesn't seem to work. The syntax looks to be ok compared to other examples. I got my js file linked to the html file like this:
<script type="text/javascript" src="/Content/js/myScript.js"></script>
This is my index.cshtml file where I created a container for some navigation:
<div class="container" id="fade">
//some other buttons, divs, etc
</div>
This is my custom js file that I included:
$(document).ready(function () {
$('#fade').fadeIn('slow');
});

You should hide the div by default if you want to fade it in, otherwise it is already showing and fading in won't do anything. If that's the case, your html should look like this:
<div class="container" id="fade" style="display: none;">
//some other buttons, divs, etc
</div>

Make sure your #fade element is hidden when the page loads.
HTML
<div class="container" id="fade">
//some other buttons, divs, etc
</div>
CSS
#fade { display: none }
JS
$(document).ready(function () {
$('#fade').fadeIn('slow');
});

fadeIn onLoad function

So, Im trying to get this id to fade in on the load of the page. I've seen the posts about fade in. However, I haven't found any related to an onLoad function. Could anyone help me out with this?
HTML:
<div id="intro"> HELLO, I AM </div>
Javascript:
$( "#intro" ).onLoad(function() {
$( "#intro" ).fadeIn( "slow")
});

There's no such jQuery function as onLoad. Also, you'll probably want to set the default display of your element to "none" using CSS. And, as #Andreas commented, you would then put the $.fadeIn() call in a $(document).ready() callback, so it only executes once the DOM is loaded. So, all together now:
HTML:
<div id="intro"> HELLO, I AM </div>
CSS:
#intro {
display: none;
}
JS:
$(document).ready(function() {
$("#intro").fadeIn("slow");
});

remove homepage content using javascript

I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here

$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();

Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/

Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})

Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle

Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help

You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>

toggle div keep as it is after page refresh or change

In this example. I need my div is open if page is change or refresh.
I have given my HTML and Javascript.
This is where my code is live http://jsfiddle.net/wasimkazi/fauNg/1/
$(".widget2").hide();
$(".box2").toggle(function() {
$(this).next(".widget2").slideDown(200);
}, function() {
$(this).next(".widget2").slideUp(200);
});
$(".inner").hide();
$(".box").toggle(function() {
$(this).next(".inner").slideDown(200);
}, function() {
$(this).next(".inner").slideUp(200);
});?
<div class="box2"><h3>Basketball</h3>
</div>
<div class="widget2" style="display: block; "><div class="widget"><div class="box"><h3>Australia</h3></div>
<div class="inner" style="display: block; ">
<ul class="leagues">
<li class="even">Australian NBL</li>
</ul>
<div class="clear-both"></div>
</div></div>
</div>?

Use javascript coockie to save the Open and close state for each menu, and read the state when page loads. this is the only way to go since every time page is refreshed, everything is reset.

When you make a change, you can change what's after the # at the end of the url. Then when the page is reloaded, you read the value after the hash in $(document).ready() and make the changes accordingly.

You can use the is function to check if your div is hidden and show it
if($(".selector").is(":hidden"))
$(".selector").show();
Furthermore as #mikel said, put it inside document ready function for checking on pageload.
$(document).ready(function(){
if($(".selector").is(":hidden"))
$(".selector").show();
});

zeroclipboard element not working when located inside secondary/non-default jQuery tab

I've got a page with jQuery tabs, and I'm trying to link a div element inside a secondary tab with zeroclipboard. Unfortunately, it's not working because I suspect the secondary tab is initially hidden when the page is loaded.
The html is the following:
<span id="form" class="tabs tabs-normal grid100">
<!-- HEADER BUTTONS -->
<div class="row_btns_header">
<button class="btn_neutral">Cancel</button>
<button class="btn_primary last save">Save</button>
</div>
<!-- TABS -->
<div class="row">
<ul id="tabs-list">
<li>Blog</li>
<li>Links</li>
<li>Images</li>
<li>More..</li>
</ul>
</div>
<!-- DEFAULT TAB -->
<div id="blog" class="container">
</div>
<!-- LINKS TAB -->
<div id="links" class="container">
<div id="embed" style="position: relative">
Copy into the clipboard
</div>
</div>
<!-- etc. -->
The javascript is:
$(".tabs").tabs();
$("#embed").zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: "aaaaaaaaaaaa"
});
zeroclipboard works correctly, if I move the #embed div inside the #blog div. I suspect this is because #blog is visible by default.
Any ideas what I need to do in order to get the zeroclipboard element to work when it's located inside a secondary non-default tab?
Much thanks.
Bardi

I realize this is an old thread, but hopefully this helps someone out there.
I just had the same problem and the solution I came up with was to bind the creation of the zclip object to a mouseover event tied to the desired trigger button/link. Also, to prevent the script from reinitializing the zclip object each time a mouseover event occurs, just turn it off when it is first called. Here's an example:
The HTML:
<input type='text' value='Text being copied.'/> <input type='button' class='clipcopy' value='Copy'/>
The Javascript:
$(document).ready(function(){
$(".clipcopy").on('mouseover', function(){
//turn off this listening event for the element that triggered this
$(this).off('mouseover');
//initialize zclip
$(this).zclip({
path: "js/zclip/ZeroClipboard.swf",
copy: function(){return $(this).prev().prop('value');}
});
});
});
Hope it helps!

The tabs plugin sets the tab panels to display: none, which means the Flash doesn't get started right away. You could try hacking it with CSS:
.container.ui-helper-hidden {
display: block !important;
position: absolute;
left: -99999px;
}
This will override the display: none and instead position the panel off the screen - this way the content is loaded and the panel is measured, but won't be visible to the user. (This is the same way the .ui-helper-hidden-accessible used to work)

The point is initialize it on a mouseover event, I am use jquery.clipboard and this also work
$("a.button-copy-shortcode").on('mouseover', function(event){
event.preventDefault();
//initialize clipboard
$(this).clipboard({
path: pluginDir+'/tonjoo-tom/assets/js/jquery.clipboard.swf',
copy: function() {
var shortcode = $(this).find('.shortcodeValue').text();
return shortcode;
}
});
});