I've a main div of which inside I've some more divs. I want the inner divs to be draggable inside the main div and when saved, saves their positions.
Can anyone help me on how to save the positions? [Permanently, not just for the current session]
You can do it with jQuery UI: http://jqueryui.com/demos/draggable/#constrain-movement
You can get the position of each div, fetching the left and top css attributes. You can see the jQuery documentation: http://api.jquery.com/position/ and use:
var obj = jQuery("#inner_div").position();
var coord_x = position.left;
var coord_y = position.top;
Finally, if you want to update some input you can do it adding a callback to the stop event of the draggable interaction of jQuery UI. Hope that helps!.
Related
I have created a horizontal journey, which is guided by icons. Later each icon will contain some information.
By clicking the arrows the visitor can guide itself through the journey:
How can I sync the icons inside the image and the buttons beneath, while making the buttons beneath also clickable?
Currently I trigger the arrows using .next() and .prev() to navigate:
var nextIcon = function() {
var windowWidth = $('#image-holder').width();
var current = $('#image').find('.current');
var next = current.next();
current.removeClass('current');
next.addClass('current');
var offsetLeft = - (next.position().left) + (windowWidth / 2);
$('#image').css({"margin-left": offsetLeft});
}
which does not work for the buttons below, I could for example jump from the first to the fourth icon on click.
CODEPEN DEMO
I have seen a lot of "indexes" using i++ inside sliders, but do not know how to adopt or create this. Is this a good idea for my case?
I have solved it using a slider similar approach by indexing my elements. Using jQuery .eq() it was quite easy to navigate through my elements.
Working demo
I got the idea using Sitepoints "Making a simple image slider with jQuery"
I have a book type project. I have functions that all users to add annotations to pages, and if necessary drag and drop to make adjustments in their position. The d & d is working successfully. I have a mouseup event bound to the drag div to capture the new location such as left , top etc...
This works fine, later I trigger a function to index all the divs (annotations) present on the page based on class "rect"
$.each('.rect',function(){
addToIndex(this)
})
I store all the div properties in an index so they can be recreated when the user returns to the page. This works fine if the div has not been dragged. All properties are correct and can be recreated on the page later.
However if the div has been dragged the div still retains the original properties not the new dragged-to location.
For some reason the dragged div is not being updated in the DOM.
I can trace the properties for the div after dropping and they are updated
otherwise the div would not be displayed where it was dropped.
How can I force the dropped object to be updated in the DOM using jQuery ?
Do I have to work directly in the DOM in this case instead of jQuery ?
Okay here is more detail
Once the drag object is dropped I capture position and then want to add this as data to the element...snippet here
// capturing the literal position of element after dragging
var lx = $(obj).position().left - offPos.left
var uy = $(obj).position().top
var ux = $(obj).position().left - offPos.left + $(obj).width()
var ly = $(obj).position().top + $(obj).height()
var rb = new Array(lx,uy,ux-lx,ly-uy)
var rbstr = rb.join(",")
// before dragging rbstr value is 593,31,135,40
console.log(rbstr) // outputs 948,13,135,40
//updating the element with new data here
$(obj).attr("data-rb",rbstr)
console.log(rbstr) // outputs 948,13,135,40 which is correct
// everything here indicates the element has been updated
But when I try to read all the elements with the same class to store their properties the updated element's properties are not updated but just as they where before the drag and drop.
$.each('.rect',function(){
var allData = $(this).data()
console.log($(this).data())
// is correct for all elements except the dragged element
pageAnnots[thisDoc.currentPage].push(allData)
})
Hope this gives more detail about the problem.Note I can resize the 'rect' and the data gets updated just fine.
Seems to me when the 'rect' is dropped it is a proxy, and updating the data is not happening on the original dragged 'rect'
UPDATE: I found the problem - I was assigning data using
$(this).attr('data-x',n)
but then retrieving the data using
$(this)data()
Apparently if you assign data using 'attr' you have to likewise retrieve it using the same 'attr' method
HTML
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<input type="Button" name="" value="nextPage" id="next">
</body>
jQuery
$(function() {
$("#draggable").draggable();
$("#next").on("click",function() {
var top = $("#draggable").css("top");
var bottom = $("#draggable").css("bottom");
var left = $("#draggable").css("left");
var right = $("#draggable").css("right");
//send them to next page
});
});
Hope this was what you wanted. The dragable function adds a style attribute to div, if that was what you meant by update DOM.
I'm using a simple jQuery image slider (Owl Carousel) to show a list of speakers at a convention with photos, and I'm trying to find a way to overlay text associated with each speaker onto a div placed above the slider. I have a mockup page here. As you can see on the mockup, I have two primary divs-- i.e. div#sit and div#carousel-sit; within the former I have an container with the class .sit-quote-container into which I'd like the quote text/markup injected. I would like this overlay text to pull from the paragraph elements with the .sit-quote class that exist for each speaker.
In addition to the problem of displaying the appropriate text within the container div, I'm seeing that placing the .sit-quote paragraph within each slide is causing a gap to appear under the speaker name (the grey box underneath) and I have no idea why this is happening given that I've set .sit-quote to display:none. I'm wondering if perhaps I need to move the elements containing the quotations out of the slider markup altogether (?)
As for the actual hover function, this is what I have so far, with the help of another SO user; but it doesn't seem to be working:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container");
}, function(){
$(".sit-quote-container").html(""); // this clears the content on mouseout
});
Ultimately, I'd like the quotes to fade in/out positioned within the main div. Thanks for any assistance, and please let me know if I need to provide further clarification as to the aim here.
you should first visible that quote
try this:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").show(); // Here you should show the quote
}, function(){
$(".sit-quote-container").html("");
});
if you want to fade in:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn(); //Here if you want to fade the quote
}, function(){
$(".sit-quote-container").html("");
});
Use the below script to pull the text from .sit-quote p tag of the hovered item and display it in the .sit-quote-container
UPDATE
If needed wrap the quote in a para tag and to avoid complexity use a different class name, in this case .sit-quote_inner.
CSS : .sit-quote_inner{ display:none; }
JS
$('.sit-carousel-container .owl-item').hover(function(){
var quote = $(this).find('.sit-quote').text(); //Only text not the p tag
quote = '<p class="sit-quote_inner">' + quote + '</p>';
$('.sit-header .sit-quote-container').html(quote);
$('.sit-quote_inner').fadeIn(); //Add this
},function(){
$('.sit-header .sit-quote-container').html('');
});
The carousel seems to be dynamically injecting clones of the slides. In this case, you might want to delegate your event handler so that it works with the dynamically generated slides.
Also, if you want to fadeOut the text, you should remove it in the complete callback of fafeOut instead of simply emptying the html Try
$(document).on("mouseenter",".slide-sit",function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn("slow");
});
$(document).on("mouseleave",".slide-sit", function(){
$(".sit-quote-container")
.find(".sit-quote")
.fadeOut("slow",function(){ // Fadeout and then remove the text
$(this).remove();
})
});
The gap (grey background) is the background of .slide-sit, which is visible due to the margin-bottom: 15px; applied on the paragraph containing name (style rule .item p main.css line 67 it seems), removing this will fix the issue.
Update
It'd be better if you keep a .slide-sit inside the .sit-quote-container so that you can fade it in/out properly using the below script.
$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
var content = $(this).find(".sit-quote").html();
(".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});
$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
$(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});
I am trying to create a simple text accordion which calculates each panel's height and return this value as a variable. I can get values with if statements like if ( i === 0 ) { $(this).height(); } but can't get this variable to the outside.I can do this without using variable but it became useless in long term.
Brıefly: I want to calculate each element's height and use this variable inside click function.
Here is jsFiddle which includes the problem.
var panel = $('.holder div');
var trigger = $('a');
panel.each(function(i) {
//problem starts when i try to calculate each ele's height
var eachEleHeight = i.height();
trigger.click(function() {
$(this).prev('div').animate({'height':eachEleHeight+'px'},500);
//this works widthout var eachEleHeight but became useless
//$(this).prev('div').animate({'height':'300px'},500);
});
//this is for hiding text at doc.ready
panel.css('height','56px');
});
If I well understood, try this :
panel.each(function(i, el) {
// create a reference to te current panel
var $el = $(el);
// execute a function immediately, passing both the panel and its height
(function(p, h) {
// the trigger is targeted as the next link after the current panel
p.next('a').click(function() {
p.animate({ height : h + 'px'},500);
});
}($el, $el.height()));
// set each panel height
$el.css('height','56px');
});
Example fiddle : http://jsfiddle.net/Aw39W/55/
There is a problem with the code you posted. i is the index of the current element. Not the element itself.
Try var eachEleHeight = $(this).height();
Fiddle
The sequence of events you've used seems a bit weird. You're actually binding a click event to all a tags for each panel element. Try this: Fiddle
I just used the min-height and max-height css attributes to store the initial to/from height variables. This will automatically get you your starting heights.
If I understand the question, you want to have the elements height for the accordion animation function. This is a trick but it works. I frequently use Mootools so I'll write using it. You should be able to figure it out.
var orgHeight = i.offsetHeight;
i.setStyle('height','100%');
var eachEleHeight = i.offsetHeight;
i.setStyle('height',orgHeight);
Essentially you would be flipping the element to reveal it's height and flipping it back before the document has time to make it visible on screen.
Not sure this is exactly what you were looking for, but hope it helps.
I'm making a simple lightbox. If you click on an image, it takes that image and shows it full screen with a black background behind it.
Here is my code:
$('.theContent img').live('click', function(e) {
var lbImg = $(this);
$('#lb').toggle();
$('#lb').find("#lbImg").append(lbImg);
)
Thing is, it takes away the variable lbImg and puts it in the lightbox. I dont want that, i just want to copy that bit of info and duplicate, rather than reposition. How would you go about that?
Use the .clone() method to copy the element:
var lbImg = $(this).clone();
Normally, when an element is re-appended, it is removed from the previous location. When an element have to be appended without removing it from the previous spot, it has to be duplicated.