I want to create a click event for the image to automatically change the height to 100% while the other images to a height of 0. You can see it working live at the website www.nhadatsonnghia.com nhà đất gò vấp .
Below is the code I have tried. Can someone help me? Thanks very much.
$('.post-header .desc-image-list .thumb .natural-thumbnail').click(function () {
$(this).find('img').each(function () {
var image_url_in_first_list = $(this).attr('src');
$('.post-header .desc-image-list .full .natural-thumbnail').each(function () {
if ($(this).css('height') == '100%') {
$(this).animate({
height : 0
}, 100, function () {
$('.post-header .desc-image-list .full .natural-thumbnail').each(function () {
if (image_url_in_first_list === $(this).find('img').attr('src')) {
$(this).animate({
height : "100%"
}, 100);
}
});
});
}
});
});
});
Related
Hello im creating an iframe in my javascript. However the style and the loaded event doesnt seem to work. What am I doing wrong?
var iframe = $("<iframe src='/Player/ShowPage/"+data.PageId+"'/>", {
style: "position:absolute; left:-100%",
load: function () {
var that = this;
$(this).animate({
left: 0
}, 500);
$('iframe').not(this).animate({
left: '-100%'
}, 500, function () {
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
I must be missing something, I just cant figure out what it is. The iframe is just sitting there - mocking me - on the screen...
You just need to move the 'src' into the object literal and everything works fine.
var iframe = $("<iframe>", {
src: '/Player/ShowPage/' + data.PageId,
style: "position:absolute; left:-100%",
load: function () {
var that = this;
$(this).animate({
left: 0
}, 500);
$('iframe').not(this).animate({
left: '-100%'
}, 500, function () {
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
Please check this JSFIDDLE for a working demo.
I have an element that fills the screen, under that is another element but this one is hidden so you can't scroll to it manually.
My CSS stylesheet looks like this for that:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#page1, #content {
height: 100%;
width: 100%;
position: absolute;
}
#content {
top: 100%;
display:none;
}
#page1 stands for the element that fills the screen and #content stands for the element which is underneath that.
When I click on a button on the first element (which fills the screen), it shows the element under that and smoothly scrolls down to that.
I was using this piece of code in the first place:
$(document).ready(function() {
$('#exploreBtn').on('click', function() {
$('#content').fadeIn(500);
console.log($("#content").offset().top)
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 1000, function(){
$("#page1").css('display','none');
$('#content').css('top',0);
$(document).scrollTop(0);
});
});
});
Which works in IE and Mozilla, but I've tried to improve it...
Now I'm using this code:
$(function() {
var headerLoaded = true,
contentLoaded = false,
header = "#fitScreen",
exploreBtn = "#exploreBtn",
scrollBackBtn = "#scrollBackBtn",
content = "#content";
$(exploreBtn).on('click', function() {
if (!contentLoaded && headerLoaded) {
showScrollHide(content, header, function() {zit
var sum = ($('nav').height()) + parseInt($('nav').css('margin-bottom'));
$('#panelContent').css('margin-top', sum);
$('#content').css('top', 0);
$('html, body').css('overflow-y', 'auto');
$(window).scrollTop(0);
headerLoaded = false;
contentLoaded = true;
});
}
});
var showScrollHide = function(element, hide, func) {
$(element).fadeIn(500, function() {
$('body').animate({
scrollTop: $(element).offset().top
}, 1000, function() {
$(hide).fadeOut(100, func);
});
});
};
});
And for some reason, it doesn't work on IE and Mozilla.
It just gives me a slight delay, and then it fades in the screen I'm scrolling to.
Can anyone help me with this?
In your new code, you have this part :
$(element).fadeIn(500, function() {
$('body').animate({
scrollTop: $(element).offset().top
}, 1000, function() {
$(hide).fadeOut(100, func);
});
});
The difference between your working code and your not working code is which element you animate the scroll.
In you working code, you are animating 'body, html'. Depending on browser, the scrollbar is not on the same element. Hence, that's why you should target both html and body element :
$(element).fadeIn(500, function() {
$('html, body').animate({ //HERE!
scrollTop: $(element).offset().top
}, 1000, function() {
$(hide).fadeOut(100, func);
});
});
I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.
Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle
You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.
I'm trying to show some part of a div and animate it to 100% when the div is clicked.
and I want to animate it back to the initial height of the div if it's clicked again.
this is what i have so far,but it doesn't work. can anyone help?
#mydiv {
height:150px;
width: 100%;
overflow:hidden;
}
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").click(function(){
$(this).animate({height: '100%'}, 300);
}, function() {
$(this).animate({height: '150px'}, 300);
});
});
</script>
click() doesn't accept two function arguments, previously there was a toggle() function that performed how you need it but it has now been deprecated and removed from jQuery.
Since your use case is pretty simple, I believe something like this would be enough:
$("#mydiv").click(function () {
var $this = $(this);
$this.animate({
height: $this.height() == 150 ? '100%' : 150
}, 300);
});
Demo fiddle
This should do the job for you.
jQuery:
$(document).ready(function() {
$("#mydiv").toggle(
function() {
$(this).animate({height: '100%'}, 300);
};
function() {
$(this).animate({height: 150}, 300);
});
});
I am using the code to add margin to a div on click. It works perfectly, but I want to make it "animate" when it is adding margin for a sliding effect. How would I use .animate() to accomplish this?
<script type='text/javascript'>
$(document).ready(function () {
$('.menub').click(function() {
if ($('.content').css('margin-left') == '300px')
{
$('.content').css('margin-left', '0px');
}
else {
$('.content').css('margin-left', '300px');
}
});
$('.navigation a li').click(function() {
$('.content').css('margin-left', '0px');
});
});
</script>
Do this:
$('.content').animate({marginLeft: 300}, 1000);
where 300 is the left margin width and 1000 is the number of milliseconds to animate. Apply same logic to do the reverse animation. See http://api.jquery.com/animate/ for more info.
<script type='text/javascript'>
$(document).ready(function () {
$('.menub').click(function() {
if ($('.content').css('margin-left') == '300px')
{
$('.content').animate({'margin-left', '0px'},5000);
}
else {
$('.content').animate({'margin-left', '300px'},5000);
}
});
$('.navigation a li').click(function() {
$('.content').animate({'margin-left', '0px'},5000);
});
});
</script>
Refrence: http://api.jquery.com/animate/
Like this: (the key is to use the JavaScript property "marginLeft")
$('.content').animate({
marginLeft: '+=50'
}, 5000, function() {
});