I want to make a image appear on my site when the mouse moves. It can appear to be a stupid thing to do, but it's really important that when the page loads the image is not yet visible.
My HTML is like this:
<html>
<head>
</head>
<body>
<div class="page-container">
<div>
<a id="entrar" href="_pt/log_in.html"><img src="_assets/entrar.jpg" alt="entrar"></a>
</div>
</div>
<script src="_js/jquery-1.10.2.js"></script>
<script src="_js/jquery-ui-1.10.3.js"></script>
<script src="_js/exp.js"></script>
</body>
</html>
In my CSS i'm making the image not visible
#entrar {
display: none;
}
And in my Javascript:
function PrepareHandlers() {
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
}
...
window.onload = function(){
....
PrepareHandlers();
}
Could anyone tell me what I'm doing wrong plz. Thanks
Declare this in your source file , not inside a function !
$(document).ready( function(){
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
})
It appears likely the page container is not taking up any space, and therefore it never receives a mousemove event. Here is an easy CSS fix to test this theory:
body { position : absolute; top :0; bottom : 0; left : 0; right: 0;}
.page-container { width : 100%; height : 100%; background-color : #ddd; }
Check out this solution.
You should preload the image to minimize or avoid an annoying/confusing lag like so:
var img = new Image();
img.src = '//your/url/to/image';
Related
Hi i need to modify java script that will by changing fixed image.
In for example:
when page is loaded then image will by on right site. Next after scrolling down page image should be changed to next one for each e.g. 100px. Images need to by loaded from image list or something similar.
I have found java script that make something similar to this. [Instead of creating images of numbers i need to load my own images]
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 400%;
background: white;
width: 100%;
}
.show {
width: 100px;
height: 100px;
position: fixed;
top: 300px;
right: 20px;
background: lime;
}
</style>
</head>
<body>
<img class="show" alt="0" src="img0.jpg" />
Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
var lastI
$(window).scroll(function() {
var scrollTop = $(this).scrollTop()
console.log(scrollTop)
var i = (scrollTop / 10).toFixed(0)
if (i !== lastI)
$(".show").attr({
"src": "img" + i + ".jpg",
"alt": i
})
lastI = i
})
</script>
</body>
</html>
Update:09.11.2017
Ok, I manage this code to work. What should I do it was to setup right path to image files like in my case ("src": "test/" + i + ".jpg",) where my images are in "test" folder, and change names of images [1.jpg, 2.jpg and so on].
You can easyli change your image with Native scroll event, without using JQuery :
You can see how to use native scroll event here
<body>
<!-- This is an image with a 'show' id -->
<img id="show" alt="0" src="img0.jpg" />
<script type="text/javascript">
/* this capture the `scroll event`*/
window.addEventListener('scroll', function(e) {
/* This generate a image name in case with scroll position (ex img1.jpg) */
let bgImage = 'img' + (window.scrollY / 10 ).toFixed(0) + '.jpg';
/* This specify the path where are your images list */
let bgImagePath = '../images/' + bgImage;
/* This get your element (img) with id `show` and change this background image by the path include in `bgImagePath` variable */
document.getElementById('show').style.backgroundImage = bgImagePath;
});
</script>
</body>
Native background image explain here
Native getElementById explain here
This sample of code do not use JQuery :) Just native Javascript : you van remove this lines in your code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
Hope I help you.
I'am not sure, try this one:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.Classname').css("background-image","../images/image.png");
} else {
$('.Classname').css("background-image","none");
}
});
I am 11 years old and I started learning Javascript a couple of months ago, So I am trying to make a page where if you scroll down too much it will take you back to the top so I made a Div element that fills up a large space and onmouseover it will take you back up to the top but if you try it a second time it won't do anything. Please help. Thanks in advance !
I hope my understanding of your problem is right. You have a div and you want to go up each time you scroll too much.
As an example of how to handle the scroll in vanilla JavaScript you can have a look at the document for the onscroll event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#container {
height: 500px;
width: 515px;
overflow: auto;
}
#foo {
height: 1000px;
width: 500px;
background-color: #777;
}
</style>
</head>
<body>
<div id="container">
<div id="foo"></div>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('scroll', function(event) {
// Get top and left value
var top = container.scrollTop
if (top > 400) {
// Go to the top
container.scrollTop = 0;
}
}, false);
</script>
</body>
</html>
In this example the contained element is bigger that the container so the container becomes scrollable with the overflow: auto; css property.
The scripts applies a onscroll event that checks the scroll value of the container and reset it to 0 when it exceed an arbitrary value (400 in the example).
I hope this has been useful to your work.
I'm using JQuery to have my .wrapper div snap back to its original margin-top after being moved to margin-top. The original margin-top is dependent on browser height. I'm trying to do this by storing the original margin-top value into a variable, and using it for JQuery animate when I want to .wrapper div to snap back later on.
$(document).ready(function() {
//Adjust .wrapper Margin-top to adjust position to 1/4 of Window Broswer Height
var marginWindowSpace = ($(window).height()) / 4;
$(".wrapper").css("margin-top", marginWindowSpace);
var originalMargin = $(".wrapper").css("margin-top").toString();
});
$(".title").click(function() {
$("#results-container").empty();
$(".wrapper").animate({
'margin-top': originalMargin
}, 200);
$(".title-tag, .or, .random-article, .random-article-underline").fadeIn(500);
$("footer").addClass("footer-pos1");
});
QUESTION: Why wont my the animate margin-top accept my variable (where the original margin-top value is stored), even when converted to string? I don't want to use a static value as my margin-top.
If you want to see the app code, it's here. http://codepen.io/myleschuahiock/pen/zqvvNZ
Any help is appreciated! Thanks!
EDIT: I changed the click function to $('.go-back'), but the animate for magin-top should still be the same
Move the whole $(".title").click(function(){}) into the $(document).ready(function(){})
The problem exists because at the time of the initialisation of the $(".title").click(function(){}) originalMargin is not set yet because the document is not ready yet.
Do like this. there are some errors in your animate part.margin-top should be correct as marginTop and your string should convert as int and do like this.I implement as an example.hope this will help to you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.testing{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
div.two{
width: 200px;
height: 200px;
background-color: green;
position:
}
</style>
<body>
<div class="testing"></div>
<br><br>
<h3 class="clk">Click me!</h3>
<div class="two"></div>
<script type="text/javascript">
$(document).ready(function(){
var one = $(".testing").css("margin-top").toString();
var vaL = parseInt(one,10);
$(".clk").click(function(){
$(".two").animate({'marginTop':vaL+'px'},1000);
});
});
</script>
</body>
</html>
note :
var one = $(".testing").css("margin-top").toString();
int this part get the margin-top value as a string.
var vaL = parseInt(one,10);
convert it to an integer.
then the animate part
$(".two").animate({'marginTop':vaL+'px'},1000);
This topic has been covered a few times but there is no clear solution using Javascript. All responses were quite nebulous. Please help me out as there hasn't been a straightforward answer anywhere that I could find on any site.
I am trying to execute a function when any click occurs within an iframe window. Specifically, a click on a hyperlink on page displayed within the iframe. However just being able to have any click within an iframe trigger a function is enough for me.
I have a function Show() that I would like to run when an iframe is clicked. So basically a link is automatically hidden and when the first link is clicked it is shown. When the "click to hide" link that shows up is clicked, the "click to hide" link is hidden. I want the "click to hide" link to show up when someone clicks within the iframe. I need it to run the function every time a click occurs within the iframe. Thanks.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<iframe src="http://www.google.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
click to show below link
<div id="my_div" class="hidden">
<a href="http://www.google.com" target="hello" onclick = "Hide();" >click me to hide</a>
</div>
</center>
</body>
</html>
If there is some kind of domain issue please explain and please, if you have time and are able, explain what the issue is and how to fix such a problem. Edits to this code are welcome for the sake of coming up with a solution that achieves the goal that I outlined.
You guys are great.
UPDATE
I have implemented apaul34208's response which technically works, but I am having three problems.
1) How can this take up the full width of the window (I tried adding 100% to the width value under #cover)
2) When the div covers all of the iframe, the webpage within the iframe is not clickable
3) The div is not transparent.
If someone can edit the below code and have the div take up all of the width while being transparent with the iframe's webpage being entirely clickable - I would be very appreciative and happy.
<html>
<head>
<title>Show / Hide Link</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 150px;
}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://stackoverflow.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
links
<div id="my_div" class="hidden">
<a href="http://stackoverflow.com" target="hello" onclick = "Hide();" ><-</a>
</div>
</center>
</body>
</html>
I would strongly advise against doing this for any reason, this is usually referred to as "Clickjacking", and it is an extremely bad practice.
So... Please don't ever do this.
But for educational purposes... You can cover an iframe with another positioned element and capture the click on that element:
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
.visible {
visibility: visible
}
.hidden {
visibility: hidden
}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 300px;
}
<div id="cover" onclick="Show();"></div>
<iframe id="iframe" src="http://stackoverflow.com"></iframe>
<div id="my_div" class="hidden">
click me to hide
</div>
Once again. Don't ever do this.
I found a solution. It's not perfect but I figured out that I don't really need to it to detect every iframe click and this is good enough. I originally wanted to make a back button appear if a link within the page that is within the iframe was clicked (which would return the user to the main page within the iframe where they started). Obviously they may click randomly and not hit a hyperlink and the back link would pop up for no reason (while they are still on the main page). That's fine I guess but if someone knows of a better solution let me know. Most people would just hit a link to begin with as the page only has hyperlink interaction I presume.
I hope my working code below helps people who are exploring this topic in the future.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
}
</style>
<script type="text/javascript">
var visible_link = true;
var inIframe = false;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
function checkClick() {
if (document.activeElement
&& document.activeElement === document.getElementById("hello")) {
if (inIframe == false) {
Show();
inIframe = true;
}
} else
inIframe = false;
}
setInterval(checkClick, 200);
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://w3schools.com" height=549 width=100% frameborder=0 name = "hello" id = "hello" style =""></iframe>
click to show link
<div id="my_div" class="hidden">
<a href="http://w3schools.com" target="hello" onclick = "Hide();" >click to hide</a>
</div>
</center>
</body>
</html>
I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.
<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function() {
setTimeout(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
},5000);
});
});
</script>
</head>
<body>
<p>Foo</p>
</body>
What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:
$("p").click(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
});
it works fine, it prepends the image and immediately sets it to full-screen.
Is this intentional, or a bug? Either way, is there any way to make it work?
The method has to be called in response to a user input event (ie. keypress, mouseevent).