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
Related
I would still love some help with changing the background-image on span hover.
If anybody could help me with that. I provided the full code of the website, down below.
Here is the Full code of the website.
Pastebin CSS
Pastebin JavaScript
Take a look at jquery .hover(); and .css(); or .hover(); and .addClass(); and .removeClass();.
This should give you exactly what you are looking for. You could even throw in .animate(); to make it a less brutal of a transition.
Here is a small example:
JQUERY:
$(function(){
$('.text1').hover(function(){
$('body').css('background-color', 'blue');
});
});
Put this code inside a file named 'anything-you-want.js' and include it into the top of your html <head> section using the <script src="anything-you-want.js"> tag to link it to the new js file you created. Also if you are using .css();, like the example, make sure you give your body a background-color inside your css or else it will not work. Also make sure you link the JQuery Library inside your html <head> tag like you did for the anything-you-want.js file.
Here is the link to it..
Jquery Library
EDIT: (added animate)
$(function(){
$('.text1').hover(function() {
$('body').stop().animate({
backgroundColor:'rgb(255, 60, 0)'
}, 300);
}, function () {
$('body').stop().animate({
backgroundColor:'rgb(134, 33, 0)'
}, 100);
});
});
If you are using pure JS, checkout onmouseover. You can read up on it at this W3 site.
In HTML:
<element onmouseover="myScript">
In JavaScript:
object.onmouseover=function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("mouseover", myScript);
Best way to do this using JQuery or Javascript.
<html>
<head>
<style type = "text/css">
body
{
background: url(http://www.programmingfacts.com/wp-content/uploads/2015/01/change-parent-bg-color-hover-child.jpg) no-repeat fixed;
}
h1: hover
{
background: url(back6.jpg) no-repeat center center fixed;
}
.hover
{
background-image: url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').hover(function() {
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
});
</script>
</head>
<body>
<h1>
Future Text.<br>
<span class="text1">Text1</span>, <span class="text2">Text2</span>, <span class="text3">Text3</span>, <span class="text4">Text4</span>.
</h1>
</body>
</html>
.test{
background-image: url("https://www.planwallpaper.com/static/images/background-wallpapers-32_NRz0mTd.jpg");
}
<div class="test">
<form action="search.php" method="GET">
<input type="text" name="query" />
<input type="submit" value="Search" />
</form>
</div>
}
enter code here
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>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeIn("slow", function() {
$("#slideshow").attr('src','2.jpg');
});
</script>
</body>
I am trying to make a jQuery script where 1.jpg fades out and 2.jpg fades in but I only see 1.jpg and it stays there
Try something like this:
$( "#slideshow" ).fadeOut( "slow", function( ) {
$( "#slideshow" ).prop('src','2.jpg').fadeIn('slow');
});
jsFiddle example
This will fade out the original image, and once the fade has completed, change the image's src property, then begin to fade in the new image.
This will work for however many images you add. As long as they have the class slideshow.
Also this allows you to crossfade images. See below for non-crossfade below.
See this Fiddle.
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<img id='slideshow' src="2.jpg">
<script type="text/javascript">
$(document).ready(function () {
$(".slideshow").hide();
var item = 0;
loop = setInterval(function() {
if(item == $(".slideshow").size()) {
item = 0;
}
$(".slideshow").fadeOut(300);
$(".slideshow").eq(item).fadeIn(300);
item++;
}, 3000);
});
</script>
</body>
Non-Crossfade
$(".slideshow").fadeOut(300, function () {
$(".slideshow").eq(item).fadeIn(300);
});
UPDATE
You can add the following css to get the images to display in the same space.
.slideshow { position:absolute; }
According to what you are saying .. If I understand you correctly ... Although I may be mistaken, it seems like you are asking 1 to fade out .. change to 2 ... and fade 2 in?? If so, will this not work?
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeOut();
$("#slideshow").attr('src','2.jpg');
$("#slideshow").fadeIn();
</script>
</body>
That's the simple version, of course I would assume it will be put it inside a function on an .on() event or the like etc ...
I am not really sure of how to start this one off.
Either way, I want to show x and y coordinates on a webpage when the mouse moves on the page. It also has to work with any browser.
Heres the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coordinates</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="center">
<h1>Mouse Coordinates</h1>
<p>x-coordinate: </p><p id="xcord">0</p>
<p>y-coordiante: </p><p id="ycord">0</p>
</div>
</body>
</html>
CSS File:
#center{
margin: 0 auto;
width: 500px;
}
JavaScript File:
Not much, not sure where to start off...
window.onload = init;
function init(e) {
}
basically you need to document.addEventListener('mousemove', mousemover, false); that references a function - mouseover() - that will get your clientX and clientY. From there you need to set innerHTML of your two p elements to those values.
You can use pageX and pageY something like this:
$(document).ready(function(){
$('body').on('mousemove', function init(e) {
$('#xcord').text(e.pageX);
$('#ycord').text(e.pageY);
});
});
demo
I guess this is what you are looking for assuming you are using JQuery.
$(function(){
$(document).on('mousemove', function(e){
$("#xcord").html(e.pageX);
$("#ycord").html(e.pageY);
});
});
http://jsfiddle.net/Zvm7s/2/
Hope it helps
I am trying to make a mouse effect with a gif file and I found the following code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function(){
$("body").mousemove(
function(e){
$("<img src='http://www.favicon.cc/logo3d/618187.png' />")
.css({
'position':'absolute',
'top':e.pageY+5,
'left':e.pageX+-15,
'width':'30px',
'height':'30px'
}).prependTo( $(document.body))
.fadeOut(100, 'linear', function(){
$(this).remove();
});
});
});
</script>
</body>
When I ran the html file I cannot see anything, for it, I think I am making a mistake in the code, Could anybody help me to fix?
Attach the mouse listener to $(document) instead of $('body').
Also in your code you are missing your closing </head> and start <body> tag (that you were using in the selector).
Demo here
While you have few errors in the code, it works fine.
The reason you don't see anything in firefox is that the body of the HTML is empty and the stars won't show up unless there's content.
It works fine on chromium and rekonq.
Just add content, and it will work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function(){
$(function(){
$("html").mousemove(
function(e){
for(i = 0; i < 5; i++){
$("<img src='http://www.favicon.cc/logo3d/618187.png' id='hover_" +i+"' />")
.css({
'position':'absolute',
'top':e.pageY+i*5,
'left':e.pageX+i*10,
'width':'30px',
'height':'30px'
}).prependTo( $(document.body))
.fadeOut(100, 'linear', function(){
$(this).remove();
});
}
});
});
});
</script>
</head>
<body>
<h1> Add content </h1>
<p> some content </p>
</body>
</html>
Test jsfiddle
you can change the dimensions as you want. If you want you can create an array with the given dX and dY changes and use that to position the images.
or try this, Test jsfiddle