Jquery drag and drop on tabs - javascript

I have 4 tabs and a products list. What I need is to be able move those items from the list to each one of those tabs. The problem I have is that when I start dragging and hover over tab 1 it shows up the domId of the 3rd tab or 4th sometimes even its own domId too and if I drag and hover over 2nd tab, it shows the 4th tab id. Not sure why this is happening. I tried it on a completely separate html page too.
Here is the jsfiddle sample code url

You need to move the code that changes width to 50px into the start function instead of the drag function.
start: function (event, ui) {
$(this).css({
'width':'50px',
'z-index': '50'
});
}
The create method, drag method, and rel_left and rel_top variables aren't needed either. The reason is that draggable needs a width when it starts, by the time it runs the draggable method its still thinking that width is 100%, which is throwing things off.
http://jsfiddle.net/3em7obvL/2/

Related

First slide doesnt show in jQuery Royal Slider within tabs

I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.

How to do a drag and drop on a dynamic list inside a div with scroll?

thanks for your time.
I'm developing a mobile app with PhoneGap. I have a view that has some records, and those records need to be rearranged by doing a drag and drop. The number of this records might variate from 2 to 12, and they are inside a container that implements a scroll by the native properties of css, like this:
div#parentDiv {
-webkit-overflow-scrolling: touch;
overflow: scroll;
width: 100%;
}
Now, the thing is. I have tryied to do this but there seems to be some sort of events conflict. When you tap down or do a "finger down" event, the event that lasts is the scroll of the inner container, instead of being able to drag and drop the inner elements of that view.
I tryied an alternate option that is not acceptable, as you will see in this screenshot:
Here I made a scroll down to the last element of the list.
As you will see, I need to keep both the scroll and do a drag and drop.
Do you have any idea of how can I solve this?
I have tried by using plugins, HTML native drag and drop, and so far, nothing has worked for me.
Thanks again.
I'm not sure I completely understand the problem at hand. But, here's my take on a solution:
window.addEventListener("mousedown", function(e1){
timer = setTimeout(startDrag_disableScroll, 500);
window.addEventListener("mousemove", function(e2){
//if not dragging, and |e1_location-e2_location|
//exceeds a certain threshold, cancel the timer
//otherwise, drag the object, if dragging
});
});
window.addEventListener("mouseup", function(e){
//disable dragging
});
function startDrag_disableScroll(e){
//disable scrolling
//enable dragging
}
Wait until the user clicks on an item
If they hold the same position for a small amount of time (< .5s), we switch from "scrolling" mode to "dragging" mode; if they move too much, we can assume they want to scroll instead, so we don't enable dragging.
Once in "dragging" mode, we disable scrolling by changing the CSS overflow to hidden
Wait until the user releases their finger/mouse before switching back to "scrolling" mode.
Here is a JSFiddle with a complete demo. If you quickly click and drag your mouse, nothing will happen (if you were on a mobile device, it should scroll). However, if you click and hold for .5 sec, scrolling will be disabled and the draggable item will turn red. Once you release the mouse, it should reset.
I assume you also want to be able to scroll whilst dragging. To do this, you'd have to do auto-scrolling with JavaScript. If they drag the item far enough up/down the screen, it will start to auto-scroll up or down, respectively.
Use this.
Drag and drop library for a two-dimensional resizable and responsive list of items.
Almost definitely addresses the problem you are having, and will allow for features & expandability that will definitely be useful as you continue development :)
I would use a TapHold (also known as "long press") event to trigger the "sortable lists".
The user won't be able to sort the list of articles unless he presses for a few seconds on the list. At that moment, he'll be able to order the list items.
You can use any jQuery UI Sortable or any other "sortable" plugin.
If you don't want to use the TapHold, you can use the following code:
var pressTimer;
$(function(){
// By default, disable the sortable list
$("#sortable").mouseup(function(){
// Disable the sortable list
clearTimeout(pressTimer);
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
pressTimer = window.setTimeout(function() {
// Enable the sortable list
},1000);
return false;
});
});

jcarousel horizontal slider with two rows

