I have two content_editable <body> elements, that have the same exact content. I need to make one reflect the position of the other. So, if the user moves the caret down and scrolls the content, I need to make that change happen on the other element.
I tried using jQuery's scrollTop, to no avail. I've also looked at a few caret based positioning solutions, but nothing has worked yet.
A bit more background. I have a magnifier widget, that uses the css3 zoom feature to magnify content. This is done by duplicating the content via HTML and then zooming in a div on that content.
There are ckeditors in the content, which means there are iframe's with content_editable <body> tags.
When the content is duplicated, it does not preserve the position of the body's scroll. How can I get the position copied into my copied content?
PS. The only essential browser is Chrome.
Related
I am creating a photoboard in which a user can drag-drop photos, resize it, drag it and rotate it. Whenever a user drag-drops a new image on the board a new div element is created and an img tag is appended to the div element. Each div is set to float left so whenever a new image is created it will automatically be placed in its correct position. The jquery-ui plugins (resizable and draggable) are applied to the div.
A problem occurs when the user resizes any image. jquery-ui sets position: absolute and all image positions get distorted. After that, when we add a new image it will be inserted on the previous image. Can anybody please help me to get rid of this problem?
Without seeing your code it is difficult to know exactly what the issue is. I do have some sense of what the problem is. When using drag/resizable, the div will always be position:absolute. What you will need to do in priciple is bind an .mouseup() event to any selected/dragged/dropped div that will .addClass() to the div applying the new position as well as other styles or jQuery dom manipulation. This is the approach I would take. This also allows the freedom to spice up the dropping of the image with some nice animation maybe.
Im looking for a way to scroll the content of a div, whitout animating the content, but instead actually scrolling the div.
Preferably, the result would be something like this:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
but when you drag the handle, i want the div containg the long content to scroll, not the long content to animate in to view.
I would like to do this because that would mean the content is scrollble on touch devices aswell, and it would utilize the browsers scroll-capabilities instead of moving dom-objects around.
I found this script http://jsfiddle.net/Nkf9n/18/ wich lets you scroll by dragging, with added inertia, but i cen't really wrap my head around how i would apply i to a separate handle, controlling the scrolling.
jquery-solution would be ok, but i'd prefer a vanilla-javascript example to wrap my head around.
I'm using iScroll4 to make a certain element scrollable in my webpage but it snaps back to the original position once you release the mouse/touch. How do I make it stay instead?
I think that I have figured out why this happens. I had iscroll4 working in a Phonegap app that I was building, and then broke it after changing some CSS. At the time, I didn't realize what I had done and I spent a long time hunting for a Javascript solution.
Finally, I noticed that when I tested it in a browser, there was a scrollbar for the list where I was using iscroll4. And when I tried to scroll, the scrollbar thumb changed size. That is why it was snapping back. The browser made the wrapper div big enough to hold the entire list, so whenever I tried to scroll, there was no hidden data so I triggered the pull-up event and then the browser resized the div.
I had to change the CSS to include overflow:hidden and it started to work again. I tried overflow:hidden on the ul tag and the scroller div but that didn't work. It has to be on the wrapper div.
i am using the autoresize plugin which increases the height as users type in stuff. It works great on FF/Chrome, but the behavior is messed up on IE (see screenshots below).
Essentially, the textbox, when resized, does not push the rest of the buttons down, which is weird, given that nothing on the page is absolute positioned.
I suspect the button and span on the right are in a relatively positioned container? I've encountered the same problem recently with positioned elements and expanding/collapsing siblings. Still searching for a proper solution, but removing the positioning can be a temp fix.
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.