A blank class just mess my expression up. Here is the html elements for the image link:
<div data-index="0" style="width: 300px; left: 0px; transition-duration: 0ms; transform: translate(0px, 0px);"><img alt="" class="" src="https://images.craigslist.org/00G0G_40m7DOu6DO3_300x300.jpg"></div>
Here is what i tried with:
//div/img/#src
//div/img[#class='abc']/#src
try giving your class a name and use the xpath expression
In [27]: text = """ <div data-index="0" style="width: 300px; left: 0px; transiti
...: on-duration: 0ms; transform: translate(0px, 0px);"><img alt="" class=""
...: src="https://images.craigslist.org/00G0G_40m7DOu6DO3_300x300.jpg"></di
...: v>"""
In [28]: from scrapy.selector import Selector
In [29]: sel = Selector(text=text)
In [30]: sel.xpath('//img[#class=""]/#src').extract()
Out[31]: ['https://images.craigslist.org/00G0G_40m7DOu6DO3_300x300.jpg']
Related
I have a column with images. The column has a limited height and I want that all the images fit in the column vertically. Is this possible? I'm trying it with flexbox, but didn't succeed yet.
.zoom__images {
overflow: hidden;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: auto;
height: auto;
}
<div class="zoom__images">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
</div>
Best wishes
This will work if you want to take equal size for your images
For flex-items to shrink less than their size you need to set flex-basis: 0; and min-height: 0. Default values of min-height: auto and flex-basis: auto; can prevent flex-items from shrinking less than their size. flex-grow: 1 makes items grow to take equal values. But img as flex-items don't resize to preserve aspect ratio, so we'll have to wrap them. Demo:
.zoom__images {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.zoom__images > * {
flex: 1 0 0;
min-height: 0;
display: flex;
}
.zoom__images img {
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
<div class="zoom__images">
<div><img src="https://placehold.it/200x300/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/100x100/a00/fff"></div>
<div><img src="https://placehold.it/400x600/a00/fff"></div>
</div>
You can also add overflow: hidden for .zoom__images > * for images not overflowing .zoom__images. This won't make it look as in other browsers but look will be much better.
Try using CSS calc() method. calc(100/Number of images in container) will resize your images' height to share 100% of your container height, which will be divided evenly among all images.
.zoom__images {
overflow: hidden;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: auto;
height: calc(100%/4);
}
<div class="zoom__images">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
</div>
How to locate the image link within the element pasted below? I tried like this but it doesn't seem to work.
//img[#class]/#src
The element within which the image link is:
<div data-index="0" style="width: 300px; left: 0px; transition-duration: 0ms; transform: translate(0px, 0px);"><img alt="" class="" src="https://images.craigslist.org/00z0z_886m3prFkue_300x300.jpg"></div>
You don't need attribute class.
Just use //img/#src
<div>
<div class="dates">
So, to find the dates class above, I'm using $x("//div[#class= 'dates']//") but console says that this expression is illegal expression.
<div class="bx-wrapper" style="max-width: 870px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;">
<div class="bx-wrapper" style="max-width: 870px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 91px;">
<ul id="DateList" class="bxslider clearfix" data-bx-slider="mode: 'horizontal', pager: false, controls: false, minSlides: 1, maxSlides:4, slideWidth: 290, slideMargin:0, hideControlOnEnd:true, infiniteLoop: false, moveSlides: 1" style="width: 515%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
To find the correct xpath to the above node, I'm using $x("//ul[#id= 'DateList']//") and still got a message that expression is illegal.
<li class="date-block slide ng-scope" data-notify-when-repeat-finished="" ng-repeat="dates in cruiseFinder.filters.sailDates" style="float: left; list-style: outside none none; position: relative; width: 290px;">
<h5 class="ng-binding">2015</h5>
<ul id="months" class="months">
In both cases the last double slash is too many: The right xpaths would be:
//div[#class= 'dates']
//ul[#id= 'DateList']
Double slash into a xpath expression means "in any place of the document".
I use ruby, cucumber and capybara.
My html looks like this:
<tr>
<th>
Promotion codes
</th><td><div class="t-zone" id="promocodesZone">
<span style="display: inline-block;">
<span class="field"><label class="field-label">File name:
<span style="text-transform: none;" class="status-ok"></span></label></span>
<span class="field"><label class="field-label">Codes available:
<span style="text-transform: none;" class="status-ok">0</span></label></span>
<span class="field"><label class="field-label">Codes used:
<span style="text-transform: none;" class="status-ok"></span></label></span>
<span class="field"><label class="field-label">Codes uploaded on:
<span style="text-transform: none;" class="status-ok"></span></label></span>
</span>
<div style="margin-bottom: 15px;"><div class="t-upload">
<div id="promocodesUpload">
<div class="qq-uploader">
<div class="qq-upload-drop-area" style="display: none;"><span>Drop </span></div>
<a class="qq-upload-button btn" style="position: relative; overflow: hidden; direction: ltr;">Upload
<input type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></a>
<ul class="qq-upload-list"></ul></div></div>
</div>
</div>
</div>
</td>
</tr>
Basically what I need to do is to upload a file by clicking on link "Upload":
<a class="qq-upload-button btn" style="position: relative; overflow: hidden; direction: ltr;">Upload<input type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></a>
But I keep failing because capybara is unable to find the necessary element...
I have tried many things already:
attach_file('//*[#id="promocodesUpload"]/div/a/input', File.absolute_path($campaign_promotional_code_path))
Result: Unable to find file field "//*[#id=\"promocodesUpload\"]/div/a/input" (Capybara::ElementNotFound)
and
within(:xpath, '//*[#id="promocodesUpload"]/div/a') do
attach_file("input", File.absolute_path($campaign_promotional_code_path))
end
Result: Unable to find file field "input" (Capybara::ElementNotFound)
and
attach_file("Upload", File.absolute_path($campaign_promotional_code_path)
Result: Unable to find file field "Upload" (Capybara::ElementNotFound)
and
click_link("Upload")
Result: Unable to find link "Upload" (Capybara::ElementNotFound)
and
Any help please? :)
Try this:
page.driver.browser.all(:xpath, '//input[#name="file"]')[0].send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')
or:
page.driver.browser.all(:xpath, '//input[#type="file"]').last.send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')
Capybara can't find the file input because it's opacity is 0, so it's hidden on the page. - Your best bet is to use execute_script to modify the file inputs style attribute so it becomes visible before calling attach_file
If you have jQuery on your web page:
page.execute_script("$('input[name=file]').css('opacity','1')")
If you don't have jQuery on your web page:
page.execute_script("document.getElementsByName('file')[0].style.opacity = 1")
As per documentation you can set make_visible option to true if the element is hidden somehow.
# will attach file to a descendant file input element that has a name, id, or label_text matching 'My File'
page.attach_file('My File', '/path/to/file.png', make_visible: true)
attach_file("user[logo]", Rails.root + "app/assets/images/image.jpeg", make_visible: true)
It is better: "In the case of the file field being hidden for styling reasons the make_visible option can be used to temporarily change the CSS of the file field, attach the file, and then revert the CSS back to original."
make_visible: true
As recommended here: https://www.rubydoc.info/gems/capybara/Capybara%2FNode%2FActions:attach_file
I'm trying to add some text over an image. I've set the position of the image to relative and the position of the text is absolute. It's working completely fine in Firefox but not in Chrome.
All I see in Chrome is an image.
Can anybody help me out in this ?
My code:
<p class="call text-right hidden-xs tel">
Call: 1-800-378-7566
</p>
<img src="img/slider/slider01.jpg" alt="" title="" style="margin-top:-28px; position:relative;" />
this could help you.
added
<p class="call text-right hidden-xs tel">
<a href="tel:+18003787566" style="position: absolute;
top: 50px;
left: 10px;
padding: 6px;
background-color: #292D30;
font-size: 26px;
padding-left: 100px;
padding-right: 127px;
z-index: 999;">Call: 1-800-378-7566</a>
</p>
Added top and left position as well as added z-index.
See the example
http://jsfiddle.net/nanduh/wo2eyhp6/