jquery mouseover not working. working in jfiddle only - javascript

It's just a couple of lines of code: http://jsfiddle.net/z7bHt/
HTML:
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
</body>
JAVASCRIPT:
$("#bowleft").mouseenter(function(){
console.log("worked!!!");alert("worked!!!");
});
but this simple mouseover isn't working, locally or remotely, in either chrome or firefox!
Could someone try this themselves to see if i'm going crazy or if it is my operating system? https://www.dropbox.com/s/ahpaluj2e7ru9xn/mouseover.zip

The .mouseenter code is running before the #bowleft element exists. You need to ensure that it runs after that element exists in the DOM. There are many ways to do this. I would suggest moving your JavaScript to right before </body>. You can also wrap it in:
$(function () {
Or $(document).ready(function () {, which is functionally the same.
I would also suggest using .on instead of the specific function named after the event, but this doesn't affect you here. All together:
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#bowleft").on("mouseenter", function () {
console.log("worked!!!");
});
</script>
</body>

You are trying to reference the image with your JS before it exists in the DOM.
The best thing to do is to move your JS to just before the closing body tag, like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#bowleft").mouseenter(function(){
console.log("worked!!!");
alert("worked!!!");
});
</script>
</body>
</html>
If you want to keep it in the head of the document, you'll have to wrap it in a $(document).ready() callback.

try this it worked ........
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#bowleft").mouseenter(function () {
console.log("worked!!!"); alert("worked!!!");
});
});

Related

JQuery hide <p> does not seem to work?

