Develop Reference

Target all a elements in a page using jquery

I've tried every combination/individual selector and cannot figure this one out.
I have a 'wrapper' page that has two primary divs with id's:
toc-container
topic-container
The topic-container div has an html page loaded into it (that I cannot modify the source of), via the jquery .load function.
There are tags in those loaded pages that have href elements that I need to loop through and change. Here is the html of the loaded page:
<div id="help-content">
<table class="relatedtopics aboveheading" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width= "16">
<p class="bodytext"><img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist"><li class="numberlist">On the Logon window, click the <span class="procedureinterfaceelement">Change Password</span> link.</li><li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.</li><li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.</li><li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li></ol></div>
I have this function that is called after the page is loaded:
$('#help-content').find('a').each(function() {
var initHref = $(this).attr('href');
console.log(initHref);
var prefix = '?topicID=';
var newHref = prefix+initHref;
$(this).attr('href', newHref);
});
How can I change all href values in the page using jquery? I've tried targeting every selector possible : (

You can use the following vanilla JavaScript statement to get all anchor tags on the page
document.querySelectorAll('a')
Hope this helps you to get an initial idea on how to extend it for your solution. Happy coding.

1. Your code works, but you were only logging the original
href values. If you log again at the end of your code, you'd see the changes.
A more simple selector would be just $('#help-content a') and then you wouldn't need the .find() method call.
The JQuery .each() method is automatically passed arguments
that make referencing the element being enumerated a bit more simple,
so use that.
_target=self is only necessary if you are using the no
longer supported frameset element in your code. By default, links
open in the current window.
The vspace and hspace HTML attributes are deprecated.
All the other styling of your images (and your td elements, and really everything else) should really be done
with CSS. And, because all your styling is identical for each of
the images, a single CSS rule can set them all up.
Although your code does work, your prefix and newHref variables
aren't really necessary since you only use them once.
// When the DOM is ready...
$(function(){
$('#help-content a').each(function(idx, el) {
var initHref = $(el).attr('href');
$(el).attr('href', '?topicID=' + initHref);
console.log("Original href: " + initHref, " - New href: " + $(el).attr('href'));
});
});
/* Don't use HTML to style your page. That's what CSS is for.
And, using CSS will remove the need for redundant HTML. */
#help-content img {
height:16px;
width:17px;
text-align:bottom;
border:none;
}
#help-content table.relatedtopics { border-collapse:collapse; border:none; border-spacing:0; }
#help-content table.relatedtopics tr { vertical-align:top; }
#help-content table.relatedtopics td { padding:0; width:16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help-content">
<table class="relatedtopics aboveheading">
<tr>
<td>
<p class="bodytext">
<a href="overview.htm">
<img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="accessing_solutions.htm">
<img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="best_practice_browser.htm">
<img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic">
</a>
</p>
</td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist">
<li class="numberlist">On the Logon window, click the
<span class="procedureinterfaceelement">Change Password</span> link.
</li>
<li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.
</li>
<li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.
</li>
<li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li>
</ol>
</div>

how to hide a parent div if image is missing

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>

hideshow within a table

I'm trying to click-to-show some text within a table with the following code:
<%
if isarray(myArray) <> FALSE then
For Counter = 0 to RowNumber
%>
<tr>
<td>col1</td>
<td>col2</td>
<td><img src="/bullet.png"/>
<div id="adiv" style="display:none">Hello</div></td>
</tr>
I want the revealed text to appear within the same <td>, on the same row that was clicked but it always appears on the first row of the table, regardless of which row is clicked.
Could someone point out what I'm missing here?
-EDIT-
Removed orphan div and closed <a> tag wrt Rick Hitchcock's answer.

Your a tag isn't closed, and you have an orphan </div> tag:
... <img src="/bullet.png"/><a></div> ...
Change to this:
... <img src="/bullet.png"/></a> ...
Also: ids must be unique, but you have the same "adiv" id on each row of your table. You could remove the id and do this instead:
<td>
<a onclick="hideshow(this.parentNode.querySelector('div'))">
<img src="/bullet.png"/>
</a>
<div style="display:none">Hello</div>
</td>

Web Page Script to Sort Order of Columns (not order of rows)

(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?

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.