auto slidedown div not working when page fully loads - javascript

i want to make so when the page full loads the div content slides down once but not working here is code
$(document).ready(function() {
$('#slidercontent').delay(1000).slideDown(100);
});
no result ;( hot to fix it ?
html
<div id="slidercontent">(here goes my Slideshow)</div>
css
#slidercontent {width:1101px; height:195px; margin:0 auto;}

You just need to add display:none; in the CSS. Also I hope that you are including the jQuery library before your javascript:
Here's the working fiddle: http://jsfiddle.net/gopi1410/Sjarv/1/
(have increased the slideDown time to 1000 to make it more visible)

There is no default effect named slideLeft so you have to use:
$(document).ready(function(){
$("#selector").delay(1000).animate({width:0},500);
});
or you can use setTimeout() method
$(document).ready(function(){
setTimeout(function(){
$('#slidercontent').animate({width:0},100,function(){
// do some other stuff after the animation is complete
});
},1000);
});

Related

jQuery click to fadeIn function not working

EDIT: Changed hover to click.
EDIT2: Ended up putting a 0.6 opacity copy div below it and applied the same animation and fadeOut to it, then made it fadeToggle on click which is working, but lags a bit. Any more efficient solutions are welcome!
I have a click function for a div element that's not working. I want the click to restore opacity to a previously faded element (that part works fine) but after hours of trying it's just not happening.
$(document).ready(function(){
$(document).scroll(function() {
$(".circle-nav-element-sm").animate({
left: '100px',
}, "slow");
$(".circle-nav-element-sm").fadeTo("slow", 0.6);
});
});
//Above part works fine.
$(document).ready(function(){
$(".circle-nav-element-sm").click(function() {
$(".circle-nav-element-sm").fadeIn("fast");
});
});
Can anyone see an obvious solution?
The jQuery fadeIn() method is used to fade in a hidden element.
At first make sure your circle-nav-element-sm div is hidden or not.If it is hidden it works for you if it is not please make sure it is hidden.
try using
$(document).ready(function(){
$(".circle-nav-element-sm").hover(function() {
$(".circle-nav-element-sm").fadeTo("fast",1);
});
});
I'm guessing fadeTo doesn't work well with fadeIn and fadeout
fadeIn vs fadeOut vs fadeTo

Delay with slow fade in after rest of page is loaded - Javascript

Basically, what I want to do is make it so that a Div with an image fade in after a delay, after the rest of the page has loaded. So all of the page would load, then there would be a delay, then the image would fade in. Here is my code. It doesn't seem to be working.
$(window).load(function() { // $(document).ready shorthand
$('.contentrightCopy').delay(i * 400).fadeIn(2000);
});
Fixed the problem. Works fine now.
I added...
display: none;
To the CSS of the .contentrightCopy then added this javascript.
$(window).load(function() {
$('.contentrightCopy').delay(2000).fadeIn(2000)
})

jquery add opacity while scrolling and loading the page

So I have a page that is loaded through pjax (non-pjax in IE) where a you have a bunch of links at the bottom.
Everytime you click on the hyperlinks , I make it scroll to the top of the page.
What's happening is that it scrolls to the top of the page while the page is still loading.
I am fine with that, but I was wondering is there a way to add some opacity while the page is loading?
Note: I am not sure of a solution that would work in both pjax and non-pjax enabled browsers.
$(document).on('click', 'my-link a', function() {
$('html, body').animate({ scrollTop: 0 }, 'fast');
})
;
I personally find your question really hard to understand, but I made an example for you:
DEMO
HTML:
<body>
<div class="loader"></div>
<div id="content">
<img src="http://0.tqn.com/d/studenttravel/1/0/i/T/Silleteros-1.jpg" />
</div>
</body>
JS:
$(window).load(function() {
$("body").css({ opacity: 1.0 });
})
CSS:
body {
opacity: 0.5;
}
While page is loading, body is set to opacity 0.5, after page is finished loading, opacity will be set to 1.0.
Also added code to example fiddle that will not load image from cache, so that effect will always shown when fiddle is run (if effect is not shown when running it first time, try running it again). Hope this helps you.
depending on what content is beeing loaded you can add event listeners for onload then scroll / change opacity to lower value on 'onclick' event and revert on 'onload'.

Show/hide controls on flexslider on hover?

I have a flex slider with prev/next arrows, pretty standard. I hide the arrows on the page load and only want them to appear when the user hovers over the carousel info.
Here's my code:
$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home .flexslider").hover(
function(){
$(".flex-container.home ul.flex-direction-nav").fadeIn();
},
function(){
$(".flex-container.home ul.flex-direction-nav").fadeOut();
}
)
The problem now is that when the user actually hovers over the arrow itself, it fades out, since technically I'm asking it to do so. I've tried to add some !important css to the ul.flex-direction-nav css styles but it doesn't stop the fade out from happening.
Change your code to the following. I've modified your selectors and used fadeToggle() to save you writing extra code.
Here is the new version, which works how you specified you would like:
$(document).ready(function () {
$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home").hover(function () {
$(" ul.flex-direction-nav").fadeToggle();
});
});
Here is a working jsFiddle.
pauseOnHover:true, //this option working good
below css solved the issue for me-
.big-slider .flex-direction-nav {opacity: 0 !important;}
.big-slider .flex-direction-nav:hover {opacity: 1 !important;}

