I have next sctructure
<section>
<article>
<article>
<button>
</section>
How to add new <article> elements (for example 3) inside the <section> but before <button> using JavaScript?
Thanks
You can use querySelector in conjunction with :last-of-type CSS pseudo-class:
document.querySelector(`section > article:last-of-type`);
Related
In this example the the custom control is placed below the actual leaflet-control-container element.
<div class="leaflet-control-container">
<div class="leaflet-top leaflet-left"></div>
<div class="leaflet-top leaflet-right"></div> <----- Where I want it
<div class="leaflet-bottom leaflet-left"></div>
<div class="leaflet-bottom leaflet-right"></div>
</div>
<div class="leaflet-top leaflet-right"></div> <----- Where it is actually placed
This causes that anything in leaflet-control-container leaflet-top.leaflet-right div is covered with the custom element.
Is there a way to place this custom element inside leaflet-control-container?
That example looks buggy and unnecessarily complex. Try wrapping the minimap component in a LayerControl and using that to set the position:
<LayersControl position="topright">
<MinimapControl />
</LayersControl>
Let's say I have a ditamap file.I have published into html5.after published let's say my html file look like
<body id="SampleTopic">
<h1 class="title topictitle1" id="ariaid-title1">Sample topic</h1>
<div class="body">
<p class="p">some<strong class="ph b">bold</strong><span class="ph special">text</span></p>
<div class="p">
<dl class="dl">
<dt class="dt dlterm">Term</dt>
<dd class="dd">Defination</dd>
</dl>
</div>
</div>
</article>
</body>
here in Html file, I want to add some new attribute on the body element like
<body id="SampleTopic" class="test">
so can anyone help me with how to solve this????
can I add some plugin, if yes how to write the code???
If all you need is the HTML #class attribute, then there's no need to develop a custom plug-in.
You can just specify a value for the #outputclass attribute on an element in your DITA source files, and the value will be passed to the HTML #class attribute in the output.
Assume I have the following HTML snippet
<div id="parent_div">
<!-- First div -->
<div>
Hi <span>Dave</span>, how are you?
</div>
<!-- Second div -->
<div>
Hi, how are you?
</div>
<!-- Third div -->
<div>
Hi <span>Jenny</span>, how are you?
</div>
<!-- Fourth div -->
<div>
<span>Ryan</span>
</div>
</div>
I would like to use XPATH to find the divs that contain BOTH a span and text. So, in the above example, I would like to find the first div and the third div only. The second div cannot be selected because it does not contain a span (contains text only), and the fourth div cannot be selected because it only contains a span (does not contain text)
How can I do that in XPATH? I am using PHP if that matters.
You can try using this XPath :
//div[text()[normalize-space(.)] and span]
Above XPath will select <div> element that has child : <span> element and non-empty text node (to skip text nodes containing only line-breaks)
I try to map the following html (it´s a small fce)..
<div>
<div data-hero="1">
<h1>
<!-- Headline -->
</h1>
<p>
<!-- Small Text -->
</p>
<p>
<a>
<span><!-- Button Text --></span>
</a>
</p>
</div>
</div>
Mapping is ok... But when i map the <span> i get a No content found div[1] div[1] p[2] a[1] span[1] error. The <a>-Tag is mapped outter so it should work..
What I try to achieve: Set a Text that is displayed in the <a>-tag, instead of the link target itself.
It´s a TYPO3 4.7 using the latest TemplaVoilà.
Why is that? Thanks in advance!
Edit
#biesior suggested this is not possible - so no i wrap a <span> into the <a>-tag via Typoscript.
Is there a chance to display a certain fields content in this <span> - speak: replacing the linktext, so that i can have a Click here for more ... instead of pageXY?
Btw: I use a linkfield and not the Rich-Text-Editor for setting the link.
You can not map any element nested in previously mapped element.
The fastest solution is mapping the A tag, and wrapping inserted text with <span>|</span> with TypoScript.
I've my markups as
<div id="home" class="current">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller">
<ul id="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<!-- Events Details -->
<div id="events">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller"> <!-- stuffsss --></div>
</div>
<div class="footer">Footer</div>
</div>
For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.
//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.
I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.
Can anyone help me change the codes so that it works by implementing classes instead of the the id??
Rob is right, but you can change your code to scroller classes as you said.
Then initialise your scrollers within unique wrappers like this:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.
I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread
https://stackoverflow.com/a/7584694/1232232
but for this to work you need to assign ID's to your classed (div containers)
like
<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.