We Keep Coding

Rebind Hover Effect After Click JQuery

So I have this element #box that needs to have a hover effect that displaces itself when hovered. The element will hover correctly using .hover in jQuery, then I need it to be clicked to display something, but after its clicked it should not have the hover effect anymore, so I used .unbind to remove it. Now when the user reclicks the element it will hide the info and then reapply the hover effect. So like a toggle effect. My question is what is the cleanest way to do this.
HTML:
<div class="box" id="box">
<h1 class="headline">ABOUT ME</h1>
</div>
CSS:
.box {
height: 320px;
width: 320px;
background-color: rgba(0, 0, 0, 0.6);
position: relative;
left: 10px;
top: 10px;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.headline {
margin: 0 auto;
color: white;
text-align: center;
display: block;
padding-top: 130px;
font-family: 'Montserrat', sans-serif;
}
.box_hover {
left: 0px;
top: 0px;
height: 300px;
width: 300px;
}
JQuery:
$(".box").hover(
function() {
$(this).toggleClass("box_hover");
}
);
$('#box').click(function() {
$(this).unbind('mouseenter mouseleave');
});
Here is the JSFiddle
EDIT 1:
To clarify I need it to add the class when its hovered on, then when its clicked maintain the "mouseenter" appearance, then when its re-clicked go back to being able to be hovered and moving based on the "mouseenter", "mouseleave".
Thanks!

Other then unbinding the event you can use a Boolean variable which the click event would toggle, that would control if toggleClass is called or not:
var bind = true;
$(".box").hover(
function() {
if(bind) $(this).toggleClass("box_hover");
}
);
$('#box').click(function() {
bind = !bind;
});
Fiddle Example

You could delegate the mouseenter/mouseleave events on the element when it has the .hover-effect class. Then you can toggle that class when clicking on the element.
In doing so, the mouseenter/mouseleave events will only be triggered when the element has the .hover-effect class, and since the class is toggled on click, you are essentially binding and unbinding the hover event on each click.
Updated Example
$(document).on('mouseenter mouseleave', '.box.hover-effect', function (event) {
$(this).toggleClass("box-hover", event.type === 'mouseenter');
});
$('.box').on('click', function() {
$(this).toggleClass('hover-effect');
});

If I understand the intent correctly, you simply need to toggle the class on click as well:
$('#box').click(function() {
$(this).unbind('mouseenter mouseleave');
$(this).toggleClass("box_hover");
});
Updated JSFiddle showcasing this.
Hope this helps!
EDIT
Depending on how the link will function, you could use a jQuery Mobile popup, and you wouldn't need to change the bindings at all.
You'll need to include the external scripts:
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
And slightly change your HTML:
<div class="box" id="box">
<h1 class="headline">ABOUT ME</h1>
</div>
<div data-role="popup" id="aboutme" class="ui-content">
<h3>Welcome!</h3>
<p>Popup content</p>
</div>
Along with your CSS:
.headline a {
text-decoration: none;
color: inherit !important;
}
Then, for the jQuery, you can simply use:
$('#box').click(function() {
$(this).toggleClass("box_hover");
});
I've created a new JSFiddle showcasing that here.

How can I save dragged & dropped elements VALUE after dropped all players (soccer manager)

i have a player soccer field and i want the user to create his own LineUp via Drag and Drop...
have a look at my fiddle: https://jsfiddle.net/ahsce0oj/2/
this is my js code and my fiddle:
$(function() {
$("#draggable2").draggable({
appendTo: "body",
cursorAt: {
cursor: "move",
top: 5,
left: 0
},
helper: function(event) {
return $("<img width='5%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
}
});
$("#droppable2").droppable({
accept: "#draggable2",
classes: {
"ui-droppable-active": "ui-state-default"
},
drop: function(event, ui) {
$(this).find("p").html("<img width='100%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
}
});
});
(there is only one position at the moment, just a test)
----> You have to move the Text (right side) into the rectangle (mean position of my goalkeeper)
but when i have my eleven positions and the "user" is done with his line up draft, how can I save his selection?
with IDs? or every time directly after he dropped an element?
thanks for any hints
Edit: I would be really happy for any other hints how could I delete a dropped player (--> manipulate the DOM—for example delete his shirt and write "GOALKEPPER" instead into a DIV or a <p> Element)

There's a lot of ways to accomplish your goals (pun intended, ha!) here. I will what I would do:
Working Example: https://jsfiddle.net/Twisty/54vgb8bx/4/
HTML Snippet
<section id="content">
<div id="field">
<div id="goalie" class="drop center rear">
<p>Goal Keep</p>
</div>
<div id="rightback" class="drop right mid">
<p>R. Back</p>
</div>
<div id="leftback" class="drop center mid">
<p>C. Back</p>
</div>
<div id="leftback" class="drop left mid">
<p>L. Back</p>
</div>
<div id="rightforward" class="drop right for">
<p>R. Forward</p>
</div>
<div id="leftforward" class="drop left for">
<p>L. Forward</p>
</div>
</div>
</section>
<!-- SIDBAR RIGHT -->
<aside>
<div id="item-1" data-type="shirt" class="drag">
<p>Move me into the rectangle! ! !</p>
</div>
</aside>
CSS Snippet
.drag {
float: left;
padding: 0% 1% 0%;
margin-top: 1%;
margin-right: 0%;
width: 39%;
color: white;
background-color: black;
}
.drop {
border: 2px solid white;
height: 5vw;
width: 5vw;
color: white;
font-size: 13px;
text-align: center;
}
.rear {
position: absolute;
top: 0;
}
.mid {
position: absolute;
top: 150px;
}
.for {
position: absolute;
top: 300px;
}
.right {
left: 135px;
}
.center {
left: 273px;
}
.left {
left: 403px;
}
#field span.remove:hover {
background-color: #000;
border-radius: 8px;
}
jQuery
$(function() {
$(".drag").draggable({
appendTo: "body",
cursorAt: {
cursor: "move",
top: 5,
left: 0
},
helper: function() {
var displayImage = $("<img>", {
width: "5%",
src: 'https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'
}).data("type", $(this).data("type"));
return displayImage;
}
});
$(".drop").droppable({
accept: ".drag",
classes: {
"ui-droppable-active": "ui-state-default"
},
drop: function(event, ui) {
var removeButton = $("<span>", {
class: "ui-icon ui-icon-circle-close remove"
});
var dropImage = $("<img>", {
width: "100%",
src: ui.helper.attr("src")
});
$(this)
.data("type", ui.helper.data("type"))
.data("title", $(this).text())
.find("p")
.html(dropImage);
removeButton.appendTo($(this).find("p")).position({
my: "left bottom",
at: "right top",
of: $(this).find("img")
});
}
});
$("#field").on("click", "span.remove", function() {
var me = $(this).parent(); // p
var parent = me.parent(); // div
var title = parent.data("title");
parent.data("type", "").html("<p>" + title + "</p>");
});
});
First you will see I adjusted the id and class attributes. This allows the drag and drop elements to have much more specific IDs, and then can be styled via CSS in a more generalized manner. I also added more positions to flush out the example of how this can help when initializing the Draggable and Droppable portion.
Second, you may notice I added a data-type attribute to our drag item. This can be a SKU or ID from a database, name of a product, whatever. We can also change the attribute to fit the data better. But this will be how we identify what the user has selected and what that have dropped it on later.
Next, we update the CSS to work the way we might need. Making use of position, I can make the #field our boundary, so that each absolute element within is positioned exactly where it should be.
Lastly, a lot of jQuery code. Not a lot of big changes to our draggables. Consider now that if you have more items, this will apply to each of them based on their class selector. When we make the helper, we tack on the data attribute so that we can tact it to the drop position.
For the drop, we want to do more.
Accept only a drag item
Append in the img
Update the product / ID data
Create a way for user to remove selection
Store the original text if item is removed
It was not clear if this should no longer be droppable, but you could easily add that in, such that you could not drop a new item onto it. But then initial drop again in the remove button.
All this happens in the drop. To avoid confusion (around $(this)), I setup the remove button click function outside of the drop.
This should be enough to get you well along. I suspect you'll make a save or complete button. In this I would advise iterating over each .drop and look for info in the data-type attribute for each as well as the id from the parent div. You can then build an object or array to send the data along to be processed.

How can I make this Jquery animate() with css3 animations?

This is my jfiddle
And this is my actual code
$card.animate({
left: "1000px"
}, 500, function(){
$card.hide(500);
});
(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated

First of all, create a class that you can trigger via jQuery that will have the animation.
Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.
Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.
#keyframes hide {
99% { display: auto; }
100%{ display: none; opacity: 0; }
}
.myelement {
transition: all .5s;
position: absolute;
left: 0;
}
.myelement.toLeft {
left: 2000px;
animation: hide .5s 1 forwards;
}
To trigger it, simply do this:
$(".myelement").addClass("toLeft");
Here is a working JSFiddle.
And like #MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.
It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.
Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.

Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.
var my_div = $('.myelement');
my_div.on('click', function() {
var $this = $(this);
$this.addClass("gone");
setTimeout(function(){
$this.hide();
}, 600 );
})
#mywrapper
{
overflow: hidden;
}
.myelement {
height: 200px;
width: 200px;
background-color: red;
opacity: 1;
position: relative;
transition: all 0.5s ease;
opacity: 1;
left: 0px;
}
.myelement.gone
{
left: 500px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
Click me please
</div>
</div>

jQuery (fully) expand and (partially) collapse div on mouse hover

I'm trying to implement rating functionality on my website.
I have the following HTML:
<div class="rating-container">
<div class="stars">
</div>
</div>
The stars div gets populated with 10 fa fa-star font-awesome star icons during runtime via jQuery
My CSS looks like this:
div.rating-container div.stars {
display: block;
}
div.rating-container div.stars i {
font-size: 20px;
color: white;
cursor: pointer;
margin-right: 3px;
padding: 3px;
}
..And the final result looks like this:
What I want to do now is to only show 1 star instead of 10 when the page initially loads. Hovering over the 1 star should expand the stars div so that all 10 stars show and the user can rate - once the mouse leaves the stars div, it goes back to only showing one star. I'm trying to achieve this using jQuery's $(this).animate({ width: someWidthHere }); on the $(".stars").hover()function but I can't seem to get it right.
Any help/pointers would be greatly appreciated.
Thanks in advance!
Update: per request, here is the (silly) test code I've tried:
$(function () {
$(".stars").hover(
function () {
$(this).animate({ width: '100%' });
},
function () {
$(this).animate({ width: '10%' });
}
);
});
Which gives me this on hover:

Hopefully I understand your question correctly. You can get trigger an event for on and off like this:
$( ".stars" ).hover(
function() {
$( ".stars" ).animate({ width: "100px" },1000);
}, function() {
$( ".stars" ).animate({ width: "20px" },1000);
}
);
Just an FYI, I think it might be better to just use css transitions and just use the .toggleClass() to expand and contract the div. It works better with some mobile browsers that have less processing power but either way works.
This is how you would do that with css:
.stars {
width:20px;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
.stars:hover{
width:100px;
}

how to make div slide from right to left

got a code here from someone....
what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.
HTML
<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>
CSS
#loginPanel {
color: #000;
cursor:pointer;
}
#userNav {
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
Jquery
// Open / Close Panel According to Cookie //
if ($.cookie('panel') == 'open'){
$('#userNav').slideDown('fast');
} else {
$('#userNav').slideUp('fast');
}
// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){
$('#userNav').slideToggle('fast', function(){
if ($(this).is(':hidden')) {
$.cookie('panel', 'closed');
} else {
$.cookie('panel', 'open');
}
});
});
Please need help on this one. just to make the div slide right to left
here is the fiddle http://jsfiddle.net/7m7uK/195/

You can use jQueryUI and additional effects Slide
http://docs.jquery.com/UI/Effects/Slide
Example:
$('#userNav').hide("slide", {direction: "left" }, 1000);
$('#userNav').show("slide", { direction: "right" }, 1000);
You can't use .slideToggle() to slide from left to right or vice versa, from http://api.jquery.com/slideToggle/:
The .slideToggle() method animates the height of the matched elements.
This causes lower parts of the page to slide up or down, appearing to
reveal or conceal the items. If the element is initially displayed, it
will be hidden; if hidden, it will be shown.
You should try and change your code to implement this code, but I think it's maybe better if you try with #s15199d answer, than you don't need to use jQueryUI
Ok, I created jsfiddle, you must include jQueryUI in order to work, you have different combinations of slide directions:
http://jsfiddle.net/7m7uK/197/
Ok, created another fiddle with cookies
http://jsfiddle.net/7m7uK/198/

Without depending on JQuery-UI
You need to place the content <div> you mean to slide inside a wrapper <div>. You then set the right margin of the content div to its negative width. The trick with the wrapper <div> is to have its x-overflow set to hidden so that it hides the content <div>. You can then use jQuery's native animate() routine to set the right margin to 0 to make the content <div> appear with a horizontal sliding effect.
HTML:
<div id="slider-wrapper">
<div id="slider-content">
</div>
CSS:
#slider-wrapper {
overflow-x: hidden;
}
#slider-content {
width: 300px;
margin-right: -300px;
}
JavaScript:
$("#slider-button").click(function () {
$("#slider-content").animate({ "margin-right": 0 }, "slow");
});
Here's a demo that uses a handle <div> to expand and collapse a div:
http://jsfiddle.net/gingi/KUCaL/

SLIDE DIV FROM RIGHT TO LEFT AND LEFT TO RIGHT
<div class="nav ">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</div>
CSS:
/*nav*/
.nav{
position: fixed;
right:0;
top: 70px;
width: 250px;
height: calc(100vh - 70px);
background-color: #333;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.nav-view{
transform: translateX(0);
}
JS:
$(document).ready(function(){
$('a#click-a').click(function(){
$('.nav').toggleClass('nav-view');
});
});
http://www.themeswild.com/read/slide-navigation-left-to-right

$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");

Have you tried this ?
if ($.cookie('panel') == 'open'){
$('#userNav').slideLeft('fast');
} else {
$('#userNav').slideRight('fast');
}