I'm having an issue with trying to reset a div, containing an image, to the original value after I have animated it.
So I have a sort of quiz with 6 pictures positioned next to each other.
The user has to select one of 6 pictures. When clicked on that picture I make the picture go fullscreen. Afterwards, when the user doubleclicks on the picture the picture should go back to the original position for the next question.
However the return is not working and I don't understand why.
Beware: the divsare floated divs with specific left-positions so I would need to retain these...
This is the animation-code:
$(".candidatePicture").click(function(e){
$(e.target).css('z-index', 1);
$(e.target).animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
});
This is the return code:
$(".candidatePicture").css({ 'width': '250px', 'height': '300px', 'z-index': '0' });
You can find the code here: http://jsbin.com/gotuqenoce
Thank you for your help.
please try to change the events handlers as follow:
$(".candidatePicture").click(function(e){
var $this = $(this);
$this.css('z-index', 1);
$this.animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
$this.off("click");
});
$( ".candidatePicture" ).dblclick(function(e) {
$(this).css({ top: '', left: '', 'width': '', 'height': '', 'z-index': '' });
showNextQuestion();
});
http://jsbin.com/latiqemozo/edit?html,output
Related
Below is a JS fiddle that I have been using to implement a tooltip on my website.
JSFiddle
However when I implement this on my website, the title attribute value appears on rollover (like an alt attribute) as well as the tooltip. I need it not to do this! The actual code from my website is below.
Javascript
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
HTML
<ul class="thumb">
<li> <img src="slide1image.png" width="200" height="229" title="come join us and have lots of fun with our clowns, tigers and magician" /></li>
Do not use the title attribute then.
Use data-title as the attribute name and access it with the $this.data('title')
Demo at http://jsfiddle.net/gaby/62NT7/1/
Since the essence of what you want to do is to prevent the default behavior of hovering over an image, the following should take care of it:
$('img').on('hover', function( e ) {
e.preventDefault();
});
WORKING JSFIDDLE DEMO
Other ways of resolving this include:
- removing the attribute: $('img').removeAttr('title')
- saving the value to a data attribute and removing it: $('img').data('title', function() { return this.title; }).removeAttr('title');
- editing your markup so that you use a data attribute instead of title attribute - as #GabyakaG.Petrioli's answer.
I have this hover function for animating my imgs which works but after words when you re-size the window the images do not re-align with the width of the window, before the hover event the images will re-align, how do I reset the images after hover event show the images can be re-sized with the window?
$('.gallery img').hover(function(){
$('.gallery img').each(function(){
$(this).css({'top': $(this).offset().top, 'left': $(this).offset().left});
});
$('.gallery img').css({'position': 'absolute', 'z-index': 1});
$(this).css('z-index', 10);
$(this).animate({
width: "+=14",
height: "+=14",
left: "-=7",
bottom: "-=7"
});
}, function(){
$(this).css('z-index', 1);
$(this).animate({
width: "-=14",
height: "-=14",
left: "+=7",
bottom: "+=7"
});
});
You have supplied 2 functions for the hover().
E.g. .hover(function(){},function(){})
The first one is when the mouse enters, and the second one is when the mouse leaves.
I suspect the culprit is:
.css({'position': 'absolute', 'z-index': 1});
In the second function, try setting position: static. I would say after the animation.
I created the notification bar with the text effect everything seems ok but when i add the text effect like moving from left to right in that it seems work when in first time and after that it looks like this way see the FIDDLE
jQuery('.text').animate({
'right': '300px'
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
For the second time when i click expand it appears from center to right when i refreshing the page itself it appear properly for the first time.
Is there is a way to show the message as from left to right to center whenever i open the bar.
Thanks in Advance.
jQuery('.text').animate({
'right': '300px',
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
jQuery('.text').css('right', 'auto')
jQuery('.text').css('left', 'auto')
});
working demo : http://jsfiddle.net/UCTgR/12/ (Note: this demo has partial functionality yo just show what u missed, to check click on the banner)
I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?
DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});
$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})
What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});
I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});
jsfiffle: http://jsfiddle.net/P6tgH/
$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/
This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});
I 'm trying to open fullscreen image for 2 seconds and then close the image. After the image is closed, another element is shown.
$("#explosion-image").attr('src', %image_url%);
$("#explosion-image").css({
height:'100%', width:'100%', position:'fixed', top:0, left:0
});
$("#explosion-image").show();
$("#explosion-image").delay(2000);
$("#explosion-image").hide();
$("#explosion-image").attr('src', '');
$("#div-to-open").show();
This code only opens the image and than does nothing :(
Thanks for help in advance
try this fiddle out:
http://jsfiddle.net/maniator/JhcGb/
$("#explosion-image").css({
height: '100%',
width: '100%',
position: 'fixed',
top: 0,
left: 0,
display: 'none'
}).show()
setTimeout(function() {
$("#div-to-open").show();
$("#explosion-image").hide();
}, 2000)
delay() only really works on animations. You should use setTimeout instead. Even if it works, you need to chain the calls:
$("#explosion-image").show().delay(2000).hide();