hide .img javascript onload - javascript

Why this code does not work correct? I searching .img attribute but style is not changing and always picture is visible.
HTML
<script type="text/javascript">
function displayDate()
{
$('img[alt=image2]').css("display","none");
$('img[alt=image3]').css("display","none");
$('img[alt=image4]').css("display","none");
$('img[alt=image2]').css("visibility","visible");
$('img[alt=image3]').css("visibility","visible");
$('img[alt=image4]').css("visibility","visible");
}
</script>
HTML
<body OnLoad="displayDate()">
<img src="im.jpg" alt="image2"/>
<img src="im.jpg" alt="image3"/>
<img src="im.jpg" alt="image4"/>
</body>
you can see error in chrome

I think your problem is that you don't have the jQuery library included while you are using jQuery syntax. So try to include the jQuery library by adding this to the <head> of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
The jQuery way to execute something on load is like this:
$(function() {
// this code will execute on load
});
The jQuery way to hide an element is like this:
$('img[alt="image2"]').hide();
To hide the images that have an alt containing the word 'image' you can do this (other selector options can be found here):
$(function() {
$('img[alt*="image"]').hide();
});
Instead of using the alt attribute, an other option is to assign a class to the images, so you can select the images depending on their class:
$(function() {
$('.myImageClassName').hide();
});
<img class="myImageClassName" />
or to wrap them in a div with a unique id:
$(function() {
$('#myImageContainer img').hide();
});
<div id="myImageContainer">
<img />
<img />
<img />
</div>

Just try having an id for each img tag and try using this jquery hide() function...
$('#your_img_id').hide();
might work...

Related

Use an image instead of text (script type="text/javascript")

