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>
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>
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.
The following script opens an image onmouseover, however I can't come up with a way to remove the image onmouseout. I know I am missing something extremely simple but can't seem to find something that works.
<script type="text/javascript">
function show(Id) {
document.getElementById(Id).style.display="inline";
}
</script>
<span onmouseover="show ('myImage')">- <u>LAZARETTE</u></span></b>
<img src="../images/MarkILineDrawingLazarette.jpg" id="myImage" border="0" style="display:none;"
You are very close! Just add the onmouseout event!
HTML
<b>
<span onmouseover="show('myImage',true)" onmouseout="show('myImage',false)">- <u>LAZARETTE</u></span></b>
JAVASCRIPT
function show(Id, show) {
document.getElementById(Id).style.display = show ? "inline" : "None";
}
function hide(Id) {
document.getElementById(Id).style.display="none";
}
then change the opening span tag to:
<span onmouseover="show('myImage')" onmouseout="hide('myImage')" >
Edit:
JSFiddle!
I have a html with python to dynamically load some buttons defined in a css:
<div id="Menu">
<center>
{{for nickname, my_id in zip(nicknames, my_ids):}}
<myButton class="c" name="{{=nickname}}", value={{=nickname}} id="{{=my_id}}">{{=nickname}}</myButton>
{{pass}}
</center>
</div>
then I have some javascript below:
<script type="text/javascript">
$(document).ready(function() {
$(".c").click(function() {
alert("haha");
}
}
</script>
Clicking on the buttons just doesn't work. I have viewed many threads here but I cannot find what the problem I get here. Browser is Chrome.
You need to close those functions:
$(document).ready(function() {
$(".c").click(function() {
alert("haha");
});
});
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");
});
});