Bootstrap - multiple tooltip binds to the same element ("html") - javascript

I would like to add tooltip to dynamically created div-s. In my case only html tag doesn't change. Simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<script type="text/javascript">
(function(){
$(document).ready(function(){
$('html').tooltip({
"title": function(){
return $(this).attr("a");
},
"selector": ".a"
});
$('html').tooltip({
"title": function(){
return $(this).attr("b");
},
"selector": ".b"
});
});
})();
</script>
<body>
<div class="a" a="testa" style="margin: 100px; width: 20px; height: 20px; background-color:grey;">testa</div>
<div class="b" b="testb" style="margin: 100px; width: 20px; height: 20px; background-color:purple;">testb</div>
</body>
</html>
The first tooltip works, while the second one not. I know work around by using only one bind, but the question is if this is possible to bind tooltip multiple times to the same element (just like it is in the example)?

You can use the tooltip constructor like this for each tooltip you want to run:
new $.fn.tooltip.Constructor($('html'), {
"title": function(){
return $(this).attr("name");
},
"selector":'.a',
});
Here is a JSFiddle

Related

Why jquery-jcrop is destroying my Leaflet map when I use the destroy() function?

I've created a very simple functional example with jcrop that creates a square on an image:
$('#container').Jcrop({
onSelect: function(c){
alert(JSON.stringify(c));
this.destroy()
}
})
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<img src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg" id="container">
In this example, the function this.destroy() works as I expect, it destroys the shadow layer that jcrop creates on my image. So far, everything is fine. However, when I try to do the same thing with leaflet, it doesn't work at all. Here is what I've tried:
var mymap = L.map('container', {
center:[-23.553670644165493, -46.648217439651496],
zoom:18,
maxZoom:19,
zoomControl:false,
attributionControl:false
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);
$('#container').Jcrop({
onSelect: function(c){
alert(JSON.stringify(c));
this.destroy()
}
})
#container{
height: 100%;
position: absolute;
z-index: 0;
}
<meta charset="UTF-8">
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />
<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<div id="container" style="height:100vh; width: 100vw"></div>
I followed the same logic from my first sample, but after selecting a part of the map, the function destroy() is also destroying the Leaflet map (that doesn't happen when it's an image). Does anyone know what could be happening? Could it be a conflict that jcrop has with Leaflet and what I'm trying to do will not be possible without modifying the libraries?
I ended up solving it with a workaround that creates a different div element that uses the same space that the Leaflet map is using... The solution is the following:
var mymap = L.map('container', {
center:[-23.553670644165493, -46.648217439651496],
zoom:18,
maxZoom:19,
zoomControl:false,
attributionControl:false,
renderer: L.canvas()
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);
const id = "aux-container"
createFakeMap(id)
$('#'+id).Jcrop({
onSelect: function(c){
alert(JSON.stringify(c));
this.destroy()
}
})
// auxiliary function
function createFakeMap(id){
const div = document.body.appendChild(document.createElement('div'));
document.body.appendChild(div);
div.setAttribute("id", id);
div.style.height = '100vh';
div.style.width = '100vw';
}
<meta charset="UTF-8">
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />
<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<div id="container" style="height:100vh; width: 100vw; position: absolute; z-index:1"></div>
I've created the div element using Javascript instead of HTML because the destroy function is going to destroy this element all the times that I execute it. With Javascript, I can create it again dynamically when I need it, while not destroying my map and its state.
It looks like you're attaching Jcrop and Leaflet to the same #container element. It looks like calling Jcrop.destroy() is removing everything associated with that element.
Can you use two separate elements for these two libraries? Maybe attach Leaflet to a wrapper or parent element of the one that you're using to call Jcrop.
Here's my version on using two separate elements for the map and the Jcrop component.
<html>
<head>
<meta charset="UTF-8">
<!-- Leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />
<!-- jQUERY JCROP-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
<style type="text/css">
.wrapper {
position: relative;
height:100vh;
width: 100vw;
}
#cropper {
height:100%;
width: 100%;
}
#map {
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.jcrop-holder {
z-index: 600;
background: transparent !important;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="cropper"></div>
<div id="map"></div>
</div>
<script>
var mymap = L.map('map', {
center:[-23.553670644165493, -46.648217439651496],
zoom:18,
maxZoom:19,
zoomControl:false,
attributionControl:false
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);
$('#cropper').Jcrop({
onSelect: function(c){
console.log(c);
console.log(c.x);
console.log(c.y);
console.log(c.w);
console.log(c.h);
this.destroy();
}
})
</script>
</body>
</html>

How to output result of codemirror in iframe?

I am trying to make a HTML code player in which you enter html and get result in iframe. it works good if i only use textarea and output in iframe. but if i use code mirror and try putting coremirror value into iframe it shows me code in iframe instead of showing me result.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="codemirror/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="codemirror/codemirror/theme/neo.css">
<script src="codemirror/codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/codemirror/mode/css/css.js"></script>
<script src="codemirror/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/codemirror/addon/hint/css-hint.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/addon/hint/show-hint.css">
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html><body><h1>Helloworld</h1></body></html>",
mode: "css",
theme: "neo",
extraKeys: {"Ctrl-Space": "autocomplete"}
});
$("button").click(function(){
$("iframe").contents().find("body").html($("#codeeditor").html());
})
</script>
</body>
</html>
Do not take editor contents using jQuery, instead use codemirror method getValue like this:
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})

