I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<span id="myspan" class="die2"><!-- --></span>
Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>
I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
That's it
You don't need jQuery, though you might like it. All you need to do is use an element's classList object.
You can do a lot of cool things with classList:
el.classList.add("myClassName") //adds class (does nothing if el already has that class)
el.classList.remove("myClassName") //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName") //toggles class
el.classList.contains("myClassName") //returns true if el has that class, false if not.
Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.
<div id="mydiv" class="divHide">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)
I sugest jQuery:
mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")
Related
I have a question on how you spawn a pop-up when an image is clicked. I want a pop up to be some sort of alert. Here is my current html code I am working with:
<div>
<div class="Zipshare">
<span class ="projectIcons">
<a href="">
<img src="images/photostack.png" alt="" />
</a>
</span>
<span class="caption"><h6>Photostack</h6></span>
</div>
I have seen other posts describing how to spawn an alert view but don't know how to link it to an image. I was thinking a doing it through some sort of href link but can't figure it out.
Any help would be appreciated!
Just add the onclick attribute
<img src="images/photostack.png" onclick="alert('Hello World')" alt="" />
Or use jQuery:
$( "#img" ).click(function() {
alert( "Hello World jQuery" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img" src="images/photostack.png" alt="" />
Lots of ways to do this... Here is a short one inline with your html:
<img src="images/photostack.png" alt="" onclick="alert('you clicked it')" />
function pictureRc() {
alert("You right clicked that image!")}
This is my function I used in js and the html looked like this:
<img src="pic.jpg" oncontextmenu="pictureRc()">
So when you right click it makes an alert. I know this is late but for anyone finding this thread later thought it might help!
just change the oncontextmenu to onclick for left click
I have a link with image. And I want to get Link Title on a click.
<div class="summary">
<form class="variations_form " method="post" enctype="multipart/form-data"">
<div class="ql-visual-attributes">
<div class="va-pickers">
<a class="va-picker-image" data-attribute="pa_material-and-color" title="Link Title">
<img class="va-image" src="img.jpg">
</a>
</div>
</div>
</form>
</div>
Also I want to use link "data-attribute". So I try
$(document).ready(function(){
$(".summary .variations_form .ql-visual-attributes .va-pickers a[data-attribute='pa_Attribute']").click(function(){
var link_title=$(this).attr("title");
});
});
But it doesn't work
Thanks
your jquery selector looks way too complicated, but it's nog a big deal.
Your link has data-attribute with value "pa_material-and-color", but in selector you made a mistake "a[data-attribute='pa_Attribute']"
so just change selector to $(".summary .variations_form .ql-visual-attributes .va-pickers a[data-attribute='pa_material-and-color']")
I think your are selecting wrong data-attribute. You can do it like following using link class.
$(".va-picker-image").click(function(){
var link_title=$(this).attr("title");
});
I'm slightly new to javascript and jquery and have an issue/question. I'm not sure if it can be done but I have faith that it can be. The thing is, I'm not sure how to best explain it so I'm having trouble finding the answer. First off, here is my code...
HTML
<div class="media">
<div class="file">
<button class="close"></button>
<img src="img/video-image.png" />
</div>
<div class="file">
<button class="close"></button>
<img src="img/record-image.png" />
</div>
</div>
Javascript
$(document).ready(function(){
$(".close").click(function () {
$(".file").hide();
});
});
Obviously, I want to click the button to make the image disappear and from what you can see, it will hide all divs with the file class. That's not what I want. I want to just close the div that contains the button you have clicked. I know that I can used ids but I would rather not. I have a lot more of the similar situations for what I'm working on and I am just looking for compact code. Hopefully this makes sense.
Much obliged!
try this
$(document).ready(function(){
$(".close").click(function () {
$(this).parent(".file").hide();
});
});
I have what is probably an incredibly simple question, but I don't know how to resolve it and any help would certainly be appreciated.
Here's my code;
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);">No</a></p>
</div>
</div>
For a reason unbeknownst to me, the "No" link is not changing the cursor to a hand when hovered over but I haven't a clue how to address this.
I would suspect the problem is arising because the NO link doesn't have a href but being that I'm very novice I don't know how to remedy the situation so I ask that someone could please show me how to resolve this and I thank you in advance.
because you have no href attribute on the link. Add one and the cursor will change.
NITPICk: drop the javascript: it is not needed.
Add href ="#" to make it look like a link and not to navigate to a different page
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);" href ="">No</a></p>
</div>
</div>
The onclick event handler needs to supress the links default behavior to navigate to what's specified in the href attribute.
so you need href="#" also you dont need that javascript:
It should be like this:
<p class="BikeForSaleButtonNo">
No</p>
Here is a link to show the working code:
http://jsfiddle.net/dkU7B/1/
Edit: Forgot to mention another thing you can do is get rid of the onclick entirely and just use the href with javascript like so, but now you will need to use the javascript: just a neat trick.
No
You need an href="#", and I would separate your HTML and JS, it's just cleaner IMO:
<script>
var div = document.getElementById('div2');
function rmv() {
div.parentNode.removeChild(div);
}
</script>
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
No</p>
</div>
</div>
What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>
Ok, this is working, but how to change back to the original image after mouseout?
If it is possible, I want to do this thing inline, without document.ready function.
here's a native javascript inline code to change image onmouseover & onmouseout:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>
Try something like this:
HTML:
<img src='/folder/image1.jpg' id='imageid'/>
jQuery:
$('#imageid').hover(function() {
$(this).attr('src', '/folder/image2.jpg');
}, function() {
$(this).attr('src', '/folder/image1.jpg');
});
DEMO
EDIT: (After OP HTML posted)
HTML:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png"/>
</a>
jQuery:
$('#name img').hover(function() {
$(this).attr('src', '/ico/view1.png');
}, function() {
$(this).attr('src', '/ico/view.png');
});
DEMO
Thy to put a dot or two before the /
('src','./ico/view.hover.png')"
Here is an example:
HTML code:
<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
JavaScript code:
$(document).ready(function() {
$( "#myImg" ).mouseover(function(){
$(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
});
$( "#myImg" ).mouseout(function(){
$(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
});
});
Edit: Sorry, your code was a bit strange. Now I understood what you were doing. ;)
The hover method is better, of course.
jQuery has .mouseover() and .html(). You can tie the mouseover event to a function:
Hides the current image.
Replaces the current html image with the one you want to toggle.
Shows the div that you hid.
The same thing can be done when you get the mouseover event indicating that the cursor is no longer hanging over the div.
You can do that just using CSS.
You'll need to place another tag inside the <a> and then you can change the CSS background-image attribute on a:hover.
i.e.
HTML:
<a href="#" id="name">
<span> </span>
</a>
CSS:
a#name span{
background-image:url(image/path);
}
a#name:hover span{
background-image:url(another/image/path);
}
<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">
Demo
http://jsfiddle.net/W6zs5/
I know someone answered this the same way, but I made my own research, and I wrote this before to see that answer. So: I was looking for something simple with inline JavaScript, with just on the img, without "wrapping" it into the a tag (so instead of the document.MyImage, I used this.src)
<img
onMouseOver="this.src='ico/view.hover.png';"
onMouseOut="this.src='ico/view.png';"
src="ico/view.png" alt="hover effect" />
It works on all currently updated browsers; IE 11 (and I also tested it in the Developer Tools of IE from IE5 and above), Chrome, Firefox, Opera, Edge.