<div id="cell">
<div class="choose">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><h3>Title</h3></td>
</tr>
<tr>
<td align="right">CLICK HERE</td>
</tr>
</table>
</div>
<div class="result">
<img src="images/blank.jpg" width="72" height="72">
</div>
</div>
Here's my HTML, what would be the proper combination for me to click (a.ex) and be able to modify the img scr of (div.result img)?
I think this is what you're looking for:
$(this).closest('div.choose').next('div.result').find('img')
Your question is a bit vague, and as Blunderfest mentioned in the comments, you could select the image directly with div.result img
Related
var str1 = "78896541230";
str1 = str1.replace(/.(?=.{4})/g, 'x');
document.getElementById('output').innerHTML = str1;
<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="PageHeadingTable">
<tr>
<td id="PageHeading" nowrap="true">OTP Verification</td>
<td id="PageHeadingDate">
<xsl:value-of select="//faml/request/datetime" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%" valign="top">
<div class="y_scroll" id="contentarea" style="width:98%;position:absolute">
<!--y_scroll start-->
<div class="contentarea">
<!--contentarea start-->
<span id="box" class="box"> <!--rounded curve/border start-->
<div class="toppanel"><ul><li></li></ul></div>
<div class="middlepanel">
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<caption>Confirm your identity</caption>
<tr> <td>A One Time Password(OTP) has been sent to your mobile phone with number ending in </td><td id="output"></td>
</tr>
<tr ><td > If this is not your mobile number, you are advised to end your internet banking and call us</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</div>
</table>
</div>
<div class="bottompanel"><ul><li></li></ul></div>
</span>
</div>
<!--contentarea end-->
</div>
</td>
</tr>
</table>
I am trying to make an OTP page where user can input the recieved OTP on the screen.Since I have masked the user's phone number for security reasons. I am getting the value of masked phone number in seperate <td>. The only problem is there is a space between my two <td>. I am not sure how to remove the space since its nested. I have added the code in the snippet for better understanding of my problem.
Any help or suggestion will be appreciated.Thanks!!
I have a table generated using #for component.
one of the column in table contains a direct link that invokes a method and adds 1 more row to the table source.
Now what I want to do is refresh this table on UI.
it works ok, if I refresh the whole page. But when I am using the updateComponent tag on the directlink. I just see 1 row. My understanding is that my componentid is on a row that is why only one row is getting updated.
Can you suggest, how could I just update the whole table.
I tried putting the #for on say tbody, but that does not work.
Code:
<div id="compFeeTableDiv" jwcid="compFeeTableDivTap#Any" style="visibility: hidden">
<fieldset>
<legend>
</legend>
<table height="100%" cellSpacing="2" cellPadding="2" width="100%" border="0" id="compFeeTable">
<thead>
<tr>
<th>
<span key="abc" />
</th>
</tr>
</thead>
<tbody>
<tr jwcid="#For" source="ognl:compFees" value="ognl:compFee" element="tr" index="ognl:loopIndex">
<td valign="center" align="center" height="15" class="listlabel2">
<span jwcid="#If" condition="true">
<div jwcid="#Any">
<a href="" jwcid="#DirectLink" name="ognl:'edit_link_'" listener="listener:newCompFee" size="5">
<img src="images/addAction.png" alt="addAction">
</a>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
Backing Java listener method
public void newcompFee(IRequestCycle cycle) {
compFee newcompFee = compFeeFactory.createDefaultcompFee(null,getAgent().getCompany());
List<compFee> compFees = getcompFees();
compFees.add(newcompFee);
setcompFees(compFees);
getAgent().getCompany().setcompFeeApplicable(YesNo.Yes);
}
I did try the updateComponent attribute on directlink and point it to id of my #for. but that only renders 1 row after refresh.
I am using tapestry 4.1.6.
Please advise.
Thanks
So.
The problem was really stupid. it was as #Tusar points out in his comment. it was because <thead> was not closed.
What worked for me:
<div id="compFeeTableDiv" jwcid="compFeeTableDivTap#Any" style="visibility: hidden">
<fieldset>
<legend>
</legend>
<table height="100%" cellSpacing="2" cellPadding="2" width="100%" border="0" id="compFeeTable">
<thead>
<tr>
<th>
<span key="abc" />
</th>
</tr>
</thead>
<tbody>
<tr jwcid="#For" source="ognl:compFees" value="ognl:compFee" element="tr" index="ognl:loopIndex">
<td valign="center" align="center" height="15" class="listlabel2">
<span jwcid="#If" condition="true">
<div jwcid="#Any">
<a href="" jwcid="#DirectLink" name="ognl:'edit_link_'" listener="listener:newCompFee" size="5" updateComponent="compFeeTableDivTap">
<img src="images/addAction.png" alt="addAction">
</a>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
So Basically, i am calling the enclosing div on updateComponent of directlink. Works perfectly.
UPDATE
After correcting the . The whole page was getting refreshed.
The problem here was that there was a typo in updateComponent. this should be updateComponents.
All works perfectly now
sample main page for example index.html content :
<iframe src="a.html" width="400" height="300" frameborder="1" id="frame"></iframe>
a.html content :
<html><body><form >
<div id="container"><div id="main"><div class="red_bl"><div class="red_br">
<div class="red_tl"><div class="red_tr"><div id="content">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody id="subContent1">
<tr>another tags</tr>
<tr>
<td colspan="2" class="cell2" valign="top">
sample text
</td>
<td id="td_address" class="cell3">sample code</td>
</tr>
</tbody>
</table>
</div></div></div></div></div></div></div>
</form></body></html>
i want change :
<td id="td_address" class="cell3">sample code</td>
to for example :
<td id="td_address" class="cell3">another text</td>
by jQuery In index.html .
This is because your document.ready doesn't wait for the iframe to load.
Therefore, the code that you run is executed before #td_address is added to DOM.
For various solutions to this problem (depending on what are you able to change), look at answers to this question.
With JQuery:
$('#frame').contents().find('td#td_address').html('another text');
This is a two part question, I have searched under multiple tags to find an answer to no avail.
I have a table containing 4 columns and 4 nuggets, I am trying to get them to auto align on the page load so that the four columns take the whole width of the page across the bottom. I would like it to look the same whether the user is on a 22" wide screen or a 15" screen:
Would this best be done by JavaScript or is there a more efficient
way of doing this?
How would you achieve this?
Edit: sorry I should have been more specific, this is my code:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
</table>
Unless there's a particular reason why you're using such outdated HTML (tables for layout, use of things like valign and align in the HTML, etc), the most efficient (with regards to page load) way of achieving what you want is by restructuring your HTML to something more along the lines of:
<div id="nuggets">
<div id="nugget1">
<h2 class="menutitle"> FAQ's </h2>
</div>
<div id="nugget2" class="col">
<h2 class="menutitle"> Contacts </h2>
</div>
<div id="nugget3">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
<div id="nugget4">
<h2 class="menutitle"> Mail </h2>
</div>
</div>
You can then have CSS along the lines of:
#nuggets {
height: 459px;
}
#nuggets > div {
width: 25%;
height: 459px;
float: left;
text-align: center;
}
Assuming a nugget is a table cell, this is probably what you're looking for:
This sounds like a job for CSS.
Relevant CSS:
table {
width: 100%;
}
You can try setting the table width to correspond to screen resolution, perhaps using this ?
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Body html here
</td>
</tr>
</table>
If you are using the actual HTML <table> tag for your table, then the easiest way to do it is with the <colgroup> tag.
In your case, the code would be:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<colgroup width="25%" />
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
Any attributes in the <colgroup> will apply to all of the columns in that group. If you have specific styling that you'd like to do to any of the individual columns, you can add <col> tags within the <colgroup> for each column, to define them. You can also nest <colgroup> tags inside each other.
I would like to wrap a span tag around text (shown below) which exists already in my table.
Text to wrap in span tag:
Build Muscle and Train Harder<br> Boost Energy without the
Calories<br> Promote Nitric Oxide Production
My HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>Build Muscle and Train Harder<br> Boost Energy without the Calories<br> Promote Nitric Oxide Production<br><br>
<table cellspacing="0" cellpadding="0" border="0" id="tttt">
<tbody>
<tr>
<td><b><font class="pricecolor colors_productprice"><span class="PageText_L483n"><h3><b style="font-size:13px"><span class="saleprice"><font class="text colors_text"><b><span class="PageText_L335n">Sale Price</span>: </b></font></span> <b class="prodPrOr">$34.05 </b></b></h3></span></font></b><br><a class="pricecolor colors_productprice" href="/ShoppingCart.asp?ProductCode=amino%2Dchewables"><b><span class="PageText_L655n"><img class="AddRight" src="/v/vspfiles/assets/images/addtocartsmall.gif"></span></b></a>
</td>
</tr>
</tbody>
</table>
<br><br>
<a onclick="window.open('/help_FreeShipping.asp', 'FreeShipping', 'scrollbars,status,resizable,width=300,height=300');" href="javascript:void(0);">
<img border="0" alt="" src="/v/vspfiles/templates/2007New/images/Icon_FreeShipping.gif" class="vCSS_img_icon_free_shipping"></a>
</td>
<td valign="top" align="right" id="v65-productdetail-action-wrapper" class="v65-productdetail-options">
<div id="contact">
<img src="/v/vspfiles/assets/images/osw0001_talk_button.jpg">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<ul></ul>
</td>
</tr>
</tbody>
</table>
You should add a class or id to the td you're trying to select to make it a lot simpler. E.g. if you made it:
<td class="myText">Build ... </td>
Now that you can easily select it (though if you can't add the class for some reason there are ways around that - it's just the simplest way to do it), imho.
$('.myText').html().replace($('.myText').html().match(/^.*/), '<span class="myClass">'+$('.myText').html().match(/^.*/)+'</span>');