I am trying to style my {block:Photo} styles in Tumblr, so that each time a photo is posted, it will cycle through a selection of, for instance, 5 slightly different classes for displaying the picture.
An example of such can be found here (where each photo table has a unique max-width property): http://www.nontemporary.com/
The code I've come up with so far, having made ample use of the Chrome inspector is thus:
{block:Posts}
{block:Photo}
<li class="post photo">
<table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
<tbody>
<tr class="postspace">
<td></td>
</tr>
<tr class="postrow">
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
</tr>
</tbody>
</table>
</li>
{/block:Photo}
{/block:Posts}
Naturally, I think I'll have to create some custom classes for the widths, but my main question is really how I should go about getting Tumblr to cycle through those widths, as can be seen in the example.
Thanks!
If you want them to cycle through the classes in order (like the example does) you can utilise the fact that tumblr lets you style each number of post.
Here is an example of what you would do:
<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">
This would render as
<li class="post-1">
with the 1 depending on what number post it is.
From here you can easily make classes for .post-1 through to .post-15.
If you would like something random instead, javascript/jquery will be needed.
Related
I'm working with a really outdated site that's giving me issues. What I'm trying to do is select the "Judgement/Lien Search" tab as seen on: page
The issue is that there are no identifiers. No name, ID, etc.
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><font size="+1"><b>Property/Lis Pendens Search</b></font></td>
</tr>
</tbody>
I've tried using xpath, css selector, and even just executing the script. I've been using ChroPath to get the correct info. When <b><font size="+1">Judgment/Lien Search</font></b> is selected ChroPath gives me these options:
Rel XPath: //td[2]//a[1]
Abs Xpath: /html[1]/body[1]/table[1]/tbody[1]/tr[1]/td[2]/a[1]
CSS Selector: table:nth-child(5) tbody:nth-child(1) tr:nth-child(1) td:nth-child(2) > a:nth-child(1)
None of which have actually worked when using driver.find options
When I try to just execute the javascript driver.execute_script("javascript:submitJudgementSearch();") I get error: "selenium.common.exceptions.JavascriptException: Message: javascript error: submitJudgementSearch is not defined".
Any ideas on other ways to select it? Or am I looking at something wrong? This bump in the road really has me stumped. Thanks!
What about using Attribute Starts With Selector ?
Since your anchors seems to have unique href values this could work as a selector for the anchor itself. From there you could move up the dom to the parent if the <td> is indeed what you need.
$('a[href^="http://example.com/external/link"]').click(function() {});
You could use document.querySelector to get the job done potentially, refer to the snippet below. I was able to select that element using document.querySelector
document.querySelector('td a b').style.color = "red";
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap="">
<a href="javascript:submitPropertySearch();" target="_self">
<font size="+1"><b>Property/Lis Pendens Search</b></font>
</a>
</td>
</tr>
</tbody>
Theres another example here
And the Mozilla docs
I have a website that is built using NetSuite, meaning I don't have control of he source html. The code that's output looks like this. I would like to remove the piece of code that starts with "I want to remove starting here".
</td>
<!-- end new category page -->
<!-- I want to remove starting here -->
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="top">
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<!-- I want to remove ending here -->
<!-- start Category Page Item List SubCategories -->
<td width="65%" style="font-family: 'Lato', sans-serif; font-weight:400;">
Your question is essentially the same as in this post
You are asking to access the comments in the DOM using javascript.
Using Angular smart table lib:
I just want to display the pagination buttons on the bottom. According to the documentation, it looks like st-pagination directives inserts those dom elements in there. However, for me, it is not working. Here is the plunker given by the smart table documentation:http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
Here is my table footer code:
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>
</tr>
</tfoot>
I must be misunderstanding something. I know you can put your own customized template for the pagination.
Here is a screenshot, of the output and debugger:
You should use <td> tag only. you should not use <div> tag.
OK
<td colspan="5" class="text-center" st-items-by-page="10" st-pagination="">
</td>
NG
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>
I am coding a page with several dynamic/sortable tables in it (one below another) to share PDF documents. Each Document tittle in the table contain a link to open the PDF in a new tab. Everything works fine, BUT when I scroll down the page and open a dynamic table/or minimize the table, the page jumps to top of the page/to default position. JavaScript's RETURN FALSE fixes this problem but all the links in the table are dead. Can anyone help to fix this? I attach the basic code structure here you can see what I am doing...
HTML:
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1>
<div>
<table class="sortable" width="100%" border="0">
<tr>
<td id="tablehead" width="55%">Sort by tittle</td>
<td id="tablehead" width="25%">Sort by Author</td>
<td id="tablehead" width="25%">Sort by date</td>
</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document1.pdf" target="_blank">Document1Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document2.pdf" target="_blank">Document2Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document3.pdf" target="_blank">Document3Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX<a></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
JAVASCRIPT:
// Dropdown Table Code
$(function(){
$('#droptable li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300); // If I add RETURN FALSE here the page doesn't jump to the default position/to the top of the page (when open or minimize the table) BUT links in the table are out and don't work anymore //
});
});
});
2 things
1st id's should be unique, so change all instances of
id="tabledata"
to
class="tabledata"
2nd, try to give you td's that contain the link a different class than those that have data, then attach slide toggle to that class, maybe like:
$('.newclass').each(function(){
.....
I didn't succeed with the hints you gave but thanks anyway! I did everything but page was still jumping when opening/closing the table. BUT...I was browsing different forums and found this simple answer.
Using "#/" instead of "#" and the page won't jump. Hmm.. sometimes the answer is too simple, seemingly :o
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1> ...
Rock'nRoll!
So, what I want to do is have a list within a cell that has items added to it and after it reaches a certain height, stop it and have a scroll bar appear. How can I create a td with a fixed height? So far I have:
<tr>
<td valign='top' height="200px" border="1">
<ul id="travelList" align='left'></ul>
</td>
</tr>
I would put your <ul> inside a div that has overflow auto and max-height. Like this:
<tr>
<td valign="top" border="1">
<div style="overflow:auto;max-height:200px">
<ul id="travelList" align="left"></ul>
</div>
</td>
</tr>
try adding:
style="max-height:200px"
note: not tested, but this is where you'd start, so google CSS max-height to get more detail of how heights work.