Develop Reference

How can I animate a div to the right when it is pressed, and then, when it is pressed again, return it back to its first position with jQuery?

I have multiple clickable panels made with Bootstrap class panel, organized in this way:
Image of my website naoh
For example, when I click on the first panel, some other panels appear and cool stuff happens.
When you click a panel.
But I want that the panel that I clicked to be at the center. And then, when that same panel is clicked, I want to return everything to normal (which right now works with the specific panels per panel), including the main panel, so it should move to the left. The panels at the center doesn't require animation, and the right ones should animate to the left and back to the right.
Here is my jQuery code for the panels, lets say panel 2:
//Panel 2
if ($("#panel_2").data("clicked")) {
$(".navegadores").toggle(function () { });
} else {
$(".navegadores").hide();
}
$("#panel_2").click(function () {
$("#panel_2").data('clicked', true);
$(".navegadores").toggle(function () { });
console.log($("#panel_2").data("clicked"));
});
I feel I would need to use the .toggle method somehow, or the .slideToggle, but I'm quite confused atm.

Something like this should get you started:
$('#panel2').click(function(){
if ( $(this).data('clickstate') == 0 ){
$(this).animate({
marginLeft: '200px'
},1000, function(){
$(this).data('clickstate', '1');
});
}else{
$(this).animate({
marginLeft: '0'
},1000, function(){
$(this).data('clickstate', '0');
});
}
});
#panel2{position:relative;height:100px;width:100px;background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel2" data-clickstate="0"></div>

jQuery Dialog hover thumbnails using ASP.NET MVC 4

I have a little problem in making a small functionnality using jQuery and ASP.NET MVC 4.
I have a list of thumbnails, wich represents a list of products in my aplication :
<ul class="thumbnails">
#foreach (var thumbnail in Model.ForfaitsInThumbNail)
{
<!-- Now I Display Some infos about the thumbnail -->
<!-- This is the Dialog that I want to display when the cursor is hover every thumbnail -->
<div class='pop-up' id='pop-up'><h3>"#thumbnail.Forfait.Titre"</h3><p>"#thumbnail.Forfait.Description"</p></div>
</div>
<!-- This simply displays a description and the title of every product -->
}
</ul>
Well, I have a jQuery function that displays the pop-up menu customized to display the specific title and description of every product :
<script type="text/javascript">
$('.thumbnail').hover(function (e) {
$('#pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$('#pop-up').hide();
});
$('.thumbnail').mousemove(function (e) {
$("#pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>
So this function is working well, but it is not satisfying all my needs, because it only displays the title and description of the last thumbnail, but I need a function that narrows every div that have 'thumbnail' and displays it's specefic title and description. Any Ideas ? I would be very thankful for your help :)
Edit
Here is my new function like suggested :
<script type="text/javascript">
$('.pointHere').hover(function (e) {
$(this).children('.pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$(this).children('.pop-up').hide();
});
$('.pointHere').mousemove(function (e) {
$(this).children('.pop-up').css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>
I made a div wich has a class pointHere, and when we click to it the child element pop-up is displayed :) that works fine :) but the mouseover function doesn't work, also the hover function doesn't hide the pop-up when the mouse is not hover the pointHere div.

The problem is with the id pop-up. It is not unique. You have the same Id for all of your thumbnails
Instead of binding hover on .thumbnail, bind it on .pop-up and use this to get hold of that div
$('.pop-up').hover(function (e) {
$(this).show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$(this).hide();
});
Also, you have bad HTML. Your pop-up div is closed twice.

Buttons that move a DIV left or right

I am attempting to make a div scroll left or right either with a mouseover effect or on-click. However, I am at a loss as to what is going wrong.
Here was my attempt to do this simply:
<head>
<style>
#innerscroll{
margin-right:0px;
}
</style>
</head>
<body>
<div id="innerscroll"></div>
<img src="right.jpg"
onmouseover="document.getElementById('innerscroll').style.marginRight = setInterval(('value' + 1), 100);" />
</body>
Now, trying this, I'm wondering why it doesn't work. What am I doing wrong?
I also tried a more complex approach that also failed. Here's the code for that:
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-right' : '100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-right' : '-100px'
});
});
My last question was closed because I guess I was not specific enough. Whatever details you need please ask for and I'll edit the question!
Edit: I have the option of using jQuery but I would rather not.
Edit2: I am using setInterval to time the mouseover effect. I am thinking that it will move via mouseover or it will move via a click event.

My solution is using jquery too, like this:
using 2 buttons, one for left move and other for right move
$('#innerscroll').animate({
'marginLeft' : "+=50px"
});
and
$('#innerscroll').animate({
'marginLeft' : "-=50px"
});
you can make a function and pass the value to it.

You should use .style.paddingRight instead of .style.padding-right. jsfiddle
Modified code:
<img src="right.jpg"
onmouseover="onmouseoveronImge();" />
Since you are using jQuery you can attach mouseover event as below
<script>
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '+=100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '-=100px'
});
});
function onmouseoveronImge(){
$('#innerscroll').animate({
'margin-left': '+=100px'
});
}
</script>
Note: I don't think you want to use value return by setInterval. You should explain it in your question why you are using it.

Padding can't be negative value. Animate margin instead.
So your code should look like this:
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '-100px'
});
});​
Working jsfiddle here: http://jsfiddle.net/vqzrY/

If you have markup like:
<div id="container">
<div id="content">
</div>
</div>
Setting the padding on either #container or #content will not make the inner div move. You want to set the margin on the inner div to make it scroll horizontally, and set overlay:hidden on the outer div.

First, are you using the jQuery UI library? Your second example looks like you might.
Try this, does it do something similary to what you are trying to accomplish?
<div id="innerscroll">
Some Content...
</div>
<div class="nav-next>
Next
</div>
<div class="nav-previous">
Previous
</div>
<script type="text/javascript">
$('.nav-next').click(function(e) {
$('#innerscroll').animate({
right: 100
});
});
$('.nav-previous').click(function(e) {
$('#innerscroll').animate({
left: 100
});
});
</script>
If not, your example looks like you are doing a couple things:
Setting the padding with CSS
Setting padding on mouseover
Is that what you want to do?

Make div 'fullscreen' onClick?

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");
});

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