detect the side of a div and hover - javascript

i am using this example http://jsfiddle.net/MJTkk/2/ in order to find where the cursor is(left or right in my example). i also have two images and i want the second.png to hover over the other smoothly but to hover on the direction of the cursor(follow the cursor).
<div class="box" id="box" style="margin:100px 0px 0px 100px">
<a href="#" target="_blank">
<div class="under_div"></div>
<div class="over_div"></div>
</a>
</div>
.box {
position:relative;
width:100px;
height:100px;
}
.under_div
{
background-size: 100px 100px;
height: 100%;
width: 100%;
position: absolute;
background-image:url(http://s30.postimg.org/dd01lyrjx/first.png);
background-repeat: no-repeat;
background-position: top right;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.over_div
{
background-size: 100px 100px;
height: 100%;
position: absolute;
background-image:url(http://s21.postimg.org/wjrhdklar/second.png);
background-repeat:no-repeat;
background-position: top left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover .over_div
{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
i implement this http://jsfiddle.net/9yj8or2z/1/ because i do not know how to explain it correctly. sorry for my english.
i see that it does not work properly and the div moves when hover for some reason. if someone could help i will appreciate it!

You should remove your css code in the jquery function completely for .under_div
i updated your FIDDLE if this is what you want to achieve.
EDIT i updated the fiddle once again. you got to give the over_div if it's coming from the right (so in the else tag in the first function) a position: absolute; right: 0; left: auto; and in the second function right: auto; left: 0;
FIDDLE NO 2 BOTH DIRECTIONS WORKING
ask if you got any further questions, but this should be it!

If your problem is that the grey png is moving too on hover, I think that this solution works.
$(function() {
$("#box").hover(function(e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
$('.under_div').css({
"left":"0",
"width":"100px",
"background-position":"100% 0%"
});
$('.over_div').css({
"left":"0",
"width":"0px",
"background-position":"0% 0%"
});
if(edge=='left')
{
$('.over_div').css({
"left":"0",
"width":"100px",
"background-position":"0% 0%"
});
}
else
{
$('.over_div').css({
"left":"0px",
"width":"100px",
"background-position":"100% 0%"
});
}
}, function(e) {
var el_pos = $(this).offset();
var edge = closestEdge(e.pageX - el_pos.left, e.pageY - el_pos.top, $(this).width(), $(this).height());
if(edge=='left')
{
$('.over_div').css({
"left":"0px",
"width":"0px",
"background-position":"0% 0%"
});
}
else
{
$('.over_div').css({
"left":"100px",
"width":"0px",
"background-position":"100% 0%"
});
}
});
});
function closestEdge(x,y,w,h) {
var leftEdgeDist = distMetric(x,y,0,h/2);
var rightEdgeDist = distMetric(x,y,w,h/2);
var min = Math.min(leftEdgeDist,rightEdgeDist);
switch (min) {
case leftEdgeDist:
return "left";
case rightEdgeDist:
return "right";
}
}
function distMetric(x,y,x2,y2) {
var xDiff = x - x2;
var yDiff = y - y2;
return (xDiff * xDiff) + (yDiff * yDiff);
}
.box {
position: relative;
width: 100px;
height: 100px;
}
.under_div {
background-size: 100px 100px;
height: 100%;
width: 100%;
position: absolute;
background-image: url(http://s30.postimg.org/dd01lyrjx/first.png);
background-repeat: no-repeat;
background-position: top right;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.over_div {
background-size: 100px 100px;
height: 100%;
position: absolute;
background-image: url(http://s21.postimg.org/wjrhdklar/second.png);
background-repeat: no-repeat;
background-position: top left;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.box:hover .over_div {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="box" style="margin:100px 0px 0px 100px">
<a href="#" target="_blank">
<div class="under_div"></div>
<div class="over_div"></div>
</a>
</div>

I fixed some issues with it: http://jsfiddle.net/9yj8or2z/2/
By adding left: 0; and width: 0px; to CSS, and also adding overflow:hidden;, I could fix that the gray box was moving at the beginning wrongly, but still animates.
I hope this is what you were looking for :)

Related

How to get a callback for css3 transition end?

I am trying the following but I get no callback at all
$("#panel").addClass("showPane");
$("#close_wikipedia").on("click", function() {
$("#panel").addClass("close_wiki");
});
if ($("#panel").hasClass("close_wiki")) {
$(this).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
$("#panel").removeClass("close_wiki showPane");
});
}
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
#panel.close_wiki {
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>
The issue is because you only check if #panel has the close_wiki class when the pages loads - which will never fire as it's added on button click.
Instead hook the transitionEnded event onload and wait for it to fire after the CSS transition completes. Also note that bind() is deprecated. You should use on() instead. Try this:
$("#close_wikipedia").on("click", function() {
$("#panel").removeClass("showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel" class="showPane">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>
Also note that you can make the logic much simpler (and remove the need to hook to transitionEnded at all by just toggling the showPane class on the #Panel element.
$('#panel').addClass('showPane');
$("#close_wikipedia").on("click", function() {
$("#panel").removeClass("showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>
You need to not chekc for the close_wiki class on page load and bind event based on it. Since this class is added dynamically on the close_wikipedia click. you can use event delegation to achieve the call back of transition event when close_wiki is clicked.
$("#panel").addClass("showPane");
$("#close_wikipedia").on("click", function() {
$("#panel").addClass("close_wiki");
});
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",".close_wiki", function() {
alert("called");
$("#panel").removeClass("close_wiki showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
#panel.close_wiki {
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>

show overlay on flexslider control thumb hover

im trying to customize the flexslider (http://flexslider.woothemes.com/thumbnail-controlnav.html) in a way that when a user hovers on a navigation thumbnail to show an overlay with an icon. Something like this http://callmenick.com/_development/image-overlay-hover-effects/
by editing the flexslider js code i managed to add a div
<div class="thumb_overlay"></div><img src="'+s.attr("data-thumb")+'"'+c+"/>":''+t+""
but i couldnt move it to above the image although i set relative positions
http://jsfiddle.net/livewirerules/r4uthech/1/
Any help will be appreciated
Thanks
Just add this to your CSS:
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
If you prefer, here is your fiddle updated:
http://jsfiddle.net/r4uthech/2/
I hope this can help you. :)

flexslider slides not chaning on thumbnail click

im using flexslider to display a slideshow with thumbnails. recently i added a css code to show an overlay when the thumbnail is hovered. But the problem is when i click on the thumbnail nothing happens.
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
but when i remove the content: " "; block it seems to work or else nothing happens when the thumbnails clicked.
Here is a demo of the slider slider demo
Can someone tell me what am i doing wrong?
Try adding :after to the img element, change li:after to img:after

Find <style> tag by id or attribute

I would like to dynamically remove or disable a <style> tag
that looks like this
<style type="text/css" id="cssx/portal/simple-sidebar.css" designtr="cssx/portal/simple-sidebar.css">
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
if I have the id or my own defined designtr property, I can't seem to disable or remove it like so:
var id = 'x';
var designtr = 'x';
document.getElementById(id).disabled = true; //doesn't work, throws an error saying element is null
$('style[designtr="' + designtr + '"]').remove(); //doesn't work, although strangely no error thrown
I read somewhere that even with HTML5 style tags can't have a valid id attribute.
All I want to do is either remove or disable a style tag, given some unique id that I have in hand.
Works like a charm:
document.getElementById('remove').onclick = function () {
document.getElementById('styl').remove();
};
<div>Some Div Content</div>
<button id="remove">remove</button>
<style id="styl">div{background-color: red}</style>
$(function() {
$("[id$=css]").remove()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css" id="cssx/portal/simple-sidebar.css" designtr="cssx/portal/simple-sidebar.css">
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
color:blue;
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div id="side-wrapper">abc</div>

Hover effect is under the image

So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>
You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>
Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/

Categories