Cannot get jQuery to recognize mouse hover over image - javascript

I am trying to animate a picture when the mouse cursor hovers over it. I am using jQuery to accomplish this. I cannot figure out why it does not work for the current state of my code. Apologies in advance, I just started my endeavour into web development.
Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
jQuery
$(document).mousemove(function() {
if($('#me-pic').is(':hover')
{
alert("Hello");
}
});
UPDATE
The source of my problem came from setting the z-index of my image div to -1. Changing this solved my problem, as well as changing the script.

Well, I'm not sure if your method should work or not, but there's a better way to handle this, designed for the original purpose:
$(document).ready(function() {
$('#me-pic').hover(function() {
alert("Hello");
});
});

With jQuery you can attach the hover event directly onto the selector, try this:
$(document).ready(function() {
$('#me-pic').hover(function(){
alert("Hello");
})
});

The solution is to use hover jquery method.
$('#me-pic').hover(function(){
alert("Hello");
})
View reference here.
Further more,I recommend you remove $(document).mousemove() event.In this situation, it is inefficient method.

Related

Aos.js not showing elements when you scroll there

this is another extremely simple question. Is it just me, or does AOS.js only work with div's?
Because in the following link, I am trying it on an h1, and it doesn't work. I try it on a div, and it works. This is part of a larger question, and that project involves divs. It does not work there either. I can delete the attributes from the page in inspect, and it shows up like it is supposed to when it reaches the scroll point.
Then I hit control z + y and then I see the animation work, just not on the scroll. Please help. Thanks for your time. Here is the link to the mini project
[Edit] this one is solved, please help with the other one if you can thanks!
https://repl.it/#astroboyr/AOSJS-testing
If you find it out, here is the bigger project if you want to help,
https://repl.it/#astroboyr/PianoLife
The code you have doesn't have enough space on the bottom so that reason you are not able to see the animation. if you add more
<br> on the bottom you will see its working.
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div data-aos="fade-up"></div>
<!-- works with div -->
<h1 data-aos="fade-right">Some H1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- doesnt with h1 WHYYYYYYY -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>

JQuery get method seems to be not working

I have been looking for a way to get the same navigation bar on every page. Right now, I have a jQuery script that is loaded onto every page, that should replace a div placeholder; however, when I run the program, the navigation bar is simply not there.
JQuery code:
$(function() {
$("#dropdown").hover(function() {
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$("#submenu").hover(function()
{
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
});
Navigation file:
<nav>
CV Game Development
<div class="menu">
<div id="dropdown">Tutorials</div>
<div id="submenu">
Beginner
Intermediate
Advanced
</div>
</div>
</div>
</nav>
Actual HTML file to be used:
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
<head>
<title>CV Game Development</title>
<div id = "nav-placeholder"></div>
</head>
<body>
<h1 id = "intro">Welcome</h1>
<h3 id = "subintro">to the CV Game Development website</h3>
<p id = "info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
It seems like it should work, and yet, it doesn't. Any help is much appreciated, thank you!
As Mohamed-Yousef noticed in comments you have placed your nav-placeholder div element in head tag, which is wrong place for it.
It should be inside body element.
Also your meta, css and script tags must be in head element.
<html>
<head>
<title>CV Game Development</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="nav-placeholder"></div>
<h1 id="intro">Welcome</h1>
<h3 id="subintro">to the CV Game Development website</h3>
<p id="info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
1st: give <nav> an id to be
<nav id="nav">
2nd: you can use .load() instead of .get() .. And the.load() code should looks like
$('#nav-placeholder').load("navigation.html #nav");
The above code will wrap <nav id="nav"> into <div id="nav-placeholder">
3rd: if you need to replace with you can use unwrap() instead .. so your code should be like this
$('#nav-placeholder').load("navigation.html #nav" , function(){
$('#nav').unwrap();
});
4th: I don't know yet Why your <div id = "nav-placeholder"></div> inside <head> but any way I tested it and the code will work even if its wrapped to <head> ..

jQuery accordion not working due to error with sources

Can anyone tell me what is wrong with the following? I know it is something to do with my sources as if I replace them with google apis versions it works fine. But I just can't see what is going wrong.
My folder structure is like:
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title>Collapsible test</title>
<!--Style Sheet-->
<Link href="css.css" rel="stylesheet" type="text/css"></Link>
<!--js-->
<script src="../js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="container">
<h3>Test 1</h3>
<div class="vertical">Test1</div>
<h3>Test 2</h3>
<div class="vertical">Test2</div>
<h3>Test 3</h3>
<div class="vertical">Test3</div>
</div>
<script>
$(window).on("resize", function() {
$('body').width($(window).width());
$('body').height($(window).height());
}).resize();
$(function() {
$("#container").accordion({
collapsible: true
});
});
</script>
</body>
Your CSS is likely referenced in the wrong directory. Try referencing your CSS the same way as your javascript (../css/):
<link href="../css/css.css" rel="stylesheet" type="text/css"></Link>
Edit: as suggested in another comment by #j08691 your jQuery file needs to be referenced before any other jQuery plugins. The order should be as follows:
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui-1.11.4/jquery-ui.js"></script>

jmwidget set indicator value

I really enjoy this set of widgets: http://www.jmwidgets.com/index.php/docs/widgets/hmiindicator/
However, I need to set the value of an indicator at initialize (or later on page update) using a value, rather than linking it to another value (although I could do this through a dummy element if I had to I suppose).
I can't, no matter what I've tried, get it to work. Here is the fiddle: http://jsfiddle.net/uLuZQ/39/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HMI Indicator Example</title>
<!-- JMWidgets styles -->
<link rel="stylesheet" href="css/base/jmwidgets-0.8.0.base.min.css">
<link rel="stylesheet" href="css/jmwidgets-0.8.0.allstyles.min.css">
<!-- jQuery classes -->
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<!-- JMWidget classes -->
<script src="js/jmwidgets-0.8.0.min.js"></script>
<script>
$(function() {
$("#ind1").hmiIndicator( {colors:['red','yellow','green'],value:1} );
var val= $("#ind1").hmiIndicator( 'option','value' );
alert(val)
});
</script>
</head>
<body id="page1">
<div id="ind1" style="width:150px; height:150px"></div>
<br />
</body>
</html>
Please tell me what I'm stupidly missing. The documentation seems pretty clear, but I can't get it to work at initialize or using setter.
Thanks,
C

jQueryUI Slider handle not moving

I'm trying to implement a jQuery slider with increments. I've gone from, the actual project page, to a test page of the project with just the slider, to just the slider. In all cases I've been unable to get the handle to move. It also seems to have a width of 1px or similar.
My code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery slider</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
I'm sure there is something very simple at fault here, but I really cannot see it for the life of me. The custom part of my download, was just clicking the 'select all components'.
i don't think the slider will show if there is no content and no fixed height ... dry this:
<div id="slider" style="width: 300px; height: 200px">
// Put a huge lorem ipsum text here ;)
</div>
I tried your exact code in a .html file...only replacing your includes with:
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui-lightness/jquery-ui-1.7.2.bluetie.css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
...and it worked...slider across the entire screen...easily movable...
non of my files were modified from what I got off the jquery site....
If you are not getting a javascript error,...my guess is that your .css file isn't being included.
Hope this helps,
Andrew

Categories

Resources