I want to have nested div blocks with class names using Emmet codes but I cannot figure it out.
Something like this:
<div class="map">
<div class="cardcontainer">
</div>
</div>
I know div>div will produce a nested div block and I can do .map+.cardcontainer to produce two sibling divs, but .map>.cardcontainer does not work.
thanks.
div.map>div.cardcontainer
works for me. And the intellisense in vscode as you type that is great.
Related
where is this nested div construction defined, that the user-login form doesnt has:
<div class="form-item form-type-password form-item-pass-pass1 password-parent">
<div>
<input>Password Input</input>
<div>Password Strength</div>
</div>
<div>
<input>Password Confirm</input>
</div>
i have looked in form.inc, the user-module folder but no luck. as stated, the user-login form is printed plain without any nesting like this, so where is this determination done?
This is added with js. Look into ROOT/modules/user/user.js for the code.
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'm trying to make a Widget that generalizes a bootstrap style from twitter for collapsible items.
I got to make it work hardcoding it, but I find some dificulties abstracting it.
The widget looks like:
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
... text to show collapsed ...
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
... anything to show expanded ...
</div>
</div>
</div>
</div>
The thing is, this uses a javascript which depends on ids of some div tags. The generalized widget would need this to be randomized or depending on some seed passed in the constructor.
It would also be nice to have access to those generated Strings from Java part, as it would be a fancy way to set the text showing in the widget.
My first approach was to use something like <ui:with type="com.a.b.c.IdGenerator" field="idGenerator"></ui:with> but it seems to instanciate dynamically the class IdGenerator so no access to the Strings is obtained in Java part.
Is there any fancy way to dinamically generate those Strings having access to them from the Java part?
You simply need a #UiField IdGenerator idGenerator on the Java side to have the instance created by the <ui:with> injected in it (or you can #UiField(provided = true) it).
I don't know if the title is all apt...... but here is my situation....i have a class called dropper and another class drop_list...these two are sub-classes of the class drop_head, the drop_list has to drop down whenever the dropper is clicked...
<div class="drop_head">
<div class="dropper"> Content-1</divr>
<div class="drop_list"> List-1</div>
</div>
<div class="drop_head">
<div class="dropper"> Content-2</divr>
<div class="drop_list"> List-2</div>
</div>
when content-1 is clicked list-1 has to toggle and when content-2 is clicked list-2 has to drop down... how do i achieve this using single jquery..?? thanks in advance......
If i understand you correctly this should be pretty simple:
$('.drop_head').each(function(i,e){
$('.dropper', e).click(function(){
$('.drop_list', e).slideToggle();
});
});
by using the .drop_head as the context for the list and clickable element you dont need to use id's. additionally if you omit a list or dropper by accident it will only screw up that one "widget" and wont effect the others, which wouldnt be the case with closest.
you have two way (that I see =))
-just give two different ID names to your couples drop-list/dopper
<div class="dropper" id="id_1"> Content-1</divr>
<div class="drop_list" id="id_1"> List-1</div>
<div class="dropper" id="id_2"> Content-2</divr>
<div class="drop_list" id="id_2"> List-2</div>
and then say something like:
$(".dropper #id_1").click(function(){$("#id_1").slideToggle("slow")})
or shorter:
$(".dropper").click(function(){$(this).closest('drop_list').slideToggle()})
Hope it helps
Luca
I have this html:
<div id="top">
<div id="potato"></div>
</div>
<div id="bottom">
<div id="potato"></div>
</div>
I am trying to use JQuery to access the bottom potato div, and none of the following work.
$('#top #potato').html('Russet');
$('#bottom #potato').html('Red');
$('#top > #potato').html('Russet');
$('#bottom > #potato').html('Red');
$('#potato').html('Idaho');
All of these just modify the top div and not the bottom one. How do I modify the bottom div?
All elements must have unique IDs, in this case you may use the class attribute, so that you have
<div class="potato" />
Which you may access like this:
$('#bottom > .potato').html('Idaho');
I just ran into this problem. Although it's true you shouldn't have two items with the same ID, it happens.
To get the div you want, this is what works for me:
$('#bottom').find('#potato');
For one thing you can not have an element that has the same id as another. Id is unique, but class names can be used as many times as you want
<div id="top">
<div id="potato1"></div>
</div>
<div id="bottom">
<div id="potato2"></div>
</div>
jquery as so:
$(function{
$("#potato2").html('Idaho'); //if you're going to name it with an id,
// that's all the selector you need
});
What you posted and said doesn't work seems to work to me.
$('#top #potato').addClass('Russet');
$('#bottom #potato').addClass('Red');
https://jsfiddle.net/wzezr706/
no need to put classes on everything, but you should have unique id's for everything. That aside, try this:
$("#bottom + div").html('Idaho');
Try this:
$("#bottom #potato").html('Idaho');
Or
$("#bottom #potato:last").html('Idaho');
your HTML is not valid, since you have non-unique ids