Develop Reference

resetting a div after animation

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

handle jQuery widget close method

I am new to jQuery widget and trying to learn it, I create a widget for displaying a dialog, the widget's _create() method does the following:
Adds a mask dialog for hiding the user screen.
Adds a close "button" which is a div with a handler for click event
Displaying the dialog to the user
When I click the close div I can remove the widget instance with the following command -
$(this).parent().remove();
I do not find a way to hide the screen masking div I create in the _create method.
Code for the create and close methods follows -
_create: function () {
var handle = this;
if (this.options.Height == 0) this.options.Height = this.element.height();
if (this.options.Width == 0) this.options.Width = this.element.width();
$(document.body).css({ margin: 0, padding: 0 });
this.wrapper = $("<div class='wrapperClass'>").css({
'height': this.options.Height,
'width': this.options.Width,
'position': 'absolute',
'left': '50%',
'margin-left': -1 * this.options.Width / 2,
'top': '50%',
'margin-top': -1 * this.options.Height / 2,
'border': '3px solid red',
'border-radius': this.options.Radius,
'z-index': this.options.Zindex
});
//create the screen masking background
this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 });
$('body').append(this.maskScreen);
this.element.css('display', 'block');
this.wrapper.html(this.element);
$('body').append(this.wrapper);
if (this.options.addClose) this._addClose();
},
_addClose: function () {
this.closeButton = $('<div />')
//add close class
.addClass("closeClass").css("z-index", this.options.Zindex + 1);
this.closeButton.on("click", function () {
$(this).parent().remove();
});
this.wrapper.append(this.closeButton);
},
How can I reference the screen masking div I created in the _create() method?

You should make use of the jqueryUI widget _destroy method to do the cleanup for you, that way you can refer all the variables and elements that you have added in the _create method and remove them all in the right order to restore the environment as it was.
In this case your closeButton should simply call the _destroy method of your widget instance and not doing any removal itself.
If you can post a working jsFiddle, I will show you the actual code.

leanModal.js - Close Modal on X Click

Need a bit of help with this query
Any way you guys can help?
-R

You must modify the leanModal.js source and add an <img> with some styling and click() handler calling close_modal().
Code:
$("<img />").css({
// styling for the img
'position': 'fixed', 'top': o.top + 'px', 'left': '50%'
}).click(function() {
// onclick behaviour - just close it
close_modal(modal_id);
// icon URL vvvvvvvvvvvvvvvvvvvvv
}).attr('src', 'http://bit.ly/ttN6Qs').appendTo($(modal_id));
See working code HERE.
Styling and icon-placement is very primitive, but you should be able to modify it how you like. It is only a demonstration :).

This is what I did for the div element:
$("<div >").css({
'position': 'absolute',
//'top': o.top + 'px',
'top': '-20px',
'right': '20px'
}).click(function() {
// onclick behaviour - just close it
close_modal(modal_id);
}).attr('class', 'cross-close').appendTo($(modal_id));
$(modal_id).fadeTo(200, 1);
e.preventDefault();
});
});
And had this has my CSS...
.cross-close:before {
content: "x";
}

I actually had the same issue, and resolved it by simulating the click on the overlay. For example, any link or image could be used and you simply add an onclick event:
Close
or
<img src="" onclick="$('#lean_overlay').click();" />
Seems to work well :D

Jquery-CSS bug fix

I've got the following HTML structure:
<ul>
<li><a href><img src/></a></li>
<li><a href><img src/></a></li>
<li><a href><img src/></a></li>
</ul>
Because of fixing some CSS bug I need to know which of these image links is "mouseovered"
Then in the Jquery script I need selector which is something like
$('a img').mouseover(function(){
var imgElement = $(this);
if ('a img[3]') { // if the hovered link is the third
imgElement.animate({
width: "315px",
height: "225px",
marginLeft: "-150px"
}, 1500 );
The question is how to get the second or third 'a img' in this case.

Try this
$('a img').each(function(i){
$(this).mouseover(function(){
if (i == 2) { // if the hovered link is the third
$(this).animate({
width: "315px",
height: "225px",
marginLeft: "-150px"
}, 1500 );
}
});
});

try this http://jsfiddle.net/pxfunc/M2KAF/
var $imgs = $('a img');
$imgs.mouseover(function() {
var $that = $(this);
if ($imgs.index($that) === 2) { // if the hovered link is the third
$that.animate({
width: "315px",
height: "225px",
marginLeft: "-150px"
}, 1500);
}
});

I would use jquery's nth child selector http://api.jquery.com/nth-child-selector/

I'm not sure I'm following you properly. If you want the third <li>'s <img> you can just use $('ul li:eq(2) a img').

animate element dynamically on creation

I want to dynamically create divs, append them to the body and set a jQuery animation.
This is where the elements are created:
function drawSpot()
{
var myH1 = document.createElement("div");
myH1.style.position = "absolute";
myH1.style.top = GetRandom(0,100)+"%";
myH1.style.left = GetRandom(0,100)+"%";
myH1.style.width="40px";
myH1.style.height="40px";
$("body").append(myH1);
}
And from the time on they are appended to the body, I want to start the animation.

If you already using jQuery, you should do it all the way:
$('<div>', {
css: {
position: 'absolute',
top: GetRandom(0,100)+'%',
left: GetRandom(0,100)+'%',
width: '40px',
height: '40px'
}
}).appendTo( document.body ).animate({
left: '100%' // for instance
}, 2000);
By using .appendTo() you still have a reference to your original object and be able to chain methods on it.
Ref.: jQuery constructor, .appendTo(), .animate()
demo: http://jsfiddle.net/dkuVu/

Use jQuery for creation of elements, and animate it when appending:
function drawSpot() {
var myH1 = $("<div>").css({ position: "absolute",
top: GetRandom(0,100)+"%",
left: GetRandom(0,100)+"%",
width: 40,
height: 40 });
$("body").append(myH1.animate(...));
}
http://jsfiddle.net/nagCf/

That should work
function drawSpot()
{
var myH1 = '<div id="newDiv">Some Text</div>';
$("body").append(myH1);
$("#newDiv").css({'position' : 'absolute',
'top' : GetRandom(0,100)+"%",
'left' :GetRandom(0,100)+"%",
'width':'40px',
'height':'40px'
});
$("#newDiv").hide().fadeIn(500);
}

You can use : $(myH1).animate({left:'*randomvalue*', top:'*randomvalue*'},1000); after the append.
http://jsfiddle.net/Wumrr/2/