I'm relatively new with web and I am using FullCalendar on a personal project and am trying to accomplish what I would think would be relatively easy. I may have to change some code around as I don't think what I want is available out of the box.
Here is a screenshot of my version of the FullCalendar I am using:
As you can see, I have several "events", well essentially they're a group of events and instead you just see the number of events for that day. So for Today, there are 10 events essentially, I just group them up. The problem is, you have to click above the event in order for the cell to select. I am trying to make it so that the event or the count text IS essentially the background without the rectangle, etc. See the screenshot below for what I am going for:
Making the eventColor transparent just makes the entire event disappear which is not what I want. I've also tried changing the background and border colors. The rectanglular shape is still present. Any ideas or possible suggestions regarding this? Thanks in advance for your help!
Not exactly sure what you mean, could you show us an example?
If you want the user to click "trhough" the event, you can use the CSS
pointer-events: none
This will ignore the mouse events (such as click) on this element, and then click on the one behind.
Related
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 have a calendar-like view that shows a table with one column per day of the week (see this image). Each row represents a specific thing that can be booked for a time. The idea is now that a booking can be extended by dragging the outer edge to the next day in the table, or shortened the same way. The active booking has a span on each side of the cell that is supposed to be the handle for dragging.
My main problem now is that the usual drag & drop features in browsers don't seem to fit my situation. I don't want to drag something and drop it anywhere else, I just want to drag to extend the item.
Is this still something that can be done with the usual HTML5 drag&drop feature or some generic drag&drop library? Or is there any other way to achieve this? Any pointers on how to approach this problem?
I'm using React for this, which might make some solutions difficult to integrate if they manipulate the DOM directly.
ummm not sure what to do here , I thinks its unlikely the link will change soon , I can describe the repo 'Allows individual or group selection of items using the mouse. Click and drag to lasso multiple items, hold the cmd/ctrl key to select non-adjacent items'. I can briefly describe what the lib code does: uses keydown, keyup and mousedown listeners to create an overlay and detect covered nodes in the DOM .
I just noticed that if you drag anything on facebook, no matter it's a link, or image, or pure text, the update status part changes to a box saying Drag Links/Photos Here. I'm wondering how to implement this functionality? Or in other words, how to detect that the cursor is dragging and do any subsequent change of a particular element on the webpage?
Perhaps HTML5? The following links should help you understand how to implement drag and drop with html5. You might also want to check the second link which implements drag "anything".
http://www.sitepoint.com/html5-file-drag-and-drop/
http://html5demos.com/drag-anything
what you could do is in the drag function that Mike linked just add JavaScript to change what you want. something here might help.
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.