please, I'm writing a very long text (chapters) and I would like to make an index, example :
A chapters - B chapters - C ... when make click on (A)...page slides down up to (A chapters ) area
Please, how make this, and how is called this technique for future use not forget.
Thanks in advance.
give the element you're sliding to an indiovidual id like "chapter1"
<div id="chapter1">
ONCE upon a time, blablabla
</div>
and an anchor targeting to this div
<a href="#chapter1">
Chapter1
</a>
Your can simply access to this chapterwith a link using it like so :
http:/yourwebsite/yourtext.html#chapter1
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 just only recently started using selenium and I can't get it to work properly.
I need to get a text from (s) which are inside dives which are inside a table.
Like this:
<td class="some-class">
"""many divs above"""
<div class="props">
<span>text</span>
<span class="mr2">text</span>
</div>
"""/many divs above"""
</td>
So, I need to get 'text(s)' from spans, but also there are many td s like this one and inside divs, classes repeat.
Moreover, how can I get it as a list?
I have tried this:
el = browser.find_elements_by_css_selector('dir.props > span')
print(el)
for i in el:
dict_of_orders.append(i.text)
print(dict_of_orders)
However, it returns only empty lists.
Any advice?:)
Thanks ahead for any help!
You have a typo in your CSS selector. It should be div instead of dir:
el = browser.find_elements_by_css_selector('div.props > span')
I don't know if that will fix your problem, but you'll have to fix that.
Another thing I would try is, instead of text, use the innerText attribute, like this:
dict_of_orders.append(i.get_attribute('innerText'))
Hello for future someone like me. My problem was solved by adding the delay.
Check it, maybe a site that you're trying to parse is slow.
time.sleep(5) was the answer.
el =browser.find_elements_by_xpath("//div[#class='props']/span")
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.
I am new to Watir automation testing and would like to get some help for the drop down.On our website we have a state drop down where you enter the first letter of the state (in my example C for California) and it narrows it down to the all states starting with C. Once you have the list you need to click on the correct state. But I am having difficulties selecting the correct state.
(Below is the html from our website:
<div class="x-form-field-wrap x-trigger-wrap-focus" id="ext-gen202" style="width: 166px;">
<input type="hidden" id="entityStateCode" name="entityStateCode" value="">
<input type="text" id="ext-comp-1005" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus">
I used the following to automate the scenario but none of these are giving me what i am looking for:
#browser.text_field(:id,"ext-comp-1005").value=("CA")
#browser.text_field(:id,"ext-comp-1005").set("CA")
#browser.text_field(:id=> "ext-comp-1055",:index => 5).set "CA"
I really appreciate that if you can point me to the right direction.
Thanks
I ran into a similar situation before. In my situation there was a TABLE inside the DIV which had a separate row for each item in the dynamic drop down. So, if that's the case for you then you would need to use something like this to access the items:
#browser.text_field(:id,"ext-comp-1055").set "C"
table = #browser.div(:id, "ext-gen336").table(:index, 1)
puts "First entry value: #{table[1][1].text}"
table[2][1].click # second entry
Try printing out the HTML for the DIV at runtime to see the specifics of what you need to interact with if that doesn't work.
You did not tell what the problem is, this is not enough:
none of these are giving me what i am
looking for
This should enter CA into text field:
browser.text_field(:id => "ext-comp-1005").set("CA")
If it is entering text into wrong text field, change :id => "ext-comp-1005".
If it is entering text into the correct text field, but list of states does not appear, you probably have to fire some javascript event. Take a look at How to find out which JavaScript events fired? question.
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.