I have some code provided by the vendor:
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">FREE Puppies</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
I want to replace the FREE Puppies text with an image. The vendor says it can't be done, but I disagree. I've tried several different things but nothing seems to work quite right. I'd really appreciate some help. I know I'm just missing something small. Thanks so much!
Only replacing the text with an image is not going to work, because the embedded script looks for the href attribute of the clicked element (event.target). In the case of an image inside a link tag, the target element is the image, and does not have an href attribute.
To solve that, you can catch the event on any image that is inside these links, block it, and simulate a click on the parent link.
Demo not using jQuery
var sh_lead_images = document.querySelectorAll('.sh_lead_button img');
for(var i=0; i<sh_lead_images.length; i++)
{
sh_lead_images[i].addEventListener('click', function(e){
e.stopPropagation();
e.preventDefault();
this.parentNode.click();
});
}
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
Demo using jQuery
$('.sh_lead_button img').click(function(e){
e.stopPropagation();
e.preventDefault();
$(this).parent().click();
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="http://www.truthunity.net/sites/all/content/graphics/ministry-click-me-button.jpg" alt="">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
If you are able to change the source html, you should can easily place an image tag.
<a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">
<img src="wherever-you-have-your-image.png">
</a>
<script type="text/javascript" src="https://107617.17hats.com/embed/lead/script/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd"></script>
Regards,
F.
You can place and image tag into an a tag. Like this:
<a class="sh_lead_button" href="http://www.google.es" target="_blank">
<img src="https://www.gravatar.com/avatar/7c4c20b9134504e04754d751aa7f90c1?s=48&d=identicon&r=PG&f=1" >
</a>
There's no mention on the original question about an embedded script.

Not able to append the div using click event of jquery

Hello guys I want to dynamically append the div to the div that i click. Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="query.js">
$('.hello').click(function(){
$(this).append('<div>I am the new one</div>');
});
</script>
</head>
<body>
<div class="hello1">Hello guys</div>
<div class="hello2">Hiiiiiiii</div>
<div class="hello3">Awesome</div>
</body>
</html>
Can anyone tell me whats the issue with my code
There are 3 problems in your code
You can't have src and contents for an script tag
Since your script is placed before the elements are loaded, you need to put your script in a dom ready handler
There is no class called hello in your html
so
<div class="hello">Hello guys</div>
<div class="hello">Hiiiiiiii</div>
<div class="hello">Awesome</div>
<script src="query.js"></script>
<script>
jQuery(function ($) {
$('.hello').click(function () {
$(this).append('<div>I am the new one</div>');
});
})
</script>
Try wrap your jquery code in document.ready like
$(document).ready(function(){ // this will execute when DOM is ready
//your code
$('.hello1').click(function(){ //updated class name
$(this).append('<div>I am the new one</div>');
});
})
As i can see you are using hello class to bind click event your it
doesn't present in your HTML. So if you want to attach event to all
class start with hello use this:
$(document).ready(function(){
$('div[class^="hello"]').click(function(){
$(this).append('<div>I am the new one</div>');
});
});
DEMO
Instead of this
<script src="query.js"> //don't use src here
Use:
<script type="text/javascript">
Try this : You don't have div with class="hello" but class which starts with hello viz hello1, hello2, hello3. Hence use start with selector as shown below. Also put your code inside $(document).ready(function... or $(function(){... so that it will ensure DOM is ready and will attach click event handler.
You must include jquery library first and then put jquery script in another script tag.
<script src="query.js"></script>
<script>
$(function(){
$('div[class^="hello"]').click(function(){
$(this).append('<div>I am the new one</div>');
});
});
</script>
You need to include jQuery before and for using it. Use
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
You cannot load script and define script inside it. So, following is not valid
<script src="query.js">$('.hello')...</script>
Use ready() or DOMContentLoaded event or move the script to the bottom of <body>
There is no element with hello class in the markup, but you're binding the event on it.
Code:
<script src="query.js"></script>
<script>
$(document).ready(function() {
$('.hello').click(function() {
$(this).append('<div>I am the new one</div>');
});
});
</script>
Demo
$(document).ready(function() {
$('.hello').click(function() {
$(this).append('<div>I am the new one</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="hello">Hello guys</div>
<div class="hello">Hiiiiiiii</div>
<div class="hello">Awesome</div>
First of all, in order to use $() selectors you need to include a proper version of jquery. Then, you need to select an element: you have any element with hello class, instead, you have hello1, hello2, and hello3. You could remove the numbers, so all of them will have a hello class. And finally, because these elements doesn't exist when the js code is executed, you need to wrap your code within a document ready event, or move it to the end of your html body tag. Good luck!
There is no .hello class in your code, you use hello1, hello2 and hello3 as classnames, they should all just be hello.

Javascript. OnClick Image src +1

This is my code:
<img name="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" onclick="changer1.src='img/.../2/before.jpg'; changer2.src='img/.../2/after.jpg'"/>
So when I click on the "next.png" image, both pictures change to the pictures in the new folder. This works perfect. But what I want is, when I click on the "next.png" image, the src code automatic change. So when I click it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../3/before.jpg'; changer2.src='img/.../3/after.jpg'"/>
When i click again it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../4/before.jpg'; changer2.src='img/.../4/after.jpg'"/>
So the folder allways move +1. From 2 to 3. From 3 to 4...
I hope you know what I mean and help me :)
And sorry for my bad english.
You can change it with basic DOM methods in Javascript. Firstly I should point out 'name' is a depreciated attribute, HTML 5 uses the 'id' attribute instead.
Anyway firstly we need to add some labels to the img's so we can find them in JS
<img id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img id="changer2" alt="after" src="img/.../1/after.jpg"/>
I just used your existing name attributes. Figured that was why you'd included them anyway! Then we add a JS function to attach to the on click listener.
<script>
var pictureID = 1;
function moveToNextImage(){
pictureID++;
var string = 'img/.../'+pictureID;
document.getElementById('changer1').src = string + '/before.jpg';
document.getElementById('changer2').src = string + '/after.jpg;
}
</script>
This script keeps a counter for the folder value and uses that to generate a new source string to replace the old one with. The function adds 1 to the counter then changes the src attribute on the 2 elements to the new one.
Your next button should look like this to use the function instead.
<img src="img/next.png" onclick="moveToNextImage()"/>
Okey so my problem now is I have this script allready installed for those 2 images
So my full script is this:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter();
});
</script>
<div id="container">
<div><img id="changer1" alt="before" src="http://www11.pic-upload.de/12.09.14/oha2eiilhnay.jpg"/></div>
<div><img id="changer2" alt="after" src="http://www11.pic-upload.de/12.09.14/gdbsfgzsh2f.jpg"/></div>
</div>
I hope you know what my problem is...
When I remove the "container" ID from the div, the script from Raj works perfekt. But not my time comparison script, you find in the 1 link.
<!DOCTYPE html>
<html>
<body>
<img name="changer1" id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" id="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" id="test"/>
</body>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
var i = 2;
$("#test").click(function(){
var srcbefore='img/.../'+i+'/before.jpg';
var srcAfter="img/.../"+i+"/after.jpg";
$("#changer1").attr("src",srcbefore);
$("#changer2").attr("src",srcAfter);
console.log(srcbefore+"::"+srcAfter);
i++;
});
});
</script>
</html>
hope this solves your problem..
FYI -
Dont couple your JS code in HTML. Make it seperate.
Use Class or ID instead of name.

If your img tag is automatically generated during runtime can you change the src using JQuery/JScript?

I have an html page that doesn't contain an image until the page actually loads, and then once you inspect the source you see:
<img src="http://s5.parature.com//ics/cm/images/bt/button2_online.gif" class="available" alt="Chat Help is available" title="Chat Help is available" style="border: medium none">
I'd like to try and change the img src from what it is, to the same thing but make it https. I added my javascript AFTER this displays but it doesn't work and I'm not sure if it's supposed to or if it's even possible. Actually I'm using JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$("#available").attr('src', 'https://s5.parature.com//ics/cm/images/bt/button2_online.gif');
</script></div>
The code that actually calls the img and places it into the html at run time is this:
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);" onclick="return launchChatWindow('https://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="https://de.com.edu/js/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
But that's all I have access to since the img is called/generated at run.
$("#available") is incorrect.
the wildcard "#" refers to the "id" attribute, while "." refers to a class.
The "id" attribute makes the only element, so "class" is used for multiple elements.
Your condigo would like this: $(".available")...

jQuery fadeOut and fadeIn

I am having trouble using jQuery to fadeOut() an image and fadeIn() another when a button is clicked.
To keep it simple, here is the HTML of just the part that needs to be affected:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
</div>
</body>
Here is the jQuery:
$(document).ready(function() {
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow");
$("#more-info").fadeIn("slow");
});
});
When the button #call-to-action is clicked, the #landing-page div should fadeOut, and the #more-info image should fadeIn. It is not working. In fact, any jQuery command I've typed in has not worked for other divs. I believe there is something wrong with my jQuery plugin, or I'm missing some reference to the jquery sheet.
"or I'm missing some reference to the jquery sheet."
Yes. The code you show does not include the jquery.js file. If you have a copy of jquery.js in your project then add this in the <head> section immediately before your other JS include:
<script type='text/javascript' src='jquery.js'></script>
Otherwise you can reference a copy from a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
(Specify whichever version of jquery you want to use in accordance with what your chosen CDN supports; I've suggested the latest version compatible with old IE.)
Also you probably want to hide the second img to start with, and not fade it in until the first img has finished fading - if you pass a function as the second argument to .fadeOut() it will be called after the fadeout finishes:
$(document).ready(function() {
$("#more-info").hide();
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow", function(){
$("#more-info").fadeIn("slow");
});
});
});
Demo: http://jsbin.com/OmaCOju/1/edit
You missed to include the jquery library. You can include it from google CDN. From you question i understand that on click of a button you want div to be fade-in and fade-out. Please refer the below demo for doing this.
Demo : http://jsbin.com/IGAJeqew/2/edit

Categories

Resources