I am building an appointment calendar where one can book slots and drag / drop the slots to change time. Each slot is draggable HTML elements. But I found an issue when we try to drag slots that are small, the preview div or the ghost image (I don't know if it's the technical term) is showing some part of the next slots. In the below image, there are 4 different slots. When I try to drag the first slot (Green in color) some parts of the second slot are also shown in the ghost image.
My guess is that ghost image size has some min-height property and can be controlled? I could be wrong and I appreciate pointers that can help me fix this issue.
It is very hard to help you without seeing the actual code.
Maybe you're dragging the wrong element, maybe there's a mistake in what you're actually cloning to show the "ghost image" or maybe something else entirely.
If everything is correct and it still happens it's probably something to do with the css of your element. But again, without seeing any code this is just a guess.
If you want a quick solution simply set a fixed height (as tall as the one element you're dragging) to your ghost element and set its overflow property to hidden. It works, but I'd rather throw myself off a cliff than actually solving the problem like that.
I can gladly try to help you if you make a jsfiddle.
Related
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.
I am developing a magnifying glass and I was hoping I could get some help figuring out how I am going to do a step.
What I am doing is I have a div with a higher z-index than the content. It is moveable and draggable. It also has a transparent background so one can see the content (images & text) behind/underneath it that has a lesser z-index.
Now the part that I need help with is this:
I want to figure out exactly what content is behind the div (let's give it an ID of #glass).
Then my plan was to append a <span> before and a closing one after and style it with CSS3 scale transforms to increase the size so it acts as if it is magnified.
If you have a better idea on how to 'magnify' the content please share it.
So what I am looking to do in a spot of pseudo-code is:
Get position of #glass.
Get content behind #glass.
Store that in a variable or give it a class or something to refer it to.
Append a span before and after.
Style it with scale-transform.
Undo and reset the above when #glass moves.
I would really appreciate any and all help with any of these steps, but especially number 2 and 3, As I have no idea on how to do those.
You can listen for the mousemove event on every element in the page. each time the event fires you update a variable with the latest node being hovered over.
So as you are dragging around the glass, the mousemove event should be getting fired on the elements behind the glass (since you are hovering over them). And you can then use your latest node variable to get the element behind it.
Here a is Jsfiddle demonstrating how this could be done:
http://jsfiddle.net/wWVuy/
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 :)
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.
I have a real-time HTML editor, with a textarea on the left for code entry, and a 'preview' DIV on the right to contain the preview of the code entered. At the moment, when editing the code in the left pane, the preview just sits where it is, so often the part of the code you're editing is not in the visible area of the preview (especially when images are involved).
My question is how do I make the preview scroll to show the part of the code that's currently being edited?
Here is the page I have so far:
http://www.caerphoto.com/rtedit.html
You'll notice in the source I have a (currently unused) matchPreview() function that tries to match the scroll position of the preview based on the scroll position of the textarea, but obviously if images or large text are involved the two panes no longer match.
Instead of a div from the clone target try using a tag.
let me decompose your task into 2 subtasks:
get informed when the dom changes
you could listen on changes of the dom like onsubtreemodified.
see
en.wikipedia.org/wiki/DOM_events
scroll the element into view
the answer to this is the scrollintoview method:
see
www.quirksmode.org/dom/tests/scrollintoview.html
however, this might not help you too much, since you are updating the whole html document on every change of the textarea. since you cannot get the position of the cursor inside the textarea, this might be not that easy.
sorry mate, at the end I have no solution, but maybe my rumination helps in some way nevertheless.
good luck!
When I tried this in Firefox. no line-breaks were seen in the preview; is this correct? I may be able to help (done something similsr recently), but not if the line breaks are removed...