I am currently facing a strange problem (well, most probably I am simply not aware of something important here).
I have the following html snippet
<div id="test">
Hallo Welt
</div>
And the following javascript snippet:
<script type="text/javascript">
$(function () {
$('#test').offset({
position: 'absolute',
width: '100px',
left: ($('body').width() - $('#test').width()) / 2.0
})
});
</script>
This should render the test div horizontally centered which works perfectly fine within the browser. When I try to print this page however, the element shows up on the right corner of the printed page and not in the middle.
I thought maybe theres something wrong about using pixels for positioning elements for printing so I tried other measures like em:
<script type="text/javascript">
$(function () {
$('body, #test').css({ 'font-size': '12px' });
$('#test').css({
left: (($('body').width() - $('#test').width() ) / 24.0) + 'em'
})
});
</script>
But unfortunately the result is all the same, no matter what browser I try...
What am I missing here?
#
In response to Adrian I made a sample as simple as possible to extract the problem reproducable for everyone.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
I also observed that the position of #test within the printed document is dependant on the size of the browser window at the time of printing.
I am actually working with media queries as well in my real project. I was trying to convey an extremely simply sample as a showcase for the problem.
This is also interesting and the root of the evil in my opinion. Even though the printer uses its 100px from the print media query, its executed javascript returns that the test div ist still 100% which is just wrong in my opinion!!!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').text($('#test').width());
});
</script>
<style type="text/css">
#test {
width: 100%;
border: 1px solid black;
}
#media print {
#test {
width: 100px;
}
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
EDIT: Newer Solution with js only...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: '50%',
marginLeft: '-50px'
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
CSS solution
In this situation I would use CSS #media print {} to target printing.
Im assuming you have a reason for using javascript to build your CSS but if not I would recommend coding this in a totally different way. This shouldnt require javascript, nor should it require an absolute position.
Anyway , solution below...
<html>
<head>
<style>
#media print {
#test {
left:50% !important;
margin-left:-50px;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$('#test').css({
background:'red',
position: 'absolute',
width: '100px',
left: ($('body').width() - 100) / 2.0
});
});
</script>
</head>
<body>
<div id="test">
Lord
</div>
</body>
</html>
Related
I'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
As you may know, I'm very new to HTML and JS.
I tried to make an image move when you click on it, but for a some reason it doesn't work. Can someone take a look at it?
(It's my first day of learning Javascript! Please keep this in mind)
Javascript
var main = function() {
$('document.Image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
HTML
<html>
<head>
<title>JS Test</title>
</head>
<body>
<img height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You need to invoke/call main function
documemt.Image was invalid selector. Give class as .image to element which can be selected using $('.image')
To apply left css property in .animate(), element must be absolute/relative/fixed positioned. Review the updated css
var main = function() {
$('.image').click(function() {
$(this).animate({
left: "100px"
}, 200);
});
};
main();
.image {
position: absolute;
left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class='image' height="25px" width="25px" src="https://webdesignfromscratch.com/snippets/html-css-javascript.gif">
there is multiple mistake in your code... here is the code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('img').click(function(){
$(this).animate({'margin-left': "300px"})
});
});
</script>
</head>
<body>
<img style='margin-left:100px' src='' alt='no image' />
</body>
</html>
i m sure it helps u...
I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $
Alright so I'm pretty new to JavaScript coding in particular and have only been working with HTML and CSS for a few months so I apologize if this comes off as ridiculously simple.
I'm trying to use basic embedded JavaScript (jquery) to get a hyperlink to move to a new position each time you mouse over it, kind of like a cat following a laser-pointer dot.
When I run this code, the "moveAway" method doesn't appear to move the link at all when it is being hovered over. Just wondering if anyone could help identify the problem here:
<html>
<head>
<!-- Sheet references -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
<div id="link">
Click!
</div>
<script>
function moveAway()
{
$('#link').moveTo(0,100);
}
$('#link').hover(moveAway);
</script>
</body>
</html>
Do you wanna do something like this?
You can use left and top random too.
More information in Jquery documentation
<html>
<head>
<!-- Sheet references -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
<style>
#link
{
position:absolute;
}
</style>
<div id="link">
Click!
</div>
<script>
function moveAway()
{
$('#link').animate({
left: "+=50",
top: "+=50"
});
}
$('#link').hover(moveAway);
</script>
</body>
</html>
$('#link').hover(function(e) {
$(this).css('top', '0px');
$(this).css('left', '100px');
$(this).css('position', 'absolute');
});
I'm not sure if that's what you want.
See : http://jsfiddle.net/MHzYF/
You can make it a little fun by intro ducting Math.random() to generate x and y coordinates, and use jQuery's animate method. You can replace 100 with whatever offset you like.
jQuery
$('#link').on('mouseover', function(){
x = Math.floor((Math.random()*100)+1);
y = Math.floor((Math.random()*100)+1);
$(this).animate({
top: x,
left: y
});
});
HTML
Click!
CSS
#link { position: absolute; }
Working Example at JSFiddle
The JSTween library doesn't seem to perform a simple animation pulled from the library's tutorial. Using the following code, the alert box will show up after the allotted 1 second duration, but no animation will take place.
I must have set up the library wrong somehow, but I can't see the problem.
<html>
<head>
<style type="text/css">
#box
{
width: 16px;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jstween-1.1.js" ></script>
<script type="text/javascript" src="jstween-1.1.min.js" ></script>
<script type="text/javascript">
function animate()
{
$('#box').tween({
width:{
start: 16,
stop: 200,
time: 0,
units: 'px',
duration: 1,
effect:'easeInOut',
onStop: function(){ alert( 'Done!' ); }
}
}).play();
}
</script>
</head>
<body>
<div id="box">
<img src="image.png" onClick="animate()" />
</div>
</body>
</html>
Additional info: using Safari on 10.7.5. Code does not work in Chrome or Firefox either.
For anyone who may read this in the future, I discovered the problem: the CSS element #box needs position: relative; as an attribute, otherwise the browser will hold the element in place by default.