In a program I am creating, I need to have dragging. I figured out this part through W3schools but I can't seem to figure out how to customize it... What I'm trying to achieve is dragging but no ghost effect, and making it so the original image is hidden so it looks like it is only one image. Another thing I'm trying to do is get rid of the symbols. I'm clueless as to how to get rid of the symbols, and I can't manage to change the opacity of the ghost image... I've looked at a few other answers but I can't seem to get it to work.
My JSFiddle
#pointer1{pointer-events:none} //This prevents selecting of the drag. Not what I wanted
#pointer1{/*How to change the ghost?*/}
I would use jQuery for this. It will let you set options for the things you're looking for.
jQuery UI Drag Documentstion
I'm trying to figure out what would be the shortest and simplest way to lazily load tooltips with PHP-generated contents inside. I've found a pretty solid library called PowerTip which I've been trying to appropriate however there are some difficulties there.
So I'm going to have a block of text and positioning a cursor over any word longer than three characters in that text should invoke a PHP script passing that word as a parameter, reading the response which is plain html and passing it inside the tooltip contents. When a user hovers over some word they'd get a nicely formatted tooltip which is specifically related to that word.
I'm looking to have a clean and easily maintainable HTML code that allows me to have as little javascript in different places as possible and preferably without duplicating the text's contents elsewhere and the tooltip should look good (not just a regular kind of a tooltip) and follow cursor. What would be the best way to approach this problem?
PHP script is already done, I'm looking to solve the javascript/interaction problem.
I'm trying to convert emails to buttons inside a contentEditable using Regex, but I'm realizing it will need too much time for me to handle cursor location, to add a delete functionality, etc. What I expect look like it:
My first idea was to use a textarea, floating in a div. That was maybe a better idea.
But... Is there some well-known open libraries to achieve it? I've seen a lot of tag libraries that can act like the tag bar on SO, but I'm searching for something that takes:
A container
A regex to match something
Convert it to button
Delete it on backspace press.
How about the fcbkcomplete plugin?
I'm trying to implement some kind of very basic flow chart functionality in a div.
Basically I have some boxes which by default my be joined by a little AND bubble. If I click on the bubble it will change to an OR bubble which will result in the boxes (divs) splitting.
Not really to sure where to start on this any guidance much appreciated - eg links to something similar or advice in what to look into. I've attached a mockup to help explain what I mean.
Thanks as always SO
W
It should be pretty straightforward. Bind a click on the and/or button, which changes the CSS class of the lower box to a class which has a larger margin-top property and moves the background-position of the and/or image to show OR. You could use jQuery's toggle function for this, though I imagine you'll be storing the state in a separate data structure anyway.
I've been googling and trying this for a good while now, but comes nowhere. So here goes:
What I want to do is to drop text on a DIV tag and handle that with JavaScript. Something along these lines:
<script type="text/javascript">
function handleDrop(sender, args)
{
$('#theDiv').html(args.textfromdrop);
}
</script>
<div id="theDiv" ondrop="handleDrop()" />
<br/>
<p>
This is some simple text. Draggable?
</p>
So, on this page I want to be able to drag contents from the paragraph for example to the div and it would handle the drop and change it's appearance accordingly (Or maybe just display that text, as long as it would handle it!). I've been trying with jQuery, but it seems to be a whole other model, and I can't set all my potential draggables as such because they should be able to come from everywhere. Is this even possible?
EDIT: Please correct me if I'm wrong, but these droppables all require a draggable to be dropped at it, right? What I would want is that you can drop text, pure text, from a page that you don't have any control of. This might sound weird, but it's for a firefox extension where you can drag content from a page to another page that resides in the side bar.
I would recommend using an established Javascript Library such as jQuery or YUI.
Have you considered creating a hidden textarea (ie with css style visibility:hidden) overlapping the div in question? Then check for drops with the onchange JavaScript event, or if that doesn't work, periodically the textarea's value for non-empty strings. I'm guessing your mileage will vary depending on the browser and operating system.
Or if you prefer Prototype like I do: http://wiki.github.com/madrobby/scriptaculous/droppables
EDIT: Based on your revised question: No, there's no way to allow a user to drop text from one page to another page. Not unless you do decide to build a FireFox extension like you were saying. Even if you could find a way around the security issue where you cannot script a page that's not under the same domain, you can only drag and drop DOM elements within the window/iFrame they're in.
I have done this before and it CAN be done without any library with some effort.
I've built the following methods:
Method that tracks your mouse movements.
Method to read and pass the content when you drop.
Used onmousemove and onclick events for the drag and drop methods.
OnMouseOver for the div area where you'd like to drop the text - to detect whether the pointer is over the container (div) or not.
Finally after dropping the text I deleted the original content (if needed) using innerHTML so it looks like it has been moved.
You can pretty much achieve a Windows like drag and drop functionality with this. I used it for drag and drop images, icons, etc.
If you need help with the coding I can give you some guidance, but most of it you will find if you Google around a little, then all you need to do is make them work together.