Im trying to make an image map and i need a tooltip to be showed on mouse hover. the html code is like below.
`<div id="harta">
<img src="/templates/it_thecity/images/map.png" width="620" height="310" class="map" border="0" usemap="#shqiperia" />
<map name="shqiperia" id="shqiperia">
<area shape="poly" coords="266,69,260,74,260,82,255,90,251,97,246,98,246,104,240,103,239,107,240,113,237,116,239,121,243,121,248,123,251,120,252,114,256,115,260,117,263,114,263,109,263,105,265,104,268,104,269,100,271,96,272,91,270,89,267,81,267,75,266,69" href="#" target="_self" alt="Shkodra" title="Shkodër (3)" class="sh masterTooltip" data-maphilight='{"groupBy":".sh"}'/>
<area shape="rect" coords="44,56,122,76" href="#" alt="Shkodër" class="sh masterTooltip" data-maphilight='{"groupBy":".sh","fill":false, "stroke":false}' title="3 Universitete" />
</div>`
And I have a javascript code from a module in my site that show some tooltips on other elements not in image map.
`<script type="text/javascript">
window.addEvent('domready', function() {
$$('.hasTip').each(function(el) {
var title = el.get('title');
if (title) {
var parts = title.split('::', 2);
el.store('tip:title', parts[0]);
el.store('tip:text', parts[1]);
}
});
var JTooltips = new Tips($$('.hasTip'), { fixed: false});
});
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>`
How do I make a tooltip appear on mouse hover on the area elements?
Resolved this question time ago but have forgot to put the answer on.
Here is the solution:
[http://jsfiddle.net/ove4trwa/4/][1]
Related
I need help with an Intel XDK project.
After research I was succesfull to create an autocomplete form.
However, if the user do not select the value from filter list,
and enter the value manually, it is not saved to the variable.
It would be possible to select the value in "data-lastval".
Here is the code that appears in DOM. But with all the research I do, I cannot understand, how to fetch this content of data-lastval and put in into a variable. On selection of the list item it goes saved to a hidden input field and can be stored to localstorage. I need help in building this javascript or jquery mobile selector, like var xstreet = ...
"If"-logic will decide, that the hidden field was empty, and then put "xstreet" instead in this.
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-e ui-corner-all">
<input data-type="search" placeholder="street" data-lastval="2323">
Clear text</div>
Code in src:
<div class="widget uib_w_15 form1widths labelwhite form1forms streetfield" data-uib="jquery_mobile/input" data-ver="0" id="streetfield"><input type="hidden" id="xd">
<ul class="autocomplete" data-role="listview" data-inset="true" data-filter="true"
data-filter-placeholder="street" data-filter-theme="e"></ul>
</div>
Code in the head:
<script>
$('#streetfield ul').listview();
var gcity = window.localStorage.getItem("city");
$(document).on( "pageinit", "#form", function() {
$(".autocomplete").on("listviewbeforefilter", function(e, data ) {
var $ul=$(this);
var value = $( data.input ).val();
var dropdownContent = "" ;
$ul.html("") ;
if ( value && value.length > 2 ) {
var response = ['data1','data2','data3'];
$('.autocomplete').show();
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading' ></span></div></li>" );
$ul.listview( "refresh" );
$.each(response, function( index, val ) {
dropdownContent += "<li>" + val + "</li>";
$ul.html( dropdownContent );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
$(document).on( "click", ".autocomplete li", function() {
var selectedItem = $(this).html();
$(this).parent().parent().find('input').val(selectedItem);
$('.autocomplete').hide();
});
</script>
Well, nobody helped. I think, this may be the solution.
I found it in an other case.
var x = $(#id).attr('data-lastval')
maybe it can help somebody.
I am trying to make div element screenshot, but combined with draggable jQuery, and have no luck, I can take screenshot of div and save it like png, but if I drag some elements on that div and then save screenshot I get only what is inside that div and draggable elements over that div? Any idea, this mine code so far
<script type="text/javascript" src="js/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#myBtn").click(function () {
html2canvas($("#chartDiv"), {
onrendered: function (canvas) {
var imgSrc = canvas.toDataURL();
$("#myDiv").html('').show();
var url = "ajax.php";
$.post(url, {contentVar: imgSrc} ,function(data) {
$("#myDiv").html(data).show();
});
}
});
});
});
</script>
<script>
$(function() {
$( ".draggable" ).draggable();
});
</script>
I am using AJAX to save image and present in new element
AJAX.PHP
$contentVar = $_POST['contentVar'];
$filteredData=substr($_POST['contentVar'], strpos($_POST['contentVar'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('img.png', $unencodedData);
echo "<img src="img.png">";
And here is the HTML:
<div id="chartDiv"><img src="img/assets/logo.png"></div>
<button id="myBtn">Create image</button>
<div id="myDiv"></div>
<img src="img/assets/logo.png" class="draggable" />
<img src="img/assets/logo.png" class="draggable" />
Why not disable the the draggalbe elements before taking the screenshot, then re-enabling them. This will remove the jquery_ui draggable elements and css.
I would like to selecta file and load it in angular js.
Everything work fine, the only problem the image don't refrech. I can see that everything work because when i toggle the on menu on my page with angular.js the image is been refreshing.
Here is my code :
<div ng-controller="TopMenuCtrl">
<button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<input ng-model="photo"
onchange="angular.element(this).scope().file_changed(this)"
type="file" accept="image/*" multiple />
<output id="list"></output>
<img ng-src="{{imageSource}}">
</div>
And the Angular js script :
$scope.file_changed = function(element) {
var files = element.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, photofile; photofile = files[i]; i++) {
// var photofile = element.files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
$scope.imageSource= e.target.result;
};
})(photofile);
reader.readAsDataURL(photofile);
};
}
You must call Scope.$apply when you manually update $scope.imageSource in the onLoad function, because Angular can't guess when you make this change.
I have an array of checkboxes and I would like to use it as an array, for example set single iitems in a group of options and retrieve the values of the group.
For a single checkbox I'm able to set it and get the click event, as an array I don't get anything.
HTML code :
<div class="k-group" id="chkbox-options">
<label>
Red
<input type="checkbox" id="chk1" value="Red" data-bind="checked: colors" />
Green
<input type="checkbox" id="chk2" value="Green" data-bind="checked: colors" />
Blue
<input type="checkbox" id="chk3" value="Blue" data-bind="checked: colors" />
</label>
</div>
Javascript code :
<script type="text/javascript">
var colordata = null;
$(document).ready(function () {
colordata = kendo.observable({
colors: ["Blue"]
});
kendo.bind($("chkbox-options"), colordata);
$("#dump-values").click(function () {
kendoConsole.log(colordata.colors.toString());
});
$("#chk1").click(function () {
kendoConsole.log("click chk1");
if (this.checked) {
kendoConsole.log("click chk1 true");
}
});
});
</script>
I can get the click event on a single checkbox, while I cannot set the values of the checkboxes in kendo.observable in the field var colordata.
I saw a similar example in the kendo documentation but I'm not able to make it work.
Thanks for your help
Marco
couple of points:
1. in kendo.bind # is missing for the div id chkbox-options
2. you need to read the changed colors inside the change event of the the observable object. The change happens after the click event so inside click event you always see the old data.
I have corrected your jsFiddle: http://jsfiddle.net/whizkid747/rPjjJ/4/
var colordata = null;
$(document).ready(function () {
colordata = kendo.observable({
colors: ["Blue"]
});
kendo.bind($("#chkbox-options"), colordata);
colordata.bind("change", function(e) {
var selectedColors = '';
$.each(colordata.colors, function(key, value){
selectedColors = selectedColors + " " + value;
});
if(colordata.colors.length == 0){
console.log('no colors selected');
}else{
console.log('selected colors:' + selectedColors);
}
});
});
I'm building a site which allows users to create an html page which can then be saved and shared on another site. I want them to be able to resize and drag the page elements. I can do this using jQuery, but I'm not sure how I then save that so that when the page is viewed elsewhere, it looks the same.
I haven't decided yet how to store the page info, but what I'm thinking is that I can store each element in the database along with its absolute position, and its contents. Does that sound like a good plan?
If so, how do I get the position for the div to pass to the php so that it can be saved?
Thanks.
JQueryUI Resizable has an event called resize that you can use:
var resposition = '';
$('#divresize').resizable({
//options...
resize: function(event,ui){
resposition = ui.position;
}
});
The same occurs with JQueryUI Draggable and its event drag:
var dragposition = '';
$('#divdrag').draggable({
// other options...
drag: function(event,ui){
dragposition = ui.position;
}
});
resposition and dragposition is going to be arrays. You can see it working here: http://jsbin.com/uvuzi5
EDIT: using a form, you can save dragposition and resposition into hidden inputs
var inputres = '<input type="hidden" id="resposition" value="'+resposition.left+','+resposition.top+'"/>'
$('#myform').append(inputres);
var inputdrag = '<input type="hidden" id="dragposition" value="'+dragposition.left+','+dragposition.top+'"/>'
$('#myform').append(inputdrag);
And in your PHP file to handle the form:
$dragposition = $_GET['dragposition'];
$resposition = $_GET['resposition'];
$dragposition = explode(',',$dragposition);
$resposition = explode(',',$resposition);
Finally, both variables should be arrays with top and left attributes:
$dragposition => [top,left] attributes from draggable
$resposition => [top,left] attributes from resizable
you have to save position at some where so that you can get position
details when next time you open page.
option 1: you can store html elements position details in "localStorage" its default browser storage.
Example: Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/css/jquery-ui.min.css">
<script src="dist/js/jquery-ui.min.js"></script>
</head>
<body>
<script>
var positions = JSON.parse(localStorage.positions || "{}");
$(function() {
var d = $("[id=draggable]").attr("id", function(i) {
return "draggable_" + i
})
$.each(positions, function(id, pos) {
$("#" + id).css(pos)
})
d.draggable({
containment: "#wrapper",
scroll: false,
stop: function(event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
});
</script>
<div id="wrapper">
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div1</div>
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div2</div>
<div id="draggable" class="ui-widget-content draggable" style="height:100px;width:100px;float:left">Div3</div>
</div>
</body>
</html>
option 2: you can store html elements position details in "your database"