I have downloaded jcarousel slider but I want two rows to appear and on clicking on next or previous both rows should move simultaneously, i do not know the concepts of javascript and jquery so please tell me the steps to be taken.
Thanks in advance
You mean you need 2 sliders. if you click on 1st slider's next / prev arrow, than both carousal should be effected. is that so?
If yes, then you have to try carousal's inbuilt function for customization.
add 2 carousal slider in your code
hide carousal slider arrow for 2nd slider
now do custumization for your 1st slider arrows. i.e. trigger 2nd
slider whenever 1st slider is triggered. you can try to put your
code inside carousal function:
$('.jcarousel').on('jcarousel:scroll', function(event, carousel, target, animate) {
// "this" refers to the root element
// "carousel" is the jCarousel instance
// "target" is the target argument passed to the scroll method
// "animate" is the animate argument passed to the scroll method
// indicating whether jCarousel was requested to do an animation
});
you can find various customized function from here: http://sorgalla.com/jcarousel/docs/reference/events.html
What do you want to show in the second row?
Is it some info of the current image like description or the count e.g. 2 of 7 or one more set of images.
If it is info(description) you can create a div after your jCarousel container and change the content of the div on next and previous button click callback function.
Post some code to get a clear picture

jQuery UX glitches in CSS dropdown menu

Below is a script with a few bugs and I am trying to work out the kinks. The main bug is a confusion or mix-up between currently selected(hovered) items' sub-menus and previously selected sub-menus.
jQuery(document).ready(function($) {
$("ul.menu > li").hover(
function() {
$(this).find("ul.sub-menu").stop().animate({
height: 'toggle',
opacity: 'toggle'
});
}
);
});
The bug doesn't appear on the initial hover of each parent item but seems to only happen, as can be seen from this fiddle, if hovered over the 2nd parent item, then hover the 1st parent, and then quickly hover into 1st sub-menu, you will see the desired sub-menu disappear, and the previously selected sub-menu reappears. Also, I should also add that if hovered over the 3rd parent item, then hover over the 2nd parent, and then quickly hover into 2nd sub-menu, you will again see the undesired effects, or bug.
Another less detailed bug or glitch is that after the right combination or amount of random hovers 1 of 3 sub-menus permanatly disappears. Basically, the script is very unstable; how can I make this script a rock solid UI? How can these bugs be eliminated to ensure the best UX? Thanks.
Problem is that you are catching the second sub menu while it is still visible and it counts as hovering it once again.
You can solve this pretty easily by updating the z-index for the sub-menu corresponding to the hovered element:
$("ul.sub-menu").css('z-index', 1);
$(this).find("ul.sub-menu").css('z-index', 2).stop()...
http://jsfiddle.net/pF8wZ/6/

How to disable all other events in jquery when animation is in progress

I am writing here againg, because I have some problems with script in my page. I had one problem with menu focus and I write it a week or two ago at this forum, but the awesome script which suggest me one user has one bug and I don't know how to solve it. I have tried a lot's of plausible solutions, but problem still persists.
Here is code at Fiddle, which simulates my problem: http://jsfiddle.net/PRZYN/15/
$(document).ready(function() {
$('#handle').mouseenter(slideIn);
$("#box").mouseleave(function() {
$(this).animate({
left: "-=180px"
}, "fast");
$('#handle').mouseenter(slideIn);
});
$("[name='skin']").mouseleave(function(e) {
e.stopPropagation();
});
});
function slideIn() {
if ($("#box")) $("#box").animate({
left: "+=180px"
}, "slow");
$(this).unbind("mouseenter");
}
As you can see, there is one div (blue-green one which presents left menu pop-up), which show when div get focus and hide when div lost focus.
Problem in this script is, that when are this two divs in animation state and If user very fast move mouse through animation of front end animation and backend the script gets confused and menu start showing and hiding and it's very annoying. Also there are some other ways when menu gets the same bug but I didn't located it very well. I think, that problem also shows when user hover this div and mouse stop at some place - which is different from time to time.
I have located problem somehow, but I don't know how to solve it. I need to disable all other events on this div (but not .animation()) when menu is in animation state and on elements when mouse is not over div and then enable it again when animation complete and user wants again open or hide menu.
I hope, that you understand my question and I will be very happy if someone could help me on that how to solve problem.
Regards,
Miha
You can use .stop() to cancel your animation queue and to prevent the animation from running after the user has stopped interacting with the element. Also, it's better to used fixed values for left, as using += and -= will cause the box to be incorrectly aligned after rapidly mousing in and out of the container. ie use values such as "-180px" and "0px" instead of "-=180px" and "+=180px".
JSFiddle: http://jsfiddle.net/PRZYN/16/

Categories