I'm trying to use a script to change the visibility of a div if an image inside it is missing
here is the div:
<div id="bike01">
<a href="stock/bike1.html">
<table width="900" border="0" cellpadding="3" cellspacing="0" class="table">
<tr>
<td width="245" rowspan="2"><img id="bike1" src="stock/bike1/images/image1.jpg" name="bike1" width="245" height="184" />
</td>
<td width="468"><div id="title1"></div></td>
</tr>
<tr>
<td colspan="2"><div id="desc1"></div></td>
</tr>
</table>
</a>
</div>
and here is my script (I am a complete beginner when it comes to scripting - ive just picked this up from researching my question)
<script>
$("#bike1").error(function () {
$("#bike01").css({visibility:"hidden"});
});
</script>
Basically if the img#bike1 is missing i want the whole div #bike01 to disappear.
Why not do:
<img id="bike1" src="stock/bike1/images/image1.jpg" onerror="this.style.display='none';" />
How do I hide broken images in javascript?
<img id="bike1" src="stock/bike1/images/image1.jpg" onerror='$("#bike01").css({visibility:"hidden"});' />
Try this:
<script>
$("#bike1").on('error', function() {
$("#bike01").hide();
});
</script>
Related
When I try to display HTML code of a DIV element, innerHTML does not return its contents:
<div id="container">
<tr>
<td style="background-color: #ffffff;">TEST</td>
</tr>
</div>
var w = window.open();
w.document.write(data);
w.document.getElementById("prw").value = w.document.getElementById("container").innerHTML;
w.document.close();
prw is an input element. innerHTML only returns TEST. Is there a way to copy HTML contents of a DIV without specifying TABLE element?
replace
<div id="container">
<tr>
<td style="background-color: #ffffff;">TEST</td>
</tr>
</div>
with
<div id="container">
<table>
<tr>
<td style="background-color: #ffffff;">TEST</td>
</tr>
</table>
</div>
and this will work fine.
If I understood correctly what you want to do, you should use OuterHTML instead of InnerHTML.
(Searched the web and here for a couple hours with no success...novice level programmer)
What I have: Table with single row, containing many short columns. The columns are entered chronologically in the HTML, adding new columns to the right. (This long row is in a short height, wide width page displayed in an iframe, and is manually scrolled left/right.)
What I want to do: Create a toggle-link reverse column display order so that the newest columns appear to the left and oldest to the right when desired.
Since my membership is new, I can't post a screenshot. So here's my best work-around attempt:
The web page this solution is to be applied to is found at:
thetransformer.us (home page, in the upper area iframe file)
A screenshot of a text illustration of desired output of a solution is found at:
thetransformer.us/images/reverse-col-order-illustration.jpg
CODE_BELOW: (Main page:) & (iframe file code (not scrollable DIV as I indicated earlier)
Many lines of the same type of code blocks omitted.
<div>
<iframe src="gallery.html" scrolling="yes" width="645" height="300" class="rounded10"></iframe>
</div>
<body style="margin:15px; background-image:url(images/bgrepeat.png)">
<div id="pl_main">
<button onclick="reverseOrder()">Reverse</button> <span style="color:white;">The horizontal link list is currently unavailable. Use View <span style="color:#99ccff;">Table of Contents</span> below.</span>
<table class="gallery">
<tr id="tableRow">
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br /><img src="pl_thumbs/1985-07_thumb.jpg" />
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br /><img src="pl_thumbs/1986-01-02_thumb.jpg" />
</a></td>
<td valign="top" id="19862"><a href="86-0304.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Mar-Apr<br /><img src="pl_thumbs/1986-03-04_thumb.jpg" />
</a></td>
<td valign="top" id="19863"><a href="86-0506.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> May-Jun<br /><img src="pl_thumbs/1986-05-06_thumb.jpg" />
</a></td>
</tr>
</table>
</div>
</body>
</html>
Thanks, Doug
[EDIT]: Here is the solution of reversing the column in JQuery.
<body>
<button onclick="sortReverse()">Click</button>
<table class="gallery">
<tbody><tr id="tableRow"><!-- id for test code, may remvoe later -->
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br><img src="pl_thumbs/1985-07_thumb.jpg">
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br><img src="pl_thumbs/1986-01-02_thumb.jpg">
</a></td>
</tr>
</tbody></table>
// Remember to include JQuery library.
<script>
function sortReverse(){
// Select the parent element by id.
var row = $("#tableRow");
// Get all the children (columns)
var columns = $.makeArray($("#tableRow > td"));
// empty the parent content
row.empty();
// Append the reversed children array to the parent
row.append(columns.reverse());
}
</script>
</body>
How would I add a second column to this drop down menu?
I'm using images instead of text. I know I've got tables in tables and images that are the wrong size etc but its just a test at the moment. If you can think of anything else to improve this menu please let me know. I hardly know anything about coding and didn't make this.
If you see anything google may not be happy with with this than please let me know as well. There's a hidden value in there and I'm not sure if that's ok with seo because I don't understand how that hidden value functions
<style>
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
<table border="1" cellspacing="1" width="60" height="60">
<tr>
<td width="60" height="60">
<table width="60" height="60">
<tr bgcolor="#FFFFFF">
<td onmouseover="showmenu('Graphic Design')" onmouseout="hidemenu('Graphic Design')">
<img src="Thumbs/plus.png" width="60" height="60"><br />
<table class="menu" id="Graphic Design" width="60">
<tr>
<td class="menu"><a href="www.techagesite.com/meboy.htm">
<img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="100" height="150">
</td>
</tr>
<tr>
<td class="menu"><a href="www.techagesite.com/meboy.htm">
<img src="thumbs/angry-birds-iphone-4-wallpaper-mobile-05_small.jpg" width="100" height="150">
</td>
</tr>
</table>
</td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Hmm, wont let me comment for some reason. Note: This is not intended to be an answer.
Tables should only really be used to store tabular data, could you provide more information as to what your trying to do. What is the drop down menu for, navigation or displaying items? The difference will determine what the appropriate controls are for your scenario.
Lay your images out in DIV's, for each image have an unordered list that has a class thats disabled by default and then activate through javascript on hover.
i writing simple script to popup quick info using jquery. When user click view, some info will show using toggle() and hide when user click again. And this script will loop 10 times.
But the problem is i want this popup only show one time and the rest will hide, now when user click view 1 and view 2 all popup will show at same time.
You can check my jsFiddle click here
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
*im not sure how to combine this script in one function
Here is your working demo
$("a").click(function() {
$('.contact_box').hide();
$(this).next('div').show();
});
use hide() to hide your corresponding box..
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_2").hide(); <-----here
$(".box_1").toggle();
});
$("#view_2").click(function(e) {
e.stopPropagation();
$(".box_1").hide();<-----here
$(".box_2").toggle();
});
fiddle here
should be :
before $(".box_1").toggle(); this hide $(".box_2").hide(); and before $(".box_2").toggle(); this hide $(".box_1").hide();
This will works.
Hi Use the code below,
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
var $el = $(".box_2");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
Hope this solves your problem
Toggle also has callback function you can use it.
$(".box_1").toggle('slow', function() {
// show hide code or fadeIn fadeOut or other animation
$(".box_2").fadeOut('fast');
});
Try this:
<div style="position:relative">
<a style="cursor: pointer" id="view_1" class="my_view">View 1</a>
<div class="contact_box box_1 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV A</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson Button</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-66558741</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: jb#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
<br>
<br>
<div style="position:relative">
<a style="cursor: pointer" id="view_2" class="my_view">View 2</a>
<div class="contact_box box_2 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV B</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-88542215</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: ac#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
$(document).ready(function() {
$('.my_view').click(function(e) {
$('.my_view').siblings('div').each(function(){$(this).hide()});
$(this).siblings('div').toggle();
e.stopPropagation();
});
$(document).click(function() {
$('.my_view').siblings('div').fadeOut(200);
});
});
For http://jsfiddle.net/7HWxu/2/ I am trying to override the image loop with the four buttons so that when one is clicked the image changes. However, on click of "1" the image won't change. Any help greatly appreciated. Thanks,
Tom
The issue is that in this code:
<div class="fadein">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg"></div>
<div style="position:absolute;">
<!-- ImageReady Slices (1.jpg) -->
<table id="Table_01" width="251" height="61" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/images/1_01.jpg" width="68" height="61" alt=""
onclick="document.getElementById('fadein').src='/1.jpg'">
</td>
<td>
<img src="/images/1_02.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_03.jpg" width="61" height="61" alt="">
</td>
<td>
<img src="/images/1_04.jpg" width="61" height="61" alt="">
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
You don't have any element with an id of "fadein". (And the div element that has a class of "fadein" doesn't have a meaningful src property.)
I note that you have jQuery on the page - rather than using inline event handlers, I suggest you use bind or delegate to manage the links:
// Your original code
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').
fadeOut().
next('img').
fadeIn().
end().
appendTo('.fadein');
}, 6500);
// Addenda
$("#Table_01").delegate("img", "click", function(e) {
// Show and hide images here based on what e.target is.
});
});
There's no element in your HTML with the "id" value "fadein", so the function returns null as it should. The outer containing <div> has the class "fadein", but not "id". You could change the <div> I guess:
<div class='fadein' id='fadein'>