ajax show container not animating as expected - javascript

I am writing a plugin for showing ajax content.It is wrapped in a ajax-content-wrap.I have applied jquery animate() but not smooth with auto height.And fade() function is also animating.But when i use a specific height animate() works and fadeIn() does not works.
my html codes are below
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
My jquery
$('.ajax-content-show').animate({height:'200px'}, function(){
$(this).fadeIn('slow', function(){
$(this).fadeIn('slow').load(url);
})
});
My css
.ajax-content-show{
padding: 20px 20px;
display: block;
border: 1px solid #eee;
margin: 10px 0;
}

If I understand what you are trying to acheive here is a solution:
$('.ajax-content-show').animate({
height: '200'
}, 500, "linear",
function () {
$('.ajax-content-show').hide(0, function () {
$('.ajax-content-show').load(url, function () {
$('.ajax-content-show').fadeIn('slow')
});
});
});
If not, can you explain (in steps) what you require, first make "div" 200px then fade in "loaded page" or do them both simultaneously?
Note: Don't need to include the 'px' when setting the height property, JQuery assumes pixels as a default.

May this you want ?
See snippet.
$(".ajax-content-show").load("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){
$(this).slideDown(10000); // change the time, or just remove it if you think too slow.
$(this).addClass("loaded");
});
.ajax-content-show{
padding: 20px 20px;
display: none;
border: 1px solid #eee;
margin: 10px 0;
height: auto;
opacity: 0;
transition: opacity 5s ease;
max-height: 500px; /* This just for show that sliding is working */
}
.ajax-content-show.loaded {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>

Related

jQuery timed notification onclick

I'm looking to have the fade animation happen plus have the height of .hideme also growing from 0px to 30px during the ().delay(2000).
Instead of .hideme appearing as display: block; on click, I want it's height to go from 0px to 30px for ().delay(2000) while also keeping the fade animation.
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
$("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
}
.hideme {
background: blue;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
// $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
$("#post-draft1").show().animate({height: '30px',opacity: 1},1000).delay(2000).animate({height: '0px',opacity: 0},1000);
}
.hideme {
background: blue;
height: 0px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
To animate the height you could use the .animate() jQuery method.
$('.hideme').animate({height:'30px'});
But first, you have to set the height to a minor value:
.hideme {
background: blue;
height: 0px;
}
Instead of .delay() you could use the callback of fadeIn to animate the height of .hideme when fadeIn completes:
$("#post-draft1").fadeIn("slow", function(){
$('.hideme').animate({height:'30px'});
});
See: http://api.jquery.com/animate/

Make text fade in and stay visible until mouse leaves the container

I'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example
mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated
Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});
You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it

Click to Expand a <div> but hover away to back in Normal size

