Is it possible to do something like beforeall with mustache? - javascript

I have the following template:
<div class="photoList">
{{#photos}}
<img src="{{columnPhoto.url}}" data-zoom-url="{{original_size.url}}"/>
{{/photos}}
</div>
Sometimes {{#photos}} is empty or not set, in those cases, I don't want to add the div .photolist, is this possible?


{{#photos.length}}
<div class="photoList">
{{#photos}}
<img src="{{columnPhoto.url}}" data-zoom-url="{{original_size.url}}"/>
{{/photos}}
</div>
{{/photos.length}}

Related

What is the proper way of using ng-repeat to set attributes on an element?

So I have the following div:
<div ng-repeat="player in playersScores" class="sb_lane">
<div class='sb_animation drop'></div>
<div lane="{{player.lane}}" class='dropbox' dropbucket>
<div class='sb_lHeader'>
<div class="drop">Lane {{player.lane}}</div>
<div class="drop">{{player.player}}</div>
</div>
<div class="sb_rScore drop">Run : {{cRun}} of {{tRun}}
<div>Run Score</div>
<div >{{player.rScore}}</div>
</div>
<div class="sb_tScore drop">Game Score
<div > {{player.gScore}}</div>
</div>
</div>
</div>
I am getting an error from using {{player.lane}} in the this line:
<div lane="{{player.lane}}" class='dropbox' dropbucket>
My question is this: What is the proper way of using ng-repeat to set attributes on an element?

Simply use
<div lane="player.lane" class='dropbox' dropbucket>

Turns out I had a two way binding in the drag and drop directive that was set to lane. Once I removed that binding, everything worked as expected.
Thanks for the insight everyone..
Z

Set top level element node for jquery

I have the below page layout:
<div class="content">
<div class="main-content profile0">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
<div class="main-content profile1">
<div class="messages">
</div>
<div class="moreinfo">
</div<
</div>
</div>
Currently I have been doing things like
$('.messages').remove();
but I need to be able to set which div is actually the parent, so I can tell jquery to only look at the childer of the div "main-content profile1"
So that then
$('.messages').remove();
refers to the child of "main-content profile1" and not "main-content profile0"

You can use the find() like
$('.main-content.profile1').find('.messages').remove();

As AmmarCSE said, you can use find(), but you could also just change the selector.
$('.main-content.profile1 .messages')

Replace images by others with javascript

How can I replace images by others with javascript please ?
I've tried but something is wrong
if ($(".grimm")) {
$('.ch').
html(
$('.ch').
html().
replace('http://icons.iconarchive.com/icons/graphicrating/koloria/32/Mail-icon.png',
'http://icons.iconarchive.com/icons/graphicrating/koloria/32/Mails-icon.png')
);
}
<div class="grimm">
<div class="ch">
<img src="http://icons.iconarchive.com/icons/graphicrating/koloria/32/Mail-icon.png" />
</div>
</div>

Make sure to include jQuery, then your fiddle works fine: http://jsfiddle.net/dm9xkmkd/1/
But you can also handle this in one step without involving replace() or rewriting large chunks of HTML:
$('.grimm .ch img[src="http://icons.iconarchive.com/icons/graphicrating/koloria/32/Mail-icon.png"]').
attr('src', 'http://icons.iconarchive.com/icons/graphicrating/koloria/32/Mails-icon.png');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grimm">
<div class="ch">
<img src="http://icons.iconarchive.com/icons/graphicrating/koloria/32/Mail-icon.png" />
</div>
</div>

Using Bootstrap: JS function stop working when nav bar is toggled

I have a simple JS Junction that stop working when the break point of my responsive website is activated (The nav var toggle/collapse at 768px, here is when the JS function stop working)
The HTML is:
<div class="mainFoto">
<img id="bigImage" src="/fotosArticulos/12578.jpg">
</div>
<div class="misProductosFotos">
<div class="foto" onclick="callImage('12578.jpg');"><img src="/Thumbs/12578.jpg"></div>
<div class="foto" onclick="callImage('30643.jpg');"><img src="/Thumbs/30643.jpg"></div>
<div class="foto" onclick="callImage('12656.jpg');"><img src="/Thumb/12656.jpg"></div>
</div>
and the JS function is
function callImage(idImage) {
var imageUrl = '/fotosArticulos/'+idImage;
$('#bigImage').attr('src', imageUrl);
}
This simple does that when click on one thumb the JS change the SRC of id="bigImage"
Why this Function stop working and how fix it?

May be this will help you.
HTML
<div class="mainFoto">
<img id="bigImage" src="/fotosArticulos/12578.jpg" />
</div>
<div class="misProductosFotos">
<div class="foto">
<img src="/Thumbs/12578.jpg" />
</div>
<div class="foto">
<img src="/Thumbs/30643.jpg" />
</div>
<div class="foto">
<img src="/Thumbs/12656.jpg" />
</div>
</div>
Script
$('.foto').click(function() {
$('#bigImage').attr('src', $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/'));
})
fiddle

Thanks Guys for all your support. The issue was that when the website collapsed and get responsive there was an invisible element that overlap the Thumbs icons, that is why they did not respond, I think I blend bootstrap too soon. Thanks again :)

#anilkumar, do you think storing $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/') in a variable might make things a little more human readable? Like so:
$('.foto').on('click', function() {
var changeSrc = $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/');
$('#bigImage').attr('src', changeSrc);
})
#saymon, do you reckon you might be removing the #bigImage id from .mainFoto > img at the breakpoint? Or perhaps Bootstrap might be renaming the element id?

How can I select a parent element, and all child divs that are not the first, as well as siblings of the parents and their children

Sorry for the poor title, I'm not sure how to word this issue.
I need some help writing a jQuery or javascript selector to get every childBlock that isn't the first. There are N number of parentBlock divs with at least one childBlock div child. We would like to change some of the labels for every subsequent child div after the first. What is the most efficient way to select these elements?
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='1'>
</div>
<div class="childBlock" id='2'>
</div>
<div class="childBlock" id='3'>
</div>
<div class="childBlock" id='4'>
</div>
...
</div>
</div>
<div>
<div class="parentBlock">
<div class="elementHead">
</div>
<div class="elementBody">
<div class="childBlocks">
<div class="childBlock" id='5'>
</div>
<div class="childBlock" id='6'>
</div>
<div class="childBlock" id='7'>
</div>
<div class="childBlock" id='8'>
</div>
...
</div>
</div>
<div>
So in the example above, I would like to select childBlocks with an id of 2, 3, 4, 6, 7, 8. In my actual code, these div's don't have an id, they are just classed if that makes a difference at all.
I've tried:
$(".parentBlock").find(".childBlock").not(':first').find('label.category ').text("Subcategory");
But it seems to find the first childBlock on the screen, skip over it, then apply the text change to every other childBlock div that it finds.
Thoughts, or suggestions?

You were very close. You want first-child, not first:
http://jsfiddle.net/pMYWS/
$(".parentBlock").find(".childBlock").not(':first-child').text("Subcategory");
(I am assuming that label.category is something present in your real code that isn't shown in this demo snippet)

what about something like this?
$(".childBlocks:not(:first-child)") (do something here)

Categories