I want to use the jQuery Touch Punch plugin to do the following effect:
I have a Div which is only shown a little bit on the left side of my iPad screen. Now I want to use jQuery Touch Punch to pull it out. I can't seem to find how to restrain the properties, so I can write something like:
left-keyframe1: 0;
left-keyframe2: -48%;
I hope you get the idea. Also, when I pull out I want it to animate back when you didn't pull it out over 50%. Is there some documentation about this? I can't seem to find this. I looked through all examples on this site:
http://touchpunch.furf.com/
Thanks in advance!
I have found the solution:
$('.your-div').draggable(
{
scroll: false,
start:function(){$startpos = $(this).position();$(this).css({'transition':'0','-webkit-transition':'0'});},
stop:function(){
$position = $(this).position();
if($position.left > $startpos.left)
{
$(this).animate({'left':'0'});
}
else
{
$(this).animate({'left':'-52%'});
}
$(this).css({'transition':'youramounts','-webkit-transition':'youramounts'});
},
axis:'x'
});
Note: I added transition:0, because I had two eventtriggers and transition is conflicting with the dragfunction. The click and the drag. So on click I changed the css and did an animation via transition. If you do not have "transition" on your element, you don't need to include this.
Related
JQUERY CODE:
$('#selector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('#gaga').toggle
})
PUG CODE FOR #gaga element:
p#gaga
| This is `${Value}`
PUG CODE FOR #gaga element:
How can I use three buttons to toggle the #gaga element on when button is active and off when you click outside the specific button and pass a different Value for ${Value} depending on the clicked button. Plus have only one instance of #gaga element running at a time. Meaning if I click the first button then click the second button only the ${Value} will change but the p#gaga element remains only one. I know I have left out the buttons pug code, I don't think it is necessary in solving the problem. But if needed will provide it.
I tried doing it using switch statements but I have failed. Hopefully someone can help.
UPDATE & EDIT as requested by https://stackoverflow.com/users/463319/twisty in the comments.
Here is the code: https://jsfiddle.net/YulePale/mdvnf0qt/4/
After doing some research I have made some progress... but I am still stuck.
I am trying to make it in such a way that when I click anywhere outside the gender buttons the input disappears and when I click another button it changes appropriately. Also instead of an input I want to show and hide the template in the html code.
Also, if you don't mind is .data() use to assign or get a value.
PS: Got this code from this answer : Fixing toggle with two buttons
and modified it a bit, but I am still not able to achieve my desired result.
If you review the API for Menu, they have a nice _closeOnDocumentClick(). You can simply use this in your code in a similar way.
Example: https://jsfiddle.net/Twisty/0x43bf8q/
JavaScript
$(function() {
$("input[type='button']").on('click', toggleOptions)
.first()
.trigger('click');
$(document).on("click", function(e) {
if (emptyOnDocumentClick(e)) {
$('[name=gender]').val("");
}
});
function toggleOptions() {
var $this = $(this),
onClass = 'button-toggle-on';
$this.toggleClass(onClass)
.siblings('input[type=button]')
.removeClass(onClass);
var gender = $this.filter('.' + onClass).data('gender');
$('[name=gender]').val(gender);
}
function emptyOnDocumentClick(event) {
return !$(event.target).closest("input[type='button']").length;
}
});
Hope that helps.
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
I have a basic JQM page which displays a left side sliding menu when swiping (like the facebook mobile app). It worked fine until I started using scrollview (to properly keep the header fixed). The swipe event is not triggered when I swipe over my page content (it still works if I swipe on the header).
$('.ui-page-active').live("swiperight", function() {
if (!menuStatus) {
showMenu();
}
});
Does anyone has any idea on how to make it work?
Cheers!
I think you might find that the event is consumed in the scrollview control. You can override the javascript handler against that control to allow it to keep bubbling.
To override the function you can use this technique: Overriding a JavaScript function while referencing the original
Having a quick look at the file, it looks like this method could hold clues as to what you want:
_handleDragMove: function(e, ex, ey)
specifically:
var svdir = this.options.direction;
if (!this._directionLock)
I was using the version of scrollview shown here: http://jquerymobile.com/test/experiments/scrollview/scrollview-nested.html
I am using jQuery draggable/droppable to drag (divs) from one list to another. Both lists have a fixed number of list items, and the list items themselves and can either be empty or already contain a div.
I am dragging a div to a list item. If the list item already contains a div then I would like that div to be pushed down to the list item below it - so as to make way for the div I am dragging. I can do this with the "over" event in droppable. But I would like this to happen only after the user has paused there for a cetain period of time, say 0.5 second. How can I do this?
Also, if the user decides not to drop then I would like the displaced item to come back to its original position. Again, what would be the easiest of accomplishing that?
Thanks for your help
William
I just happen to be doing something similar. In my case, I am using the treeTable plugin. I want to expand a collapsed tree if it is hovered for some amount of time. Here is what I have so far. I just happen to be working on this today. Note the use of a timeout to delay the operation.
var timeout = null;
var clear = function() {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
}
$(".selector").droppable({
over: function(e, ui) {
if (! $(this).is("expanded")) {
clear();
timeout = setTimeout(function() {
$(this).expand();
timeout = null;
}, 1000);
}
}
, out: clear
, drop: function(e, ui) {
clear();
...
}
});
I'm still having a problem with this. After one branch gets expanded, the rows below it get pushed down to make room for the expanded branch. I haven't dropped yet and so I go hover over the first new element in the expanded branch. The problem is that this element does not get the hoverClass, the first element that got pushed down below the new branch gets it. It is like jquery doesn't figure out that it got moved down. I imagine that you are likely to encounter this problem given what you've described.
I was on jquery-1.4.2 but then I updated to jquery-1.6.4 to see if that would fix the problem. Both versions exhibit the same behavior. Also, I tested this in Chrome 14.0.835.202, Opera 11.52, Firefox 3.6.23 and IE7.0.5730.13. It happens the same way in all of them. So, either jquery has a bug or I've done something to cause this.
About your second question. I'm not sure I completely understand what you're going after. Are you looking for the
I am currently using JQuery UI for several UI elements on my site. Is there a way to make the highlight and error bars thinner?
I am referring to the two things found in the lower-right here.
I imagine there should be a CSS property that I can change to fix this, I just can't seem to find it.
Solution: .ui-state-highlight p { margin-top:3px; margin-bottom:3px; }
On the jQuery page there is a margin on the p tag in the content. It should conform to the content that you are inserting. Can you post the problem you are having.