I am trying to slide down and slide up a div.At the time of loading the div will be kept disappeared/hide.
In this regard I used .hide() to keep the div disappeared/hide at the time of loading and after that I used .slideDown() to slide down and .slideUp() slide up the div.
My problem is when the page loads that div appeared for a moment like 1 millisecond after that it disappears. But I would like to keep the div disappeared/hide at the time of loading.
How can I solve the problem ??
You want to hide a specific div at page load. You don't need any jQuery/JS to do so.
Therefore, as per my comment, use CSS only:
div {
display: none;
}
You can use the css method to do this. At the time of load, add a class called "hidden" then, after the page fully loaded, remove that class and use fade in/fade out.
something like this:
$(documnet).ready(function() {
$("#element").addClass("hidden");
$("#element").fadeIn();
$("element").fadeOut();
});
Use the addClass property, to add a class to hide your div, then fade it back into view.
First add display:none; in your CSS file.
div {
display:none;
}
And add this script
$('div').slideDown().delay(300).slideUp();
If your are getting the same problem again, then it means your CSS file is taking more time to load, in this case you can add in-line style.
<div style="display:none"></div>
Related
I made a splash page using jQuery by appending a div on the page load. After a set amount of time, the body of the page fades in, though the appended div still displays itself at the end of the page. Tried to add .remove() at the end of the function to see if that would help, nothing though. I'd like to have it disappear as the rest of the page loads. Let me know if i'm going about this the wrong way.
https://swaybs.github.io/jdphotography/
$(document).ready(function() {
$('html').append('<h1 class="onLoad">loading...</h1>');
/*! Fades in page on load */
$('body').css('display', 'none');
$('body').delay(4000).fadeIn(1000);
$('html').remove('.onload');
You can use the complete callback function of fadeIn() to remove (or fade out the loading message).
Note: Instead of hiding the body, and adding the h1 to the html, it's better to add a use a main element (div or main), you can hide/show.
$('html')
.append('<h1 class="onLoad">loading...</h1>');
$('body').css('display', 'none')
.delay(4000).fadeIn(1000, function() {
$('.onLoad').fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm part of the body
You need to work on the CSS. The loading div should have an absolute positioning (and its container should have a relative one), otherwise it will always be pushed down by other elements as they appear.
Im using a few CSS transition to face in content when my homepage load. I start the transition by using a javascript that adds a class to the element with the transitions. Im looking to dynamically load next set of pages, and wonder if I can set a new transition for the second pageload to "reverse" the transition with a fade out on the elements on the current page.
Is this possible?
I'm not sure to understand exactly, but you can :
-use jquery .animate() and then .queue() if you just need a visual fade
$( '.activepage' ).animate({opacity: 0},200).removeClass('activepage').queue(function(){
$( '#mysecondpage' ).addClass('activepage').animate({opacity: 1}, 200);
$(this).dequeue();});
};
please explain exactly what you want to do.
Yes, if you are loading next page using ajax, you can fade out the main container and when the next page html comes from the ajax request, you can first replace the container html, and then execute the fade in on the same container.
If you are using jQuery for example, after the fadeOut finished, your container display will be "none", so when you add the new html, the user will see the empty container until you run the fadeIn and the whole container is showed up again with the effect :)
How to make two divs so that after clicked button old div is slade out and new div with new content is slide in?
My conception but not aligned inline:
jsfiddle
I found something similar to my conception but for my solution I need infinity loop with dynamically added content: example 1 or example 2
There were a few changes I made to the existing code and CSS, but this should do what you want. I also added a check to the reset button to ensure that the slideOut is not already hidden. Otherwise, the animation will unhide the element and hide it again.
It is better to put things into the jQuery $(document).ready() function to ensure that all of your elements have been loaded before trying to use them.
New Fiddle Link
I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.