I am trying to change the picture by using mouseover however it doesn't seem to be working? can anyone help? here is my code
<img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">
<script>
$('#myImg').hover(function() {
$(this).attr('src', '/folder/nov2014.jpg');
}, function() {
$(this).attr('src', '/folder/Nov1.jpg');
});
</script>
There might be two reasons that can create such problem.
See if you've included the jQuery library before using it.
You have to put your code inside $(document).ready(function(){ //here your code goes });
Try this way,
HTML :
<img id="myImg" src="http://www.allgraphics123.com/ag/01/14142/14142.gif" />
jQuery :
$(document).ready(function(){
$('#myImg').hover(function() {
$(this).attr('src', 'http://thumb7.shutterstock.com/display_pic_with_logo/265489/120305665/stock-vector-cartoon-parrot-vector-clip-art-illustration-with-simple-gradients-all-in-a-single-layer-120305665.jpg');
}, function() {
$(this).attr('src', 'http://www.allgraphics123.com/ag/01/14142/14142.gif');
});
});
jsFiddle
Why your code didn't work?????
Before manipulating any DOM element, the page must be loaded first. So one question arises that,
How would I know if the page has already been loaded!!!
Here comes $(document).ready(); as a helping hand from jQuery. It let javaScript execute the code that it contains when the DOM elements are ready for use. So as a developer you don't need to worry if DOM has been loaded or not.
And that's the reason that you were going to manipulate the DOM element #myImg before it has been availabe for use. And your javaScript/jQuery code couldn't find that you are asking for.
I just rephrased this documentation : Here
Try:
<img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">
<script>
$("#myImg")
.mouseover(function() {
$(this).attr("src", "/folder/nov2014.jpg");
})
.mouseout(function() {
$(this).attr("src", "/folder/Nov1.jpg");
});
</script>
Related
How can change a specific part of an image src using jQuery after the page is being loaded?
This is an example link,
<img src="https://example.com/73832d3c5fca_175x175_c0b~bn1v1.jpg">
I want to replace the b1n1v1 with bn1v1 after the page is being fully rendered.
This is what I have tried to do so far but it doesn't work.
$(document).ready(function() {
return $(this).text().replace("b1n1v1", "bn1v1");
});
Thank you!
Loop each images and replace the same .attr('src')
$(document).ready(function() {
$('img').each(function(){
$(this).attr('src',$(this).attr('src').replace("b1n1v1", "bn1v1"));
});
});
each https://api.jquery.com/each/
Your syntax isn't quite right as this refers to the window and return is redundant at that point.
To make this work for all img elements in the page you need to loop through them. To do that you can provide a function to attr() which accepts the current value as an argument and returns the new value. Try this:
$(document).ready(function() {
$('img').attr('src', function(i, s) {
return s.replace("b1n1v1", "bn1v1");
});
});
Add a class to that image imageClass.
$('.imageClass').attr('src').replace('bn1nv1', 'bn1v1');
I'm trying to load a widget in javascript which creates a HTML table once it has been loaded.
Example:
<td class="foo"><a class="bar" href="http://example.com">Example</a></td>
Inside the table are links where I'd like to remove the href attribute.
So the result looks like this
<td class="foo"><a class="bar">Example</a></td>
I tried the following jQuery:
function myfunction() {
$("td a").each(function(){
if($(this).hasClass("bar")){
$(this).removeAttr("href");
}
});
};
Reference: http://www.tutorialrepublic.com/faq/how-to-remove-clickable-behavior-from-a-disabled-link-using-jquery.php
I tried it also with onload="myFunction()" but that neither worked out.
Why this is not working? Any input is much appreciated!
have you try:
$(window).load(function(){
myFunction();
})
The problem, you're facing is, contents are added after the full document load. You should use .on() method to call your function or to run the script.
$(".widget").on("load", function(){
alert("It was loaded/ load your function/write your code here.");
});
Note, .widget and load are my assumptions. You should better use the correct values or provide your jsfiddle or code here to diagnose the problem if it still exists.
I have this JQuery code and a link below the JS code. It doesn't seem to work if the link is below the JS code, but it works if the JS code is below the link.
How can I get it working with the JS code above the link? I need to do it this way because I have the JS code in a file that I include using PHP include.
<div id="EditPage" class="EditPagePopup">
<iframe id="EditPageFrame" width="100%" height="80%" src=""></iframe>
<a id="JQueryClose">×</a>
</div>
<script>
$("a#EditPageLink").click(function (e) {
alert("f");
e.preventDefault();
$("#EditPageFrame").attr("src", $(this).attr("value"));
$("a").removeClass("active");
$(this).addClass("active");
JQueryPopup('#EditPage');
});
</script>
<a id="`EditPageLink`" href="#" value="editcustomer.php?seq='.$customer["sequence"].'"
It doesn't need to be, but it's recommended to be. Read this previously asked question.
What you should definitely do, is use jQuery's ready function to ensure the DOM has finished loading before attaching your events. For example:
$(function() {
$("a#EditPageLink").click(function (e) {
alert("f");
e.preventDefault();
$("#EditPageFrame").attr("src", $(this).attr("value"));
$("a").removeClass("active");
$(this).addClass("active");
JQueryPopup('#EditPage');
});
});
Doing that will attach the event correctly, regardless of where your script tag appears in the html.
When the code is above the html, then it might get executed before the DOM is fully loaded. It's recommended to put your javascript that depends on the DOM at the bottom of the page to avoid this problem.
Having scripts all the way to the bottom has become the usual practice because that way the browser can render the page and load and run scripts last.
It used to be all scripts inside the head tag, way back then. But really you can put the script wherever, having all in one place (top or bottom) makes your markup readable and maintainable.
I'm looking to simply hide and image before the page loads and then once the page has loaded to show the image. Problem is when I try to show the image it doesn't show the image at all.
Here is my html code:
<body>
<div id ="splash" data-role="page">
<center>
<div id='class'> <img src="BookBayText.png"></div>
<div id='book'> <img src="Book.png"></div>
</center>
</div>
</body>
Here is my javascript/jquery mobile:
<script type="text/javascript">
$(document).on('pagebeforeshow','#splash',
function()
{
$("#book").hide();
});
$(document).on('pageinit','#splash',
function(){
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
},3000);
//For some reason this line below doesn't run
$("#book").show();
});
</script>
Any ideas why this isn't working??
I managed to get the desired effect I wanted with the following code:
setTimeout(
function()
{
$("#class").animate({top: "1em"}, 'slow');
$("#book").show();
},2000);
Basically I moved the $("#book").show(); line into the setTimeout function. But it still leaves me a tad lost as to why the code wouldn't show the image outside the function. If anyone with the answer to this could update this answer it would really be appreciated.
kinda similar to this post jQuery mobile popup on pageinit .
Although the post blames a delay in the browser, for me it is still unclear why it does it. I have never experience such behaviour.
I wonder what if you do the following changes:
put your center tag inside a data-role:content,
replace pageinit for pageshow.
search your iem as follows
inside either pageinit or pageshow (not settimeout).
>
var elem = $("[data-role='page']:last").find('#book img'); // others may use $.mobile.activePage
if (elem.length) {
// check height or img width here...
}
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});