Beginning at coding, JS, today I inject an HTML template several times into the HTML thanks to JS. However, I'am confused by the systematic need to minify the html indentation and fold all the dozen(s) of lines --div, h1, span, table, tr, td, tt-- into a single var line. Minified html is both harder to ready and frequently need to be beautified back along the testing phase.
Also: is there a way to keep Beautified indented html in variable ?
Some syntaxe to have a valid version of:
var exampleTpl = "
<div data-demo-html="true">
<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
<div data-role="collapsible" data-collapsed="false">
<h4>Heading</h4>
<ul data-role="listview" data-filter="false" data-inset="true">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
"
Best thanks in advance,
For templating purpose, you should have a look at the example on Handlebars.js homepage :
Declare your template
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
Compile a template in JavaScript
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
Inflate the HTML
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
This will result in an instance of your template (value injected into your template) :
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
You COULD do it like this:
var exampleTpl =
'<div data-demo-html="true">' +
'<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">' +
'<div data-role="collapsible" data-collapsed="false">' +
'<h4>Heading</h4>' +
'<ul data-role="listview" data-filter="false" data-inset="true">' +
'<li>List item 1</li>' +
'<li>List item 2</li>' +
'<li>List item 3</li>' +
'</ul>' +
'</div>' +
'</div>' +
'</div>';
If you really wanted...
However, if you're representing a template in mustache JS (just looking at your tags there), I personally add the templates into a script element, and then access them using innerHTML as is suggested by some templating libraries (such as handlebarsjs.com).
eg:
<script type="text/html" id="myTemplate">
<div data-demo-html="true">
<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
<div data-role="collapsible" data-collapsed="false">
<h4>Heading</h4>
<ul data-role="listview" data-filter="false" data-inset="true">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
</div>
</script>
Related
I am trying to take content from a nav bar, and then modify and append it to a mobile menu. The nav bar html looks like
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
I need to append the anchors above to the following menu and have them work in the format below.
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
<li class="stmlevel0">second</li>
<li class="stmlevel0">third</li>
</ul>
I tried to do this like
var add_to_menu;
$('#top_bar nav a').each(function(){
var line = '<li class="stmlevel0">';
$(this).addClass('ma_level_0');
line += $(this).html();
line += '</li>';
add_to_menu += line;
})
$('#stmobilemenu').append(add_to_menu);
The result of this was it added undefined, then it added only the content
so appeneded was in this type of format.
<li class="stmlevel0"><span>My account</span></li>
what I want it to add is in this type
<li class="stmlevel0"><span>My account</span></li>
Another thing I tried was
$('#stmobilemenu').append(
$('#top_bar nav a').each(function(){
$(this).prepend('<li class="stmlevel0">');
$(this).addClass('ma_level_0');
$(this).append('</li>');
}));
I had a few problems with this though, first of all the append and prepend were not actually surrounding the html I want. It comes out like
<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
<li class="stmlevel0"></li>
<span>My account</span>
</a>
So I need that li to actually surround the a. Also it actually removed the content of #top_bar nav a from its original spot, which is not what I want it to do. I want it only to copy and add to the mobile menu. Can someone help?
Use clone() to make a copy of each <a>
var $mobMenu= $('#stmobilemenu');// store reference to menu element
$('#top_bar nav a').each(function(){
var $link = $(this).clone().removeClass().addClass('ma_level_0');
$('<li class="stmlevel0">').append($link).appendTo( $mobMenu);
});
var anchors = $('#top_bar nav').children();
anchors.each(function(){
var $this = $(this),
$li = $('<li class="stmlevel0"></li>');
$this.removeClass().addClass('ma_level_0').appendTo($li);
$li.appendTo('#stmobilemenu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
</ul>
Hello I trying to dropdown a div using jquery with css. On my page I have a drop down and I use .click to toggleClass.
This is the html and jquery
<div class="service">
<div class="service-btn">
<h3>head</h3>
</div>
<div class="service-info">
some text
</div>
</div>
$('.btn-service').click(function() {
$('.service-info', this).toggleClass('open');
});
For some reason this does not work. Even though earlier on the page I use
<li class="btn-dropdown">
<ul class="nav-dropdown">
<li>list item</li>
<li>list item</li>
</ul>
</li>
$('.btn-dropdown').click(function() {
$('.nav-dropdown', this).toggleClass('open');
});
and this does work. When I say it works I mean that the class is toggled and added to the html tag.
The one that doesnt work does not add/remove the class with toggleClass. Nothing happens at all and the jquery never gets triggerd by click.
The jquery part of the code is the same with the exception of class names so why doesn't the service code work like the dropdown code. Is it the html?
There is no ".btn-dropdown" like Felix Kling said.
"<div class="service">" should be changed to "<div class="btn-dropdown">
<div class="service-btn">
<h3>head</h3>
</div>
<div class="service-info">
some text
</div>
</div>
$('.btn-dropdown').click(function() {
$('.service-info', this).toggleClass('open');
});
the "click" function responds to the preceding selector element. You could also replace "$('.btn-dropdown').click" with "$('.service').click" it should return a similar result
I hope this code can help you .
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="service">
<div class="service-btn">
<h3>head</h3>
</div>
<div class="service-info">
some text
</div>
</div>
<li class="btn-dropdown">
<div class="btn-dropdownLi">
<h3>LI Toggle</h3>
</div>
<ul class="nav-dropdown">
<li>list item</li>
<li>list item</li>
</ul>
</li>
<script>
$('.service-btn').click(function() {
$('.service-info').toggle('');
});
$('.btn-dropdownLi').click(function() {
$('.nav-dropdown').toggle('');
});
</script>
</body>
</html>
I'm trying to get the contents of a div and display them as the last li on a ul for a mobile menu. The markup for the content is generated with php so I can't simply append html.
I have tried using sethtml and append without success.
This is my attempt:
$("#mobile-menu li").last().append($("#header-top-widget-area-2 div").innerHTML);
Here is the markup generated with php that I need to display as the last li in mobile menu:
<div class="ewf-span6 text-right" id="header-top-widget-area-2">
<div id="text-3" class="widget widget_text">
<h3 class="widget-title"><span> </span></h3>
<div class="textwidget">
<ul class="social-icons">
<li class="facebook"><img class="social-icon" src="/wp-content/uploads/2014/05/fb_responsive.png" alt="facebook-icon"></li>
<li class="linkedin"><img class="social-icon" src="/wp-content/uploads/2014/05/linkedin_responsive.png" alt="linkedin-icon"></li>
<li class="twitter"><img class="social-icon" src="/wp-content/uploads/2014/05/twitter_responsive.png" alt="twitter-icon"></li>
</ul>
<ul class="green-menu">
<li>Contact Us</li>
<li class="border">Blog</li>
</ul>
</div>
</div>
</div>
You need to create a new <li> element, populate it with your content, and append it to your <ul> element:
var newLi = $("<li />");
newLi.html($("#header-top-widget-area-2 div")[0].innerHTML);
$("#mobile-menu").append(newLi);
<ul class="open-close1" id="reportType">
<li class="active">
<div id="subcats">
<ul>
<li>
<img class="loading-spinner" src="store/$vendorSettingsDTO.vendorId/assets/themes/$vendorSettingsDTO.skinname/images/loading.gif" height="18"/>
</li>
</ul>
</div>
</li>
</ul>
<script>
jQuery(document).ready(function($){
jQuery.getJSON('subcat.ajx?vid=$vendorSettingsDTO.vendorId&cid=$catid', function(data) {
//Render subcatergories using Mustache.js (https://github.com/janl/mustache.js)
var subcat_mustache =
'<ul>\
<a style="font-size:14px; font-weight:bold; color:#0073B3;" class="opener"href="{{URL}}">{{description}}</a>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>';
var partials = {
child:
'<li>\
<a class="opener" href="{{URL}}">{{description}}</a>\
<div class="subnav1 hidden">\
<ul>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>\
</div>\
</li>'
}
jQuery("#subcats").html(Mustache.render(subcat_mustache, data, partials));
});
});
</script>
<script>
$(document).ready(function() {
$(".open-close1").hover(function (){
//$(this).children('.subnav1').toggle();
//console.log("$(this).children('.subnav1') "+$(this).children('.subnav1'));
//$(".subnav1", this).toggle();
$(this).find('.subnav1').toggle(); // p00f
});
});
</script>
This is the code I have in case of my category page. I implemented a logic to toggle the block on hover. But entire list of categories is toggling instead of specific list on which it is hovered.
Please help me its IRRITATING me. Thanks a lot for your help in advance.
I assume your rendered html like below;
<ul class="open-close1" id="reportType">
<li class="active">
<div id="subcats">
<ul>
<li>
<a class="opener" href="#">Item1</a>
<div class="subnav1 hidden">
<ul>
<li>Item1-1</li>
<li>Item1-2</li>
<li>Item1-3</li>
</ul>
</div>
</li>
<li>
<a class="opener" href="#">Item2</a>
<div class="subnav1 hidden">
<ul>
<li>Item2-1</li>
<li>Item2-2</li>
<li>Item2-3</li>
</ul>
</div>
</li>
<li>
<a class="opener" href="#">Item3</a>
<div class="subnav1 hidden">
<ul>
<li>Item3-1</li>
<li>Item3-2</li>
<li>Item3-3</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
You can use following js for above html structure;
$(".opener").hover(function (){
$(this).next().toggle();
});
Here is a working demo: http://jsfiddle.net/cubuzoa/EKu2q/
Edit: On your site, category section you mentioned loaded with ajax. So you need to run function after ajax load like below;
<script>
jQuery(document).ready(function($){
jQuery.getJSON('subcat.ajx?vid=$vendorSettingsDTO.vendorId&cid=$catid', function(data) {
//Render subcatergories using Mustache.js (https://github.com/janl/mustache.js)
var subcat_mustache =
'<ul>\
<a style="font-size:14px; font-weight:bold; color:#0073B3;" class="opener"href="{{URL}}">{{description}}</a>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>';
var partials = {
child:
'<li>\
<a class="opener" href="{{URL}}">{{description}}</a>\
<div class="subnav1 hidden">\
<ul>\
{{#childs}}\
{{> child}}\
{{/childs}}\
</ul>\
</div>\
</li>'
}
jQuery("#subcats").html(Mustache.render(subcat_mustache, data, partials));
$(".opener-parent").parent('li').hover(function (){
$(this).find('subnav1').toggle();
});
});
});
</script>
I have also give class name for upper categories as opener-parent and updated js code
Updated demo: http://jsfiddle.net/R9KLz/4/
Final Result: If you do not want to add opener-parent class, you can use following;
$("#subcats ul li").hover(function (){
if ($(this).find('.subnav1').first().find("ul").has("li").length) {
$(this).find('.subnav1').first().toggle();
}
});
Here is a working demo: http://jsfiddle.net/cubuzoa/R9KLz/5/
Something I noticed, I think you have an extra <div> in your list markup.
<ul class="open-close1" id="reportType">
<li class="active">
<div id="subcats">
<ul>
<li><img class="loading-spinner" src="store/$vendorSettingsDTO.vendorId/assets/themes/$vendorSettingsDTO.skinname/images/loading.gif" height="18"/></li>
</ul>
</div>
<!--</div>-->
</li>
</ul>
Also, I just a hunch, but I think you need to be more specific in which element inside of your class you want to talk to. For example, you have this:
$(this).find('.subnav1').toggle();
But I think you need something more along the lines of:
$(this).find('.subnav1 ul').toggle();
Or, if possible, you could give your list(s) some sort of hook to make it even easier to talk to.
Is it possible to order divs by class when clicking a menu link?
Here is my code:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director3 commercial"></div>
</div>
What I would like to do is when I click on a director or category in the menu I would like the divs with the connected class to be ordered at the top.
Here is an example: When I click on director2 in the menu I would like the code to change to this:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director3 commercial"></div>
</div>
Any thoughts on this?
Thanks in advance!
After you fix your HTML to be legal (close your divs), you can use this:
$(".directors-menu li").click(function() {
var cls = $(this).text();
var films = $(".films");
films.find("." + cls).each(function() {
films.prepend(this);
});
});
Working demo: http://jsfiddle.net/jfriend00/43muT/
And, a bit shorter version:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).text()).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/nLV2j/
It would better to put a custom attribute on the clickable items so the display text can be anything and you have direct control over the sort key like this:
Here's the HTML:
<ul class="directors-menu">
<li data-sort="director1">Sort by Director 1</li>
<li data-sort="director2">Sort by director 2</li>
<li data-sort="director3">Sort by director 3</li>
<li data-sort="commercial">commercial</li>
<li data-sort="promo">promo</li>
<li data-sort="short">short</li>
</ul>
<div class="films">
<div class="director2 commercial">d2</div>
<div class="director2 short">d2</div>
<div class="director1 commercial">d1</div>
<div class="director1 promo">d1</div>
<div class="director3 commercial">d3</div>
</div>
And, the code:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).data("sort")).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/GZhtr/
I think this is a nice way to do it
$(".directors-menu li").click(function(e){
$("div."+$(this).text()).prependTo("div.films");
});
Here is a fiddle http://jsfiddle.net/Vgt4s/
For sorting anything, the best jQuery plugin I have used is Tablesorter