pickmeup plugin of jquery not working

I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.
Here is my code:
<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
input.pickmeup({ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,
Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :
$('.Reservation .demo').pickmeup({ flat: true })
first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
pickmeup('.Reservation',{ flat: true });
});
</script>
This is my asp.net code
<div class="Reservation"></div> <!-- it will replaced as calander on UI -->
BTW, here your Code, which I refined and it is started showing calendar:
Solution:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
<script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//$('.Reservation .demo').pickmeup({ flat: true });
var input= $('input');
pickmeup('input',{ position: 'right', before_show: function(){
input.pickmeup('set_date', input.val(), true);
}, change: function(formated){
input.val(formated);
}});
});
</script>
This is my asp.net code
<div class="Reservation">
<p style=" float:left; font-size:24px;">Check In:</p>
<input type="text" style="width: 160px; height: 22px" value="17-11-2013" />
</div>
I hope this will reach your requirement.. apply css for styles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Can't link jQuery to HTML

I found related articles here but none of them were useful. I am learning jQuery from codecademy and when I try to practice it by myself nothing happens.
HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
</body>
</html>
CSS looks like this:
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
and Javascript looks like this:
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
There should appear an orange rectangle and when u click it it should disappear, but in fact it only appears and I can't make it disappear. (same example on codecademy works just fine)
P.S some people blame me for bad question and if you think this is a bad one please explain why.
Look like you forgot to add jQuery library - works fine. A suggestion would be to use $(this) inside the click listener so that you hide the same div that you have clicked - see demo below with 2 divs:
$(document).ready(function() {
$('div').click(function() {
$(this).fadeOut('slow');
});
});
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br/>
<div></div>
You didn't add the jQuery library.
That's why it doesn't work.
Try to add :
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
into the <head>
Add this to the bottom of your <body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
<script type='text/javascript' src='MovieSiteBehavior.js'></script>
</head>
<body>
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
</script>
</body>
</html>

dojo fx.fadeIn/fx.fadeOut

Have simple question. Don't know why it's not working. Its should be red box that can fade in and fade out on click, but nothing happens. I'm trying to solve this problem for more then 2 days and i can't see the answer what I'm doing bad :/
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<link rel="stylesheet" type="text/css" href="/dojo/dojo.css" />
<link rel="stylesheet" type="text/css" href="/dijit/themes/tundra/tundra.css" />
<script src="dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
var fadeOutButton = dom.byId("fadeOutButton"),
fadeInButton = dom.byId("fadeInButton"),
fadeTarget = dom.byId("fadeTarget");
on(fadeOutButton, "click", function(evt){
fx.fadeOut({ node: fadeTarget }).play();
});
on(fadeInButton, "click", function(evt){
fx.fadeIn({ node: fadeTarget }).play();
});
});
</script>
</head>
<body>
<button id="fadeOutButton">Fade block out</button>
<button id="fadeInButton">Fade block in</button>
<div id="fadeTarget" class="red-block" style="margin-left: 20px; height: 300px; width: 200px; background-color: red; margin-top: 20px; text-align: center">
A red block
</div>
</body>
</html>
Something with a syntax probably, but i don't know what

Categories