i need some help with the following:
i have a an image placed in my body which has a hover function
<div id="wrapper">
<img style="position: absolute;" src="img/image.png" name="man" width="150" id="man_1" />
</div>
$("#man_1").hover(function () {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
},function () {
$('#hoverimg').remove();
console.log("leave mouse");
});
as you can see when im hovering the image, it appends another image which has the same top and left values as #man_1. The problem is, that when im leaving the mouse the remove does not fire because the mouse is actually on the new hoverimg
hope you get my point! Thanks
Working FIDDLE Demo
Maybe with another markup, it be easier to to this:
HTML
<div id="wrapper">
<div class="photo">
<div class="image"><img src="http://placekitten.com/200/220" /></div>
<div class="size"><img src="http://placehold.it/200x40" /></div>
</div>
</div>
CSS
.photo {
position: relative;
height: 220px;
overflow: hidden;
width: 200px;
}
.photo .image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.photo .size {
position: absolute;
height: 40px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin-bottom: -40px;
transition: margin-bottom 0.3s;
}
.photo .size.show {
margin-bottom: 0;
}
JS
$(function () {
$('.photo')
.on('mouseenter', function () {
$(this).find('.size').addClass('show');
})
.on('mouseleave', function () {
$(this).find('.size').removeClass('show');
});
});
You have to use the mouseenter and mouseout events
$("#man_1").mouseenter(
function() {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
});
$('#hoverimg').mouseout(
function() {
$('#hoverimg').remove();
console.log("leave mouse");
}
);
What if you bind the hover event to the #wrapper instead?
That works, in this FIDDLE.
Please have a look at http://jsfiddle.net/2dJAN/43/
<div class="out overout">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSuTs4RdrlAhxd-qgbGe9r0MGB9BgwFrHDvfr9vORTBEjIYnSQ8hg" />
</div>
$("div.overout").mouseover(function() {
$(this).append("<img src='http://files.softicons.com/download/system-icons/apple-logo-icons-by-thvg/png/512/Apple%20logo%20icon%20-%20Classic.png' id='hovering'/>")
}).mouseout(function(){
$('#hovering').remove();
});
I used mouseover and mouseout instead of hover.
I understood as you want to show both images on mouseover and remove the added image on mouseout. Is that correct or not?
Related
i have that jquery code
$(function(){
$('.efectfade img:gt(0)').hide("");
setInterval(function(){$('.efectfade > :first-
child').fadeOut().next('img').fadeIn().end().appendTo('.efectfade');},
5000);
});
css
.efectfade {background-size: cover;
background-position:center;
background-repeat: no-repeat;
overflow: hidden;
width: 100%;
z-index: -1;
opacity:0.8;
height: 100%;}
and html
<div class="efectfade">
<img src="http://cdn.akamai.steamstatic.com/steam/apps/304390/ss_f49a29395ae871
76ee986dc16eddf9c4a3285231.1920x1080.jpg?t=1511961587">
<img src="
https://fsmedia.imgix.net/95/59/72/bf/16f7/467c/9232/c85b40a56d06/the
-brutal-centurion-one-of-the-two-new-heroes-playable-in-
shadow--might.jpeg">
</div>
and here is jsfiddle https://jsfiddle.net/rypz99/pyxjhfbv/
my question how to not flashing when changing image
For a brief moment both images are displaying. The image that is fading in is displayed beneath the image that is fading out. The flash you're seeing is the white background of the body.
I believe that one way you can achieve your desired effect is to have a div containing both images absolutely positioned within. Set Image1 to have a higher z-index than image2, and apply a fade animation on Image1.
$(() => {
$("#container").click(() => {
setInterval(() => {
$("#image1").fadeOut()
setTimeout(() => {
$("#image1").fadeIn()
}, 2500)
}, 5000)
})
})
#container {
width: 100px;
position: realative;
}
img {
width: 100px;
position: absolute;
top: 1;
left: 1;
}
#image1 {
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<image src="http://exchangedownloads.smarttech.com/public/content/a2/a28daee5-573f-4f1d-943d-807b0fc164f5/previews/medium/0001.png" id="image1"/>
<image src="https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/ab/5e/0a/ab5e0a5a-7e10-ba06-5ca4-1cffe0cfd753/AppIcon-1x_U007emarketing-85-220-0-5.png/200x0w.jpg" id="image2"/>
</div>
See here
https://jsfiddle.net/97Lahmoh/ OR http://www.w3schools.com/code/tryit.asp?filename=FB8TE2KSHGZ5
basically I want to use jquery ui toggle slide animation without any jquery and plugins.
this is jquery code which does the work.
$( "#effect" ).toggle("slide", {direction: "left"}, 500);
how to use it on pure javascript code? I'm not good at animations.
You can use css transition with position property.
try this one:
function toggle() {
var div1 = document.getElementById("div1");
if (document.getElementsByClassName("hide").length == 0) {
div1.className = "test hide";
} else {
div1.className = "test show";
}
}
.test {
width: 200px;
height: 100px;
background-color: #2354A4;
transition: left 2s;
position: relative;
top: 0px;
bottom: 0px;
right: 0px;
}
.hide {
left: -250px;
}
.show {
left: 0px;
}
<div id="div1" class="test hide">
</div>
<button id="btnToggle" onclick="toggle()" type="button" name="btnToggle">TOGGLE</button>
You can achive this by using css transition property.
Here is the JSFIDDLE
i'm really new to all this coding things etc. (1 month :P) and actually i try some things with jQuery.
I used the search function but actually it's quite hard for me to understand everything :P
My goal is:
When i hover over an image another image which sits on top of it slides up and another slides down.
They're all images - i don't want to publish the Website and only want to use it on my Computer for testing ^^
Also the picture on the top should be hidden at first. (I know how to do it but i actually don't know if it will be shown when using slideDown)
HTML:
<div class="newschange">
<div class="News wow fadeInDown animated"><img src="images/News.png" /></div>
<div class="newstext wow fadeInUp animated"><img src="images/newstext.png" /></div>
<div class="newshover"><img src="images/alt/newstext.png" /></div>
</div>
My jQuery Script: (it's actually in the header of the HTML)
<script>
$(function() {
$('.News').mouseover(function (){
$(.'newstext').slideUp(300);
$(.'newshover').delay(400),slideDown(300);
});
})
</script>
CSS (i don't know if this is necesarry for this :P)
.newshover {
position: absolute;
left: 802px;
top: 455px;
width: 359px;
height: 35px;
}
.newstext {
position: absolute;
left: 781px;
top: 456px;
width: 446px;
height: 32px;
}
.News {
position: absolute;
left: 377px;
top: 276px;
width: 854px;
height: 318px;
}
The problem is just that nothing happens when i hover over it :)
Here is a Screenshot:
http://i.stack.imgur.com/dzyFH.png
The 1. image is the whole thing with at the top "News" the image and the rounded rectangle.
NEWS SECTION! is the one i want to show AFTER i hover over the first image.
The red Text behind it is the one i want to hide when i hover over the first image. :)
//solved Code
<script>
$( document ).ready(function() {
$(".News").on('mouseenter',function () {
$(".newshover").delay(600).slideToggle(500);
$(".newstext").slideToggle(500);
});
$(".News").on('mouseleave', function(){
$(".newshover").slideToggle(500);
$(".newstext").delay(600).slideToggle(500);
})
});
</script>
<script>
$(function(){
$(".newshover").hide(0);
})
</script>
If I understood well your question this piece of code should work: https://jsfiddle.net/5naaq121/
HTML:
<div class="newschange">
<div class="News"><img src="http://maalaeasurfresort.com/wp-content/uploads/2014/09/beach_cy.jpg" /></div>
<div class="newstext"><img src="http://www.honduras.com/wp-content/uploads/2012/05/white-sandy-beach2-300x200.jpg" /></div>
<div class="newshover"><img src="http://www.lakecountyparks.com/_images/whihala_beach/wb_beach.jpg" /></div>
</div>
JS:
$(function(){
$('.newschange').mouseenter(function (){
$('.newshover').slideUp(300);
$('.newstext').delay(400).slideUp(300);
})
});
CSS:
.newschange {
display:block;
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.newshover {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
.newstext {
position: absolute;
left:0;
bottom:0;
width:300px;
height:200px;
}
.News {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
can anyone help me how to make a light off effect if i click any of my textboxes?
I found this idea in this site: http://www.emanueleferonato.com/stuff/lightsoff/
I want to do is when i click the textbox that particular textbox will be high-lighten and if i click that textbox again it will remove the light off effect.
Does anyone know how to do that?
html code:
<input type="text" readonly id="myname1" style="width:1000px; height:30px !important " />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important " />
script code:
<script>
$(function(){
$('#myname1').on('click', function(){
alert(1)
})
})
$(function(){
$('#myname2').on('click', function(){
alert(2)
})
})
</script>
Here's how I would do that:
HTML:
<input type="text" readonly id="myname1" style="width:1000px; height:30px !important" />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important" />
<div id="overlay"></div>
CSS:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0,0,0,.5); /* Semi-transparent */
}
.highlight {
position: relative;
z-index: 11;
}
JavaScript:
$(function () {
var lightsOff = false;
$('#myname1,#myname2').on('click', function () {
lightsOff = !lightsOff;
$('#overlay').fadeToggle(1000); /* Choose desired delay */
if (!lightsOff)
setTimeout((function() {
$(this).removeClass('highlight');
}).bind(this), 1000); /* Same delay */
else
$(this).addClass('highlight');
})
})
Demo: http://jsfiddle.net/AP6kr/
Here is a basic version I just made, take a look and mess around with it.
So we create an overlay this will take up the whole screen with a black background. We then want to have another div where the content we want to show will go, on this div we set z-index: 1 so it sits on top of the overlay.
From here its just as simple as using fadeIn and fadeOut to get the effect we want.
Note: This is very basic version, you can do better then this so mess around and see what you can do with it. This should give you a good start.
HTML:
<div class="overlay"></div>
<div class="highlight">Test
<br/><span class="on">On</span> | <span class="off">Off</span>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
.overlay {
background: black;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
top: 0;
display: none;
}
.highlight {
width: 100%;
background: white;
z-index: 1;
}
jQuery:
$(".on").click(function () {
$(".overlay").fadeIn();
});
$(".off").click(function () {
$(".overlay").fadeOut();
});
DEMO HERE
I have an image with an overlay DIV which shows 2 images when I hover on the image, this works fine, but I want it to be dynamic and work for countless images on the page, currently it works for the first picture only, I'm not that good with javascript and jquery and would appreciate your help on this one.
Jquery Code:
$("#imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
HTML Code:
<div id="imageOverlay">
<div id="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
<img src="http://placehold.it/1000x1000&text=Thumbnail">
</div>
CSS Code:
#imageOverlay {
display: inline;
position: relative;
}
#imageOverlay #hover {
display: none;
position: absolute;
margin-top: 10px;
margin-right: 10px;
z-index: 2;
}
#imageOverlay #hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
Use a class for #imageOverlay and #hover, you can only have one instance of an ID, so when you have more than one of those IDs, the function is only finding the first one. Also, just fade the container box, not each individual image. Also, use stop() before an animation to make sure you don't get weird behavior when people are mousing on and off your element. Then, putting the main image first ensures that the hovered images are "on top" without having to worry about z-index.
HTML
<div class="imageOverlay">
<img src="http://placehold.it/1000x1000&text=Thumbnail">
<div class="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
</div>
JS
//fade out the images initially
$(".imageOverlay .hover").fadeTo(0, 0)
$(".imageOverlay").hover(
function() {
$(this).find(".hover").stop().fadeTo(200, 1);
},
function() {
$(this).find(".hover").stop().fadeTo(200, 0);
} //when writing clean code, be sure your closer ends at the same indent as your opener
);
CSS
.imageOverlay {
display: inline-block;
position: relative;
}
.imageOverlay .hover {
position: absolute;
top: 10px;
right: 10px;
}
.imageOverlay .hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
And your images should show up on top when you hover!
Make #imageOverlay a class and apply it to multiple attributes in your html.
css:
.imageOverlay
//css rules
jquery:
$(".imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
html:
<div class="imageOverlay">
// do stuff
</div>
<div class="imageOverlay">
// do stuff
</div>