I am working in sinatra, with Coffeescript and rightjs.
in the body of the html I have a div
<div id="loginimage">
<img src="/images/login.png">
</div>
and a footer element
<footer>
<div id="footer">
<form action="/login" class="login" method="post">
</form>
</div>
</footer>
and finally my coffee script looks like:
$(document).onReady ->
"#loginimage".onClick ->
"#footer".toggle "fade"
I want to be able to click on the div with id loginimage and toggle the footer element, right now I have it toggling the div with id footer, how can I select html5 elements like footer? What am I doing wrong?
I'm not that familiar with RightJS but I suspect that you'd just use a normal <footer> selector in the string:
$(document).onReady ->
"#loginimage".onClick ->
"footer".toggle "fade"
No hash (id selector), no dot (class selector), just the element name. The String documentation for RightJS even includes things like this:
"div.something".addClass('marked');
"div#something".highlight();
so presumably the string that you're calling RightJS methods on is just any old selector.
Related
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'm getting my hands dirty with Meteor, and I wanted to port this AngularJS app (http://simplydo.com/projector/) over as an exercise.
I'm having difficulty implementing adding dynamic input form rows to sections using Handlebars, and I've found no documentation anywhere that documents if this possible. It's a snap in Angular using ng-repeat, but I want to confirm if this is something that is possible in Handlebars or whether I need to use Jquery in order to achieve this.
Thanks in advance.
It's just as easy in Meteor
all you have to do is repeat the rows with {{#each rowData}} and have a button that adds a document to the collection. Here is an example:
In this template the rows for a page are shown. In order to add a row, the user has to click on the add image. The template is :
<template name="page">
{{#with page}}
<h3>{{title}}</h3>
{{#each rows}}
<div class="row-fluid page-row {{#if isSelected this}}selected-row{{/if}}">
... page content here
</div>
{{/each}}
{{/with}}
<div class="btn-toolbar">
<div class="pull-right">
<a id="add-row" href="#" data-toggle="tooltip" title="{{lbl 'add-page'}}">
<img src="/images/add.png" class="asset-icon"/>
</a>
<img src="/images/separator.png" class="asset-icon"/>
<a id="delete-row" href="#" data-toggle="tooltip" title="{{lbl 'delete-page'}}">
<img src="/images/delete.png" class="asset-icon"/>
</a>
</div>
</div>
</template>
the helpers for this template are:
Template.page.page = function () {
return Session.get("selected-page");
}
in order to add a page the click event for the add button is implemented:
"click #add-row": function (evt, template) {
var page = Session.get("selected-page");
Pages.update({_id: page._id}, ... add a new row here ...)
}
because the whole thing is reactive, the list of rows will redraw after the update on the Pages collection.
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.
Using jQuery, I've got a selector -- call it $('#someDiv1') -- that I'd like to get the inner HTML for, but also the header of the tag as well. So given this HTML structure..
<div id="parentDiv">
<div id="someDiv1">
<div id="innerDiv1_1"></div>
<div id="innerDiv1_2"></div>
</div>
<div id="someDiv2">
<div id="innerDiv2_1"></div>
<div id="innerDiv2_2"></div>
</div>
</div>
If I've got the selector $('#someDiv1') in a variable -- call it $someDiv1 -- I'd like to be able to use that variable to get a string that is:
"<div id='someDiv1'>
<div id='innerDiv1_1'></div>
<div id='innerDiv1_2'></div>
</div>"
I thought about just saying $someDiv1.parent().html(), but that would give me the div's sibling(s) as well (someDiv2, etc..). Any ideas? Thanks.
You also try
$('#parentDiv').clone().find("> :not(#someDiv1)").remove().end().html();
You can try something like this:
$('<div></div>').append($('#someDiv1').clone()).html()
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