http://jsbin.com/ovODORove/1/edit
I'm sure you've all seen those design applications where you drag a node and it resizes the element. Well last night, and today I decided to give it a try.
So today I wanted to try dynamically resizing a div, and I'm a bit confused.
I tried various ways, but none seem to work.
Logically I know that by using JQuery UI I can set my class .EE (for east east) to draggable to make it drag the element horizontally, but while the element is being dragged I want it to also set the width to where it's position is. I assume by binding the draggable event to the elements css width would work, but when I tried that it didn't work.
If anyone can help assist me with this it'd be greatly appreciated.
EDIT:
Using JQuery UI's resizable handlers make this a real easy solution as you can see here.
ThreeDubMedia also has a nice plugin that enables this functionality as well. As seen here.
I played with it a bit, and I've got it working. This may be not exactly right for you, but I think it's a pretty good starting point.
I've assigned the same stop callback for every handle, and that controls the resizing in any direction. Also you should give a parameter to width() and height(), like Man of Snow said.
Here is the fiddle.
Related
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
I've been trying to figure out how to create a sticky scroll effect on two images, basically like this: http://www.nationalgeographic.com/americannile/
(scroll down to see you will see the four images with sticky scroll effect)
I have tried some jQuery plug-ins but still couldn't figure out how to create the effect I wanted.
Any help would be greatly appreciated, or just a point in the right direction.
Many thanks
What You want to do is apply some actions when document scroll position changes. Since You are using jQuery, there is plugin exactly for this functionality called ScrollMagic, and here are the demos.
The link you posted uses the scrollr library:
https://github.com/Prinzhorn/skrollr
I've also used this library and I just can recommend it to you. It is really easy to use, for basic animations you don't need any javascript, everything is done via data- attributes.
It even supports mobile devices to some extend.
I'm trying to use JQuery Draggable's containment feature but it doesn't seem to work if the object being contained has a transformation applied to it.
JSFiddle example: http://jsfiddle.net/US2fr/
Does anyone know how I can fix this?
After some tweaks to the drag function, I finally have a working solution: http://jsfiddle.net/GgUN9/2/
You can test this by changing the scale and orig values. If the test div is smaller than the container it will stay within it's bounds. If it's larger, you'll be able drag it around, but it will also stay in the bounds (i.e. you shouldn't ever see white space inside the container).
UPDATE:
I noticed today that the JSFiddle example above does not work if the CSS left and top values are not 0px for the test div. I've fixed this and updated the fiddle: http://jsfiddle.net/GgUN9/3/
Hopefully this will help someone in the future!
Im reading through the jquery docs, and Im thinking outterHeight/outterWidth is what I am looking for. But not really sure how to use it for my needs.
Overall I have an element I want to add a submenu to, on click, I want this menu to line up directly under the trigger element. But I need the right edge of the menu element to line up with the right edge of the trigger element. Which the lining up piece of it, I'm sure a little trial and error will get me there its just finding those outter edges and where they are as far as the window/screen/what ever is concerned. So I can nudge them into place.
Key reason I am going this route is cause this menu element is attached to a handful of trigger elements scattered through the UI, and are dynamically recreated for the given trigger element.
Anyway anyone know a good way to achieve my goal? Is outterHeight/width my ideal solution?
I think a better solution would be to use offset or position like the jQuery UI datepicker does it for example. You create your menu at body level and you position it according to the offset of the element that triggers the menu.
I'm having real headaches trying to work out a problem I have at the moment on a web page, I hope you can give me a hand :D.
I have dive for a related topic but I've not found any one with the same problem, using several images.
What I want to achieve:
"I want to include draggable and resizable images in a div". The images one by on are added when a link is clicked.
I have mainly 3 problems(also explained with images):
When I add a new item and it's marked as resizable, it appears below the last image, instead of beside. (When it's nor marked as resizable it appears beside)
http://i.stack.imgur.com/1dBXF.jpg
When I drag an image, changing his Y axis, and then try to resize it, it's automatically moved to the las Y axis position (X is consistent).
http://i.stack.imgur.com/rF9KK.jpg
When I drag an image, and after I try to resize the other one, the Y position of the dragged image changes.
h**p://i.stack.imgur.com/OMWEr.jpg
I don't know what to do, thanks a lot.
I tried an attempt to recreate what you wanted to achieve and arrived at this sample
I hope it helps in some way.
Here is my resolution to the problems you are encountering:
Problem 1:
I achieved the separation of the resizable and the non-resizable images by by assigning them into separate divs. (seems easier that way :P).
Problem 2 & Problem 3:
I was not able to encounter this two problems, are you using alsoResize or grid
options?
[Updated Post]
I saw the problem you were encountering and modified my initial code, here is the result.
I provided comments on the lines that I updated.
the resizing problem you were encountering is because the img element is not absolutely positioned in the page.
I hope that this helps you in some way :)