Search jQuery

jQuery Forum

Screen name:
djmoffat

djmoffat's Profile

4 Posts

9 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

draggable, multidraggable
[0Replies]
- 14-Dec-2012 02:49 PM
- Forum: Using jQuery
I've been looking for a way to allow a user to select one or more elements of my page and freely drag them at one time. I found a couple examples, one of which is this one. This would work as I want, with a few modifications. My only issue is that it was written about 3 years ago and it doesn't seem to function with the current versions of jQuery and jQuery UI.

If anyone can point me to an updated version or another example that works with today's libraries, I would appreciate that.

thanks!

keydown/keyup toggle functionality
[10Replies]
- 19-Nov-2012 05:21 PM
- Forum: Using jQuery
I'm trying to understand how I might toggle on/off functionality while a key is pressed. I've been working on an example but I'm struggling with how to select the element I'm currently interacting with so I can revert functionality once the key is released.
Below is the code I'm currently working on. On lines 6, 16 and 17 I would really like to select the specific element that was being resized, not all items in that class. How can I reference that specific item to toggle it's settings?
2. $(document).keydown(function(e) {
3. var keyCode = e.keyCode || e.which;
4. if (keyCode == 18){
6. $(".onpage").resizable({
7. alsoResize: false,
8. aspectRatio: false
9. });
10. }
11. });
13. $(document).keyup(function(e) {
14. var keyCode = e.keyCode || e.which;
15. if (keyCode == 18){
16. $(".onpage").resizable({
17. alsoResize: $(".onpage").find('img'),
18. aspectRatio: true
19. });
20. }
21. });
Thanks,
Dave

Drag child element from one parent to another
[1Reply]
- 15-Nov-2012 12:19 PM
- Forum: Using jQuery UI
I'm trying to create a tool where I could drag a child div from one parent to another.

A few of the conditions that I want to point out is in the source parent, I want to use "overflow: auto" in my css so that I can scroll the items if there are too many available.

The second thing I want to achieve is when I drop the item into the destination parent, I want the item to land where I drop it and still be draggable to any location in the new parent.

Here is what I have so far...
2. <!DOCTYPE html>
3. <html>
4. <!doctype html>
6. <html lang="en">
7. <head>
8. <meta charset="utf-8" />
9. <title>jQuery UI Draggable - Visual feedback</title>
10. <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
11. <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
12. <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
13. <link rel="stylesheet" href="/resources/demos/style.css" />
14. <style>
15. .pageItem { width: 110px; height: 90px; float: left; margin: 2px 10px 2px 10px; border: 1px solid blue; background: white; }
16. #results { display: inline-block; width: 160px; height: 800px; border: 1px solid black; overflow: auto; }
17. #page { display: inline-block; width: 650px; height: 800px; border: 1px solid black; background: #cccccc;}
18. #bounding { width: 1000px; height: 900px; border: 1px solid black;}
19. p { clear:both; margin:0; padding:1em 0; }
20. </style>
22. <script>
23. $(function() {
24. $( ".pageItem" ).draggable({
25. revert: false,
26. stack: "pageItem",
27. helper: 'clone',
28. start: function() { $(this).toggle(); },
29. stop: function() { $(this).toggle(); }
31. });
33. $( "#page" ).droppable({
34. drop: function( event, ui ) {
35. $( this )
36. $(ui.draggable).appendTo($(this));
37. // $( ui.draggable ).resizable();
39. }
40. });
41. });
44. </script>
46. </head>
47. <body>
50. <div id="bounding">
52. <h3 class="docs"></h3>
53. <div id="results">
54. <div class="pageItem">
55. <p style="text-align: center;">Item A</p>
56. </div>
58. <div class="pageItem">
59. <p style="text-align: center;">Item B</p>
60. </div>
62. <div class="pageItem">
63. <p style="text-align: center;">Item C</p>
64. </div>
66. <div class="pageItem">
67. <p style="text-align: center;">Item D</p>
68. </div>
70. <div class="pageItem">
71. <p style="text-align: center;">Item E</p>
72. </div>
74. <div class="pageItem">
75. <p style="text-align: center;">Item F</p>
76. </div>
78. <div class="pageItem">
79. <p style="text-align: center;">Item G</p>
80. </div>
82. <div class="pageItem">
83. <p style="text-align: center;">Item H</p>
84. </div>
86. <div class="pageItem">
87. <p style="text-align: center;">Item I</p>
88. </div>
90. <div class="pageItem">
91. <p style="text-align: center;">Item J</p>
92. </div>
94. <div class="pageItem">
95. <p style="text-align: center;">Item K</p>
96. </div>
98. <div class="pageItem">
99. <p style="text-align: center;">Item L</p>
100. </div>
104. </div>
106. <div id="page">
108. </div>
109. </div>
111. </body>
112. </html>
So far it's doing everything I want, except for the fact that it's positioning the items relative to the other elements in the destination parent instead of letting them be placed where they are dropped.
Any help on how I can solve this would be greatly appreciated!

Thanks

call jquery function dynamically
[3Replies]
- 01-Nov-2012 02:05 PM
- Forum: Using jQuery
I'm working on a page where I'd like to have multiple accordions or datepickers. I understand that I can add the following code multiple times to my page and change the selector to the ID of the item I want to work with.
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active: false
});
});
</script>

What I would like to do, and what seems more natural to me, is I would like have that code only once with a variable for the id that I can pass in with all the different items I want to work on. It seems because of the way the function/selector works, I can't make it function more generically since there isn't really a call such as "onclick" on the div itself.
Is there anyway to simplify the function so i don't have to have 30 of them if I want say, 30 accordions on my page?

Thanks in advance,
D

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend