I've a list of names here, and using jquery's tooltip to show profile photo on hover. However, when I hover, the images are appearing too far, and left aligned to the screen.
Can anyone give me an idea ?
http://reveillon.formationweb.net/after.php
I have tried to make a fiddle here : http://jsfiddle.net/JeremyCh/ZZzG7/ but here the images are not even visible, the above link after.php, images are seen to the left.
<ul id="quiviennent">
<li><a id="sabah" title="">Sabah</a></li>
<li><a id="elicia" title="">Elicia</a></li>
<li><a id="celine" title="">Celine</a></li>
<li><a id="audrey" title="">Audrey</a></li>
<li><a id="bruno" title="">Bruno</a></li>
<li><a id="saidou" title="">Saidou</a></li>
</ul>
$( "#sabah" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/sabah.jpg" />' });
$( "#elicia" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/elicia.jpg" />' });
$( "#celine" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/celine.jpg" />' });
$( "#saidou" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/saidou.jpg" />' });
$( "#bruno" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/noimg.jpg" />' });
$( "#audrey" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/noimg.jpg" />' });
#quiviennent li a { cursor: pointer; }
Thanks
Jeremy
You can use the position option to specify where you want the tooltip to appear in relation to the element it's attached to.
For example
$( "#sabah" ).tooltip({
content: '<img src="http://reveillon.formationweb.net/images/sabah.jpg" />',
position : { my: "left+100 center", at: "left center" }
});
puts the photo slightly to the right of the list.
Related
So I have an unordered list of draggables that I want to drag into another unordered list of droppables. If I clone the draggable and append it to "body", then I can drag it out of its container and drop it on the droppable elements in the other list, but it does not automatically scroll through the droppable unordered list. If I clone and append to the other unordered list, then it will automatically scroll the droppable list, but the element is not visible when dragging until it is hovering over the droppable list. Does anyone know of a workaround or a better approach to this problem?
Fiddle with code here: https://jsfiddle.net/bkfxjnom/6/
Draggable code:
$('.draggable').draggable({
helper: 'clone',
appendTo: "body",
zIndex: 100,
refreshPositions: true,
revert: 'invalid',
start: function(event, ui) {
$(this).css('visibility', 'hidden');
},
stop: function(event, ui) {
$(this).css('visibility', 'visible');
}
});
Droppable list html:
<ul class="list-group" id="root" style="overflow-y:scroll; height: 150px">
<li class="list-group-item category-droppable" id="level1">
<span class="glyphicon glyphicon-chevron-right"></span>FirstLvL
<ul class="list-group" id="level1">
<li class="list-group-item category-droppable" id="level2">
<span class="glyphicon glyphicon-chevron-right"></span>SecondLvL
<ul class="list-group" id="level2">
<li class="list-group-item category-droppable" name="A" id="level3">A</li>+++ many li elements
</ul>
</li>
</ul>
</li>
</ul>
Thanks in advance!
So the workaround I ended up using for this was to append the clone to the container I wanted to be scrollable, as well as containing it there.
Then I made another clone that I offset on drag with the mouse, of which is positioned absolutely. Sort of a hacky solution, but it works.
$('.draggable').draggable({
scrollSensitivity: 35,
scrollSpeed: 28,
containment: "#root",
helper: "clone",
appendTo: "#root",
zIndex: 5000,
refreshPositions: true,
start: function (event, ui) {
parent = $(this);
$(this).css('visibility', 'hidden');
$(ui.helper).css('visibility', 'hidden');
clone = $(this).clone();
clone.addClass("ui-draggable-dragging");
clone.css('visibility', 'visible');
clone.css("position", "absolute");
clone.css("z-index", 5001);
clone.prependTo($(".dragging-area"));
$("#unprocessed_list").droppable("disable");
},
stop: function (event, ui) {
clone.animate($(this).offset(), 500);
setTimeout(function () { clone.remove(); parent.css('visibility', 'visible'); }, 500);
$("#unprocessed_list").droppable("enable");
},
drag: function (event, ui) {
clone.offset({ top: event.pageY - clone.height(), left: event.pageX - clone.width()/2 });
}
});
I'm trying to create dynamic dialog, with one input field and with some texts. Problem is, that dialog remembers value of old input fields and is not updating them. I created JSfiddle example of my problem. If you click on <li> element than dialog will come up. There is one input field, that is changing content of <li> element and some pointless text. Problem comes if, when you change content of input field and save it, from this time is stopped being dynamic and become pure static field. I totally don't understand why. PS Sorry for my bad english
HTML
<div id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text
</div>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
JavaScript
$('li').click(function () {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function () {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
},
Storno: function () {
$(this).dialog('close');
}
}
});
jsfiddle
Change the dialog to a <form>, then use its reset() method.
$('li').click(function() {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function() {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
this.reset();
},
Storno: function() {
$(this).dialog('close');
this.reset();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text</form>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
I think you can easily achieve what you want to achieve by setting the input value with the jquery val() method on the input.
Here is what i mean
Change this
$('#xxx').attr("value", $(this).text());
to this
$('#xxx').val($(this).text());
And here is a working jsfiddle http://jsfiddle.net/gzx3z6e5/
I am using JQuery UI for drag and drop in my project.
On the draggable element, I have Bootstrap (3.x) tooltip.
Moving the mouse over the draggable shows the tooltip.
I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success.
Here is jsfiddle setup of the whole thing. Link: http://jsfiddle.net/mddc/6md9h/18/
<div id="draggable" class="ui-widget-content">
<div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts.">Drag me</div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Here is javascript code:
$(function() {
$( "#draggable" ).draggable({
start: function(event, ui) {
//this is what I hope to work, but not working!
$(ui.helper).find('[data-toggle="tooltip"]').tooltip('hide');
},
helper: 'clone',
revert: "invalid"
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$('[data-toggle="tooltip"]').tooltip({
'animation': true,
'placement': 'bottom'
});
});
Thanks for any help!
You can hide you tooltip child element.
Code:
$( "#draggable" ).draggable({
start: function(event, ui) {
$(ui.helper).find('.tooltip').hide();
},
helper: 'clone',
revert: "invalid"
});
Demo: http://jsfiddle.net/9RwHh/
Why not just use
start: function(ev, ui){
$('.tooltip').remove();
}
At one point there will be only one element with "tooltip" class available in the document. So it should be a safe bet to just remove it.
I'm working in jquerymobile v1.3.2,Phonegap 2.9.0
i am getting photos from ajax webservice which is working fine. Now want to implement lightbox I get photos from ajax and concatenate in div. Here is my code. I have used this photo lightbox from jquerymobile demo help.
//var contenttype;
//var cookies;
//var aGallery;
var ItemsCount=photolink_arr.length;
var divGallery = document.getElementById("Gallery");
for (var i=0; i < ItemsCount; i++)
{
$.ajax({
type: 'get',
async: false,
url: photolink_arr[i],
dataType: "json",
contentType: contenttype,
headers: {Cookie: cookies},
success: function (data){
var photo= data.image_link;
var thumbphoto= data.thumbnail_link;
aGallery += ' <img class="popphoto" src="' + thumbphoto + '" alt="Photos" style="width:30%">';
aGallery += ' <div data-role="popup" id="popupPhoto' + i + '" data-overlay-theme="a" data-theme="d" data-corners="false">';
aGallery += ' Close<img class="popphoto" src="' + photo + '" style="max-height:512px;" alt="Paris, France"> </div>';
divGallery.innerHTML = aGallery;
},
complete: function() {
console.log ('LoadphotosView function complete');
},
error: function (request,data)
{
alert("load albums error request=" + JSON.stringify( request));
}
}) ;
}
html
<div id="ViewPhotopage" data-role="page" class="RedScreen">
<script type="application/javascript" src="js/AlbumCategory.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
console.log('Photo view device ready started');
tabBar.hide();
});
$(document).ready(function(){
console.log('albums category document ready');
LoadAlbums();
});
$( document ).on( "pageinit", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
</script>
<div id="Header" data-role="header">
<a data-rel="back" data-role="button" data-inline="true" data-theme="b">Back</a>
<h1>Photo View</h1>
<a rel="external" data-role="button" href="PhotoAdd.html" data-inline="true" data-theme="b">Add</a>
</div>
<div id="Gallery" data-role="content" class="gallery">
<div style='font-size:14pt;color:#fff;'>Loading..</div>
</div>
</div>
the images and popups both are shown hyper link is also not working. i only want to show thumbnail and on click large image should be shown in lightbox. i think i have to refresh div just as listview in jquerymobile.I have worked with photoswipe and the problem is same.Do you suggest anything or give Any alternative.
I'm trying to add an additional class to my jQuery dialog with the dialogClass property. Here's the javascript:
$(function(){
$( "#toogleMAmaximized" ).dialog({
title: 'Missions and Achivments',
autoOpen: false,
height: 500,
width: 700,
modal: true,
dialogClass: 'noPadding',
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
})
$( "#toogleMAminimized" ).click(function() {
$( "#toogleMAmaximized" ).dialog( "open" );
$( "#toogleMAmaximized" ).dialog({dialogClass:'noPadding'});
});
})
<div id="toogleMAminimized" style="" class="noPadding">
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div>
</div>
Just in case you need it, my html code
<div id="toogleMAmaximized" >
<div id="missions">
<div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone"> </div>
</div>
<div id="achivments">
<div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done"> </div>
</div>
</div>
As you can see, I've tried to add the class in many ways, I've tried all possible combinations but keep getting the same result: no noPadding class
Your noPadding class is being added successfully to the dialog. I have confirmed this by placing your markup and scripts within a fiddle, and loading jQuery UI 1.8.16 (the version you were testing with). This test is available online at http://jsfiddle.net/QHJKm/3/.
I suspect the confusion here is with the expected effect noPadding is going to have on the dialog itself. It could be that you interpreted its lack of effect as an indication it wasn't added to begin with. As you'll note in my example, I've got with a rather bold style, a red background. This quickly confirms that the class is indeed being added to the dialog.