How can I ensure that my Submenu does not disappear when I hover out or add a delay before it disappears

I have a CSS3 Navigation Menu with no Javascript, I like how it is right now but there is one problem and the users are getting bothered with it.
The problem is that when a user hover over a Menu Link the submenu pops up which is exacly what I want but If user move the mouse arrow away from the submenu or the menu link, its dispairs ULTRA fast. It's very annoying and I have no Idea how to fix this, there is two solutions one way is to always show the submenu the other solution is that when a user hover out from the submenu the submenu should atleast wait 5-10 secs before disappearing and also if you hover out and hover back the submenu should stay. But I have no idea how to do it.
Here is the code and example try it out, any solutions is appreciated!
http://jsfiddle.net/nPdNd/ expand the result window in Jsfiddle to see the whole nav menu
Thanks in advance!
Example: http://jsfiddle.net/nPdNd/40/
Using jQuery
$(document).ready(function(){
var clearli;
$(".test").hover(function() {
clearTimeout(clearli);
$("ul#nav li").removeClass('current');
$(this).addClass('current');
}, function() {
var getthis = $(this);
clearli = setTimeout(function() {
$(getthis).removeClass('current');
}, 500);
});
});
Changed CSS
ul#nav li:hover > ul { to ul#nav li.current > ul {
ul#nav li:hover > ul li a { to ul#nav li.current > ul li a {
EDIT: I changed the selector due to a bug to .test and added class test to the <li>
EDIT2: I feel stupid, I forgot to stop the timeout counter. Edited above.
Multiple solutions exist to address your problem:
Use css-transitions to delay disappearance of your submenu (you mentioned in chat that you don't have access to stylesheets... maybe try using inline styling? It's not the best idea, but maybe you can live with it):
http://www.w3schools.com/css3/css3_transitions.asp
https://developer.mozilla.org/en/CSS/CSS_transitions
http://www.w3.org/TR/css3-transitions/
If you have jQuery, you can use .animate() to do
the same thing:
http://api.jquery.com/animate/
Take a look at .stop() too:
http://api.jquery.com/stop/
If all else fails, you can try playing around with setTimeout();
https://developer.mozilla.org/en/DOM/window.setTimeout
http://www.w3schools.com/js/js_timing.asp
this is ONLY an example - http://jsfiddle.net/nPdNd/22/
i would suggest you experiment yourself, until you get a desired result
this example is based on mouseenter/mouseleave events:
$("#nav li").mouseenter(function(){
$(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
$(this).children('#sub').hide("slide", { direction: "up" }, 300);
});
it is also uses JQuery UI
Hop, here is your jsfiddle modified: http://jsfiddle.net/Ralt/nPdNd/25/
Now, as you can see, it's far from perfect. You shouldn't change the style property, but rather add then remove a class, but you get the idea of how to do that.
Please add this script in you page , This is easy way
Step 1-
Add comon jquery in you page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Step 1-
Add this script in your page -
<script type="text/javascript">
jQuery(document).ready(function() {
$('ul#nav li').hover(function()
{
$(this).find('ul').stop(true,true).slideDown()
},
function()
{
$(this).find('ul').stop(true,true).slideUp()
});
});
</script>
I do have little changes in your css
Demo http://jsfiddle.net/nPdNd/28/
your code (li:hover)not work ie6 , did u check it ?
Check it.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
Is this speed is ok for you....
CSSS transitions would be the only way to do this with only CSS. Simply set the transition-delay, then no CSS change will take effect until the delay clock is done. The only problem with this is IE, which does not support CSS transitions.
https://developer.mozilla.org/en/CSS/transition-delay
Other than this you will need to resort to JavaScript based menus, implementations of which can be found all over the internet.

Categories

Resources