A long time ago I created a dialog box in my application. The dialog is pretty simple, position absolute, centered in the screen via javascript.
Now I have added jQuery UI to the application but I do not want to use jQuery UI's dialogs just because they work differently. But I did make my dialog draggable using jQuery UI as it is very easy:
$('#dialog').draggable();
There is one problem with that, some of my dialogs have scrollbars.
But using the draggable method, if there is a scrollbar, it bugs because it drags the dialog.
Is there a way for the dialog to not drag while using the scrollbar ?
I noticed there are some ways to avoid elements to be dragged, but scrollbars are not elements.
Thank you
EDIT: JSFiddle: http://jsfiddle.net/FGXnR/
As a workaround, you could try using the handle option and only make the dialog draggable by the parts that aren't scrollable. (The title or some such.)
jsFiddle Example
Another solution that #AlexFigueiredo pointed out involves just wrapping the content / handle in a div that handles the sizing and scrolling – that seems stop the click event from being sent to the handle.
Related
I am learning HTML5 and Bootstrap, I have my parent container(fluid) inside which I have 3 div, I always use the code of bootstrap class(col-md/xs/sm/lg) to show how the UI should be for different view-portal
but how can I dynamically re-size these div using mouse drag over its borders? I mean like enlarging a image.
Also by increasing one div size the other two should dynamically re-size themselves within the container.
Is there any JS code which I can download? is there any thing to learn that might help me?
You might try Resizable component of RightJS UI if you want it to work out of the box.
After all, custom implementation in pure JavaScript is fairly simple: How to make HTML element resizable using pure javascript?
I am looking to implement some Mobile Components using native Javascript and AngularJS.
While, I was working on creating a Pull To Refresh directive for AngularJS, I used touchmove event on a UL list. I was trying to pull a hidden div on top of a list with custom models to show status message.
I used touchmove event on the UL to create an effect of pulling by changing CSS3 translate property for the div. I was facing issue that the transition was happening after I finish touching the screen but not while I was dragging my touch.
Please help and throw in more details about the touchmove event.
Touch events
First of all, if you work on mobile devices and know a little about javascript you should write your own functions for the specific things that you need.So don't use libraries like angular, jquery or whatever ... it's only performance loss.
all you need is:
document.addEventListener('touchstart',ts,false);
document.addEventListener('touchmove',tm,false);
document.addEventListener('touchuend',te,false);
& to test:
document.addEventListener('mousedown',ts,false);//set mouseISDown to true
document.addEventListener('mousemove',tm,false);//check if mouse is down
document.addEventListener('mouseup',te,false);//set mouseISDown to false
css
Use translate3d() as it activates the gpu hardware acceleration. not just translate()
As your question is not very specific i can't add more info right now but...
Here are some examples using touch/mousemoves they may help you
Swipe & fastclick
http://jsfiddle.net/uRFcN/
https://stackoverflow.com/a/17567696/2450730
Radial Menu
http://jsfiddle.net/yX82S/
Slider
http://jsfiddle.net/LxX34/11/
Some UI elements
http://cocco.freehostia.com/scripts/SnapLightMT%20v0.2%20by%20cocco%20(1).html
try to swipe the main content or mousedown drag left right.
code.
http://cocco.freehostia.com/scripts/highlight.html
There is also a css trick that allows you to use the native scroll without the annoyng whole page move..So you don't have to use a library to scroll.
css
.scrollable{-webkit-overflow-scrolling:touch;}
.scrollable,.scrollable>div{width:100%;height:100%;overflow:auto;}
.scrollable>div>div{min-height:101%;}
html
<div class="scrollable"><div><div></div></div></div>
I am using jquery.slimscroll to replace browser's native scrollbar.
I found sometimes using it causes browser's native scrollbar not responsive to mouse scroll.
One such case:
used along with jqueryui sortable on a element.
Somehow, after rerendering the element, the browser scrollbar stop working.
I can consistently reproduce this in every browser, and I write a jsfiddle to reproduce it:
Fiddle
function rerender(){
$("#wrapper").html($("#content").html());
$("#container").sortable({axis:"y",stop:function(){
rerender();
}});
$("#container").slimScroll(
{railVisible:true, height:"70px",start:"bottom"});
};
rerender();
It happens in other occasions, so this issue may not be related to jqueryui sortable.
Does anyone see similar problems, and how did you solve it?
I think the problem is in a way slimScroll handle wheel event - it's attached to window element, so when you recreate your wrapper html, you removes previous scrollable element, but mouse wheel handler remains and prevents window from scrolling. So, in theory you have to destroy custom scrollbar before updating wrapper html, then reinit scrollbar. But in practice slimScroll does not have destroy method.
There is a lot of other scrollbar plugins you can try: jQuery Scrollbar, jScrollPane, Malihu Custom Scrollbar and others... You can compare their functionality here
I am having a hard time looking for a modal box that has a similar functionality as the one on Pinterest.
I am currently using simple-modal (jQuery) but the problems are the height is not dynamic (putting height: auto has some problems) and the modal box's position is fixed at the center. Hence, if the content is long, it will just have a scrollbar on its own (inside the modal box) instead of being scrollable using the browser's main scrollbar. When I use the main browser's scrollbar, it's scrolling the content behind the modal (which is the actual web page) which is not what I intend to happen.
Do you have any suggestions on what to use?
If you right click on a object and open it as a new tab/window, you will then see what Pinterest is overlaying on the main page.
That said, you might achieve the same effect by expanding a full viewport iframe with semi-transparent background to see the underlying page.
To be sure, I've not come across any lightbox clones similar to Pinterest's custom jQuery version hidden somewhere in it's .js file.
Status Update:
If your willing to create your own method, I've outlined a process seen in my SO Answer here
I want to build into my app a way to select multiple objects on the screen (this is an HTML page with a bunch of absolutely positioned HTML divs). You know, like when you click down with the mouse and drag a transparent/translucent box and anything within that box gets selected upon mouse release?
I don't know how to go about coding that. How would you? Or pointers to solutions is acceptable as well.
Consider using jQuery javascript library. It has an extension jQuery UI that provides abstractions for interaction and animation. For drag an drop you have: Draggable
Here is what I would do.
Mousedown creates a high z-index div, transparent body with a nice border, which has its dimensions informed by mousemove. On mouseup you compare the region of that div with applicable elements. This wouldn't be particularly hard to do without a library, but YUI3 makes it pretty simple, have a look at http://developer.yahoo.com/yui/3/api/Node.html#method_inRegion
HTH.