I want to change the opacity of the main image when the mouse hover on the right image simple as that:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
visibility: hidden;
}
#center {
position: absolute;
margin-left: -655px;
margin-top: 20px;
visibility: hidden;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("main").css("opacity","0.4");
$("right").css("visibility","visible");
}, function () {
$("main").css("opacity","1");
$("right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
but when the mouse get on the hidden right image nothing happen. what am missing here?
You cannot hover over a hidden element.You are binding event to #right which is visibility:hidden
change css properties of right to:
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
}
now the element can be seen in DOM and hover event is triggered
JSBIN
you are missing the # id in the jQuery selector
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
I have solved it , instead of using visibility: hidden; I used opacity: 0; and this way it worked fine , thanks for the comments guys :)
try this
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg" />
<img id="right" src="img/1477253.jpg" />
<img id="center" src="img/Untitled-2.png" />
</body>
</html>
Remove css class i.e #right and #center and see the result. Due to this class you are not able to see the image.
You are missing # and hidden element means it is gone. You cannot get mouse hover on it. Use opacity 0 instead. Another point, your image position may not show image on the screen, except it is very large, so I comment it.
Here is the modified version.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1.0;
}
#right {
/*position: absolute;*/
/*margin-left: -310px;*/
/*margin-top: 320px;*/
opacity: 0.0;
}
#center {
/*position: absolute;*/
/*margin-left: -655px;*/
/*margin-top: 20px;*/
opacity: 0.0;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("opacity","1.0");
}, function () {
$("#main").css("opacity","1");
$("#right").css("opacity","0.0");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
visibility: hidden;
}
#center {
position: absolute;
margin-left: -655px;
margin-top: 20px;
visibility: hidden;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
Use this.
$(document).ready(function () {
$("#right").mouseover(function () {
$("#main").css("opacity", "0.4");
$("#right").css("opacity", "1");
}).mouseleave(function () {
$("#main").css("opacity", "1");
$("#right").css("opacity", "0");
});
});
DEMO
Related
I try my code but it is not working please check the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button>Click me</button>
<p style="width: 90px; background-color: #40FF08">This is a test peragraph</p>
</body>
</html>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
</script>
That is because the position property of the p element is static and left won't work on static elements - change it to say relative and it works - see demo below:
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p {
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
Add position: relative and your animation will work just fine.
p {
width: 90px;
background-color: #40FF08;
position: relative; <-- like this
}
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p{
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
Hello I have problem with really easy script. It should change class if under 768 px of window width but it just doesn't work. I have no clue why. I dont want to use media queries in this in this case.
Here's code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ez</title>
<style>
.aside {
float: left;
height: 1000px;
width: 250px;
background-color: grey;
}
.sidebar {
position: absolute;
top: 0;
left: -250px;
}
</style>
</head>
<body style="height: 2000px">
<aside class="aside" id="aside"></aside>
<main style="float: left; height: 1000px; width: 70%; background-color: black;"></main>
<script>
var elm = document.getElementById("aside");
function change() {
var w = window.innerWidth;
if(w<768) {
elm.className = "sidebar";
} else {
elm.className = "aside";
}
}
window.addEventListener("resize", change);
</script>
</body>
</html>
I started your script. For 768px and more there is class 'aside', for 767px and less class 'sidebar'. So where is the problem?
If you open page on width less than 768 your script won't be working correct. You have to add it to event onload too
Preview of how it should be: https://www.youtube.com/embed/8qKRf0cg3Co
As in the video, I have to click on the img to get a large view of the img under it.
So far this is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>
<body>
<center>
<div id="wrapper">
<div id="nav">
<div id="overbalk"></div>
<img src="images/foto_01.png" align="top" class="foto" />
<img src="images/foto_02.png" align="top" class="foto" />
<img src="images/foto_03.png" align="top" class="foto" />
<img src="images/foto_04.png" align="top" class="foto" />
</div>
<div id="content">
<img src="images/foto_01.png" align="top" class="slide_foto" />
</div>
</div>
</center>
</body>
</html>
CSS:
<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top: -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>
JS:
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginTop: '-=50'}, 200);
});
$('.foto').click(function () {
$(this).next('#content').show();
});
});
I also tried this:
$('.foto').on('click', function () {
$('#content').html(nieuwe_foto).show();
var nieuwe_foto = $(this).attr('src');
$('.slide_foto').attr('src', nieuwe_foto);
}
None of this worked, and got a little bit stuck, the images aren't showing below the small images.
You need to make 2 changes:
Remove this style class from <style>
.slide_foto {
margin-left:-3200px;
}
Make this change in your onclick handler
$('.foto').on('click', function () {
var nieuwe_foto = $(this).prop('src');
$('.slide_foto').prop('src', nieuwe_foto);
});
I have made a working fiddle with sample images https://jsfiddle.net/sachin_puthran/c2qgjpj1/
The following doesn't do anything since nieuwe_foto is undefined until the next line and div#content is already visible .show() doesn't do anything either.
$('#content').html(nieuwe_foto).show();
The .show() isn't what you're looking for. It will essentially "unhide" an element. So if an element has a display: none style then .show() will restore the initial display style. See the docs.
You're closer with your second attempt though. All you want to do in the $('.foto').click function is set the src of the .slide_foto element to what is currently in the src of the this object.
I am trying to implement a drag and drop image upload similar functionality to imgur.com.
You drag an image from your desktop and a big overlay div with the word 'upload' appears as you drag over your document.
My problem is that when I drag over the actual word 'upload' inside an h1 tag the screen flickers. This is happening because I have an event for dragleave to remove the overlay div with the upload h1 tag however I don't know how to fix it.
You can see the problem in action here: JS Fiddle, just drag any image from your desktop to the document and hover over the word 'upload' you'll see what I'm talking about. Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
</body>
</html>
Javascript code:
$(document).on('dragover', function () {
$('#upload-global-drop-overlay').css({'display': 'block'});
});
$('#upload-global-drop-overlay').on('dragleave', function () {
$('#upload-global-drop-overlay').css({'display': 'none'});
});
$(document).on('drop', function (e) {
$('#upload-global-drop-overlay').css({'display': 'none'});
e.preventDefault();
});
Hey hopefully you found an answer to this, if not here is a little example that looks like imgur in my oppinion, using your code.
jsFiddle: http://jsfiddle.net/JUBwS/74/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
</body>
</html>
CSS:
#upload-global-drop-overlay {
background: none repeat scroll 0 0 #424242;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
z-index: 10001;
display: none;
}
#upload-global-drop-overlay h1 {
font-size: 72pt;
display: block;
position: absolute;
line-height: 50px;
top: 50%;
left: 50%;
margin: -82px 0 0 -180px;
text-shadow: 3px 3px 4px black;
color: white;
z-index: -1;
}
Javascript:
var isDragging = null;
$(document).on('dragover', function () {
if(isDragging==null)
doDrag();
isDragging = true;
});
$(document).on('drop', function (e) {
e.preventDefault();
isDragging = false;
});
$(document).on('dragleave', function (e) {
isDragging = false;
});
var timerId=0;
function doDrag()
{
timerId = setInterval(function()
{
if(isDragging)
$('#upload-global-drop-overlay').fadeIn(500);
else
{
$('#upload-global-drop-overlay').fadeOut(500);
isDragging = null;
clearInterval(timerId);
}
},200);
}
This sample uses timers, but it is active only when something is being dragged into the form. I am certainly going to use this in the future.
I actually found another solution, I think it's a bit simpler because it doesn't use setInterval. And I've implemented the actual drag and drop functionality for anyone interested.
The whole working example with drag and drop functionality is available below.
jsFiddle - Demo: http://jsfiddle.net/6SV9P/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1</div>
<div id="image"></div>
</body>
</html>
CSS:
#upload-global-drop-overlay {
background: none repeat scroll 0 0 #424242;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
z-index: 10001;
display: none;
}
#upload-global-drop-overlay h1 {
font-size: 72pt;
display: block;
position: absolute;
line-height: 50px;
top: 50%;
left: 50%;
margin: -82px 0 0 -180px;
text-shadow: 3px 3px 4px black;
color: white;
z-index: -1;
}
JS:
var dragDropFromDesktop = (function ($) {
$(document).on('dragenter', function () {
$('#upload-global-drop-overlay').fadeIn(200)
});
$('#upload-global-drop-overlay').on('dragleave', function (e) {
if (e.originalEvent.pageX < 10 || e.originalEvent.pageY < 10 || $(window).width() - e.originalEvent.pageX < 10 || $(window).height - e.originalEvent.pageY < 10) {
$("#upload-global-drop-overlay").fadeOut(200);
}
});
$('#upload-global-drop-overlay').on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
// Handle dropped image file - only Firefox and Google Chrome
$('#upload-global-drop-overlay').on('drop', function (e) {
$('#upload-global-drop-overlay').fadeOut(200);
var files = e.originalEvent.dataTransfer.files;
if (files === undefined) {
alert('Your browser does not support file Drag and Drop!')
} else {
var file = files[0];
if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
var reader = new FileReader();
reader.onload = function (evt) {
var img = new Image();
img.src = evt.target.result;
$('#image').html('<img src="' + img.src + '">');
};
reader.readAsDataURL(file);
}
}
e.preventDefault();
e.stopPropagation();
});
})(jQuery);
Yeah, basically I have this:
Effect.ScrollTo("bottom", { duration: 5.0 });
So what I want is to stop this effect while it's scrolling whenever I want to.
Any help?
var scrollEffect = Effect.ScrollTo("bottom", { duration: 5.0 });
...
scrollEffect.cancel();
This code below works perfectly for me:
<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body { font-size: 30px; }
#destination { margin-top: 1400px; }
#start { position: fixed; top: 10px; left: 20px;}
#stop { position: fixed; top: 50px; left: 20px;}
</style>
<script type="text/javascript" charset="utf-8">
function startEffect() {
scrollEffect = Effect.ScrollTo("destination", { duration: 8.0 }); return false;
}
function stopEffect() {
scrollEffect.cancel(); return false;
}
</script>
</head>
<body>
<a id="start" href="#" onclick="return startEffect();">Start Effect</a>
<a id="stop" href="#" onclick="return stopEffect();">Stop Effect</a>
<p id="destination">Scroll Destination</p>
</body>
</html>
What I currently have working currently is having a div as follows:
<div id="pausepos" style="position:absolute;"></div>
Then having the JavaScript cancel the scrolling and move it back to where the original position was:
fallingPosTempArr = $("thetop").viewportOffset();
fallingPosTemp = -1*fallingPosTempArr[1];
$("pausepos").setStyle({
"top" : fallingPosTemp + 'px'
});
scrollEffect.cancel();
setTimeout(function () { Effect.ScrollTo("pausepos", { duration: 0.0 }); }, 10);
It works, but on slower browsers you can see how the page jumps back to the top and then back again.