I have this html and want to select only the div with class 'image-container landscape'.
<div class="image-container landscape">
...
</div>
...
<div class="image-container portrait">
...
</div>
Using $(element).find('.image-container') selects either one of the div, that comes first. But I only want the one with 'landscape'. I tried using $(element).find('.image-container landscape') but it doesn't work, maybe because it assumes landscape is a tag. How do I do this?
Yes, it would assume landscape was a tag.
You want either:
[class="image-container landscape"]
or
.image-container.landscape
This is just CSS3 for the record, you can probably read the full specs in less than an hour.
Related
I'm looking to create a reusable, modularized component in Umbraco 9. I've never worked with any Umbraco before. The example I'll use is a text widget/component that has an image on the left and text on the right, with the ability to set whether you want to swap this to be image right, text left.
I come from the Sitecore world where creating a component like this would mean creating a definition with the fields in the back office, creating an MVC controller and an action, and pointing that back office definition at the controller/action combo. Then, anywhere I've deemed a component hot spot, I can click an "add component" and it'd display the available components I've created (Text + Image Block, in our example).
Our team has been researching how to do something like this in Umbraco. We've been using element types. I've got it working where I can create a list of element types, but we couldn't figure out how to add a controller/action/view to this process to really control what gets displayed.
We've looked into the Grid Type Editor. That requires some Angular work that wasn't exactly playing nice, for some reason it was seeing our image fields as null even though they had an image.
We also tried messing with the Block List editor, and are currently investigating macros.
We've been spinning our wheels and I'm hoping to get some assistance on how to do something like this in Umbraco. Perhaps I'm searching/using the wrong terminology?
Most of our components are super simple, and rather than create a reusable component, we can just use the grid editor. In our example above, we could create a 50/50 grid row and put an image in the left column and the text in the right. This would work, but we'd like to have a little more of a reusable package. Furthermore, a few of the components will require some controller functionality to be able to hit an API and massage some data before passing it to the presentation layer.
We will keep investigating, but ultimately I'm hoping someone can clear up if we're going down the wrong path, or just missing some crucial point here.
Sure! Two ways come to mind for me. One would be make a simple doctype like the screenshot below and let layout decide how to stack them
This sample uses bootstrap which of course you don't have to use, and in my case I have them in a nested content element so I basically just loop through them and alternate putting flex-row-reverse on the row.
#{
var i = 0
foreach(var contentBlock in Model.ContentBlocks)
{
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
<div class="block-left col-sm-7">
<h5>#contentBlock.SectionHeading</h5>
#Html.Raw(contentBlock.SectionDescription.ToString())
</div>
#if(contentBlock.HasValue("sectionImage") && contentBlock.SectionImage != null)
{
<div class="block1-right col-sm-5 ml-auto">
<figure class="hover">
<img id="#contentBlock.SectionImage.Name.Trim().Replace(" ", "-")" src="#contentBlock.SectionImage.Url">
</figure>
</div>
}
</div>
i++;
}
}
The other way (as you asked for) is to give the content editor the choice with a toggle, add a toggle to the doctype
and instead of this line
<div class="d-flex flex-wrap align-items-center #(i %2 != 0 ? "flex-row-reverse" : null)">
you could use this line
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "flex-row-reverse":null)">
Or even something like this where you just assign your own class and write the CSS separately
<div class="d-flex flex-wrap align-items-center #(contentBlock.SectionAlignment == true ? "block-right":"block-left")">
Hope that helps get you going in the right direction. I'm sure you'll have to adapt this for your situation and this code is not tested.
Happy to help if you have any issues.
I have this following html data :
<span id="description">
<p>description</p>
<p>description</p>
<p></p>
<h3>title1</h3>
some text. <br>
<br>
some text.
<h3>title2</h3>
<p></p>
<p></p>
<div>data</div>
<h3>title3</h3>
<strong>data</strong>
<br>
some text.
<br>
<br>
some text.
<p></p>
</span>
I need to get all the p tags up to first h3 tag.
I tried Xpath //span[#id="description"] which will get all the children of the span tag, which I dont need.
I also tried //span[#id="description"]/h3[1]/preceding-sibling::p which only returned first preceding p tag. Also selecting individual p nodes and then combining them are not feasible since different pages will have different number of p nodes before the first h3.
Then I tried with CSS selectors and remove function, $('#description').clone().children('div,h3').remove().end().html().trim(). Which didnt work well, since I cant select text nodes with it.
Is there anyway I can split the data with these h3 tags?
Your expression
//span[#id="description"]/h3[1]/preceding-sibling::p
should work.
A similar expression
//span[#id="description"]/h3[1]//preceding-sibling::p
should also work.
Also try this one:
//span[#id="description"]/p[following-sibling::h3[contains(text(),"title1")]]
My goal is to create an input like the one described as being 'outline variant' in these Material docs.
How do I configure and/or what CSS should I add to materialize CSS forms to use the 'outline' variant?
There appears to be a few issues/requests for this outline variant, but the Materialize folks have indicated that it wasn't part of the spec at the time and have subsequently closed the issues.
I dug through some of the Material samples versus styling on the Materialize framework and noticed that they are handling things slightly different as far as padding, borders/shadows etc.
Achieving this outline variant as the default treatment is going to require some slightly destructive style updates that should probably be handled via the preprocessed files, but here is an example of some quick and dirty overrides
Note the addon class "input-outlined" in the markup:
<div class="col input-field input-outlined s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
As far as I can tell, they're related but not the same project and do not use the same CSS files. I was using a CDN link for Materialize for a little while and none of the Material.io classes were taking effect.
Then I switched over to using the suggested Material.io CDN links, found here: https://material.io/develop/web/docs/getting-started/
Once I did that, I could use the HTML markup and class names that became visible on the page you provided after I clicked the "Web" tab.
It works. Here is a Codepen showing both styles of text inputs in action (this Codepen is using the Material.io CDN links in the settings).
The main difference between filled and outlined is that filled looks to be the default. I'm inferring that the Material.io design system has you repeat the classname and append a modifier if you wish to deviate from the default.
For instance, in the linked codepen, notice that the filled (default) text field is inside <div class="mdc-text-field"> while the outlined text field is inside <div class="mdc-text-field mdc-text-field--outlined"></div>.
I have to print the hover box information content on to stdout and i tried it in the below fashion it didn't work for me .
data = $browser.div(:class => "homeSectionLabel textWidget",:text => /Pool A/ ).hover
print "Data #{data} \n"
And the other problem that i have other widget called Pool B with same class name . How to access that hover information
<div class="widgetContainer poolContainer">
<div class="healthBadge healthUnknown" style="top: -5px; left: -5px;"></div>
<div class="homeSectionLabel textWidget">Pool·A</div>
<div class="perfDisplay homePoolPerf">
</div>
<div class="homePoolVolText textWidget">9·Volumes,·0·Snapshots</div>
<div class="spaceMeterContainer poolMeter" style="width: 265px; height: 20px;">
</div>
<table class="tableWidget homeTiers" cellspacing="0" cellpadding="0" border="0">
</table>
</div>
Anyhelp is really appreciated .
Thanks!
Aditya
This is not much of an answer at the moment, but what I have to say won't fit in a comment
The 'content' as in the text within a div is normally accessed with the .text method
'tooltip' text can be done in a number of ways, it could be via alt attributes, it could be via javascript triggered via an 'onmouseover' event, or it could be CSS driven usually via the :hover psuedoclass.
if a div is merely changing it's display property or location so that it becomes visible to the user, then all you need to do is figure out how to locate that div, and get the .text from it
mydata = browser.div(:how => 'what').text
If the content of the div (or some other container) is changing as a result of the mouseover/hover, then you need to simulate the action, wait a brief bit to allow client side code to run, and THEN get the .text from the container that was changed.
Without seeing a page that has the code working on it, it is hard to tell which is the case, although given that I see nothing like 'onmouseover' in the code you supplied, my first bet would be on this being CSS driven.
The code you have above is returning the result of the div object executing the .hover method, and that is going to be nil as far as I know since that method causes something to happen, but does NOT return a value.
Is the 'Pool A' the text you are trying to capture, or is it what you mouse_over to cause the other text to become visible to the user? If it is what you mouseover, then have you searched the HTML to see if you can find the text that appears in some other div?
If you just need to get the text from every div of a given class, then try something like this
browser.divs(:class => "homeSectionLabel textWidget").each do |div|
puts div.text
end
Based on the most recent comment, this will gather the class names from all of the divs on the page and print it to the console.
$browser.divs.each do |div|
puts div.class
end
Replace "puts div.class" with a file directive if you want it in a file. Any output here is simple Ruby.
I am trying to move text next to my header, but it is not working using margins - when i try to move it all the text boxes move, even though each text box is a seperate div tag.
Here is my code for this part
<body>
<div id="wrapper">
<div id="header">
<h4><strong>Qtek Australia</strong></h4>
<div id="home">Home</div>
<div id="Aboutus">About us</div>
<div id="Contactus">Contact us</div>
<div id="Location">Location</div>
</div>
i am trying to move the home, about us, contact us and location to the right of the header "Qtek Australia", please help
You can try wrapping the h4 in another div and placing it where you want.
If this is the way you already tried, another way could be wrapping the three div you want to place on the left in one div, the other four in another and move around these two divs. It should be easier, even if you can get divitis doing so.
I will say that your document semantics are quite vague. You probably don't need to use STRONG inside your heading - it's conceivable that you really mean to emphasize the thought expressed in it, but I suspect that you only want the heading to appear bolder. Use CSS to achieve that, as in: h4 {font-weight:bold; font-size: 14em;}.
It's also conceivable that your page makes the most sense with the navigation starting at the fourth level of some topic, but it's highly unlikely; in the vast majority of cases, the navigation would exists higher up - under h1 or h2.
Your navigation itself would be more coherent if it was an unordered list.
<ul>
<li>Home</li>
<li>About Us</li>
...
</ul>
This also has the advantage of allowing you to style the navigation elements both as a set and individually.
You probably don't need to be wrapping your elements in all those divs. Most elements in HTML are containers - headings, lists, paragraphs, just about everything can be styled - including positioning and moving - by itself.
For instance, one means of positioning the navigation list to the right of the h4 would be to style the h4 with "display:inline", or "float:left", which would bring the following element (the list) onto the same line. There's a lot of different ways to go about that kind of positioning, and it's not even clear that this is what you're after.
Clarify what you mean; and it would help if you posted whatever CSS or JavaScript you're using.