Can anybody help me letting me know what is wrong with the following code?
$(document).ready(function(){
$("img").attr("alt")=='minimize'.click(function(){
alert("he");
});
});
thanks.
Addition:
Sorry guys, I am trying to add an event to a image inside of a table, so when its clicked it collapse the div under need.
I am facing several problems here.
1.- all tables and div use the same class.
2.- it may be a minimum of two tables and divs.
3.- first table should no be click able, only its images (for show and hide div under)
4.- rest of tables should be click able the whole table to show and hide div under with slidetoggle.
5.- rest of tables also have two images for show with slideDown and slideUp.
What I have it works but not fully.
Once again.
Thanks.
so far this is what I have.
<script type="text/javascript">
$(document).ready(function(){
$(".heading:not(#Container1)").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
$(document).ready(function(){
$("img[alt='min']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
$("img[alt='max']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
</script>
<html>
<head></head>
<body>
<table class="heading" id="container1">
<tr>
<td>heading1</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container1</div>
<table class="heading">
<tr>
<td>heading2</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container2</div>
<table class="heading">
<tr>
<td>heading3</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container3</div>
</body>
</html>
You need to use the attribute selector not get the attribute and compare it.
$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});
$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});
EDIT
$(function() {
$('img[alt='min'], img[alt='max']').click(function() {
var container = $(this).parent('table').next('div.container');
if ( $(this).attr('alt') == 'min' )
container.slideUp('slow');
if ( $(this).attr('alt') == 'max' )
container.slideDown('slow');
return false;
});
$('table.heading:not(:first)').click(function() {
$(this).next('div.container').slideToggle('slow');
return false;
});
});
The alt attribute is not a way to filter your images. It is designed to put alternative content for when the image cannot be displayed (not found, unwanted by user, no screen, etc.)
You should instead use the class attribute to discriminate your images the way you want.
Your code then becomes:
HTML
<img src="..." class="minimize" alt="A beautiful image">
Javascript
$(document).ready(function(){
$("img.minimize").click(function(){
alert("he");
});
});
It is not syntactically correct. What are you trying to do? Maybe this?
$(document).ready(function(){
$("img[alt=minimize]").click(function(){
alert("he");
});
});
Related
I am new to programming and am mostly just playing around with HTML and JavaScript right now. I recently learned about jQuery and was trying to use it in a periodic table quiz page I made. I wanted to be able to mouse over certain elements and see a relevant picture and then mouse off and restore it to the element symbol and name that was there before. Here is my code:
The element is in a table coded by HTML, like so:
<table id="ptable" style="text-align:center;">
<tr>
<td>
<div id="einsteinium"><span style="font-size:32px;">Es</span>
<p style="font-size:12px;">Einsteinium</p>
</div>
</td>
<td>hydrogen</td>
<td>helium</td>
</tr>
</table>
And here is the jQuery:
$(document).ready(function () {
var oldhtml = "";
oldhtml = $("#einsteinium").html();
$("#einsteinium").hover(function () {
$("#einsteinium").html("<img src=\"http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg\" height=\"70px\" width=\"70px\">");
},
function () {
$("#einsteinium").html(oldhtml);
});
});
Fiddle
The problem is that the picture of Einstein will get stuck and won't return to the element symbol/name. On the fiddle, if you keep mousing over it, it will start working again, but it doesn't do that on my code. For me, when it gets stuck it doesn't get unstuck (but the fiddle does get stuck too, and I don't want that to happen at all). I have tried changing the z-index of the div and table, but no luck there. I'd really appreciate any help!
The problem is because, you are changing the contents of the hovering div, which is messing up the mouse enter/leave events
You can do it without any javascript, but with css and the :hover selector like
#einsteinium > img {
display: none;
}
#einsteinium:hover > img {
display: inline-block;
}
#einsteinium:hover > div {
display: none;
}
<table id="ptable" style="text-align:center;">
<tr>
<td>
<div id="einsteinium">
<img src="http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg" height="70px" width="70px">
<div>
<span style="font-size:32px;">Es</span>
<p style="font-size:12px;">Einsteinium</p>
</div>
</div>
</td>
<td>hydrogen</td>
<td>helium</td>
</tr>
</table>
I have an ecommerce website that has multiple prices for a given item. I am trying to set up a bit of script that will hide a price, if the lower price class is present on the page.
<table>
<tbody>
<tr>
<td>
<font>
<div class="product_listprice">199.99</div>
</font>
<font>
<div class="product_productprice">179.99</div>
</font>
<b>
<div class="product_saleprice">159.99</div>
</b>
<font>
<div class="product_discountprice">139.99</div>
</font>
</td>
</tr>
</tbody>
</table>
Essentially what I need is a script that will hide .product_productprice if .product_saleprice exists on the page, and will hide both .product_saleprice and .product_productprice if .product_discountprice exists.
Here's what I've come up with so far with some google digging.
<script type="text/javascript">
$(document).ready(function(){
if ( $(".product_discountprice").size() )
$(".product_saleprice, .product_productprice").hide();
});
});
</script>
However, it doesn't seem to be working. Any ideas? I'm a jquery novice, so I'm sure there is a better way to do this out there...
// Essentially what I need is a script that will hide .product_productprice
// if .product_saleprice exists on the page...
if ($('.product_saleprice').length) {
$('.product_productprice').hide();
}
// ...and will hide both .product_saleprice and .product_productprice
// if .product_discountprice exists.
if ($('.product_discountprice').length ) {
$('.product_saleprice, .product_productprice').hide();
}
Update that adds a new class name, instead of hiding:
if ($('.product_saleprice').length) {
$('.product_productprice').addClass('some-class');
}
if ($('.product_discountprice').length ) {
$('.product_saleprice, .product_productprice').addClass('some-class');
}
http://jsfiddle.net/3481uqa4/1/
if ($(".product_discountprice").length) {
$(".product_productprice, .product_saleprice").hide();
} else if ($(".product_saleprice").length) {
$(".product_productprice").hide();
}
Will hide both product price and sale price if product_discountprice exists, else if sale price exist hide product price. If neither of them exists, show the product price.
Try this one.. Not sure if it is correct.
<script type="text/javascript">
$(document).ready(function(){
if($(".product_discountprice").length()){
$('.product_saleprice').hide();
$('.product_productprice').hide();
});
});
</script>
In my page I have a div with another div and an iframe as shown below.
<div class="v_dissc_tab" id="tabs-1">
<div id="publicevent">
<div class="crtraone" style="margin-left:800px;">
<button onclick="addpublic()">Add New</button>
</div>
<div>
<table width="100%">
<tr>
<td><b>Programme</b></td>
<td><b>Scheduled Start Time</b></td>
<td><b>Scheduled End Time</b></td>
<td><b>Amount</b></td>
<td><b>Status</b></td>
<td></td>
</tr>
<tr>
<?php if($publicnum>0)
{
}
else
{ ?>
<td colspan=6>
<?php echo "No any public channel programmes";?>
</td>
<?php }?>
</tr>
</table>
</div>
</div>
<iframe id="calendarframe" style="width: 100%;height:600px;display:none;" src="<?php echo base_url()?>index.php/channel/viewbookings">
</iframe>
</div>
On page loading, the div with id publicevent will be shown and the iframe is hidden. When I click on Add New button, the iframe will be loaded. Inside iframe I am loading another page which contains a button
<button onclick="managepublic()">Manage Public Events</button>
On clicking this button, I want to show the div with id publicevent and want to hide the iframe (as when the page is firstly loaded). Shown below is managepublic().
function managepublic()
{
location.reload(); // not making any changes
//$('#publicevent').show(); Tried with this also
//$('#calendarframe').hide();
}
Can anyone help me to solve this. Thanks in advance.
dont' use location.reload ,use only following code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
function managepublic()
{
$('#publicevent').show();
$('#calendarframe').hide();
}
On clicking this button, I want to show the div with id publicevent
and want to hide the iframe (as when the page is firstly loaded).
Check if this helps.
$('iframe').attr( "src", "http://www.apple.com/");
$('iframe').load(function() {
$('iframe').show()
$('#loaded').hide();
});
$('#button').click(function() {
$('#loaded').show();
$('iframe').hide();
});
JSFiddle
Try the following code snippet.
You are referring elements of <iframe>'s parent.
function managepublic(){
$('#calendarframe', window.parent.document).hide(250, function() {
$('#publicevent', window.parent.document).show();
});
}
Or
function managepublic(){
window.parent.$('#calendarframe').hide(250, function() {
window.parent.$('#publicevent').show();
});
}
Or Change the order of the hide events.
function managepublic(){
window.parent.$('#publicevent').show();
window.parent.$('#calendarframe').hide();
}
Note :
For this to work, parent must have jQuery included.
It won't work if parent is in different domain.
Trying to make a image based button that will change a image on the page
Here is the code I have
<script type="text/javascript">
function nextimg()
{
alert("clicked")
document.getElementById("image").src="images/gallery/gallery-2.jpg";
}
</script>
<div class="gallery">
<table>
<tr>
<td><img src="images/lt_arrow_dark.png"/></td>
<td><img id="image" src="images/gallery/gallery-1.jpg"/></td>
<td><img onclick="nextimg()" src="images/rt_arrow_dark.png" height="55" width="24"/></td>
</tr>
</table>
</div>
Nothing happens when I click on the image. Any Ideas? Thanks
alert("clicked") ; //missing something
I copied your code verbatim into a HTML file on my machine and it pops up the "clicked!" alert in both Chrome and Firefox. Are you sure you don't have JavaScript disabled or something? What browser are you using?
You need to remove the z-index of -2 in your css.
.gallery {
background-color:#090909;
position:relative;
top:60px;
width:100%;
}
Live DEMO
Adding the Javascript into head and the other part of the code into body, enveloped in HTML got it to work for me on Chrome and IE.
<script type="text/javascript">
windown.onload = function() {
function nextimg() {
alert("clicked")
document.getElementById("image").src="images/gallery/gallery-2.jpg";
}
}
</script>
This should be easy but it's not working properly... I am quite rusty on javascript and can't figure out what it is I am missing.
I have a navbar that I'd like to disappear when person clicks on small arrow, leaving just a 2nd arrow. When user clicks on 2nd arrow, nav bar reappears. All of the navbar is in one tag. The nav menu itself is quite long, one reason, I want to give user ability to toggle it on and off.
Javascript function in head is as follows:
<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><img src="arrow.gif"></td>';
}</script>
Text on page is:
<div id='navbar'>
<td>
<img src="arrow.gif">
</td>
</div>
Placing id in the div tag, it shows the arrow when you click on the link but doesn't remove the old html between the div tags. Same thing using span instead of div and no difference between single and double quotes. When I move the id="navbar" to the tag, the nav bar does disappear but it leaves the background color unchanged for the size of the old td tag. I would like it to go blank except for tiny arrow. So question 1 is why are div and span not working, or alternatively, td leaving background color in old space.
2nd question is how to specify innerHTM in text through a variable. It would be nice not to have to put this all in function in header.
Thanks for any ideas!
Don't know what a jsfiddle is but following code reproduces problem if put in .htm file. Thx.
<html>
<head>
<script type="text/javascript">
function hideBar()
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>';
}</script>
<script type="text/javascript">
function hideBar2()
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>';
}</script>
</head>
<body>
<table width=500>
id in td tag
<tr>
<td rowspan=3 bgcolor="yellow" id="navbar">
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
<table width=500>
id in div tag
<tr>
<div id="navbar2">
<td rowspan=3 bgcolor="yellow">
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td></div>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
</body>
</html>
Following leaves one line of background expand gif. Moving the gif outside the div throws off cell alignment. Realize that tables are no longer considered best practice but redoing table structure of whole site would be large undertaking.
<html>
<head>
<script type="text/javascript">
function toggleBar(obj) {
var navbar = document.getElementById("navbar");
if (navbar.style.display == "none") {
navbar.style.display = "";
obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
} else {
navbar.style.display = "none";
obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>";
}
}
</script>
</head>
<body>
<body><table><tr><td valign="top">
<div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;">
<a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif"
alt="Hide Menu"></a>
<div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div>
</div>
<td valign="top"><table><tr style="background-color:blue;"><td><font
color="white">Title</font></td></tr>
<tr><td>Body Text</td></tr></table>
</body>