I have a <div> which expands when clicking on it and again click to it back in normal size which is fine BUT I am wanting to have Something like ...
When click on the <div> (class name .topHead) it should expand and return to normal size if the cursor is moved from the <div> without the need to click to bring it back to the normal size
Is this possible? Any solution will be appreciated.
js Fiddle : http://jsfiddle.net/saifrahu28/u6YWZ/
HTML
<div class="topHead" ></div>
CSS
.topHead {
height: 60px;
width: 100%;
background: #ccc;
overflow: hidden;
border-bottom: 6px solid #fa9a37;
z-index: 999;
transition: all 1.1s ease;
cursor:pointer;
}
.topHead.active {
height: 100px;
z-index: 999;
background: blue;
border-bottom: 6px solid #fa9a37;
transition: all 0.7s ease;
box-shadow: 0 4px 2px -2px gray;
cursor:default;
}
JS
$(".topHead").click(function() {
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
});
try this
$(".topHead").click(function() {
$(this).toggleClass("active");
}).mouseout(function(){
!$(this).hasClass("active")||($(this).toggleClass("active")/*,...*/);
});
http://jsfiddle.net/u6YWZ/2/
$(".topHead").on("mouseout",function() { // you may use mouseleave as well instead of mouseout
$(this).removeClass("active");
$(".TopsliderArrow").hide(); // Not Sure what this does but I guess you may hide this
});
Add this to your js
I'd be worried about getting the active class and TopsliderArrow visibility out of sync using toggle(). This method doesn't use toggle so may better suit your needs.
$(".topHead")
.on("click",function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
} else {
$(this).addClass("active");
$(".TopsliderArrow").show();
}
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Demo Fiddle
UPDATE:
Turns out toggle() works just fine:
$(".topHead")
.on("click",function(){
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Working Demo Fiddle

Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

I am trying to build a simple web page for my website using HTML, CSS, JavaScript and JQuery. What I want is to display a slideshow of a few of my images at the top of the page. I just want the pictures to fade out and fade in after one another forever until the user closes the browser. I want each picture to be displayed for a certain amount of time, after which it will fade out and another picture would fade in.
I referred to this as well as this post on SO but couldn't find a solution. I got some idea from this page and tried to develop some code.
The overall layout of the website is as follows:
For this, my index.html page looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css" />
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/common.js"></script>
<script language="javascript" src="js/banner_rotator.js"></script>
</head>
<body onload="loadBody();">
<div id="wrapper">
<img id="headerlogo" />
<div id="nav">
Home
About
Weddings
Portraiture
Landscapes
Products
Miscellaneous
Services
Contact
</div>
<div id="container">
<div id="content">
<!-- Main content starts here -->
<p>
Welcome to the world of The Siblings' photography.
</p>
imgpos = <span id="imgposspan"></span>
<!-- Main content ends here -->
</div>
</div>
</div>
</body>
</html>
The CSS is like this:
body {
background-color: transparent; color: #d0d0d0;
font: normal normal 11px verdana; margin: 0 auto;
}
#wrapper {
background-color: transparent; width: 960px; margin: 0 auto;
}
#headerlogo {
border-radius: 0px 0px 5px 5px; display: block;
width: 960px; height: 350px;
background-color: #d0d0d0;
}
#container {
width: 100%; margin-top: -35px;
}
#nav {
background-color: transparent;
color: #888888; border-radius: 5px; padding: 10px;
width: 100%; position: relative; top: -40px;
}
#nav>a {
border-radius: 5px; display: inline-block; padding: 5px 19px;
font-weight: bold; border: 1px solid transparent;
color: #888888; background: none none transparent no-repeat;
}
#nav>a:link {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:visited {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:hover{
text-decoration: none; border-color: #ffa500; background-image: url("/img/1x30_ffa500.gif");
background-repeat: repeat-x; box-shadow: 0px 0px 5px #ffd700;
}
#nav>a:active {
text-decoration: underline; border-color: transparent;
background-image: none;
}
#content {
background-color: #f0f0f0; color: #202020;
padding: 5px; border-radius: 5px;
}
The common.js file is like this:
$(document).ready(function (){
var images = new Array();
images[0] = new Image();
images[0].src = "img/coverpics/sea_link.jpg";
images[1] = new Image();
images[1].src = "img/coverpics/marine_drive.jpg";
images[2] = new Image();
images[2].src = "img/coverpics/backbay.jpg"
banner_rotator("headerlogo", images, 0);
});
And, the banner_rotator.js file is like this:
function banner_rotator(imgid, imgarray, imgpos) {
setInterval(function() {
if (imgpos >= imgarray.length || imgpos == undefined)
imgpos = 0;
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000, "linear");
$("#"+imgid).delay(6500);
$("#"+imgid).fadeOut(500);
// $("#imgposspan").html(imgpos);
imgpos++;
}, 8000);
}
Now, my problem description is as follows:
For the first few seconds the top portion is blank. The image is not showed, even though I am developing and having all the files on my local machine itself.
This first image directly pops up on the screen, instead of fading in.
After this image fades out, the image block vanishes, as if it is set to display: none; for a second. The entire page that follows the image shifts up. Then, the next image fades in and so forth everything runs normal.
Hence, in short, I have problems with the starting of this slideshow. Can anybody please help?
Also please tell me where can I put my code so everybody here can access and see for themselves how it runs?
JSFIDDLE
<img id="headerlogo" />
Don't do that (an image tag with no src attribute)
Put a div that will hold the space (set position:relative with width & height in css)
Then the problem is that you are changing your src attribute in your time loop, this ain't smooth
In your CSS, suppose you name your slider wrapper headerlogo_wrapper
div.headerlogo_wrapper > img {position:absolute;display:none;left:0;top:0}
Then you append your images to the space holder you have created (they will not show obviously)
Then you fadeIn your first image then you launch your setInterval :
//after having appended the images to the slider wrapper :
var $img = $("div.headerlogo_wrapper > img");
$img.eq(0).fadeIn(1000, "linear");
var ivisible = 0;
setInterval( function() {
$img.eq(ivisible).fadeOut(500);
++ivisible;
if (ivisible>$img.length-1) ivisible = 0;
$img.eq(ivisible).stop().fadeIn(1000, "linear");
}, 8000);
(If you want an image to be shown during load, some simple changes shall do; also if the first interval start immediately you obviously don't need to fadeIn "manually" the first image)
Try this: http://jsfiddle.net/3XV5M/
Your problem is the first time you run the timer function it won't run straight away. It will be run after 8000ms. The way this fiddle works is it will execute the function immediately and the run itself again after 8 seconds. Note I'm using setTimeout instead of setInterval.
function banner_rotator(imgid, imgarray, imgpos) {
if (imgpos >= imgarray.length || imgpos == undefined) imgpos = 0;
$("#"+imgid).attr({ "src" : imgarray[imgpos].src })
.fadeIn(1000, "linear")
.delay(6500)
.fadeOut(500);
imgpos++;
setTimeout(function() {banner_rotator(imgid, imgarray, imgpos) }, 8000);
}
The other problem is you need to hide the images first, so they can fade in. They wont fade in if they are already visible.
#headerlogo {
border-radius: 0px 0px 5px 5px;
width: 960px; height: 350px;
background-color: #d0d0d0;
display: none; /* Add this */
}
Then to prevent the other elements jumping up when you fade the images out, wrap the image element inside a div and set it's height. I used a div with a class of banner and added this style:
.banner {
height: 350px;
}
Hope that helps.
The problem is that you are fading out at the end of your interval. So replace this:
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000, "linear");
$("#"+imgid).delay(6500);
$("#"+imgid).fadeOut(500);
with this:
$("#"+imgid).fadeOut(500)
$("#"+imgid).queue(function(){
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000);
$("#imgposspan").html(imgpos);
imgpos++;
$(this).dequeue();
});
JSFIDDLE demo

