Folks, I have divs set up that are display:none. There are several. there is a script that is ran that when on link is clicked it changes that particular div to display:block. What I need is a way to use a direct hyperlink to automatically show that particular div. Any Ideas?
Thanks, Plasmagrid
NORMAL HEADER INFORMATION ---------
<script type="text/javascript" src="http://domainlocation/Scripts/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(300);
}
else {
$(this).hide(300);
}
});
}
</script>
<BODY>
<BASEFONT SIZE="2" FACE="Arial">
<div ALIGN="center">
<TABLE CELLPADDING=3 BORDER=0 width="900px" style="font-size:14px;">
<tr>
<td>
<div align="center">
<a class="trbgshdw1" href="javascript:showonlyone('NucleusLst');" id="Nucleus">Nucleus Utilities</a>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('DisplayLst');" id="Display">Display (Monitor) Drivers</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('BiosLst');" id="Bios">Bios Utilities</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('CDImgLst');" id="CDImg">CD Imaging Utilities</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('DataCapLst');" id="DataCap">Data Capture Utility</a></span>
<br><br>
<a class="trbgshdw1" href="javascript:showonlyone('EdgePortLst');" id="EdgePort">EdgePort Drivers / Utilities</a>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('FTPLst');" id="FTP">FTP Utility</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="http://asonet.wayne.com/extranet/dl-Fusion.asp" id="Fusion">Fusion</a>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('HostLdrLst');" id="HostLdr">Host Loader Files</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('ModemLst');" id="Modem">Modem Drivers</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('NetworkLst');" id="Network">Network Drivers</a></span>
<br><br>
<a class="trbgshdw1" href="javascript:showonlyone('OracleLst');" id="Oracle">Oracle Files / Utilities</a>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('TankMonLst');" id="TankMon">Tank Monitoring Utilities</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('TelnetLst');" id="Telnet">Telnet Utility For ESR</a></span>
<span style="margin-left:25px;"><a class="trbgshdw1" href="javascript:showonlyone('ZipUtilLst');" id="ZipUtil">Zip / Unzip Utilities</a></span>
</div>
<br>
<!-- ** NUC **-->
<div align="left" id="NucleusLst" name="newboxes" style="display: none;"><span style="color:#FFFFFF;font-size:22px;font-weight:bold;line-height:15px;">Nucleus</span>
<table border="0" cellpadding="3" width="100%">
<TR bgcolor="#ffffff">
<td align="center" WIDTH="340px"><strong>Filename</strong></td>
<td align="center" width="*"><strong>Filesize</strong></TH>
<td align="center" WIDTH="400px"><strong>File Description</strong></Td>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">57 MB</TD>
<TD>Java 1.5.0.05 <br> It is used for reloading</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">116 KB</TD>
<TD>Diagnostic Files</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">161 KB</TD>
<TD>
For use with sites which may have difficulty with time change<br>
occuring on 11/01/2009.<br>
</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">3.83 MB</TD>
<TD> Installation Files and Instructions</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">700 KB</TD>
<TD><br>(replacement for ver4.03 CDs)</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">56 KB</TD>
<TD>Matrix (as of 12/13/05)</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">3 KB</TD>
<TD>Memory upgrade </TD>
</TR>
</table>
</div>
<!-- ** DISPLAY **-->
<div align="left" id="DisplayLst" name="newboxes" style="display: none;"><span style="color:#FFFFFF;font-size:22px;text-align:left;font-weight:bold:">Display (Monitors)</span>
<table border="0" cellpadding="3" width="100%">
<TR bgcolor="#ffffff">
<td align="center" WIDTH="340px"><strong>Filename</strong></td>
<td align="center" width="*"><strong>Filesize</strong></TH>
<td align="center" WIDTH="400px"><strong>File Description</strong></Td>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">2.7 MB</TD>
<TD>Drivers </TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">3.9 MB</TD>
<TD>Updated drivers.</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE</TD>
<TD align="center">7 MB</TD>
<TD> Installation Manual<sup>Draft</sup></TD>
</TR>
</table>
</div>
<!-- ** BIOS **-->
<div align="left" id="BiosLst" name="newboxes" style="display: none;"><span style="color:#FFFFFF;font-size:22px;text-align:left;font-weight:bold:">B I O S</span>
<table border="0" cellpadding="3" width="100%">
<TR bgcolor="#ffffff">
<td align="center" WIDTH="340px"><strong>Filename</strong></td>
<td align="center" width="*"><strong>Filesize</strong></TH>
<td align="center" WIDTH="400px"><strong>File Description</strong></Td>
</TR>
<TR bgcolor="#ffffff">
<TD>FILE<BR><br>FILE</TD>
<TD align="center">1 MB<br><br>2 MB</TD>
<TD><br>To install Bios Version 1.80 Using a Diskette<BR><br>To install Bios Version 1.80 Using a<br>Memory Key,Flash Drive, Thumb Drive</TD>
</TR>
<TR bgcolor="#ffffff">
<TD align="center">FILE</TD>
<TD align="center">168 KB</TD>
<TD>Service Memo </TD>
</TR>
<TR bgcolor="#ffffff">
<TD align="center">**********</TD>
<TD align="center">NA</TD>
<TD>INFORMAITON TO BE ADDED</TD>
</TR>
</table>
</div>
and so on for more DIVS
with jquery:
$('a').on('click', function(e) {
var id = $(this).attr('href');
$(id).show();
// or from your example:
showonlyone(id);
});
If you don't want all links do have the event attached to them you need a way to identify them.
$('a[data-toggle="target"]').on('click', function(e) {
var id = $(this).attr('href');
$(id).show();
// or from your example:
showonlyone(id);
});
In the previous example you'd be targeting anchors with the attribute data-toggle="target":
or you could target anchors referencing ids:
$('table a[href6^="#"]').on(...)
If the anchors are added to the document dynamically:
$('table').delegate('a[href6^="#"]', 'click', function(e) {...});
Related
we're using Coldfusion and SQL and are trying to make a page with a query with only one tablr with one row and need it to force a page break after so many rows. We could also have it force a page break after 8x11 page is filled. I'm using a header and it will never show the header on page 2 sense it can't figure out where the page break is. Any help would be great.
Thanks
<head>
<script>
thead {
position: sticky;
top: 0px;
}
</script>
</head>
<thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<td bgcolor="#EDE9C6" width="5px">
<div align="center"><nobr><font size="-2">fmt</font></div>
</td>
<td style="overflow:hidden;" bgcolor="#EDE9C6" width="23px">
<div align="center"><strong><font size="-2"> <nobr> category </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><nobr><font size="-2"> SKU </font></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><strong><nobr><font size="-2"> artist </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><nobr> <font size="-2"> title </font></div>
</td>
<td bgcolor="EDE9C6" width="5px">
<div align="center"><strong><nobr><font size="-2"><strong>qs </strong></font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">fa </font></div></td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><strong><font size="-2"><strong>ts </strong> </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">wtd </font></div>
</td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><strong><font size="-2">mtd </font></strong></div></td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><font size="-2">ytd </font></div></td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><font size="-2"><strong>price</strong></font>
</div></td>
<td bgcolor="EDE9C6" width="15px">
<div align="center"><font size="-2">check</font>
</div></td>
</table></thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<tbody>
<cfoutput query="myquery">
<tr>
<td bgcolor="ffffff" width="5px">
<div align="center"><nobr><font size="-2">#fmt#</font></div>
</td>
<td style="overflow:hidden;" bgcolor="ffffff" width="50px">
<div align="center"><strong><nobr><font size="-2">#Left(catdesc,20)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="20px">
<div align="center"><nobr><font size="-2">#fsku#</font></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><strong><nobr><font size="-2">#Left(artist,25)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><nobr><em><font size="-2">#Left(title,25)#</font> </em></div>
</td>
<td bgcolor="ffffff" width="8px">
<div align="center"><strong><nobr><font size="-2">#fUpStkQty#</font> </strong></div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2"><cfif #Fas# is not "">X<cfelseif #Fas# is ""> </cfif></font></div></td>
<td bgcolor="ffffff" width="12px">
<div align="center"><strong><font size="-2">#fStockQty#</font></strong> </div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2">#fNSWTD1#</font></div>
</td>
<td bgcolor="ffffff" width="12px"><div align="center"><strong><font size="-2">#fNSMTD1#</font></strong></div></td>
<td bgcolor="ffffff" width="12px"><div align="center"><font size="-2">#fNSYTD1#</font></div></td>
<td bgcolor="ffffff" width="20px">
<div align="center"><strong><font size="-2">$#fcost#</font></strong>
</div></td>
<td bgcolor="ffffff" width="15px">
<div align="center"><font size="-2"> </font>
</div></td>
</cfoutput></tbody>
</table>
When scripting automation with Selenium, I tried to locate a required web element with css selector, and I used the firebug to get the unique css path for that element. However, I was surprise since sometimes the firebug give me an incorrect css path although it works with selenium indeed.
<table width="100%" cellspacing="1" cellpadding="4" border="0" class="forumline">
<tbody><tr>
<th nowrap="nowrap" height="25" align="center" colspan="2" class="thcornerl"> Topic </th>
<th width="50" nowrap="nowrap" align="center" class="thtop"> Answers </th>
<th width="100" nowrap="nowrap" align="center" class="thtop"> Author </th>
<th width="50" nowrap="nowrap" align="center" class="thtop"> Views </th>
<th nowrap="nowrap" align="center" class="thcornerr"> Last message </th>
</tr>
<!-- TOPICS LISTING -->
<tr class="bg_small_yellow">
<td width="20" valign="middle" align="center" class="row1Announce"> <img alt="" src="/jforum/images/transp.gif" class="icon_folder_announce">
<span class="topictitle">
<a href="/jforum/posts/list/2.page">
Support JForum - Please read
</a>
</span>
</td>
<td valign="middle" align="center" class="row2Announce"><span class="postdetails">0</span></td>
<td valign="middle" align="center" class="row3Announce">
<span class="name">Admin</span>
</td>
<td valign="middle" align="center" class="row2Announce"><span class="postdetails">4</span></td>
<td valign="middle" nowrap="nowrap" align="center" class="row3Announce">
<span class="postdetails">20/03/2016 13:58:24<br>
Admin
<img border="0" alt="[Latest Reply]" src="/jforum/templates/default/images/icon_latest_reply.gif"></span>
</td>
</tr>
<tr class="bg_small_yellow">
<td width="20" valign="middle" align="center" class="row1"> <img alt="" src="/jforum/images/transp.gif" class="icon_folder">
<span class="topictitle">
<a href="/jforum/posts/list/3.page">
[Poll]
Which one is your favorite?
</a>
</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">0</span></td>
<td valign="middle" align="center" class="row3">
<span class="name">yinzhenzhixin</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">8</span></td>
<td valign="middle" nowrap="nowrap" align="center" class="row3">
<span class="postdetails">20/03/2016 14:34:25<br>
yinzhenzhixin
<img border="0" alt="[Latest Reply]" src="/jforum/templates/default/images/icon_latest_reply.gif"></span>
</td>
</tr>
<tr class="bg_small_yellow">
<td width="20" valign="middle" align="center" class="row1"> <img alt="" src="/jforum/images/transp.gif" class="icon_folder">
<span class="topictitle">
<a href="/jforum/posts/list/1.page">
Welcome to JForum
</a>
</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">1</span></td>
<td valign="middle" align="center" class="row3">
<span class="name">Admin</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">6</span></td>
<td valign="middle" nowrap="nowrap" align="center" class="row3">
<span class="postdetails">20/03/2016 14:09:51<br>
yinzhenzhixin
<img border="0" alt="[Latest Reply]" src="/jforum/templates/default/images/icon_latest_reply.gif"></span>
</td>
</tr>
<!-- END OF TOPICS LISTING -->
<tr align="center">
<td valign="middle" height="28" align="right" colspan="6" class="catbottom">
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td align="center"><span class="gensmall"> </span></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I need the span which under the third tr whose class name is "bg_small_yellow". However, the firebug give me the unique css path as "tr.bg_small_yellow:nth-child(4) > td:nth-child(2) .topictitle > a:nth-child(1)", you see there are only 3 bg_small_yellow in total. where is the 4th one? How does it work?
You can use unique X Paths to access web elements.
Selenium Command
Hope the above mentioned link helps to solve your problem!
Please help me to construct a jquery (phpquery) to parse the below sample to extract all the url's with the class "myblue". I am trying to make an app that displays the data from those url's.
<table width="100%" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr>
<td class="inputtxt" height="20" bgcolor="#E4E4E4" colspan="2">
<b>Notices</b>
</td>
</tr>
<tr valign="top">
<td class="inputtxt" width="7%" valign="top" align="center">»</td>
<td width="93%" valign="top">
<a class="myblue" target="_blank" href="http://example.comn/"> Some Text</a>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="1" cellpadding="2" border="0">
<tbody>
<tr>
<td class="inputtxt" height="20" bgcolor="#E4E4E4" colspan="2">
<b>Info</b>
</td>
</tr>
<tr valign="top">
<td class="inputtxt" width="7%" valign="top" align="center">»</td>
<td width="93%" valign="top">
<a class="myblue" target="_blank" href="xxxx.html"> Some Text</a>
</td>
</tr>
var urls=[];
$('a.myblue').each(function(){
urls.push($(this).attr('href'));
})
or
var urls = $('a.myblue').map(function () {
return $(this).attr('href');
})
If you need to extract them all you can loop through like this -
$('a.myblue').each(function() {
console.log( $(this).attr('href') );
});
I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?
You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.
how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>