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
Related
I'm trying to refresh the div, but it's duplicating everything else.
Before I do anything, the page looks like this: initial page
The second button is supposed to refresh the div, but when I do, this is what I get:after trying to refresh, it refreshes it, but duplicates everything else
How do I make it so it only refreshes the div?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br/>
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#ff').load('thing2.html');
});
});
</script>
</body>
In this line
$('#ff').load('thing2.html');
You are only updating your div with id="ff", but you are loading into the entire contents of thing2.html.
Is this what you were looking for? If not, can you explain a bit more?
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
$('#input').val('');
});
});
<div id='ff'>something</div>
<input id='input'/>
<button id='btn1'>first</button>
<button id='btn2'>second</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
You are loading the things2.html again, hence its duplicating.
I have used location.reload() to refresh and its working fine. Is this you are looking for??
$(document).ready(function(){
$('#btn1').click(function(){
var input=$('#input').val();
$('#ff').text(input);
});
$('#btn2').click(function(){
// $('#ff').load('things.html');
location.reload();
});
});
I'm trying to change the text of h2 , when the user clicks a button.
Javascript :
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
and the html :
GO
I have tried to switch links so jQuery will load first (that solved another problem).
Still can't find what im doing wrong.
Also tried :
$("#GoButton").click(function() {
$("#myDiv").innerHtml("Hello World");
});
You need ensure if DOM is loaded already using $(function(){.. }); and prevent default behaviour of link using e.preventDefault()
$(function(){
$("#GoButton").click(function(e) {
e.preventDefault();
$("#myDiv").html("Hello World");
});
});
Demo
Your javascript (binding a function on the click) may be executed too early, like in this example : http://jsfiddle.net/ug7f0te1/
Try binding events after the DOM is fully loaded:
$(function(){
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
});
This should work for you
$("#myDiv").html("Hello World");
here is the code http://jsfiddle.net/utkarshk/h0vmmdn8/
HTML:
<div id="mydiv">fd</div>
<h2 id="mydiv1">4343</h2>
GO
JS.
$("#GoButton").click(function() {
$("#mydiv1").html("Hello World");
$("#mydiv").html("Hello World");
});
Might be clearer if you post all your HTML. From a guess, here's something which does what I think you want:
<html>
<body>
<div id="myDiv">
<h2 id="myHeader">Click Go</h2>
<p>GO</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#GoButton").click(function() {
$("#myHeader").html("Hello World");
});
});
</script>
</body>
</html>
if you just want to change text than you can make use of text() not of html() method
$("#myDiv").text("Hello World");
Update
this is working you need to do proper setting for this in jquery : http://jsfiddle.net/0oc53fdd/5/
<!DOCTYPE html>
<html>
<script type="text/javascript">
function here()
{
//alert(document.getElementById("myHeader").innerHTML);
document.getElementById("myHeader").innerHTML = "Hello World";
}
</script>
</head>
<body>
<div id="myDiv">
<h2 id="myHeader">Header</h2>
<button id="GoButton" onclick="here();">GO</button>
</div>
</body>
</html>
Hope you can get something from it.
I tried using jQuery on my website, but it did not seem to work. this code doesn't work. When I click on #test, it doesn't hide. Please help. Thanks!
this is my Html file :
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="#test">Hello world !</p>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>
this is my code.js :
$(document).ready(function() {
$('#test').click(function() {
$('#test').hide();
});
});
your html is wrong, remove hash # sign:
<p id="test">Hello world !</p> // this is right
while you have written:
<p id="#test">Hello world !</p> // this is wrong
NOTE:
you can get current element reference using this:
$(document).ready(function() {
$('#test').click(function() {
$(this).hide();
});
});
$("#test") means that select element which has id equal to test
Try to escape the meta character with \\,
$(document).ready(function() {
$('#\\#test').click(function() {
$('#\\#test').hide();
});
});
DEMO
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
jQuery is doing something strange for me: it just doesn't work and hides the div only for split a second. What am I doing wrong?
The code in question, as simple as can be.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Experiment</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<script>
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
</script>
Hide
<div class="thread">I like trains.</div>
</body>
</html>
I am using Chromium on Linux. I see the div dissapear for split a second, but it appears again immediately.
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
return false;
}
it is not hiding again it is the page that is being refreshed because href="" links to same page
NB: i guess you used onClick="doHiding()" for the sake of demo only (otherwise handle your event within jquery scope)
You could try changing
<a href="" onClick="doHiding()">
into
<a href="#" onClick="doHiding()">
See: http://jsfiddle.net/aVNuf/
You can try the click event in jquery instead doing it inline.
http://jsbin.com/iseref/1/edit
html:
Hide
<div class="thread">I like trains.</div>
jQuery:
$(function(){
$('a').on('click', function(e){
e.preventDefault();
doHiding();
});
});
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
try
href="#"
its work for this case