We Keep Coding

how to show up an hyperlink into html from json

I have this json:
tipo={
"type":"FeatureCollection",
"crs":{
"type":"name",
"properties":{
"name":"urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features":[
{
"type":"Feature",
"properties":{
"pic":"./p2.png",
"nombre":"T2V",
"web":"www.t2v.com"
},
"geometry":{
"type":"Point",
"coordinates":[
-4.45497,
36.692029
]
}
},
{
"type":"Feature",
"properties":{
"pic":"./p2.png",
"nombre":"NETBLUE",
"web":"www.netblue.es"
},
"geometry":{
"type":"Point",
"coordinates":[
-4.427596,
36.713663
]
}
},
]
}
I need to show up the hyperlink of each fields in a popup in html with this code:
`
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
// console.log(props);
this._div.innerHTML = ''
+(props? '<br><img src="'+props.pic+'"style="height:75px; display: block;margin-left: auto;margin-right: auto;">': '')
+(props? '<b><center style="color:#838383; margin-top:10px;">'+props.nombre+'</center></b>': '')
+(props? '<br><b><center style="color:#838383"><a href>'+props.web+'</a></center></b>': '');
this._div.innerHTML += '<br /><img src="link.png" style="background:#FFC627; margin-left:20px; margin-right:15px; margin-top:0px">';
};
info.addTo(map);`
But the problem is that the hyperlink shows up in the popup with the tipical underlines but when i click in the hyperlink, the webpage only refresh, it doesn't go to the respective webpage of the json.

'<a href>'+props.web+'</a>' isn't how the links are supposed to work (in fact, it's invalid HTML)
The href attribute should contain as value the address of the link.
'I am a working link'
Please take a look at the documentation for more informations about the <a></a> tag.
My last sentence could be written in HTML such way
<p>
Please take a look at the documentation for more informations about the <code><a></a></code> tag.
</p>

Bootstrap Tour only loads when I scroll the page

I have a problem with the Bootstrap tour.
My problem
When I redirect from one page to the other the init function will be called but does not automatically continue the tour. So the bootstrap tour gets not displayed. The page contains also an AJAX frame, where content will be loaded after the document.ready.
When I scroll the page a little bit, after the AJAX frame has loaded, the tour gets suddenly displayed.
Code
var quick_tour = undefined, initialized = false;
$(document).ready(function () {
setupTour();
});
function setupTour() {
quick_tour = new Tour({
name: "quick_tour",
storage: window.localStorage,
steps: [
{
element: "#news_container",
title: "Part 1",
content: "This is the Text number 1",
path: ""
},
{
element: "#brand_title",
title: "Part 2",
placement: "bottom",
content: "And this is number 2",
path: "second.php"
},
],
});
initTour();
}
function initTour() {
if (!initialized) {
if (quick_tour === undefined) {
setupTour();
}
quick_tour.init();
initialized = true;
}
}
function startTour() {
quick_tour.restart();
}
So the #news_container for Part 1 will be displayed directly after I clicked on a button which calls the function startTour(). Then after the first part, it will be redirected to the second page. Now the tour does not get displayed, only if I scroll.
What can I do? Can I create maybe a trigger to scroll the page just a little bit?
Thank you.

After I few try's with the event trigger $(window).scroll();, I finally fixed the bug by myself. Now I just updated the initTour function:
function initTour() {
if (quick_tour === undefined) {
setupTour();
}
quick_tour.init();
$(window).scroll(); //Performs an scroll
}

How to get iframeId in a contextMenus onclick event handler?

I am developing a Mozilla WebExtension. I want to inject a JavaScript file only into the frame in which I have clicked on the context menu selection created with contextMenus.create().
I am using:
browser.contextMenus.create({
"title": "Records",
"contexts": ["all","link"],
"id" : "M1",
"onclick": onClickContextMenu,
}, function() { });
function onClickContextMenu(info, tab){
var clickedFrameID=""; //How do I get the actual frameId where click occurred?
browser.tabs.executeScript(tab.id,{
file: "fileName.js",
allFrames: false,
frameId: clickedFrameID
}, function() {
console.log("Script injected");
});
}
How to get clickedFrameID?

After Making so many testing me (Chandrakant Thakkar) and my team leader Mr. Nitin Makwana got the solution for this situation,
First I have injected "messageListener.js" file in all frames from manifest.json file as
"content_scripts": [
{
"matches": ["https://*/*","http://*/*"],
"css":["jquery-ui.css"],
"js": [
"jquery.js",
"jquery-ui.js",
"content_scripts/msg_listener.js"
],
"all_frames":true
}
Then in "messageListener.js" file created "contextMenu" Listener and send message to Background js file when I click contextMenu (Right Click Of Mouse)
as
document.addEventListener("contextmenu", handleContextMenu, false);
function handleContextMenu(event){
browser.runtime.sendMessage("abc#gmail.com",{type:
"onContextMenuClicked", sender:event });
}
here, "abc#gmail.com" is id of my web extension where I want to send message.
Then, In my background js file I have declared on global variable named "clickedFrameID" and in same file I have added onMessage Listener as below
browser.runtime.onMessage.addListener(
function(msg, sender, callback) {
if(msg.type === 'onContextMenuClicked')
{
if(sender.hasOwnProperty("frameId")){
clickedFrameID=sender.frameId;
}else{
clickedFrameID="";
}
}
});
Now I have injected "fileName.js" file in specific Frame as Below
var clickedFrameID=""; //This is a Global Variable
browser.contextMenus.create({
"title": "Records",
"contexts": ["all","link"],
"id" : "M1",
"onclick": onClickContextMenu,
}, function() { });
function onClickContextMenu(info, tab){
var options={};
if(clickedFrameID !="" && clickedFrameID!=null &&
clickedFrameID!=undefined )
{
options={
file: "fileName.js",
allFrames: false,
frameId: clickedFrameID
};
}
browser.tabs.executeScript(tab.id,options, function() {
console.log("Script injected");
});
}
Now "fileName.js" will be injected in specific frame in that I have right clicked.
Thanks #wOxxOm, #MohammedAshrafali, #Makyen to take interest

BB Code List Javascript

I am currently implimenting a easy to edit BB code script which is written up with Jquery / Javascript. Only problem is it's not as easy as I would like and so I need some help.
The script works fine (adding stuff into the textarea). However I am trying to make the presentation a little better.
I would appreciate it if someone could tell me how to unlist the items or at least hide the buttet points (probably do this using css) otherwise I could edit the javascript/jquery.
Also when I scroll over an option (for the bold button) it shows the code to the button (as a title) I would like to remove this but I can't see where on the code I'd edit it.
Here is my javascript code:
// ----------------------------------------------------------------------------
// markItUp!
// ----------------------------------------------------------------------------
// Copyright (C) 2008 Jay Salvat
// http://markitup.jaysalvat.com/
// ----------------------------------------------------------------------------
myBbcodeSettings = {
nameSpace: "bbcode", // Useful to prevent multi-instances CSS conflict
previewParserPath: "~/sets/bbcode/preview.php",
markupSet: [
{name:"<img src='_img/bold_icon.gif'>", key:'B', openWith:'[b]', closeWith:'[/b]'},
{name:'Italic', key:'I', openWith:'[i]', closeWith:'[/i]'},
{name:'Underline', key:'U', openWith:'[u]', closeWith:'[/u]'},
{separator:'---------------' },
{name:'Picture', key:'P', replaceWith:'[img][![Url]!][/img]'},
{name:'Link', key:'L', openWith:'[url=[![Url]!]]', closeWith:'[/url]', placeHolder:'Your text to link here...'},
{separator:'---------------' },
{name:'Colors', openWith:'[color=[![Color]!]]', closeWith:'[/color]', dropMenu: [
{name:'Yellow', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
{name:'Orange', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
{name:'Red', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
{name:'Blue', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
{name:'Purple', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" },
{name:'Green', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
{name:'White', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" },
{name:'Gray', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
{name:'Black', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
]},
{name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[
{name:'Big', openWith:'[size=200]', closeWith:'[/size]' },
{name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
{name:'Small', openWith:'[size=50]', closeWith:'[/size]' }
]},
{separator:'---------------' },
{name:'Bulleted list', openWith:'[list]\n', closeWith:'\n[/list]'},
{name:'Numeric list', openWith:'[list=[![Starting number]!]]\n', closeWith:'\n[/list]'},
{name:'List item', openWith:'[*] '},
{separator:'---------------' },
{name:'Quotes', openWith:'[quote]', closeWith:'[/quote]'},
{name:'Code', openWith:'[code]', closeWith:'[/code]'},
{separator:'---------------' },
{name:'Clean', className:"clean", replaceWith:function(h) { return h.selection.replace(/\[(.*?)\]/g, "") } },
{name:'Preview', className:"preview", call:'preview' }
]
}
Thank you for any help you can give me! :)

Using PHP to parse and a simple script to add in text.

Perhaps you could try to use a composer packagist BB code. See: https://packagist.org/?q=bbcode&idx=packagist&p=0

Backbone JS multiple level navigation example

I'm trying to construct a solid Backbone JS experiment, where I have a local JSON data file which contains my pages (a project I'm doing has this sort of requirement anyhow). And I've coded this example so I can have endless nested subpages in the pages data. It seems to be working great. But when it comes to the URLs, I'm a little stuck.
How do I approach giving this multiple level navigation example totally dynamic URLs? What I mean is, correctly using the url property of the models and collections to construct the right URLs for all the top level and nested elements. Is it even possible? I just can't think how to do it.
See a live demo of where I am now:
http://littlejim.co.uk/code/backbone/multiple-level-navigation-experiment/
Just so it's easier, the source code is below...
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Multiple Level Navigation Experiment</title>
<script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../media/scripts/underscore-min.js"></script>
<script type="text/javascript" src="../../media/scripts/backbone-min.js"></script>
<script type="text/javascript" src="application.js"></script>
<script type="text/javascript">
// wait for the DOM to load
$(document).ready(function() {
App.initialize();
});
</script>
</head>
<body>
<div id="header">
<h1>Multiple Level Navigation Experiment</h1>
<p>Want to get this page structure pulled from JSON locally and have a fully functional multiple level nested navigation with correct anchors.</p>
</div>
<div id="article">
<!-- dynamic content here -->
</div>
</body>
</html>
content.json
{
"pages": [
{
"id": 1,
"title": "Home",
"slug": "home"
},
{
"id": 2,
"title": "Services",
"slug": "services",
"subpages": [
{
"id": 1,
"title": "Details",
"slug": "details",
"subpages": [
{
"id": 1,
"title": "This",
"slug": "this"
},
{
"id": 2,
"title": "That",
"slug": "that"
}
]
},
{
"id": 2,
"title": "Honest Service",
"slug": "honest-service"
},
{
"id": 3,
"title": "What We Do",
"slug": "what-we-do"
}
]
},
{
"id": 3,
"title": "Contact Us",
"slug": "contact-us"
}
]
}
application.js
// global app class
window.App = {
Data: {},
Controller: {},
Model: {},
Collection: {},
View: {},
initialize : function () {
$.ajax({
url: "data/content.json",
dataType: "json",
success: function(json) {
App.Data.Pages = json.pages;
new App.Controller.Main();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
}
// main controller class
// when called it should have 'data' in JSON format passed to it
App.Controller.Main = Backbone.Controller.extend({
initialize: function() {
var pagesCollection = new App.Collection.Pages(App.Data.Pages);
var pagesView = new App.View.Pages({collection: pagesCollection});
$('#article').html(pagesView.render().el);
}
});
// pages model class
App.Model.Page = Backbone.Model.extend({
initialize: function() {
if (!_.isUndefined(this.get("subpages"))) {
this.subpages = new App.Collection.Pages(this.get("subpages"));
} // end if
this.view = new App.View.Page({model: this});
},
});
// page collection class
App.Collection.Pages = Backbone.Collection.extend({
model: App.Model.Page
});
// single page view class
App.View.Page = Backbone.View.extend({
tagName: "li",
initialize: function() {
_.bindAll(this, "render");
},
render: function() {
$(this.el).html(_.template("<%=title%>", {title: this.model.get("title")}));
return this;
}
});
// multiple pages view class
App.View.Pages = Backbone.View.extend({
tagName: "ul",
initialize: function() {
_.bindAll(this, "render");
},
render: function() {
var that = this;
this.collection.each(function(page) {
$(that.el).append(page.view.render().el);
if (!_.isUndefined(page.subpages)) {
var subpagesView = new App.View.Pages({collection: page.subpages});
$(that.el).append(subpagesView.render().el);
} // end if
});
return that;
}
});
I'm just needing so right direction on how to do the URLs properly. The idea I'm wanting is that I can setup my controller for routes so it can expect any page of any nested level. The models, collections and nested collections should be able to generate their URLs on their own, but the hash URL must reflect the level.
Ideally, this navigation would go to URLs like these:
http://example.com/#pages/services
http://example.com/#pages/services/details
http://example.com/#pages/services/details/this
...the URLs using the "slug" from the content.json data. Does any of this make sense? I'm pretty new to Backbone JS and just want to do things right.
Thanks, James

Here's my favorite solution to this problem: use PathJS !

Why not just parse out the slug?
So you can have a single route in the Backbone.Controller that looks like this:
'pages/:id' : showPage
And then showPage looks like:
showPage(id) : function(id) {
parse out the string 'services/details/etc'
look up the slug data based on that IE pages['services']['details']['etc']
}
or if the pages actually need to be processed differently, you can setup multiple routes, ever more granular like this:
'pages/:id' : showPage
'pages/:id/:nest' : showNestedPage
'pages/:id/:nest/:more' : showNestedMorePage