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.
Related
This question already has answers here:
Why jQuery cannot trigger native click on an anchor tag?
(5 answers)
Closed 11 months ago.
I would like to make a jQuery snippet of code that clicks on a "next page" button on a certain webpage.
The html of the webpage is like:
<td>...things...</td>
<td>...things...</td>
<td>...things...</td>
<!-- next page button -->
<td align="left" class="LURDA0B-K-a-com-google-gwt-user-cellview-client-SimplePager-Style-button" style="vertical-align: middle;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAB80lEQVR42r2UPU/bUBSG+S39K5AgAWJF6tINCRbYqq4dqi5IzAx0r8rAUnVLMA1RAyr5IKQJ+YBgO47jGGNRUJPh7X0v8ZUviULFUEtHV/ee9zw+vuccz8z8j8frh58tx8eV2cPltStX7nn+75Dgbu7a7qNcs5ApWEgXe0gVXLlyz3P6qZsO8u8+Nq66OMxbOKrd47g1RK45GNlQGs8PT01QR/1EUBA8vGq1XRj5zggyVBDuj5tDBaQZeQfUM24MxvvIFk38aAy0bD5sf1JABRZGHfWMG8uqfunAOL/V3k5gIjmP9c13+F4Jn/hEduch6i1Hz871bk9+lk3tbiKbTSSlrbx+g69HDS1LGuMYr2Cd7g2yBTMmHIzBEskkFpaWsfslpRWGcYxXMFtsWPYIEL8fCVLAeSwsLuNbri1B9DPOjsO6vcDPlcZhUWaJkfFT942qVojcmQXGK1g/CFcrdRuZ2m+tHeKfubbxFumSr/kyoud+iTjGaxVtW57ssUmZvd/aEa3wR1U48hsFB4ybOIvVegdG+SbWZwPs7qX05o1AQke954eTp8BxAzF7Ng5KfS27p5+eLnpSR/3U+eRlshEzouRpAc1ePDy2gFi55zn92qU/9+ewxZg0211UGx1ULiy5NsUs8vzZP8Y0MKv1YsBLn78yFAmErQgG1AAAAABJRU5ErkJggg==" width="19" height="19" class="gwt-Image" role="button" aria-label="Next page" aria-disabled="false">
</td>
<td>...things...</td>
<td>...things...</td>
<td>...things...</td>
The "next page" element is a element having a element has child and having an attribute-value pair aria-label="Next page".
I have developed a snippet that (using the jQuery .html() api) gets the html of the "next page" element
$('td').has('img[aria-label="Next page"]').html();
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAB80lEQVR42r2UPU/bUBSG+S39K5AgAWJF6tINCRbYqq4dqi5IzAx0r8rAUnVLMA1RAyr5IKQJ+YBgO47jGGNRUJPh7X0v8ZUviULFUEtHV/ee9zw+vuccz8z8j8frh58tx8eV2cPltStX7nn+75Dgbu7a7qNcs5ApWEgXe0gVXLlyz3P6qZsO8u8+Nq66OMxbOKrd47g1RK45GNlQGs8PT01QR/1EUBA8vGq1XRj5zggyVBDuj5tDBaQZeQfUM24MxvvIFk38aAy0bD5sf1JABRZGHfWMG8uqfunAOL/V3k5gIjmP9c13+F4Jn/hEduch6i1Hz871bk9+lk3tbiKbTSSlrbx+g69HDS1LGuMYr2Cd7g2yBTMmHIzBEskkFpaWsfslpRWGcYxXMFtsWPYIEL8fCVLAeSwsLuNbri1B9DPOjsO6vcDPlcZhUWaJkfFT942qVojcmQXGK1g/CFcrdRuZ2m+tHeKfubbxFumSr/kyoud+iTjGaxVtW57ssUmZvd/aEa3wR1U48hsFB4ybOIvVegdG+SbWZwPs7qX05o1AQke954eTp8BxAzF7Ng5KfS27p5+eLnpSR/3U+eRlshEzouRpAc1ePDy2gFi55zn92qU/9+ewxZg0211UGx1ULiy5NsUs8vzZP8Y0MKv1YsBLn78yFAmErQgG1AAAAABJRU5ErkJggg==" width="19" height="19" class="gwt-Image" role="button" aria-label="Next page" aria-disabled="false">'
But for some reason, when I change the .html() part into .click(), like so
$('td').has('img[aria-label="Next page"]').click();
it does not click it, so that the webpage does not change to the next one.
What is wrong? How can I fix it?
$('img[aria-label="Next page"]').click();
does not work either.
you need to find where the event handler is attached.
The click bubbles
$("tr").on("click",function(e) {
console.log($(e.currentTarget).attr("id"), "clicked");
})
$("#row2 td").on("click",function(e) {
console.log($(e.currentTarget).attr("id"), "clicked");
})
$("#row2 td img").on("click",function(e) {
console.log($(e.currentTarget).attr("id"), "clicked");
})
console.log("clicking td")
$('td').has('img[aria-label="Next page"]').click();
console.log("clicking img")
$('img[aria-label="Next page"]').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tr id="row1">
<td>...things...</td>
<td>...things...</td>
<td>...things...</td>
</tr>
<tr id="row2">
// next page button
<td id="row2cell1" align="left" class="LURDA0B-K-a-com-google-gwt-user-cellview-client-SimplePager-Style-button" style="vertical-align: middle;">
<img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAB80lEQVR42r2UPU/bUBSG+S39K5AgAWJF6tINCRbYqq4dqi5IzAx0r8rAUnVLMA1RAyr5IKQJ+YBgO47jGGNRUJPh7X0v8ZUviULFUEtHV/ee9zw+vuccz8z8j8frh58tx8eV2cPltStX7nn+75Dgbu7a7qNcs5ApWEgXe0gVXLlyz3P6qZsO8u8+Nq66OMxbOKrd47g1RK45GNlQGs8PT01QR/1EUBA8vGq1XRj5zggyVBDuj5tDBaQZeQfUM24MxvvIFk38aAy0bD5sf1JABRZGHfWMG8uqfunAOL/V3k5gIjmP9c13+F4Jn/hEduch6i1Hz871bk9+lk3tbiKbTSSlrbx+g69HDS1LGuMYr2Cd7g2yBTMmHIzBEskkFpaWsfslpRWGcYxXMFtsWPYIEL8fCVLAeSwsLuNbri1B9DPOjsO6vcDPlcZhUWaJkfFT942qVojcmQXGK1g/CFcrdRuZ2m+tHeKfubbxFumSr/kyoud+iTjGaxVtW57ssUmZvd/aEa3wR1U48hsFB4ybOIvVegdG+SbWZwPs7qX05o1AQke954eTp8BxAzF7Ng5KfS27p5+eLnpSR/3U+eRlshEzouRpAc1ePDy2gFi55zn92qU/9+ewxZg0211UGx1ULiy5NsUs8vzZP8Y0MKv1YsBLn78yFAmErQgG1AAAAABJRU5ErkJggg=="
width="19" height="19" class="gwt-Image" role="button" aria-label="Next page" aria-disabled="false">
</td>
</tr>
</table>
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
Could someone help me figure this out? I am mostly self-taught and really honestly have little idea what actually I'm doing.
I'm trying to get the onmouseover event to change a different image on the page when hovering over the first part...but also to change the URL of the changed image at the same time. I've found some valuable information on changing the image, but not which also will change out the URL when the image changes.
Specifically, I'm trying to change both the image displayed and the url for "invite_r2_c1" onmouseover. What (and where, exactly) am I missing (it)? The code as it is right now works, but doesn't actually change any url linking.
I've probably done something really backwards, but this is the code I'm working with:
<tr>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_01.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_01b.jpg';" ><img name="invite_r1_c2" src="images/invite_r1_c2.gif" width="105" height="644" id="invite_r1_c2" alt=""></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_02.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_02b.jpg';" ><img name="invite_r1_c3" src="images/invite_r1_c3.gif" width="99" height="644" id="invite_r1_c3" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_03.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_03b.jpg';" ><img name="invite_r1_c4" src="images/invite_r1_c4.gif" width="102" height="644" id="invite_r1_c4" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_04.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_04b.jpg';" ><img name="invite_r1_c5" src="images/invite_r1_c5.gif" width="100" height="644" id="invite_r1_c5" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_05.gif';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_05b.jpg';" ><img name="invite_r1_c6" src="images/invite_r1_c6.gif" width="101" height="644" id="invite_r1_c6" alt="" /></span></td>
<td><span onmouseover="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onmouseout="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" onClick="document.images['invite_r2_c1'].src='images/invite_r2_c1_00b.jpg';" ><img name="invite_r1_c7" src="images/invite_r1_c7.gif" width="274" height="644" id="invite_r1_c7" alt="" /></span></td>
<td><img src="images/spacer.gif" width="1" height="644" alt="" /></td>
</tr>
<tr>
<td colspan="7"><a href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td>
<td><img src="images/spacer.gif" width="1" height="406" alt="" /></td>
</tr>
Going to tidy things up a bit for you. First of all, create a reusable function called changeImageAndURL() so you get something reusable instead of always dumping raw js into the HTML.
For the HTML part change all your hover images to something like:
//I'm not going to repeat every image here, just giving you example for one
<td><span onmouseover="changeImageAndURL('images/invite_r2_c1_00b.jpg','link2.html')"><img name="invite_r1_c1" src="images/invite_r1_c1.gif" width="269" height="644" id="invite_r1_c1" alt="" /></span></td>
I removed the ommouseout and onclick event because they seem to do the same thing as onmouseover, in which case you would only need the latter.
Add an id to the link you want to change:
<td colspan="7"><a id="invite_r2_c1_link" href=link1.htm><img name="invite_r2_c1" src="images/invite_r2_c1_00.gif" width="1050" height="406" id="invite_r2_c1" alt="" /></a></td>
Now in your JS part:
function changeImageAndURL(img, link) {
document.getElementById('invite_r2_c1').src = img;
document.getElementById('invite_r2_c1_link').href = link;
}
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>
(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>