I'm trying to use <canvas> in iPhone Safari, and if I place the element in the body, there are unused pixels to the left and top of the element. I tried specifying margin:0;padding:0 with CSS to no avail.
What's going on here?
<html>
<head>
$(document).ready(function()
{
$('#screen').attr("height", $(window).height() );
$('#screen').attr("width", $(window).width() );
//prevent scrolling
$(document).bind('touchstart touchmove', function(e)
{
e.preventDefault();
});
});
</script>
</head>
<body>
<canvas id = "screen">
</canvas>
</body>
</html>
margin,padding, and border have no effect.
Use position:absolute; top:0;left:0
add <style>* {margin:0;padding:0;border:0;position:absolute;width:100%;height:100%}</style>
Related
I tried by several ways to detect accurately mousewheel / DOMMouseScroll event, but it seems that the result will vary much from browser to another browser, and above all from hardware to another hardware. (ex: MacBook Magic Trackpad fires many mousewheel events, etc.)
There has been many attempts of JS library to "normalize" the wheelDelta of a mousewheel event. But many of them failed (I don't find the relevant SO question anymore but there are some that point this failure).
That's why I try now a solution without the mousewheel event, but rather onscroll event. Here is an example of scrolling / mousewheel detection with a hidden container that scrolls (#scroller), and the normal container (#fixed_container) with normal content.
As #scroller has a finite height (here 4000px), I cannot detect scrolling / mousewheel
infinitely...
How to allow endless scroll events (by setting an infinite height for #scroller? how?) ?
Code / Live demo :
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body { overflow:hidden; }
#scroller { height: 4000px; }
#fixed_container { position:fixed; top:0px; left:0px; }
#text { position:absolute; top:100px; left:100px; }
</style>
<script type="text/javascript">
window.onscroll = function(e) {
console.log("scroll event detected! " + window.pageXOffset + " " + window.pageYOffset);
e.preventDefault();
return false;
}
</script>
</head>
<body>
<div id="scroller"></div>
<div id="fixed_container">
<div id="text">
Bonjour
</div>
</div>
</body>
</html>
"How to allow endless scroll events"
This should do it:
$(window).scroll(function() {
var st= $(window).scrollTop();
var wh= $(window).height();
var sh= $('#scroller').height();
if(sh < st+wh*2) {
$('#scroller').css({
height: st+wh*2
});
};
});
Tested in IE11, Firefox, Chrome, Opera, and Safari.
In the fiddle below, clicking adds text, so you can see it scroll:
Fiddle
How to Change a div width when size of browser window change with javascript (no jQuery)?
I want to perform this job dynamically when user resize his browser.
Please help, Immediately ...
any suggestion for this job with css?
Use percentage. for example width="50%" This will change the width when browser size change.
You can either set this with CSS or Javscript
CSS would be easily done using %'s ie
div {
width: 95%;
}
JS would be easily done using
var element = document.getElementById("x");
window.addEventListener('resize', function(event) {
element.style.width = window.style.width;
});
This code should work in all browsers. But you really should use CSS instead.
<!DOCTYPE html >
<html>
<head>
<meta charset="utf8" />
<title>untitled</title>
</head>
<body>
<div id="myDiv" style=" height: 200px; margin:10px auto; background: green;"></div>
<script type="text/javascript">
var myElement = document.getElementById('myDiv');
function detectWidth(){
var myWidth = 0;
if(typeof (window.innerWidth)== 'number'){
myWidth = window.innerWidth;
}
else {
myWidth = document.documentElement.clientWidth; //IE7
}
myElement.style.width=myWidth-300+'px';
}
window.onload=function(){
detectWidth();
};
window.onresize = function (){
detectWidth();
};
</script>
</body>
</html>
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';
What I am trying to accomplish is that, when you put an image on 100% it nicely scales the height accordingly. I like to catch that height and process it.
<div id="view" style="width:950px;">
<img src="1.png" />
</div>
The image is 950x500pixels. However when I ask the view $( '#view' ).height() what the height is, it returns 16pixels. Does anyone know why it does this? Why doesn't it return 500pixels as that's the size of the image.
You need image to be loaded first. Try this:
<!DOCTYPE HTML>
<html>
<style>
div { width: 950px; }
img { width: 100%; }
</style>
<body>
<div>
<img src="1.png">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('img').load(function() {
var height = $('div').height();
console.log(height);
});
</script>
</body>
</html>
I have test to alert the size of <Div> It's return the valid value, that return the size of image.
But from your code $( 'view' ).height() I have change to $( '#view' ).height();
Here is my code it's return correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function loaded() {
var height = $( '#view' ).height();
alert(height);
}
</script>
</head>
<body onload="loaded();">
<div id="view" style="width:950px;">
<img src="Desert.jpg" />
</div>
</body>
</html>
Please do not use local image, you can use an image with URL, like "http://www.veryued.org/wp-content/uploads/2012/02/less-online.png".
Please read jQuery API carefully:
Caveats of the load event when used with images:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
I've looked for the answer for this and I found it, but I don't know how to use it.
Stop a gif animation onload, on mouseover start the activation
Guffa's answer to that question is exactly what I want, but I don't know how to use that code.
I have the jquery plugin, but where do I put the code (not the plugin; the code that was in Guffa's answer)? How do I use it in reference to the images? Is there a function I have to call to get it to work? If so, what would be the best way to call it?
Sorry for asking a question that has already been answered, but his answer wasn't specific enough and I couldn't comment to ask him for a more specific answer.
Here is a working example for what you need - http://jsfiddle.net/EXNZr/1/
<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />
<script>
$(function() {
$("#imgDino").hover(
function() {
$(this).attr("src", "animated.gif");
},
function() {
$(this).attr("src", "static.gif");
}
);
});
</script>
I haven't read the link, however the easiest way to do this is to change the img tags src attribute with javascript on hover like this (jQuery)
$(function() {
$('a').hover(function() {
$(this).attr('src','path_to_animated.gif');
},function() {
$(this).attr('src','path_to_still.gif');
}
});
No plugins required... you might want to preload the animated gif by adding $('<img />',{ src: 'path_to_animated.gif'}); before the hover bind.
Hope that helps
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>