Can someone tell me an XPATH that does extract background color RGB values, or whole style, then I will remove unneeded data using Excel find/replace.
Been able to extract car color names using XPATH //div[#class='colorName']
<div class="colours" style="background-color: #040404; height: 30px; width: 130px; margin: 7px"></div>
<div class="colorName">Obsidian Black</div>
Source page: http://www.carwale.com/mercedesbenz-cars/e-class/e63amg-3049/
You can use the combination of substring-after() and substring-before():
substring-before(substring-after(//div[#class="colours"]/#style, "background-color: "), ";")
Works for me in the chrome console:
> $x('substring-before(substring-after(//div[#class="colours"]/#style, "background-color: "), ";")')
"#040404"
Related
Is there a way I can change this select drop down to a custom select drop down with a down arrow instead of the default quill arrows?
You can select ql-picker-label, and makes its default icon (the double pointing arrow) which is enclosed within an svg hidden, by setting display: none. Then, since the text itself is enclosed within the ::before pseudo-element, you can set the background-image on the ql-picker-label itself. The code below should be self-explanatory. However, because the text is within ::before element, I could not find an easy way to make space between the icon and the text. Perhaps, you can edit the icon image, and manually insert space before it.
This sample code below will select all ql-picker-label elements, you can avoid this behavior by entering more specific selectors.
.ql-picker-label svg {
display: none;
}
.ql-picker-label{
display: inline-block;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position: center right;
}
I have a funky element on an html page that I am having trouble selecting with an XPath query. I am using Capybara, however I hope this is an XPath problem. Possibly the - character needs escape or bad query?
HTML Element
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
XPath
"//*[contains(#class, 'iCheck-helper')]"
Ruby/Capybara
elements = all(:xpath, myXPathQuery) (documentation)
elements.Count is a Capybara::Result. elements.count returns 0 and I expect 1.
Is there a specific reason you need to do this as XPath? Capybara supports CSS selectors which are much easier to write for class names.
elements=all(:css, '.iCheck-helper')
Also when using all it returns immediately by default since it assumes no elements is a valid result. If your page is dynamically changing and you know you are want at least one element you should do
elements=all(:css, '.iCheck-helper', minimum: 1)
which will wait up to Capybara.default_wait_time seconds for at least one matching element to appear. You could also pass count: 1 (instead of minimum) if you know for sure you only want one element and any more than that should be an error, although in that case #find probably makes more sense
I have just noticed your CSS which is scrolled off to the right which has opacity: 0 - In any of the real browser drivers (selenium, capybara-webkit, poltergeist, etc - basically anything but racktest) that will make the element invisible so it will not be found by default. To find that element you can do
elements=all(:css, '.iCheck-helper', minimum: 1, visible: :all)
Please note that since Capybara is meant to emulate a real user, finding invisible elements is usually not a good thing since a real user couldn't see it or interact with it. Its generally a better idea to perform whatever action would make that element visible and then check for its existence/interact with it.
Try:
myXPathQuery = '//ins[#class="iCheck-helper"]'
elements = all(:xpath, myXPathQuery)
I've got an SVG that is being drawn inside of a div that has css of display:none. I need to center some of the rendered text elements, and to do this, I need the height and width. Unfortunately, when the containing html element is set to display:none, I always get 0 for height, and width. getBBox(), clientWidth, getComputedTextLength() methods all return zero. My question is: how can text width be calculated under these conditions?
e.g.
<div style='display:none;'>
<svg><g><text>some text</text></g></svg>
</div>
Have you tried setting the <div> to visibility: hidden;?
You may also want to make it position: absolute; so it doesn't affect the layout of other items on the page.
I'm trying to make a series of photos into square photos. They may be rectangular horizontally (i.e. 600x400) or vertically (400x600), but I want to get them to be 175x175 either way. My thought was to max-height or max-width the smaller side, and not allow overflow beyond 175px on the larger side...however, I'm having problems with it.
Is this possible with css?
Below is my attempt, but it giving rectangles still:
<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>
You can set the width/height of the parent div then set the child img tag to width:100%; height: auto;
That will scale the image down to try to fit the parent with aspect ratio in mind.
You can also set the image as a background-image on the div
Then if you can use css3 you can mess with the background-size property.
It's attributes are: contain, cover, or a specificed height (50%, 50%) (175px, 175px)
You could also try to center the picture with background-position
<div style="background-image:url(some.png); background-size: cover; background-position: 50%">
Here's an up to date and simple answer.
For instance, if you want a squared image inside of a container.
Let's say you want the image to take 100% of the container height and have a dynamic width equal to the height:
.container {
height: 500px; /* any fixed value for the parent */
}
.img {
width: auto;
height: 100%;
aspect-ratio: 1; /* will make width equal to height (500px container) */
object-fit: cover; /* use the one you need */
}
You can switch width and height values (container & image) if you want to base the 100% on the container's width and have a computed height equal to the width.
You can use object-fit, which is widely supported in all major browsers. When set to cover, the browser will crop the image when you set the width and height properties, rather the stretching it.
<img src="whatever.jpg">
img {
width: 175px;
height: 175px;
object-fit: cover;
}
Okay I got this.
Don't know if it's too late or what, but I've come up with a 100% pure CSS way of creating square thumbnails. It's something that I've been trying to find a solution for for quite a while and have had no luck. With some experimentation, I've got it working. The main two attributes to use are OVERFLOW:HIDDEN and WIDTH/HEIGHT:AUTO.
Okay here's what to do:
Let's say you have a batch of images of varying shapes and sizes, some landscape, some portrait, but all, of course, rectangular. The first thing to do is categorize the image links (thumbnails) by either portrait or landscape, using a class selector. Okay, so let's say you want just to create two thumbnails, to make this simpler. you have:
img1.jpg (portrait) and
img2.jpg (landscape)
For HTML it would look like this:
<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>
So, at this point since there is no css yet, the above code would give you your full-sized image as a thumbnail which would link to the same full-sized image. Right, so here's the css for both portrait and landscape. There are two declarations for each (the link and the link's image):
.landscape {
float:left;
width:175px;
height:175px;
overflow:hidden;
}
.landscape img{
width:auto;
height: 175px;
}
.portrait {
float:left;
width:175px;
height:175px;
overflow:hidden;
}
.portrait img {
width:175px; <-- notice these
height: auto; <-- have switched
}
The most important things are the width and height and the overflow:hidden. Float left isn't necessary for this to work.
In the landscape thumbnail declaration (.landscape) the bounding box is set to 175 x 175 and the overflow is set to hidden. That means that any visual information larger than that containing 175px square will be hidden from view.
For the landscape image declaration (.landscape img), the height is fixed at 175px, which resizes the original height and the width is set to auto, which resizes the original width, but only to the point of relating to the bounding square, which in this case is 175px. So rather than smush the width down into the square, it simply fills the square and then any extra visual information in the width (i.e. the overflow) is hidden with the overflow:hidden.
It works the same way for portrait, only that the width and height is switched, where height is auto and width is 175px. Basically in each case, whatever dimension exceeds the other is set to auto, because naturally the larger dimension would be the one that would overflow outside of the set thumbnail dimensions (175px x 175x).
And if you want to add margins between thumbs, for instance a 5px white margin, you can use the border property, otherwise there will be no margin where the information is overflowing.
Hope this makes sense.
Determine width and height of image, then active portrait or landscape class of the image. If portrait do {height:175px; width:auto}. If landscape, reverse height and width.
I highly suggestion the NailThumb jquery plugin for anyone that is looking to do this. It allows you to create square thumbnails without distortion. http://www.garralab.com/nailthumb.php
This might help.
CSS:
.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
HTML:
<div class="image"></div>
This worked for me. Just put the URL to the image inside the div.
hey guys,
somehow i can't find the solution for my little problem.
i have a paragraph setting with a max-width of 630px.
in some cases i have images within one of those paragraphs - and in this case i want the image to act normal -> without any max-width setting.
.post-body p {
width:99%;
max-width: 630px;
}
.post-body p img{
max-width:100% !important;
}
is it even possible to have the image larger than the max-width setting that's set to it's parent? do i need to use javascript (jquery)?
thank you for your help.
Unless you're modifying the image width some other way, as long as you don't do anything to the image it will display at full size.
See here: http://jsfiddle.net/WrfQQ/
I didn't bother declaring any CSS for the image, so it, by default, will show up at full size. (Please note, for the sake of testing I decreased the width of the p to 100px)
As I can see the problem is that you put a MAX-width to the img... you have to code the relative width... so:
.post-body p img{
position: relative;
width: 100%;
}
if you want it in jQuery the code is the below:
$('.post-body p img').width() == $('.post-body p').width();