jQuery .height() return 0 when visible but non-0 when hidden

I have problem here right opposite like others: in jQuery I cannot get height of element when it's visible, but when hidden. I have this HTML code:
<div id="filtering-filter-holder">
<div id="filtering-filter-holder-inner"></div>
</div>
basic CSS for it:
#filtering-filter-holder {
display: none;
position: absolute;
width: 420px;
min-height: 100px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px solid #164372;
}
and finally, JS in document.ready():
$('div.filtering-filter-headline').mouseenter(function() {
var el = $(this).parent().find('div.filtering-filter-content');
if ($('div#filtering-filter-holder').is(':visible')) {
$('div#filtering-filter-holder-inner').stop(true, true).fadeOut(300, function() {
$('div#filtering-filter-holder-inner').html($(el).html());
var height = $('div#filtering-filter-holder-inner').height();
$('div#filtering-filter-holder').stop(true, true).animate({ height:height }, 300);
}).fadeIn(300);
$('div#filtering-filter-holder').stop(true, true).animate({ left: $(this).offset().left }, 300);
}
else {
$('div#filtering-filter-holder-inner').html($(el).html());
$('div#filtering-filter-holder').css({ top: ($(this).offset().top + 22), left: $(this).offset().left });
$('div#filtering-filter-holder').fadeIn(300);
$('div#filtering-filter-holder-inner').fadeOut(1, function() {
var height = $('div#filtering-filter-holder-inner').height(); // not working without hidding this element
$('div#filtering-filter-holder').height(height);
}).fadeIn(1);
}
});
If filtering-filter-holder is visible, then some animations are added. If not, initial setup is required - however, I'm not able to get height of filtering-filter-holder-inner if element is display: block, and I have to hide it before. I'm wondering, what I have done in bad way - as Google says, developers have problem with opposite problem.
I would like to know why I have to hide element first.
I'm able to use both, jQuery and jQueryUI, as both is loaded on page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
The example is on: http://jsfiddle.net/tomis/jDWbK/

Categories