Using xpath, can I get 2 results out of a page at a time? For example, using xpath I can get the first img element:
xpath='//div[#class="forecast-element graphic-box"]/img
...and the next sibling class="forecast-element".
I tried "and" without success:
xpath='//div[#class="forecast-element graphic-box"]/img and //div[#class="forecast-element"]'
also:
xpath='//div[#class="forecast-element graphic-box"]/img and following-sibling:://div[#class="forecast-element graphic-box"]'
I have this html:
<div class='forecast-element graphic-box ' style="background-image:url('/assets/images/forecast/BluePattern.png');">
<h4 style="color: #FFF;">AVALANCHE DANGER <span style="margin-left: 60px;"> MORNING </span><span style="margin-left: 210px;"> AFTERNOON</span></h4>
<img src="/images/forecast/2014-11-23_teton_hazard.gif" alt="Teton Area avalanche hazard rating for 11/23/2014" />
<div style='margin: 2px auto;'><a href="/assets/pdfs/North%20American%20Danger%20Scale.pdf" style='font-size: 14px; color: #CCC;'>View full danger scale definitions</a>
</div>
<a href="/assets/pdfs/North%20American%20Danger%20Scale.pdf" style='font-size: 14px;'>
<img src="/assets/images/forecast/DangerScale.png" style="margin-left: 150px; margin-top: 5px;" alt='Avalanche danger scale ratings'>
</a>
</div>
<div class='forecast-element'>
<h3 style='margin-bottom: 8px;'>GENERAL AVALANCHE ADVISORY</h3>
Moderate to heavy snowfall combined with strong southwesterly to northwesterly ridgetop winds have created unstable avalanche conditions. New wind slabs have developed at the mid and upper elevations. Snowfall over the past 24 hours has also added weight to existing weak layers near the base of the snowpack. Early season snowfall can easily cloud people’s judgment. Cautious route finding and conservative decision making will be essential for safe travel in avalanche terrain today.</div>
I would like to use following-sibling, as the item is right after the graphic-box element and there are other forecast-elements in the html above and below. BTW, I am using YQL if that makes a difference...
Ideally the results would be (psuedo here):
xpath imgsrc = "/images/forecast/2014-11-23_teton_hazard.gif"
xpath text = "GENERAL AVALANCHE
ADVISORY Moderate to heavy snowfall combined with strong
southwesterly to northwesterly........"
Thanks!
The correct syntax for selecting multiple nodes is |
Try this:
//div[#class="forecast-element graphic-box"]/img | //div[#class="forecast-element"]
As you mentioned, these are two separate query elements. In order to select following elements simply do this
//div[#class="forecast-element graphic-box"]/img | //div[#class="forecast-element graphic-box"]/following-sibling::div[#class="forecast-element"]
In some xpath parsers, this will also work:
//div[#class="forecast-element graphic-box"]/(img|following-sibling::div[#class="forecast-element"])
Related
I just wanted to know if there´s any way to reduce the space between to tables (one on top of the following) in an Rmarkdown sheet. I´ve tried doing
<div style="width: 100%;margin-top: 1px;margin-bottom: 1px;">
<div style="width: 63%;float: bottom;margin-top: 1px;margin-bottom: 1px;">
```{r, echo=FALSE, warning=FALSE,message=FALSE, results='asis'}
#here the two tables I need to print at the Markdown
But it doesn´t work. Do you have any sugestions? Thanks a lot!
The minimal distance between two tables is one line - otherwise they would be merged (as you can see in my example):
Example with 1 line distance and without one line distance
What is the output format of your md document?
I could finnaly solve it by using a negative margin-top for the second table.
<div style="width: 100%;margin-top: 50px;margin-bottom: 0px;">
{r, echo=FALSE, warning=FALSE,message=FALSE, results='asis'}
#one datatable here
</div>
<div style="width: 66%;float: bottom;margin-top:-19px;margin-bottom: 50px;">
{r, echo=FALSE, warning=FALSE,message=FALSE, results='asis'}
#the otherone here (negative margin-top)
</div>
I don't have any idea to get last locator from div
I try to count elements by Get Element Count in div but it got just 1
example html
<div class="add-product"
<p data-aura-rendered-by="188:14729;a">
<span data-aura-rendered-by="191:14729;a">01-January</span>
<p data-aura-rendered-by="195:14729;a">
<span data-aura-rendered-by="198:14729;a">02-February</span>
<p data-aura-rendered-by="230:14729;a">
<span data-aura-rendered-by="233:14729;a">07-July</span>
</p>
</div>
I need to count all elements in div or get last position in div (07-July) but each time the div contains a different number of elements (it depends on test data).
Use the following xpath it will identify the last element 07-July.
(//div[#class='add-product']//span)[last()]
I'm completely new to SCSS and I'm trying to set a background color to all items of a selector.
My css selector is the following, and returns all items (of two seperate UL lists)
#g-showcase .g-menu-item
I set a color array as:
$colors: #fad941, #ffffff, #e02520, #a6a6a6, #c6c6c6, #e02520;
I would like to iterate over my selector results and set a unique color from my color array (which could be larger than the above).
I started playing with some code, but I tackled it incorrectly, as I'm iterating over colors and not over selector items. (Don't know how to do that :( )
#for $i from 1 through length($colors) {
#g-showcase li:nth-child(#{length($colors)}n+#{$i}) {
background: nth($colors, $i)
}
}
How could I achieve the desired result?
Thank you !
S.
The problem you have is - as far as SASS is concerned - it's ignorant to how many li items your HTML code has, it's a pre-processor that never really see's the DOM, so it wouldn't know when to stop generating CSS
I assume what your looking to do is have the ability to select which color each li item has set as it's background, rather than as you currently have it, which is applying colors in the order they appear in the color array.
To do this you could add some additional markup to you HTML to give the generated CSS and slightly tweak how your creating the array, using a map instead. You might be looking to avoid polluting your HTML will erroneous mark-up, but the below would work.
$colorz: (
foo: #f24162,
bar: #591240,
fee: #4c5573,
fum: #6fa0a6,
eye: #71d9d9
);
#each $pointer, $bgcolor in $colorz
{
#g-showcase li[pointer="#{$pointer}"] {
background: $bgcolor;
}
}
<ul id="g-showcase">
<li class="g-menu-item" pointer='bar'>The quick</li>
<li class="g-menu-item" pointer='foo'>Brown Fox</li>
<li class="g-menu-item" pointer='fee'>Jumped over</li>
<li class="g-menu-item" pointer="bar">the lazy</li>
<li class='g-menu-item' pointer="eye">dog</li>
</ul>
<ul id="g-showcase">
<li class="g-menu-item" pointer="fum">...and other exciting stories</li>
<li class="g-menu-item">that you hear from time-to-time</li>
</ul>
Note The above wont 'run' as it's sass, so there's a working version over on CodePen http://codepen.io/anon/pen/GJLXMq
Trying to deal with irregular content in div elements. Namely what comes after the h3 titles. There is no set content under the h3 headings. However, I need to associate whatever text is there with the heading. There could be a ul or just a span or both. The main thing is not combining all the text under the h3 headings.
I have been able to navigate to my div using the .css operator. Each div contains one or more of 4 h3 headings followed by a comment or a list if there is more than one comment.
How can I separate whatever follows a h3 tag ending before the next tag (if there is one)?
You can see a sample of the div I'm working with here (I can grab whatever is between the h2 because its the same for every div):
<div class="inspection_container">
<h2 class="inspection_date_title">
<div class="calendar_list">
<span>Mar</span><strong>4</strong>
</div>Routine Inspection<small>Inspected Mar. 4, 2014</small>
</h2>
<h3>Actions taken by inspector</h3>
<ul>
<li class="Comment">
<strong>Consultation / Technical Assistance</strong><p>Instructions are given to the owner/operator to assist them with taking the proper actions to meet regulations.</p>
</li>
</ul>
</div>
<div class="inspection_container">
<h2 class="inspection_date_title">
<div class="calendar_list">
<span>Sep</span><strong>4</strong>
</div>Re-inspection<small>Inspected Sep. 4, 2013</small>
</h2>
<h3>Not in compliance</h3>
<ul>
<li class="X">
<strong>Premise is clean/sanitary</strong><p>Food premise is to be maintained in a clean and sanitary condition.</p>
</li>
</ul>
<h3>Actions taken by inspector</h3>
<ul>
<li class="Comment">
<strong>Consultation / Technical Assistance</strong><p>Instructions are given to the owner/operator to assist them with taking the proper actions to meet regulations.</p>
</li>
</ul>
</div>
<div class="inspection_container">
<h2 class="inspection_date_title">
<div class="calendar_list">
<span>Aug</span><strong>30</strong>
</div>Routine Inspection<small>Inspected Aug. 30, 2013</small>
</h2>
<h3>Not in compliance</h3>
<ul>
<li class="X">
<strong>Washrooms are cleaned regularly</strong><p>Washrooms are to be kept clean, sanitary, in good repair and must be supplied with liquid soap in a dispenser, single service/paper towels, cloth roller towel or hot air dryer and hot and cold running water.</p>
</li>
<li class="X">
<strong>Building interior is well-maintained</strong><p>Walls, floors and ceilings are to be maintained and in good repair.</p>
</li>
<li class="X">
<strong>Premise is clean/sanitary</strong><p>Food premise is to be maintained in a clean and sanitary condition.</p>
</li>
</ul>
<h3>Actions taken by inspector</h3>
<ul>
<li class="Comment">
<strong>Consultation / Technical Assistance</strong><p>Instructions are given to the owner/operator to assist them with taking the proper actions to meet regulations.</p>
</li>
</ul>
</div>
Provided that:
You only have intertwined h3 and ul elements till the end of the wrapping div
no other element can appear in this structure instead of ul
no other element can appear in this structure instead of h3
and that your example is representative, this should do the trick.
//ul[count(following-sibling::h3) = count(following-sibling::ul)]
If you have other elements in the same place as the ul but there is always only one between the h3s, you can use this expression
//ul[count(following-sibling::h3) = count(following-sibling::*[not(local-name() = 'h3')])]
As for grouping the h3 elements and the ul elements following them immediately, I don't think this is feasible in XPath alone. You'll need to do this in Ruby. I suggest searching for the div elements and parsing them imperatively, while counting the nodes and grouping the odd and even h3s and uls together
I want to display a div alongside a portait picture, but I want the div to fill all the remaining gap between the picture's right side and the edge of the webpage.
Here is the scheme:
xxxxxxxxxxxx
x| P || |x
x| i || |x
x| c || D |x
x| t || i |x
x| u || v |x
x| r || |x
x| e || |x
xxxxxxxxxxxx
Where xxx are the edges of the webpage.
I am not able to get the picture size, because I use the same webpage structure for many other portrait pictures, with not the same ratio, height/width....
What I have been able to do is:
<body>
<img style="float:left; height:100%;" src="portraitpictures_url" >
<div style="width: 100%;background:blue;color:white; border-radius:10px;" >
<p>The div text</p>
</div>
</body>
But this not what I want to have, because my div has a 100% width and so my div border is hiding partly behind the picture.
If I put my <img> tag between <div> and </div>, my picture's height overflows from the body and so is not "screen height".
I am quite sure, it is possible to do better, but here I am stuck...
Here is the full code in Django template style:
<body>
<img style="float:left; height:calc(100% - 45px);" src="{{ MEDIA_URL }}{{ A.picture.name }}" >
<div style=" width: 100%; margin-top: 2%;background:red ;color:blue; border-radius:10px;" >
<p>The div text</p>
</div>
</body>
You should add width:auto to your second div and set overflow to hidden ,like I've done here : http://jsfiddle.net/h5CU3/ . You can also add horizontal margin to the first block (margin :0 5px 0 0) in case you don't want it to look merged.
<body >
<div style="float:left; height:100%;">
<img src="portraitpictures_url" >
</div>
<div style="overflow:hidden;width:auto;overflow:hidden;background:blue;color:white; border- radius:10px;" >
<p>The div text</p>
</div>
</body>
Just add float:left to your div as well.
Does this do what you want? (the left margin should be set to the width of the img.
<body>
<div style="width:100%;">
<img style="float:left; height:100%;" src="portraitpictures_url">
<div style="margin-left:100px;background:blue;color:white; border-radius:10px;">
<p>The div text</p>
</div>
</div>
</body>
you need to add style
overflow: hidden;
Flexbox can do the trick, I have not tried this out yet, but I have read about it.
I'm sure this is what you are looking for.
Flexbox is an ongoing project that makes it easy to place 's on the exact spot you want it to be.
It has a built in function to fill up remaining space automaticaly.
http://learnlayout.com/flexbox.html (source: http://learnlayout.com/)