I have created a custom base template like so:
baseTpl :
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar">' +
'<span data-fancybox-index></span> / <span data-fancybox-count></span>' +
'</div>' +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-social">' +
'<button class="sharefb" title="Share FaceBook" data-share="hello"></button>' +
'<button class="sharetwt" title="Share Twitter" data-share="hello"></button>' +
'</div>' +
'</div>' +
'</div>',
How do I target the custom class sharefb? As I want to dynamically change the data-share attribute.
Thank you!
You event needs to be delegated, you will bubble the click event using a parent element, in my case the body:
$('body').on('click','.sharefb',function(){
$(this).attr('data-share','new value');
});
I found out that I can just do like this inside a fancybox instance inside opts:
afterShow : function( instance, current ) {
$('.fancybox-social .sharefb').click(function(){
//add your js here
});
Related
I am using leaflet popup to triger drawing of various graphs via onEachFeature event:
function onEachFeature(feature, layer) {
layer.bindPopup(content,{minWidth : 800})
.on('popupopen', function (e) {
load_pl_wind(feature.properties.id,map)
})
}
function load_pl_wind generates myDiv object, which is a simple Plotly object. I have set variable content to following:
var content = '<div class="tabs">' +
'<div class="tab" id="tab-1" >' +
'<div class="content" >' +
'<div> id="myDiv"</div>' +
'</div>' +
'</div>' +
'<div class="tab" id="tab-2">' +
'<canvas id="myDiv" class="chart" width="400" height="300"></canvas>' +
'</div>' +
'<ul class="tabs-link">' +
'<li class="tab-link"> <span>Tab 1</span></li>' +
'<li class="tab-link"> <span>Tab 2</span></li>' +
'</ul>' +
'</div>';
I get following output, when I click on any of both links for Tab 1 or Tab 2:
However, if set variable content simply to
var content = '<div id="myDiv" </div>'
I get appropriate output, but without tabs as expected.
How can I display myDiv object inside Tab?
I'm working on the Contentful CMS for posting some data and retrieving it in an html page. I use JavaScript to display those in bootstrap grid columns, but it not showing the data properly.
here is my code:
<div class="row justify-content-center">
<div id="content"></div>
</div>
var client = contentful.createClient({
space: '#######',
accessToken: '#######'
})
var container = document.querySelector('#content');
client.getEntries()
.then(function(entries) {
container.innerHTML = renderProducts(entries.items)
})
function renderProducts(products) {
products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
})
}
It showing the data in console properly, but the HTML is not rendering the way I want.
Heyo. I didn't test I could see two potential issues. renderProducts is not returning anything. You could try changing it to return your mapped products. And then innerHTML expects a string value, which means that you'd have to join your mapped array together.
function renderProducts(products) {
//👇add a return here
return products.map(function(product) {
console.log(product.fields)
return '<div class="col-lg-4 col-md-6">' +
'<a href="service-details.html" class="single-feature wow fadeInUp">' +
'<img src="assets/images/icon/064-vector.png" alt="">' +
'<div class="content">' +
'<h4 class="title">' +
'<p>cool</p>' +
'</h4>'+
'</div>' +
'</a>' +
'</div>'
}).join('');
// 👆 join the array of strings together to one long string
}
I have the below code to bind html in my html page,
<div bind-html-compile="menuButtonView"></div>
I have the below code in my controller,
dashboardService.getTemplateMetaData(data.templateCategory)
.success(function(data) {
console.log(data);
$scope.buttonArray = data.btnArray;
$scope.firstMenuLabel = data.firstMenuLabel;
if (data.firstMenuLabel) {
$scope.menuButtonView = '<obl-menu-group label="{{firstMenuLabel}}" icon="fa-pencil-square-o">' +
'<div data-ng-repeat="btn in buttonArray" >' +
'<div ng-if="btn.menuTitle !=="Site Settings" ">' +
'<obl-menu-button label="{{btn.menuTitle}}" icon="fa fa-file-image-o" menu-function="{{btn.menuFunction}}">' +
'</obl-menu-button></div>' +
'<div ng-if="btn.menuTitle ==="Site Settings"">' +
'<obl-menu-group label="{{btn.menuTitle}}" icon="fa-pencil-square-o" class="md-sub-menu">' +
'<obl-menu-button label="Contact Us" icon="fa fa-file-image-o" click-title="contactUs"></obl-menu-button>' +
'</obl-menu-button></div>' +
'</div>' +
'<obl-menu-group>';
}
}).error(function(err) {
});
}).error(function(err) {
});
The ng-if inside the ng-repeat is not working. I can't see anything wrong in this code. Is there a problem with the quotation marks?
use single quote in ng-if
'<div data-ng-repeat="btn in buttonArray" >' +
'<div ng-if="btn.menuTitle !=='Site Settings'">'+
//Your code
</div>'
'<div ng-if="btn.menuTitle ==='Site Settings'">'+
//Your code
</div>'
'</div>'
When creating a directive for angularjs I often keep my templates as string literals. Sometimes the templates span several lines, so I indent them the way I would indent a html file for better readability.
Here is a very simple example
template: '<div>' +
'<div>' +
'<input ngModel="myText" type"text">' +
'</div>' +
'<div>' +
'<button ng-click="ok()">OK</button>' +
'</div>' +
'</div>',
Unfortunately whenever I reformat the code, Webstorm removes all my hand crafted indents, so the template will look like this:
template: '<div>' +
'<div>' +
'<input ngModel="myText" type"text">' +
'</div>' +
'<div>' +
'<button ng-click="ok()">OK</button>' +
'</div>' +
'</div>',
Is there a setting somewhere or another trick to make Webstorm keep the relative indents in multi line string literals during reformat? Thanks.
You can enable special formatter control comments in Preferences | Editor | Code style and then use them in your code to prevent WebStorm from reformatting it:
// #formatter:off
template: '<div>' +
'<div>' +
'<input ngModel="myText" type"text">' +
'</div>' +
'<div>' +
'<button ng-click="ok()">OK</button>' +
'</div>' +
'</div>',
// #formatter:on
Just like on facebook, I want to make a sidebar that has the names of friends in which the user can click to open up a corresponding message_block that contains a message_tab to open a flyout with the previous messages and form for new ones.
HTML
<div class = "dock">
<div class = "docking_tabs">
</div>
</div>
I have a problem with .append( ) and being able to manipulate the contents inside. This code works fine on the first try. However when I make a new message tab the previously made tab does not respond. Here is what I have:
JavaScript
$('.chat_list').click(function(){
var user_id = $(this).attr('value');
var el = $('<div class = "message_block">'+
'<div class = "message_tab">'+ '</div>' +
'<div class = "message_flyout">' +
'<div class = "message_content">' +
'<div class = "message_header">'+ '</div>' +
'<div class = "conversation_scroll">' +
'<div class = "scroll_content">' + '</div>' + '</div>' +
'<div class = "message_form">' +
"<form method= 'POST' action= 'http://localhost:8000/newtch' accept-charset= 'UTF-8'>" + "<input name='_token' type='hidden' value='2rS54FJZJZhWPplLmBJSH4CsID7Pgec7iPsDtrnm'>" +
'<div class = "message_form">' +
"<input class='input-mini' placeholder='Type a message' name='status' type='text'>" +
'</div>'+
"</form>" +
'</div>'+
'</div>'+
'</div>'+
'</div>');
$('.docking_tabs').append(el);
$('.message_tab').on('click', function(){
$(this).addClass(user_id);
$(this).siblings('.message_flyout').toggle();
});
$('.message_header').on('click', function(){
console.log('clicked');
$(this).closest('.message_flyout').toggle();
});
});
When you do this:
$('.message_tab').on('click', function(){
$(this).addClass(user_id);
$(this).siblings('.message_flyout').toggle();
});
You're not just adding a click handler to the element you just created, you're also adding another click handler to all previously created elements. Which means the "previous tab" now has two click handlers both executing this:
$(this).siblings('.message_flyout').toggle();
Which would essentially cancel one another out.
Instead of adding a new handler every time you create an element, use event delegation to have a single handler for the whole page:
$(document).on('click', '.message_tab', function(){
$(this).addClass(user_id);
$(this).siblings('.message_flyout').toggle();
});
Execute this once when the page loads (instead of in the '.chat_list' click handler). That way there's just one top-level handler for all matching '.message_tab' elements.
So you end up with something more like this:
$('.chat_list').click(function(){
var user_id = $(this).attr('value');
var el = $('<div class = "message_block">'+
'<div class = "message_tab">'+ '</div>' +
'<div class = "message_flyout">' +
'<div class = "message_content">' +
'<div class = "message_header">'+ '</div>' +
'<div class = "conversation_scroll">' +
'<div class = "scroll_content">' + '</div>' + '</div>' +
'<div class = "message_form">' +
"<form method= 'POST' action= 'http://localhost:8000/newtch' accept-charset= 'UTF-8'>" + "<input name='_token' type='hidden' value='2rS54FJZJZhWPplLmBJSH4CsID7Pgec7iPsDtrnm'>" +
'<div class = "message_form">' +
"<input class='input-mini' placeholder='Type a message' name='status' type='text'>" +
'</div>'+
"</form>" +
'</div>'+
'</div>'+
'</div>'+
'</div>');
$('.docking_tabs').append(el);
});
$(document).on('click', '.message_tab', function(){
$(this).addClass(user_id);
$(this).siblings('.message_flyout').toggle();
});
$(document).on('click', '.message_header', function(){
console.log('clicked');
$(this).closest('.message_flyout').toggle();
})
Hi I did some approach here:
Try to replace:
$('.message_tab').on('click', function(){
$(this).addClass(user_id);
$(this).siblings('.message_flyout').toggle();
});
$('.message_header').on('click', function(){
console.log('clicked');
$(this).closest('.message_flyout').toggle();
})
with this:
el.find('.message_tab').on('click', function(){
$(this).addClass(user_id);
$(this).siblings('.message_flyout').toggle();
});
el.find('.message_header').on('click', function(){
console.log('clicked');
$(this).closest('.message_flyout').toggle();
});
Here an example: https://jsfiddle.net/L3xbyeff/1/. Let me know if this is what you need :)
Good luck!