Is it possible to make an automatic drag (whitout mouse-drag) with jquery draggable?
I´m thinking:
Load elements from db using php.
Find element with jquery and move it to position stored in db.
JS
$(document).ready(function){
$('#element').draggable({
automatic move to position:
top: 22
left: 22
});
How else should i load my stored element positions?
I drag elements from one div to another.
Define the position of your element with css.
For example:
$(document).ready(function){
$('#element').draggable();
$('#element').css({'top': x, 'left' : y});
});
Take a look at this example
Hope it may helps you.
Related
I am using intro.js to set up a tour of my website, and I would like to set the default placement of the tooltip (when not attached to any element) near the top of the page instead of the vertical center.
It doesn't look like there is an option to set it directly, but is there a way to do it changing the CSS? (or by editing the source, although that's kind of a last resort).
I needed to do something similar. Not elegant, but it works.
In the API documentation, there's an onafterchange method. Give it a callback function and it will get fired each time a step is displayed.
If the tooltip has a target element, the callback's argument contains that element. If the tooltip doesn't have an element, the argument contains an element with the class introjsFloatingElement. So, you just need to check for the presence of that class on that element. If it does, you can tweak the styles of the tooltip elements.
var help = introJs();
help.onafterchange(function(targetEl){
targetEl = jQuery(targetEl);
// check if it's a floating tooltip (not attached to an element)
if(targetEl.hasClass('introjsFloatingElement')){
// adjust the position of these elements
jQuery('.introjs-tooltipReferenceLayer').offset({top : 120});
jQuery('.introjs-tooltip').css({
opacity: 1,
display: 'block',
left: '50%',
top: '50%',
'margin-left': '-186px',
'margin-top': '-91px'
});
jQuery('.introjs-helperNumberLayer').css({
opacity: 1,
left: '-204px',
top: '-109px'
});
}
});
// add your steps
// ...
help.start();
Note:
I first tried onbeforechange, but that didn't work. Not sure why.
At first, I tried to adjust the introjs-tooltipReferenceLayer element only, but the nested elements (introjs-helperNumberLayer and introjs-tooltip) were not positioned correctly on first display. I had to inspect those elements on subsequent displays to get the proper stylings.
Tested with intro.js 2.5.0. Element classes aren't part of the api spec, so I don't know how future-proof this solution is.
I looked into the intro.js documentation. you should be able to just add this line of code to your script.
introJs().setOption("tooltipPosition", "top");
I am trying to create a function that sends images back and forth between the two div elements by double clicking on the image . You should then be able to drag pictures freely in the second div element. Then you can double- click the image again to send the image back to its origin div elements. Here the problem arises . When I send back the image it assumes a different style position . How do I get the picture to get its old style position?
Ok, I guess I got what you mean.
After you drag your image around the #dropbox, jQuery adds an inline style to it to preserve its position after you drop it. Something like style="position: relative; right: auto; bottom: auto; left: 73px; top: 52px;". So when you doubleclick, the image is moved to #imagebox still having these positioning styles.
To prevent this, you can just reset these style props in your doubleclick handler like so:
$(e).css({ "top": "auto", "bottom": "auto", "left": "auto", "right": "auto" });
Here's the demo: JSFiddle
You don't need to detach if you're also using appendTo. DOM nodes can only have one parent, so moving them to a new parent necessarily also removes their old one (so they can't exist in two places at once)
As for the image position, your appendTo call appends an image to its new parent, so it'll always end up being the last element in the child set. If you don't want that, then you should not use appendTo, but use code that inserts the image in its original position, whatever that was before you sent it over (so remember to record the image position somewhere if you care about preserving it)
I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle
In order to verify if an element is aligned center, I was trying to get CSS property/values of the element. I am entirely a newbie to javascript, so I would like to seek your help in fetching the css property in order to verify text alignment using javascript.
Take a look at jQuery offset()
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.
Combined with documentation found
how to get right offset of an element? - jQuery
To get the offset values from jquery
Get bottom and right position of an element
You'll be able to achieve your goal of verifying if an element is aligned (postitionned) center.
For your other point of verify text alignment using javascript :
if ($('#yourElement').css('text-align') == 'center')
{
// true
}
Carry on
If you mean vertical alignment - you can't, no such thing exists outside tables.
If you want to get the horizontal alignment you can use 'text-align'.
document.getElementById('idOfElement').style.textAlign will return the alignment 'left', 'right', 'center', 'justify' etc.
Its even simpler with jQuery:
$('#idOfElement').css('text-align'); will return the same.
but for jQuery to work you need to include the script here
I have two separate <p> elements and what I want to do is have it so they can be clicked on, dragged, and dropped in a new location. And when they are dropped I want them to send their css left: and top: values to the console.
They start off with top: 0,left: 0. I want their final reported top and left values to be relative to their initial position. So if I drag and drop one 5 pixels to the right and 15 pixels down from their original position I want it to return top: 15, left: 5.
I'm also using jQuery if that would make this any easier to pull off. So how do I go about doing this?
Also, ideally I want them not to be accidentally selected with the text cursor when dragging and dropping. Is there a way to make them act like divs or maybe cover them with a div that fits to their shape and is above them but invisible?
Look at jquery ui droppable: http://jqueryui.com/demos/droppable/