I have seen a couple of Stack Overflow posts which apparently relate to my question but none of them seem to do what I want.
I have a nested structure to display hierarchies (business units and brands) in a report:
<tr class="BrandRow1">
<td>
</td>
</tr>
<tr class='BrandRow1 StoreRow1'>
...
</tr>
<tr class='BrandRow1 StoreRow2'>
...
</tr>
and within this layout I use A tags to show/hide the 'child' content (by making use of the class attributes.
On load, I want to show all the 'nodes' if $('.StoreRow2').length is less than say 4.
I use a function to do the toggling:
// Allow an item to toggle other items' visibility
$(".VisibilityToggle").click(function () {
var ControlledClass = findClass($(this), "Toggles-");
if (ControlledClass != "") {
$("." + ControlledClass).toggle();
var Text = $(this).attr("rel");
if (Text != "") $(this).attr("rel", $(this).attr("rev")).attr("rev", Text).text(Text);
}
return false;
});
and what I'd like to do is trigger the 'toggling' open by calling this from JS code.
I thought something like '$(".VisibilityToggle").click()` would do what I want but this doesn't seem to work in my code, but does if I call it manually via the JS console in Chrome. I suspect its to do with my code running before the events have been bound to the page.
Can you please assist?
E.g. Markup
...
<tr class='BrandRow TRBrand_2'>
<td class="Level0">
<p>
<a id="DesktopApp0_ctl00_rptReportBrand_ctl01_A_Brand" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-BrandId_2">+</a> <strong>Brand2</strong>
</p>
</td>
<td>
<p>
34</p>
</td>
<td>
<p>
21</p>
</td>
<td>
<p>
22</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0%</p>
</td>
<td>
<p>
1
</p>
</td>
<td>
<p>
34.0
</p>
</td>
</tr>
<tr class='SiteRow BrandId_2 TRStore_10'>
<td class="Level1">
<p>
<a id="DesktopApp0_ctl00_rptReportBrand_ctl01_rptSites_ctl00_A_Site" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-TRSiteUser_10">+</a> <span class="Bold">BrandX - Store 10</span>
</p>
</td>
<td>
<p>
14</p>
</td>
<td>
<p>
9</p>
</td>
<td>
<p>
8</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0%</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0
</p>
</td>
</tr>
<tr class='UserRow TRStoreUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Clarke Kent
</p>
</td>
<td>
<p>
3</p>
</td>
<td>
<p>
3</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_3">1</span><span class=" d5_3">2</span><span class=" d5_3">3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Alexie Sayle
</p>
</td>
<td>
<p>
2</p>
</td>
<td>
<p>
2</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_2">1</span><span class=" d5_2">2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Anders Bottom
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Daniella Ecclescake
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Mark E Smith
</p>
</td>
<td>
<p>
2</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Matthew Bannister
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Raj Patel
</p>
</td>
<td>
<p>
3</p>
</td>
<td>
<p>
0</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
...
you could use trigger:
$(".ABrand").trigger('click');
Is that what you wanted to achieve?
There's nothing wrong with the syntax you have: click() will trigger a click on the element.
$('.ABrand').click();
More markup is required to properly answer your question I would think, but take a look at live() and delegate(), which can be used outside document.ready if you're worried that things aren't getting hooked up in time.
$(".VisibilityToggle").live("click", function() { ... } );
$("#Container").delegate(".VisibilityToggle", click", function() { ... } );
If you're having trouble timing the event bind (i.e. the .click(function(){})) and the event trigger (i.e. the .click()), why not just chain the two together?
$('.ABrand').click(function() {
// do 3 flips, 5 somersaults and a pirouette
}).click();
This way, you're sure the click trigger gets called after the click bind.
Related
I am trying to make this table responsive for mobile but could done properly. I tried bootstrap table-responsive class but its not working. because of rowspan i am facing problem so can any suggest me css for this Table
Desktop Format:
https://postimg.org/image/gxj2riueh/
Mobile Format:
https://postimg.org/image/mtq57pwcn/
Code:
<table>
<tbody>
<tr>
<td style="background: #fcfbcd;" rowspan="5"
<p style="text-align: center;">BREAKFAST</p>
</td>
<td>
<p><strong>MONDAY</strong></p>
</td>
<td>
<p><strong>TUESDAY</strong></p>
</td>
<td>
<p><strong>WEDNESDAY</strong></p>
</td>
<td>
<p><strong>THURSDAY</strong></p>
</td>
<td>
<p><strong>FRIDAY</strong></p>
</td>
</tr>
<tr>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Kix Cereal</p>
</td>
<td>
<p>Whole Grain Raisin</p>
<p>Bread (1 slice plain, Butter or Marg)</p>
</td>
<td>
<p>Cinnamon Raisin Bagel Cream Cheese</p>
</td>
<td>
<p>Bran Flakes Cereal</p>
</td>
<td>
<p>Cheerios Cereal</p>
</td>
</tr>
<tr>
<td style="background: #dbc0af;" rowspan="5"
<p style="text-align: center;">LUNCH</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
</tr>
<tr>
<td>
<p>Chicken Fingers</p>
</td>
<td>
<p>Corndog</p>
</td>
<td>
<p>Cold cut turkey sandwich</p>
</td>
<td>
<p>Hamburger/ Cheeseburger</p>
</td>
<td>
<p>Pizza</p>
</td>
</tr>
<tr>
<td>
<p>Green Beans</p>
</td>
<td>
<p>Pickle</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Mashed Potatoes</p>
</td>
<td>
<p> Chips</p>
</td>
<td>
<p>Brownie</p>
</td>
<td>
<p>Fries</p>
</td>
<td>
<p>Breadsticks</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td style="background: #e7e5e6;" rowspan="5"
<p style="text-align: center;">SNACK</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Soynut Butter</p>
</td>
<td>
<p>Cottage Cheese</p>
</td>
<td>
<p>Yogurt <strong><em>4 oz cup</em></strong></p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p>Celery Sticks</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>pretzel</p>
</td>
<td>
<p>Oreo cookies</p>
</td>
<td>
<p>Raisins</p>
</td>
<td>
<p>Pears</p>
</td>
<td>
<p>Fruit Cocktail</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>
Changed the <td> "headers" into real table headers <th>
Fixed malformed <th> Each of them were missing an angle bracket >
Loaded Bootstrap CSS
Wrapped the whole <table> into a <section> and added .table-responsive
Added .table and ,table-compact to <table>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<section class='table-responsive' style='margin:15px auto;'>
<table class='table table-condensed'>
<tbody>
<tr>
<th style="background: #fcfbcd;" rowspan="5">
<p style="text-align: center;">BREAKFAST</p>
</th>
<td>
<p><strong>MONDAY</strong></p>
</td>
<td>
<p><strong>TUESDAY</strong></p>
</td>
<td>
<p><strong>WEDNESDAY</strong></p>
</td>
<td>
<p><strong>THURSDAY</strong></p>
</td>
<td>
<p><strong>FRIDAY</strong></p>
</td>
</tr>
<tr>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
<td>
<p>Milk</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Kix Cereal</p>
</td>
<td>
<p>Whole Grain Raisin</p>
<p>Bread (1 slice plain, Butter or Marg)</p>
</td>
<td>
<p>Cinnamon Raisin Bagel Cream Cheese</p>
</td>
<td>
<p>Bran Flakes Cereal</p>
</td>
<td>
<p>Cheerios Cereal</p>
</td>
</tr>
<tr>
<th style="background: #dbc0af;" rowspan="5">
<p style="text-align: center;">LUNCH</p>
</th>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
<td>
<p>Juice</p>
</td>
</tr>
<tr>
<td>
<p>Chicken Fingers</p>
</td>
<td>
<p>Corndog</p>
</td>
<td>
<p>Cold cut turkey sandwich</p>
</td>
<td>
<p>Hamburger/ Cheeseburger</p>
</td>
<td>
<p>Pizza</p>
</td>
</tr>
<tr>
<td>
<p>Green Beans</p>
</td>
<td>
<p>Pickle</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Mashed Potatoes</p>
</td>
<td>
<p> Chips</p>
</td>
<td>
<p>Brownie</p>
</td>
<td>
<p>Fries</p>
</td>
<td>
<p>Breadsticks</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<th style="background: #e7e5e6;" rowspan="5">
<p style="text-align: center;">SNACK</p>
</th>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Milk /Juice</p>
</td>
<td>
<p>Soynut Butter</p>
</td>
<td>
<p>Cottage Cheese</p>
</td>
<td>
<p>Yogurt <strong><em>4 oz cup</em></strong></p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p>Celery Sticks</p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
<tr>
<td>
<p>pretzel</p>
</td>
<td>
<p>Oreo cookies</p>
</td>
<td>
<p>Raisins</p>
</td>
<td>
<p>Pears</p>
</td>
<td>
<p>Fruit Cocktail</p>
</td>
</tr>
<tr>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
<td>
<p> </p>
</td>
</tr>
</tbody>
</table>
</section>
So i have the following markup:
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
there are multiple tr elements, but only some of them have the innermost span with "woocommerce-Price-amount" class. The other have nothing after the "festi-cart-product-price" classed span.
I'm trying to remove all the tr elements that does NOT have the "woocommerce-Price-amount" span inside it using jQuery.
jQuery( document ).ajaxComplete(function() {
jQuery(".festi-cart-product-price:not(:has(>span))").each(function(){
jQuery(this).parent('tr.festi-cart.item').hide();
});
});
I've been trying to use the :not selector, but it doesnt seem to produce anything. I'm really not sure where it goes wrong.
Can any of you spot where my code is going wrong, or if it's a completely hopeless approach to a simple solution?
Use .filter function to match elements with specific requirements.
Use $('tr').find('.woocommerce-Price-amount').length > 0 to check if element exists in tr.
Than simply do .hide() (or .remove()) to filtered elements.
$(document).ready(function() {
var hasWoo = $('.festi-cart-list tr').filter(function() {
return $(this).find('.woocommerce-Price-amount').length !== 0;
});
hasWoo.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
EMPTY
</span>
</td>
</tr>
</tbody>
</table>
</div>
You need to use .closest() method of jquery instead of .parent() method.
$('.btn').click(function(){
$('.festi-cart-item').each(function(){
var price = $(this).find('.festi-cart-product-price').children().hasClass('woocommerce-Price-amount');
if(!price)
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount"></span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn">remove</button>
You're so close, your selector is valid and select the festi-cart-product-price that have no span's :
$(".festi-cart-product-price:not(:has('>span'))")
You've just to go up to the parents tr using closest() then hide them :
selector.closest('tr').hide();
Check This fiddle using setTimeout() to see the effect .
Hope this helps.
$(function() {
var selector = $(".festi-cart-product-price:not(:has('>span'))");
selector.closest('tr').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list" border=1>
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 1
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p1</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 2
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 3
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 4
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p4</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
How about this.
$("tr:not(:has(>.woocommerce-Price-amount))").hide()
Not tested.
Comes from this question: How to select elements which do not have a specific child element with JQuery which is worth a read on this type of 'descendant without feature' question.
How would I be able to make the "Add to Cart" work if I were to put the simple_cart ShelfItem in table?
I'm still cannot find a way to make this work.
I'm using the eshopper template, which have the section id with cart items and so on. But if I were to put the simplecart javascript in the , , and so on, when I press the add to cart it won't work. Somebody please teach me how to use this, thanks.
Sorry I counldt find the answer or I dont know how to do it.
Edit: Add cart is working now I guess? At least able to make the "quantity" to increase, or able to empty the cart, but now the price is not updating, what did I do wrong?
http://imgur.com/HBhRv1S
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Home</li>
<li class="active">Shopping Cart</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Item</td>
<td class="description">Description</td>
<td class="price">Price</td>
<td class="quantity">Quantity</td>
<td class="total">SubTotal</td>
</tr>
</thead>
<tbody>
<div class="simpleCart_shelfItem">
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/511SkrkMNCL.jpg" alt="Star Wars Character Encyclopedia" class="item_thumb" thumb="Images (Books)/Images/thumb/511SkrkMNCL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars Character Encyclopedia</h4>
</td>
<td class="cart_price">
<span class="item_price">$35.99</span><br />
</td>
<td class="cart_quantity">
+
<p> <input type="text" value="1" class="item_Quantity"/> <br>
-
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81rH-DQqQOL.jpg" alt="Percy Jackson and the Olympians 5 Book " class="item_thumb" thumb="Images (Books)/Images/thumb/81rH-DQqQOL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Percy Jackson and the Olympians 5 Book </h4>
</td>
<td class="cart_price">
<span class="item_price">$80.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51mGJ4PmMzL.jpg" alt="Star Wars: The Jedi Path" class="item_thumb" thumb="Images (Books)/Images/thumb/51mGJ4PmMzL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: The Jedi Path</h4>
</td>
<td class="cart_price">
<span class="item_price">$30.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/81cm6ZST7tL.jpg" alt="The Return of Nagash (The End Times)" class="item_thumb" thumb="Images (Books)/Images/thumb/81cm6ZST7tL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">The Return of Nagash (The End Times)</h4>
</td>
<td class="cart_price">
<span class="item_price">$50.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="Images (Books)/Images/51m3gTdOteL.jpg" alt="Star Wars: Darth Vader and the Ghost Prison" class="item_thumb" thumb="Images (Books)/Images/thumb/51m3gTdOteL.jpg" style="width: 133px; height: 168px;"/>
</td>
<td class="cart_description">
<h4 class="item_name">Star Wars: Darth Vader and the Ghost Prison</h4>
</td>
<td class="cart_price">
<span class="item_price">$65.99</span>
</td>
<td class="cart_quantity">
<p> <input type="text" value="1" class="item_Quantity"/> <br>
<br />
Add to Cart
</td>
<td class="cart_total">
<span class="simpleCart_total"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->
Working for me here : http://62.210.240.67/hank/HNKmobile/
I'd have post a comment but apparently I need 50 pts of reputation... (not sure to understand this behaviour)
i have a page having some contents plus a edit button So when you hit the edit button it will show the 2nd page. I want it as if both are in only one page. it will look like the last name(text area is converted into text field)Please tell me how to do it
the screen shot is
and the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
<tr>
<td height="30">
<b></b>
</td>
<td align="right" >
<label for="Email"><input type="submit" class="button button-submit" value="Edit" /></label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
when you hit the edit button the this should this display
![enter image description here][2]
the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 50px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="LastName" type="text" value="<%=lastName %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="FirstName" type="text" value="<%=firstName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input name="DateofBirth" type="text" value="<%=DOB %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<input name="Qualification" type="text" value="<%=Qualification %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="RegistrationNo" type="text" value="<%=RegistrationNo %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<input name="CountryofRegistration" type="text" value="<%=CountryOfRegistration %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<input name="PracticeName" type="text" value="<%=PracticeName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Phone" type="text" value="<%=Phone %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Email" type="text" value="<%=Email %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Image</b>
</td>
<td>
<input name="Image" type="file" />
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input name="Address" type="text" value="<%=Address %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input name="Street" type="text" value="<%=Street %>" />
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="City" type="text" value="<%=City %>" />
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="State" type="text" value="<%=State %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Country" type="text" value="<%=country %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input name="PinCode" type="text" value="<%=PinCode %>" />
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<input name="HowDoYouKnow" type="text" />
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<textarea name="Comments" cols="15" rows="5" readonly></textarea>
</td>
</tr>
</table>
</div>
<br><br>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
As Praveen said, you don't need two different pages, but two divs in the same page, and then use some javascript to switch between the display/visibility of the two. You can do this with two different classess per element, which the classes having different properties for display (display:none and display:block) or visibility (visibilty: hidden and visibility:visible).
JQuery toggle() method is a straightforward option:
http://api.jquery.com/toggle/
But mind that it toggles display, so it will affect your layout (display:none affects your layout, while visibility:hidden does not), which is something probably you don't want. One way to avoid this (but I am not 100% sure this is the best way to do it) is to insert each div (position:absolute) within another div (position:relative)
apply a css class which you want to display.By clicking on button show those fields only.
Just Make two div.. One div with the first image contents and second div with second image content. and once u clicked edit button just hide the first div and display second div.....
In my code, I am having hard time to wrap text in last two divs(rate change date & rate adjustment Frequency)
<table>
<tr>
<td> <div> Rate </div> </td>
<td> <div> Rate change date </div> </td>
<td> <div> Rate Adjustment Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>
"Rate Adjustment Frequency" should be shown on screen like "Rate Adjustment" on first line & "Frequency"(middle) on second line while in case of Rate "Change date" it should wrap like "rate" on the first line & "change date"(middle) on second line
check image if any doubt : my goal
here it is:
<table>
<tr>
<td align="center" valign="middle"> <div> Rate </div> </td>
<td align="center" valign="middle"> <div> Rate change<br /> date </div> </td>
<td align="center" valign="middle"> <div> Rate Adjustment<br /> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>
<table>
<tr>
<td> <div> Rate </div> </td>
<td> <div style="text-align: center;"> Rate <br /> change date </div> </td>
<td> <div style="text-align: center;"> Rate Adjustment <br /> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>
No?
The problem is that you can't specify at which point the text will wrap. The wrap position depends on the font and text size. If you are looking for the "Adjustment" in "Rate Adjustment Frequency" to be the word that is wrapped underneath then you should wrap the text in a element and style the span to have a smaller width than the div. Reducing the size of the span incrementally will eventually force the "adjustment" to fall into the next line.
Maybe not the best solution
<table>
<tr>
<td rowspan="2"> <div> Rate </div> </td>
<td> <div> Rate </div> </td>
<td> <div> Rate Adjustment </div> </td>
</tr>
<tr>
<td> <div> change date </div> </td>
<td> <div> Frequency</div> </td>
</tr>
<tr>
<td> <input type="text"> </td>
<td> <input type="text"></td>
<td> <input type="text"> </td>
</tr>
</table>
but it works