Okay... obviously this is because I am so new. I don't understand why this does not work. I thought this is because the argument its not inside a function but I don't really know.
<head>
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>hi</p>
</body>
It should look like this:
<script src="jquery.js"></script>
<script>
$(function() {
$('p').hide();
});
</script>
First you must load the external Javascript file (like jquery.js) in its own script tags. Then you include your Javascript (or jQuery for this case) in its own script tags.
Your code works!
However, you need to load the JS file first. The function to hide the p should be in its own <script> tag (different one from loading the script)
$(function() {
$("p").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>hi</p>
<div>world!</div>

Javascript Jquery Fadeout Woes

My javascript isn't currently working. I guess while I'm at it, is there any programs that I can use that can essentially give me errors made so that I am able to trouble shoot myself?
Javascript...
<script type="text/javascript" src="/js/jquery-ui.min.js">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
Button used to fadeout...
<button class="button">Respond</button>
HTML That I want to fade out...
<div id="ticketTable">
<table border="1" width="1000" class="transparent">
<tr><th width="15%">Ticket</th><th width="15%">Queue</th><th width="15%">Severity</th><th width="15%">Created</th><th width="15%">Creator</th><th width="25%">Subject</th></tr>
</table></div>
Your code seems fine but the way you are including your .JS file (and later initializing behaviour) seems incorrect.
Try adding this to your page's <head> tag, and change your JS <script> tag like this:
<head>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<!--other script and also external css included over here-->
<script type="text/javascript">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
</head>
DEMO: JS Fiddle

Unable to change the src of an img element using javascript

I am trying to write a piece of code which replaces an image with another image on page load. But unfortunately it does not happen so. The second image does not load. i only see an icon with a cross mark after pageload. Please have a look at the below code and let me know what's wrong. Thanks in advance.
<html>
<head>
<script type="text/javascript">
function loadImage()
{
document.getElementById('ab').src ="C:\Users\Gagan\Desktop\green.png";
}
</script>
</head>
<body>
<img Id= "ab" src="C:\Users\Gagan\Desktop\red.jpg" onload="loadImage()">
</body>
</html>
In JavaScript, backslash is the escape character. If you want to include it in a string, you have to escape it using itself:
document.getElementById('ab').src = "C:\\Users\\Gagan\\Desktop\\green.png";
For future viewers of this question, I would recommend the unobtrusive JavaScript pattern for this, where the onload is done completely in JavaScript:
<html>
<head>
<script type="text/javascript">
var img = document.getElementById('ab');
function loadImage()
{
img.src ="C:\\Users\\Gagan\\Desktop\\green.png";
}
img.onload = loadImage;
</script>
</head>
<body>
<img id="ab" src="C:\Users\Gagan\Desktop\red.jpg" alt="" />
</body>
</html>

Issue with JQuery DOM and .click()

This is the code:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
When I click the button, I don't get the alert window, so I think is a problem with the DOM tree, How can I resolve this...?
Thank's advance!
Or... You're not including jquery...
EDIT: Sarcasm aside, include the JQuery library before your code to be able to use it.
https://developers.google.com/speed/libraries/devguide
Here's an example of how it should looks... It works fine.
http://jsbin.com/osijok/1/edit
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
Pretty simple.
You don't have the JQuery library loaded on your page prior to executing methods from that library it looks like.
You need to import the jQuery JS Library to be able to use functions such as
$(document).ready(function(){ .. etc.
How can I resolve this...?
Use plain JavaScript
(function(){
document.getElementById("favorite").onclick = function() { alert('clicked'); }
}());

Accessing a frame within a frame

Ok, here is the situation. I have a site that I subscribe to that lets you add your own code, etc. They have a forum editor that I am unable to skin to match my site, so I'd like to just change the colors of the inner most frame (doc3 in the example below).
Here is the basic setup... yes, all documents are from within the same domain but I can only add code to the main document. The doc3 frame is created dynamically. The first frame has a class but no name, the second only has an id... I don't know if the bind works for the inner frame, but firebug isn't giving me any errors.
Oh, and I have tried injecting a stylesheet as well without success.
Main document (with my attempts at accessing doc3)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('iframe').bind('load', function(){
$(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // This does change doc2 colors
$(this).contents().find('iframe#doc3').bind('load', function(){
$(this).contents().find('body').css({'background-color':'#333333','color':'#ddd'}); // doesn't work :(
})
})
})
</script>
</head>
<body>
Document #1
<iframe class="postFrame" src="doc2.htm" width="100%" height="300">
</body>
</html>
doc2.htm
<html>
<head>
</head>
<body>
<form id="form1">
Document #2
<iframe id="doc3" src="doc3.htm" width="100%" height="250">
</form>
</body>
</html>
doc3.htm
<html>
<head>
</head>
<body style="background-color:#fff; color:#000;"> <!-- access this body style -->
Document #3
</body>
</html>
I hope I made this clear enough. Any help or a point in the right direction would be greatly appreciated :)
Edit: updated the Main document with the suggestion from Wahnfrieden (thanks!), but sadly I still can't get to doc3.htm
Assuming your iframes are all on the same domain give this a shot:
$(function() {
$(window).load(function() {
var iframe2body = $('iframe').contents().find('body');
iframe2body.css({ 'background-color': '#333333', 'color': '#ddd' }); // doc2 colors
iframe2body.contents('iframe').contents().find('body').css({ 'background-color': '#fff', 'color': '#ddd' }); // doc3 colors
})
})
I didn't chain it ALL together purely for readability purposes and for IE I had to change it to $(window).load(function() {
$('#iframeID').contents().find('#someID').html();
Accessing to the document object using the iframe element can be pretty problematic. In most cases browsers let the embedded document to access the parent window's context but not vice versa. So in doc2.htm or whichever you want to control, assign your document object to parent windows variable.
main document:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
window.onIframeReady = function () {
setChildColor("#bbb");
}
</script>
</head>
<body>
Document #1
<iframe class="postFrame" src="doc2.htm" width="100%" height="300">
</body>
</html>
doc3.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
parent.parent.setChildColor = function (color) {
document.bgColor(color);
}
$(function () {
parent.parent.onIframeReady();
})
</script>
</head>
<body style="background-color:#fff; color:#000;"> <!-- access this body style -->
Document #3
</body>
</html>
If the innerframe has a name try
innerframeName.document.body.style.backgroundColor="#000000";
I had the innerframe bgcolor set by
< style type="text/css">
body{background:#cccccc;}
< /style >
and was able to change it.

Categories