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).
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'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);
I'm creating a template for wordpress , and I would like to insert a picture while the page is loading , but I want the load to last at least 3 seconds , you can assign a minimum time of execution of a function ? in this case i use the $ ( window ) .load ( ) and i add a class to a div placed inside the page to show it.
it works but i want the loadig image to be show for 3 seconds and after the window load event i want to remove the class that i added to sho the div, this is my code
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div class="loader">
loading image
</div>
<div class="content">
main content
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script><!-- jQuery -->
</body>
</html>
this is my css
.loader{`enter code here`
position: fixed;`enter code here`
top: 0;
bottom:0;
right: 0;
left: 0;
background-color: blue;
z-index: 999;
display: none;
}
.show-loader{
display: block;
}
.content{
background-color: red;
height: 600px;
}
rhis is my JQuery
jQuery(document).ready(function($) {
$(window).load(function() {
$('.loader').addClass('show-loader');
});
$('.loader').removeClass('show-loader');
});
You can use a timer with setTimeout() to trigger an event some specific amount of time in the future. It isn't clear to me exactly what you're trying to do, but if you just want to remove the class 3 seconds after you applied it, you can do this:
jQuery(window).load(function() {
jQuery('.loader').addClass('show-loader');
// remove the class, three seconds later
setTimeout(function() {
jQuery('.loader').removeClass('show-loader');
}, 3000);
});
FYI, I removed the jQuery(document).ready() part of the code because I can't see any reason that it is needed. The jQuery(window).load() event always come after the .ready() event and window is always available.
You can simple put your Javascript into a function that will be called after 3 Seconds / 3000 Miliseconds.
jQuery(document).ready(function($) {
$(window).load(function() {
$('.loader').addClass('show-loader');
});
setTimeout(loadImage, 3000);
}
function loadImage(){
$('.loader').removeClass('show-loader');
});
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';
This jQuery code will highlight the div box when clicked.
I want to get the highlight on load, how can I do that?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div { margin: 0px; width: 100px; height: 80px; background: #666; border: 1px solid black; position: relative; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
</script>
</head>
<body">
<div id="div1"></div>
</body>
</html>
Put the statement for highlight in document.ready at the same level you are binding click event..
Live Demo
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000); //this will highlight on load
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
});
Alternatively, this way might be a little cleaner in that if you add some other effects that you want to show on the click state, you only need to define them one time.
$(document).ready(function() {
$("#div1").click(function () {
$(this).effect("highlight", {}, 3000);
});
$('#div1').click();
});
Javascript
$(document).ready(function() {
$("#div1").effect("highlight", {}, 3000);
});
This will highlight the div1 when the document is ready. If you also want a click handler, you can keep it and put in whatever code you want (ie. you can also keep the effect in there as well, if you want to).
Fiddle