I'm trying to display a table, an iframe, and a table side by side. There are no breaks or anything in between. I'd like all three centered preferably.
This makes no sense. There is plenty of room for them all to be displayed on the same "line" as my screen display is large enough.
Please help.
Code shown below:
<center>
<table border="0">
<tr id="hidethis" style="display:none;">
<td><iframe src="menu.html"height=450 width=400 frameborder=0 name = "list" style =""></></iframe></td>
</tr>
<tr id="hidethisalso" style="display:none;">
<td>Enter code for song to play</td>
</tr>
</table>
<iframe height=450 width=450 frameborder=0 name = "cake" style =""></></iframe>
<table border="0">
<tr id="hidethistoo" style="display:none;">
<td><iframe src="menu.html"height=450 width=400 frameborder=0 name = "list" style =""></></iframe></td>
</tr>
<tr id="hidethisaswell" style="display:none;">
<td>Enter code for song to delete</td>
</tr>
</table>
</center>
Wrap the table in <div style="inline-block">...</div>
this will make the table behave for you
<center>
<!-- wrap the table in an inline-block to make it behave -->
<div style="display:inline-block">
<table border="0">
<tr id="hidethis" style="display:;">
<td><iframe src="menu.html"height=450 width=400 frameborder=0 name = "list" style =""></></iframe></td>
</tr>
<tr id="hidethisalso" style="display:none;">
<td>Enter code for song to play</td>
</tr>
</table>
</div>
<iframe height=450 width=450 frameborder=0 name = "cake" style =""></></iframe>
<!-- wrap the table in an inline-block to make it behave -->
<div style="display:inline-block">
<table border="0">
<tr id="hidethistoo" style="display:;">
<td><iframe src="menu.html"height=450 width=400 frameborder=0 name = "list" style =""></></iframe></td>
</tr>
<tr id="hidethisaswell" style="display:none;">
<td>Enter code for song to delete</td>
</tr>
</table>
</div>
</center>
Related
I'm using Python and Selenium to click through a site to select and reserve a room. The site presents a table of rooms available. I want to find a specific room and click on the button in the table that is associated with that room....but the button name changes depending on where the room is located in the table. Where it is located depends, in part, on what other rooms are available at the time I run through the website.
In this example, I want to reserve 'Room 34".
The table appears to be identified by:
<table id="MainContent_tblPage"....>
The row or section of the table that includes "Room 34" is identified by the following (which changes depending on where Room 34 appears in the table...which depends on how many other rooms are available):
<tr id=MainContent_rptrPropertyList_trContent_1" >
The button I want to click in this example is:
name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:
_ctl0:btnSelect"
(...but the button name changes depending on which other rooms appear in the table...)
My question: How do I find and click the correct button in a table if the button name changes dynamically depending on table content/rows...but the button is always in a row with the text I want to find?
HTML of the section I'm looking at (...sorry, I'm not sure how to make it more readable without the possibility of changes things that might be important for answering my question):
<table id="tblPropertyList" cellpading="0" cellspacing="0" align="center" border="0" width="100%">
<tbody><tr id="MainContent_rptrPropertyList_trContent_0">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> below...
##...I cut it out to save space but I can add it back if it helps --JRrcgp
<tr id="MainContent_rptrPropertyList_trContent_1">
<td class="room_grid_row">
<table cellpading="0" cellspacing="0" width="100%;">
<tbody><tr>
<td colspan="2" class="room_grid_heading_2">
Hornswoggle Tower
<br><span class="text2">CityPlace</span>
</td>
</tr>
<tr>
<td align="right" valign="top">
<div class="room_grid_image">
<a onclick="javascript:ShowGallery('lightSlider_1');" title="Room 34">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg" id="MainContent_rptrPropertyList_Image1_1" onerror="showNoImage(this);" style="visibility:true;">
</a>
</div>
<div class="demo">
<ul id="lightSlider_1" style="display:none">
<li data-thumb="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
</li>
</ul>
</div>
</td>
<td valign="top" width="100%" class="padding_left_1">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td class="room_grid_heading" colspan="3">
<div class="floatleft">
Room 34
</div>
<div class="floatright">
<span class="room_grid_from_rate_text1">From </span>
<span id="MainContent_rptrPropertyList_lblMinRate_1" class="room_grid_from_rate_text2">$88</span>
<!--<span class="room_grid_from_rate_text1">/Night</span>-->
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" cellpading="0" cellspacing="0">
<tbody><tr>
<td valign="top" class="room_grid_discription_2">
<span id="MainContent_rptrPropertyList_reptSectionInline_1_lblSectionInline_0" class="more"><font face="Verdana">Text description of room.</font></span>
</td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td id="MainContent_rptrPropertyList_tdSingleRate_1" style="display: none;">
<font class="Bold"> $<span id="MainContent_rptrPropertyList_lblratePrice_1">88</span><br></font> per night
</td>
</tr>
<tr>
<td valign="bottom" align="left">
<table align="left" width="100%" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="left" nowrap="" width="80%" class="displayRatePlan"><span class="room_grid_rateplanname">
Best Available Rate
</span><span class="room_grid_rateplan_moreinfo">(<a class="thickbox" id="lnkMoreInfo" title="Best Available Rate" href="#TB_inline?height=Div8&width=Div7&inlineId=MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0">More Info</a>)</span>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0" class="roomClassSection" style="display: none;">
<div class="popupWidth" id="Div7">
<div class="popupHeight" id="Div8">
<table class="more_info_table" cellspacing="0" cellpadding="0" align="center" border="0">
<tbody><tr>
<td>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_excludeRoom_DIV_0">
</div></td></tr><tr>
<td class="alt1">
Name:
</td>
<td style="width: 90%">
Room Rate
</td>
</tr>
<tr>
<td class="alt1">
Date:
</td>
<td>
Fri, Apr 27, 2018 - Sun, Apr 29, 2018
</td>
</tr>
<tr>
<td class="alt1">
Policy:
</td>
<td>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
<td id="MainContent_rptrPropertyList_rptPropertyRooms_1_tdRateDescription_0" align="right" nowrap="nowrap" width="12%">
<span class="room_grid_fullrate">
$188
</span>
<span class="room_grid_fullrate_avgnightly">
<span id="MainContent_rptrPropertyList_rptPropertyRooms_1_lblRateMsg_0">(Avg nightly rate)</span></span>
</td>
<td width="8%" align="left">
<input type="submit" name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect" value="Select" onclick="ShowProgress();" language="javascript" id="MainContent_rptrPropertyList_rptPropertyRooms_1_btnSelect_0" class="button green">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="MainContent_rptrPropertyList_trContent_2">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
<tr id="MainContent_rptrPropertyList_trContent_3">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
##...this continues to repeat once for each room available
EDIT: I'm currently working past this issue by hard-coding the button I'm clicking. I use Selenium to navigate to the webpage that creates a table of the rooms available and then I click on the appropriate button as it stands today. But the name of the button will change in the future:
room34 = browser.find_element_by_name('_ctl0:MainContent:rptrPropertyList:_ctl31:rptPropertyRooms:_ctl0:btnSelect')
room34.click()
EDIT 2: I've played the suggestion from #Grasshopper. His code didn't work for me, but I made some changes that I thought made progress....I was mistaken. I'm removing the rest of Edit 2 so as not to confuse the issue.
To click on the button with name as _ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect with respect to the element with text as Room 34 you can use either of the following line of code :
Using following :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following::input[1]").click()
Using following-sibling :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following-sibling::input[1]").click()
Try this xpath - "//div[normalize-space(.)='Room 34']/ancestor::tbody/tr/td//input[#type='submit']"
The 'Room 34' can be substituted by a python variable. normalize-space is required as the text has a lot of white space.
I have the following HTML table:
<div class="someClass" id="someID">
<!-- Move all images inside the td's here -->
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/9.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/10.jpg" class="bvz_beeldthumb">
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="Images/11.jpg" class="bvz_beeldthumb">
</td>
<td align="center">
<img width="127" height="191" border="0" src="Images/12.jpg" class="bvz_beeldthumb">
</td>
</tr>
....
</tbody>
</table>
What I want is go trough each td and remove the image and insert it before the table. And than remove the entire table.
What is the best way to do this?
Thanks.
You can use jQuery and use each() to iterate through all of the td elements and move all of the images within td before the table.
$('td').each(function(){
$('img').insertBefore('table');
$('table').hide();
});
SEE DEMO
I got this working:
WORKING FIDDLE
$(document).ready(function(){
$('.bvz_beeldthumb').each(function(){
$('.someClass').append(this);
});
$('#mainTable').remove();
});
Document ready means that when the document is ready the code will be fired.
It finds all images with class bvz_beeldthumb on the page and moves it to the div someClass. After that it removes the table.
Try This
$("#mainTable td").each(function() {
var Img=$(this).find("img");
$("#someID").prepend(Img);//here element 'id' in which you want to put these images.
$(this).find("img").html('');
});
I hope this helps you!!
You can try something like
$('#mainTable img').insertBefore('#mainTable')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;" id="mainTable">
<tbody>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=1" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=2" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=3" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=4" class="bvz_beeldthumb" />
</td>
</tr>
<tr>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=5" class="bvz_beeldthumb" />
</td>
<td align="center">
<img width="127" height="191" border="0" src="//placehold.it/127x191&text=6" class="bvz_beeldthumb" />
</td>
</tr>
</tbody>
</table>
I have created form template in Mailchimp, I have been through the documentation and using all the Mailchimp tags respectively its even showing me the icons to drag/ movable content editable etc.
Whenever I edit the content its visible through the campaign test area but when i copy the block and change the positioning, it changes its position in the backend but do not show any changes on the campaign test area.
Here is some piece of the html i am using, i have checked the html for issue but i am unable to find any issues.
<tr mc:repeatable="ntwologo" mc:variant="new-layout-twologo">
<td mc:hideable align="center" valign="top" class="fix-box">
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<!-- start layout-3 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container" bgcolor="#ffffff" style="background-color: #ffffff; ">
<tr>
<td valign="top">
<!-- start layout-3 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width" bgcolor="#ffffff" style="background-color:#ffffff;">
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<!-- start image content -->
<tr>
<td valign="top" width="100%">
<table class="full-width">
<tr>
<td>
<div class="heading" style="margin-bottom:20px;" mc:edit="text heading">
Most Active Canadian
</div>
</td>
</tr>
<tr>
<td class="twologos">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/dceb568a-6e4c-48b8-a2b7-1db04b6780d8.jpg" mc:edit="layoutleftlogo">
<img mc:allowdesigner="" mc:allowtext="" style="border:1px solid #b5ae92;" src="https://gallery.mailchimp.com/85ff5a532432ef3d1b871c206/images/f1eb0308-e0ad-4f6e-b15c-e5583f72a4cf.jpg" mc:edit="layoutrightlogo">
</td>
</tr>
<tr>
<td>
<div class="yaletext" mc:edit="text content">
<!-- text here -->
<br>
Read More
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end image content -->
</table>
<!-- end layout-3 container width 560px -->
</td>
</tr>
</table>
<!-- end layout-3 container width 600px -->
</td>
</tr>
</table>
</td>
</tr>
<!-- END LAYOUT-3 -->
I have no idea how this isn't working. I've tried switching around the properties, putting divs inside each table cell and using that for the "click" function. But no matter what I do I just can't seem to get it working. All i need is just the table cell with the weblink info in it, to click and open up the secondary table using the z-index format to overlap them. If anyone can help it would be much appreciated.
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#weblinkbut').click(function(){
$('.menuhome').css('z-index','3');
$('.weblinkmenu').css('z-indez','4');
});
</script>
</head>
<body>
<div id="weblinkbut">
<p>content</p>
</div>
<div id="menuhome">
<table class="menuhome" width="181" height="208" border="1"
bordercolor="#000000" cellspacing="5" bgcolor="#FFFFFF" cellpadding="">
<tr>
<td width="75" height="90"><p> </p><p><img src="images/weblinkicon.png"
width="40" height="40"></p>
<p>Website link</p></div></td>
<td width="75" height="90"><p><img src="images/phoneicon.png"
width="40" height="40"></p>
<p>Phone Number</p></td>
</tr>
<tr>
<td width="75" height="90"><p><img src="images/emailicon.jpg" width="40"
height="40"></p>
<p>Email address</p></td>
<td width="75" height="90"><p><img src="images/newdocicon.png" width="30"
height="40">
<P>Plain Text</P>
</tr>
</table>
</div>
<div id="weblinkmenu">
<table class="weblinkmenu" width="181" height="208" border="1"
bordercolor="#000000" cellspacing="5" bgcolor="#FFFFFF" cellpadding="">
<tr>
<td width="75" height="90"><p><img src="images/weblinkicon.png"
width="40" height="40"></p>
<p>Website link</p></td>
</tr>
</table>
</div>
</body>
</html>
Your DOM isn't fully loaded when you try to bind a handler for the click event.
Try:
$(document).ready(function(){
$('#weblinkbut').click(function(){
$('.menuhome').css('z-index','3');
$('.weblinkmenu').css('z-indez','4');
});
});
I want to implement a collapsible menu. I plan to use table component to simulate a menu, and nest a sub table into a table cell to simulate a sub menu.
Below is my code, it works as expected in IE, Chrome and Safari, but it doesn't work well in Firefox:
<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
<table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
<tr>
<td colspan=2>Money</td>
</tr>
<tr>
<td colspan=2>Tool</td>
</tr>
<tr>
<td>Food
<table style="position:absolute; left:200px; top:60px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cookie</td>
</tr>
<tr>
<td>Fruit
<table style="position:absolute; left:200px; top:30px; z-index:1" width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
It seems that Firefox think the "left" and "top" attribute for the level 3 menu is relative to the level 1 menu, so it layout the level 3 menu incorrectly. Other browsers will calculate the offset base on the level 2 menu, that works as expected.
Is it a bug in Firefox? If so how can I work around it? I want my code to have the same behavior in all major browsers.
Wrapping tables in divs seems to solve the issue:
<html>
<body>
<div id="menu" style="position:absolute; left:150px; top:100px; z-index:1">
<table width="200px" height="90" border=1 cellpadding="0" cellspacing="0">
<tr>
<td colspan=2>Money</td>
</tr>
<tr>
<td colspan=2>Tool</td>
</tr>
<tr>
<td>Food
<div style="position:absolute; left:200px; top:60px; z-index:1">
<table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Cookie</td>
</tr>
<tr>
<td>Fruit
<div style="position:absolute; left:200px; top:30px; z-index:1;">
<table width="200px" height="60px" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Banana</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div>
</td>
</tr>
</table>
</div>
</body>
</html>
In fact it would be better not to use tables at all, but only divs with proper borders.
It is a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=63895 .