Problem Overview:
I am creating circular div elements to serve as location markers on a map. My code reads the total number of rows from a database table and executes a loop to create that number of div elements, assigning each a div id using data returned from the database. Each div element is appended to a single div class (marker_mother). All of this works perfectly, resulting in a row of circular div elements on the page.
The next step is to make each individual div element draggable. I am using the .each() jQuery method to loop through all div elements in the class (marker_mother) and set them to draggable using the Draggable interaction from the jQuery UI. I have been using the following Stack Overflow Q&A as a reference: jQuery to loop through elements with the same class. However, all my attempts result in the class being set to draggable and not the individual divs. This means that all divs respond as a unified whole when dragged.
Code:
var total_units = "";
$(document).ready(function() {
// Triggers PHP script to return number of table rows from DB
$('#get_rows').click(function() {
$.get('get_coords.php', function(data) {
total_units = data;
console.log(data);
});
});
// Posts row number to DB and returns query data (eg. id and colour)
// Uses returned data in construction of circular div elements
$('#create_divs').click(function() {
for (i = 0; i < total_units; i++) {
$.ajax({
type: 'POST',
url: 'get_row.php',
dataType: 'html',
data: {
row: i
},
success: function(response) {
var jsonData = JSON.parse(response);
jQuery('<div/>', {
id: jsonData.id,
css: {
"position": "relative",
"top": "200",
"left": "100",
"border-radius": "50%",
"width": "100px",
"height": "100px",
"background": "jsonData.colour",
"font-size": "20px",
"text-align": "center",
"line-height": "100px",
"cursor": "move",
"z-index": "100"
},
href: 'http://127.0.0.1/' + jsonData.id + '.html',
text: jsonData.id
}).appendTo('.marker_mother');
console.log(response);
}
});
}
});
// Assigns top&left positions of dragged div to variables
// Code to store coords in db will be added later
var coordinates = function(element) {
element = $(element);
var top = element.position().top;
var left = element.position().left;
}
// Loops through divs and makes each draggable
$('.marker_mother').each(function(index, item) {
$(item).draggable({
start: function() {
coordinates(item);
},
stop: function() {
coordinates(item);
}
});
});
});
/* CSS to define characteristics for the marker div class */
.marker_mother {
position: relative;
top: 0;
left: 0;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 10px;
text-align: center;
color: black;
line-height: 50px;
cursor: move;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
As mentioned in the overview, I have tried multiple implementations of the .each() function to make the divs draggable (including referring to the DOM object and $(this)). All attempts result in the class (marker_mother) being set to draggable and not the individual divs. I feel there must be something simple I am missing here.
Any ideas or suggestions would be greatly appreciated.
Edit:
HTML markup for the created divs end up looking as follows:
<div class="marker_mother ui-draggable ui-draggable-handle"> == $0
<div id="0001" href="http://127.0.0.1/0001.html" style="position: relative; border-radius: 50%; width: 100px; height: 100px; background: lime; font-size: 20px; text-align: center; line-height: 100px; cursor: move; z-index: 100;">0001</div>
<div id="0002" href="http://127.0.0.1/0002.html" style="position: relative; border-radius: 50%; width: 100px; height: 100px; background: lime; font-size: 20px; text-align: center; line-height: 100px; cursor: move; z-index: 100;">0002</div>
<div id="0003" href="http://127.0.0.1/0003.html" style="position: relative; border-radius: 50%; width: 100px; height: 100px; background: lime; font-size: 20px; text-align: center; line-height: 100px; cursor: move; z-index: 100;">0003</div>
</div>
Solution:
haydenwagner provided the solution in an answer below.
$('.marker_mother div').each(function(index, item) {
To me it looks like you are affecting the marker_mother element instead of its children (the divs that you appended).
Try changing this code:
$('.marker_mother').each(function(index, item) {
to this:
$('.marker_mother div').each(function(index, item) {
so that the elements that you are making draggable in the each function are the divs inside the .marker_mother element.
If this works then you can add a '.marker' or '.'marker-draggable' class to these divs so that your selection can be more explicit (with the code above, all divs inside the '.marker_mother' will become draggable). This may not be necessary if you are only appending draggable elements to the '.marker_mother' element.
The issue is that you looping through all elements with the class marker_mother instead of the children. But in this case you don't need the $.each() loop here.
Just tweak your selector and draggable can handle the rest:
// Assigns top&left positions of dragged div to variables
// Code to store coords in db will be added later
var coordinates = function(element) {
var top = element.position().top;
var left = element.position().left;
}
// Loops through divs and makes each draggable
$('.marker_mother div').draggable({
start: function() {
coordinates($(this));
},
stop: function() {
coordinates($(this));
}
});
Example
Related
I have several HTML elements that I need to display a tooltip on hover. These are not conventional HTML elements and come from a generated script on the backend, which I do not have permissions to alter. What I want to know, from a front end perspective, is how I can display a tooltip without declaring this in the HTML.
I tried using Bootstrap tooltips, but you need to declare this in the HTML tag as a title, so it's not useful. So, as the example shows below, I need some text saying 'Action' to appear in a tooltip when you hover over the 'Action' element that contains 'should'. Same will be applied when you hover over the text 'approximate number of' contained in the 'Quantifier' element - the word 'Quantifier' should be displayed. Hope this makes sense.
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
<script>
$(document).ready(function(){
$("Action").hover(function(){
});
$("Quantifier").hover(function(){
});
});
</script>
<body>
So far non-conclusive, as I can only change CSS values and not tooltip text.
You can try updating the title property on those elements. One thing to note is that HTML tags will appear in lowercase when compiled.
$(document).ready(function() {
var style = document.createElement('style');
style.type = 'text/css';
$('head')[0].appendChild(style);
style.innerHTML =
`action, quantifier {
position: relative;
display: inline-block;
margin-top: 20px;
}
action[title]:hover:after, quantifier[title]:hover:after {
content: attr(title);
position: absolute;
top: -100%;
left: 0;
}
action[title]:hover:after {
color: red;
border: solid 1px black;
}
quantifier[title]:hover:after {
color: blue;
border: solid 1px black;
}`;
$('action')[0].title = 'Action';
$('quantifier')[0].title = 'Quantifier';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
</body>
add a tooltip for an tag with JS/jQuery without change the html structure. You can modify the css based on requirement.
jQuery(function($){
//If you are able to add class then use $('.add_tooltip').hover
// use $('Quantifier, Action').hover
$('Quantifier, Action').hover(
function () {
//let text = $(this).html(); //this is for html content of hover element
let text = $(this).prop("tagName");
//Add the tag name of hover element to tooltip div
$(this).append('<div class = "tooltip">'+text+'</div>');
//display the tooltip with animation.
$(this).find('.tooltip').hide().fadeIn('slow');
},
//On hover out remove the tooltip.
function () {
$(this).find('.tooltip').remove();
}
);
});
Quantifier, Action{
cursor: pointer;
position:relative;
}
.tooltip{
display: inherit;
background: black;
margin: auto;
padding: 10px;
position: absolute;
z-index: 1000;
width: 200px;
height: 40px;
color: #fff;
top: 18px;
left:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
One string that <Action>should</Action> work is
<Quantifier>approximate number of</Quantifier> other things.
i have a player soccer field and i want the user to create his own LineUp via Drag and Drop...
have a look at my fiddle: https://jsfiddle.net/ahsce0oj/2/
this is my js code and my fiddle:
$(function() {
$("#draggable2").draggable({
appendTo: "body",
cursorAt: {
cursor: "move",
top: 5,
left: 0
},
helper: function(event) {
return $("<img width='5%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
}
});
$("#droppable2").droppable({
accept: "#draggable2",
classes: {
"ui-droppable-active": "ui-state-default"
},
drop: function(event, ui) {
$(this).find("p").html("<img width='100%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
}
});
});
(there is only one position at the moment, just a test)
----> You have to move the Text (right side) into the rectangle (mean position of my goalkeeper)
but when i have my eleven positions and the "user" is done with his line up draft, how can I save his selection?
with IDs? or every time directly after he dropped an element?
thanks for any hints
Edit: I would be really happy for any other hints how could I delete a dropped player (--> manipulate the DOM—for example delete his shirt and write "GOALKEPPER" instead into a DIV or a <p> Element)
There's a lot of ways to accomplish your goals (pun intended, ha!) here. I will what I would do:
Working Example: https://jsfiddle.net/Twisty/54vgb8bx/4/
HTML Snippet
<section id="content">
<div id="field">
<div id="goalie" class="drop center rear">
<p>Goal Keep</p>
</div>
<div id="rightback" class="drop right mid">
<p>R. Back</p>
</div>
<div id="leftback" class="drop center mid">
<p>C. Back</p>
</div>
<div id="leftback" class="drop left mid">
<p>L. Back</p>
</div>
<div id="rightforward" class="drop right for">
<p>R. Forward</p>
</div>
<div id="leftforward" class="drop left for">
<p>L. Forward</p>
</div>
</div>
</section>
<!-- SIDBAR RIGHT -->
<aside>
<div id="item-1" data-type="shirt" class="drag">
<p>Move me into the rectangle! ! !</p>
</div>
</aside>
CSS Snippet
.drag {
float: left;
padding: 0% 1% 0%;
margin-top: 1%;
margin-right: 0%;
width: 39%;
color: white;
background-color: black;
}
.drop {
border: 2px solid white;
height: 5vw;
width: 5vw;
color: white;
font-size: 13px;
text-align: center;
}
.rear {
position: absolute;
top: 0;
}
.mid {
position: absolute;
top: 150px;
}
.for {
position: absolute;
top: 300px;
}
.right {
left: 135px;
}
.center {
left: 273px;
}
.left {
left: 403px;
}
#field span.remove:hover {
background-color: #000;
border-radius: 8px;
}
jQuery
$(function() {
$(".drag").draggable({
appendTo: "body",
cursorAt: {
cursor: "move",
top: 5,
left: 0
},
helper: function() {
var displayImage = $("<img>", {
width: "5%",
src: 'https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'
}).data("type", $(this).data("type"));
return displayImage;
}
});
$(".drop").droppable({
accept: ".drag",
classes: {
"ui-droppable-active": "ui-state-default"
},
drop: function(event, ui) {
var removeButton = $("<span>", {
class: "ui-icon ui-icon-circle-close remove"
});
var dropImage = $("<img>", {
width: "100%",
src: ui.helper.attr("src")
});
$(this)
.data("type", ui.helper.data("type"))
.data("title", $(this).text())
.find("p")
.html(dropImage);
removeButton.appendTo($(this).find("p")).position({
my: "left bottom",
at: "right top",
of: $(this).find("img")
});
}
});
$("#field").on("click", "span.remove", function() {
var me = $(this).parent(); // p
var parent = me.parent(); // div
var title = parent.data("title");
parent.data("type", "").html("<p>" + title + "</p>");
});
});
First you will see I adjusted the id and class attributes. This allows the drag and drop elements to have much more specific IDs, and then can be styled via CSS in a more generalized manner. I also added more positions to flush out the example of how this can help when initializing the Draggable and Droppable portion.
Second, you may notice I added a data-type attribute to our drag item. This can be a SKU or ID from a database, name of a product, whatever. We can also change the attribute to fit the data better. But this will be how we identify what the user has selected and what that have dropped it on later.
Next, we update the CSS to work the way we might need. Making use of position, I can make the #field our boundary, so that each absolute element within is positioned exactly where it should be.
Lastly, a lot of jQuery code. Not a lot of big changes to our draggables. Consider now that if you have more items, this will apply to each of them based on their class selector. When we make the helper, we tack on the data attribute so that we can tact it to the drop position.
For the drop, we want to do more.
Accept only a drag item
Append in the img
Update the product / ID data
Create a way for user to remove selection
Store the original text if item is removed
It was not clear if this should no longer be droppable, but you could easily add that in, such that you could not drop a new item onto it. But then initial drop again in the remove button.
All this happens in the drop. To avoid confusion (around $(this)), I setup the remove button click function outside of the drop.
This should be enough to get you well along. I suspect you'll make a save or complete button. In this I would advise iterating over each .drop and look for info in the data-type attribute for each as well as the id from the parent div. You can then build an object or array to send the data along to be processed.
The problem:
I have a form with a button underneath it to submit (post) from data with jQuery ajax(). I want for the button to be replaced with a spinner (animated png) for the duration of server ajax call. But such a trivial task is impossible in css to do right.
What i have tried:
I have placed button and image inside a bootstrap row. Ox ajax call I have set button display to none and img display to block. But because this two are not of the same size makes the whole page flicker, breaks the positioning of other elements and so on.
Another idea was to try to place both elements on top of each other with absolute positioning. But, stupid as css is I cannot center it on the middle of the row.
Is there a way to position both elements on top of each other so I can control their visibility?
Please bear in mind that I cannot used absolute position in pixel, because this is a web page and I do not not how wide the browser will be, image can change in the future, text in the button can change in the future, all this things affect absolute size.
If there is another solution to my problem which would prevent the page from jumping up and down it would also be great.
EDIT
Link to one of fiddle experiments:
https://jsfiddle.net/ofb2qdt8/
.button {
position: relative;
margin: auto;
height: 50px;
width: 30px;
background: blue;
z-index: 1;
display: block;
}
.spinner {
position: relative;
margin: auto;
height: 30px;
width: 50px;
background:red;
z-index: 2;
}
This renders second element underneath on screen. Not on different z layer.
Experiment 2:
https://jsfiddle.net/ofb2qdt8/
.button {
position: absolute;
margin: auto;
height: 50px;
width: 30px;
background: blue;
z-index: 1;
display: block;
}
.spinner {
position: absolute;
margin: auto;
height: 30px;
width: 50px;
background:red;
z-index: 2;
}
This does not center both elements, and they are pushed to the top of the containing div. The element with less height should be centered.
Check this working demo: https://jsfiddle.net/ofb2qdt8/3/
Add in a few lines of jquery and update your css.
Position your loading div according to button div's position, width, height using jquery.
*Click the button to see loading div, and try to play the margin of the button to any pixel.
###JQUERY
$(document).ready(function () {
$('.c2').each(function () {
$(this).css({
'width': $(this).siblings('.c1').outerWidth(),
'height': $(this).siblings('.c1').outerHeight(),
'top': $(this).siblings('.c1').offset().top,
'left': $(this).siblings('.c1').offset().left
});
});
$('.c2').on('click', function () {
$(this).hide(0);
});
});
###CSS
.c1 {
margin: 100px auto;
width: 100px;
text-align: center;
padding: 5px 10px;
background: blue;
z-index: 1;
}
.c2 {
position: fixed;
text-align: center;
background: red;
z-index: 2;
cursor: pointer;
}
Rough, ready and untested:
HTML
<div>
<input type='submit' />
<img src="spinneyIMage.gif" />
</div>
CSS
div{ text-align: center; }
div img{ display: none; }
jQuery
$('submit').click(function(e){
e.preventDefault();
$(this).hide().next().show();
});
After the Ajax call completes reverse the above jQuery.
As I haven't been able to find a working solution I have reverted to my first idea which I discarded at first. Albeit with a little twist.
HTML
<div class="row>
<div id="container-button" class="col-xs-12>
<button id="button" onclick="button_OnClick(e)">submit form via ajax</button>
<img src="img/spinner.png" sytle="display: none" />
</div>
</div>
JS
function btnContact_OnClick() {
// show the soinner and hide the button
showSpinner();
$.ajax(
{
type: 'POST',
url: "someurl.com/target",
data: $("#form").serialize(),
dataType: "json",
complete: function() { hideSpinner();},
success: onAjaxSuccess,
error : onAjaxError
});
}
function hideSpinner() {
$("#spinner").hide();
$("#button").show();
// make container height non-fixed and content adjustable again
$("#container-button").height('auto');
}
function showSpinner() {
// THis is the trick !!!
// Make the container fixed height as it was before displaying spinner, so it does not change with content (spinner is not the same height as button
$("#container-button").height($("#container-button").height());
$("#button").hide();
$("#spinner").show();
}
This is not the perfect solution but the best I could make.
Drawbacks:
it is not clean, you have to use javasript to fix what is css layout
problem
it still causes a little flicker
the height of container while displaying spinner is dependant on button, this may cause clipping if spinner is too big
I have a method that creates different layers of canvas within single divs based on data. Sometimes a div will contain more than one canvas within it. These canvas contain an image which is usually a PNG. What I am trying to do is take every canvas within a single div and render as one single canvas so that every div would contain combined canvases if they had more than one within it.
Here is what I am doing:
// Loop through each div that contains canvas and combine them
$(".ifp_container_printing").each(function(index, element) {
var primaryCanvas = $(this).closest('canvas');
var thisOne = $(this);
thisOne.find('canvas').each(function(index, element) {//<!-- grab the canvas for this parent div
var childCanvas = $(this).get();
childCanvas = childCanvas.getContext("2d");
primaryCanvas.drawImage(childCanvas, 0, 0);
});
});
The issue here is when I get to the childCanvas.getCo... it tells me its undefined.
Suggestions or thoughts?
UPDATE:
Here is the example of the div layout I would be grabbing from:
<div class="ifp_container_printing ifp_container_printing_15" style="width:100%;" id="ifp_container_printing_15">
<div class="kineticjs-content" role="presentation" style="position: relative; display: inline-block; width: 1665px; height: 1871px;">
<canvas width="3330" height="3742" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1665px; height: 1871px; background: transparent;"></canvas>
<canvas width="3330" height="3742" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1665px; height: 1871px; background: transparent;"></canvas>
</div>
</div>
Your problem is the wrong usage of closest method. It traverses up to the tree, check the API.
You may rewrite your code like this. This code will draw all canvases in a div on the first canvas in that div.
$(".ifp_container_printing").each(function() {
var allCanvases = $(this).find('canvas');
var primaryCanvas = allCanvases[0];
var primaryContext = primaryCanvas.getContext('2d');
for (var i = 1, len = allCanvases.length; i < len; i++) {
// iterate through all canvases except the first
primaryContext.drawImage(allCanvases[i], 0, 0);
}
});
How to make custom jquery tooltip appear as multiple line that adjusts to fixed width? So it not go in one long line (if 'title' attribute is very long). Because Now if I write long 'title' attribute, tooltip is displayed on one long line and it does not matter what width is set to tooltip element.
My code to get better understanding of what I'm asking:
http://jsfiddle.net/8XttH/
jquery code:
$(document).ready(function() {
$("body").append("<div class='tip'></div>");
$("p[title]").each(function() {
$(this).hover(function(e) {
$().mousemove(function(e) {
var tipY = e.pageY + 16;
var tipX = e.pageX + 16;
$(".tip").css({'top': tipY, 'left': tipX});
});
$(".tip")
.html($(this).attr('title'))
.stop(true,true)
.fadeIn("fast");
$(this).removeAttr('title');
}, function() {
$(".tip")
.stop(true,true)
.fadeOut("fast");
$(this).attr('title', $(".tip").html());
});
});
});
Set a max-width on the tool tip box?
max-width: 100px;
Also set the height to auto so it increases as needed
height: auto;
The text will then wrap to the next line.
See this fiddle
Use this css
div.tip{
position: absolute;
top: 100px;
left: 100px;
width:100px;
border: 2px solid #FF0000;
background-color: #FF9999;
display: none;
padding: 3px;
}
Fiddle: http://jsfiddle.net/8XttH/2/