a hideable and 'recyclable' javascript context toolbar - javascript

I am searching for plugins/scripts that provide a toolbar when hovering elements of a big list. Almost like in this question:
JavaScript/HTML hover menu/toolbar
However, I don't want it to be a css-menu-like one. As I said, It will be a very big list and I would like its markup not to be duplicated n times. So I need a javascript that will move the same toolbar from list element to list element when they're hovered.
I know the YUI2 tooltip applies this strategy of moving the tooltip element, and changing the contents at display, but it's only for informative text displaying. I can't add buttons to it, and it's positionned according to the actual mouse position, and not to the element hovered.
ps: I tagged this question jQuery because the project is using it but i'm open to any framework-dependant or not solution.

Something like this should work:
var toolbar = $('#toolbar');
$('#yourTable').delegate('.has-tooltip', 'mouseenter', function() {
toolbar.insertBefore(this);
}).delegate('.has-tooltip', 'mouseleave', function() {
toolbar.detach();
});
The delegate will trigger for those events on elements matching .has-tooltip which are inside #yourTable.

Related

d3.js Hierarchical Edge Bundling node color change on click

I am new to d3.js, and I am trying to modify the Hierarchical Edge Bundling from this link: https://bl.ocks.org/mbostock/7607999.
I have removed the links being displayed on hover, and put the on click instead. I would like to do the same with the node that I click on (highlight it). I have removed the hover event for the node. here is a fiddle of what I have so far https://fiddle.jshell.net/vdmn2oj4/.
How can I do this?
When it was on hover, we could just use the "hover" attribute in the css style, but there is no such thing with a click (only focus for links and textfields).
I have tried to change the data and make them links instead (so I could use focus in css):
<a href='#' onclick='return true;'>data</a>
but of course that didn't work (let me know if you can do that somehow though).
and using an attribute for links like so:
.attr({"xlink:href": "#"})
doesn't work either because I cannot change its style on focus with css (or I don't know how, but that might solve my problem if I could).
I have also tried manipulating the nodes, but so far, I have only been able to change all the nodes, the sources and the targets, but not the one I click on.
I also know that there is a "parent" attribute to nodes, which might be the ones I want, but I haven't found out how to use that either.
Any solution, even partial would be welcome, as I have spend a lot of time on this already.
Add this inside your function mouseclick:
d3.select(".node--clicked")
.classed("node--clicked", false);//removes the class of previously clicked nodes
var clicked = d3.select(this);//select the clicked element
clicked.classed("node--clicked", true);//set the class
Here is your updated fiddle: https://fiddle.jshell.net/vdmn2oj4/3/

Attach event to document other than 1 div

I have created an inspector type feature that will give you a divs ID when you click anything on the page. I have used:
document.attachEvent('click', inspectorOnClick);
I've now decided to add another feature, I now need this event attached to everything in the document other than one div is that possible?
EDIT:
I thought one of the links in the comments solved my problem, but there is a bit more to it than I thought.
Let me explain, when the document loads.
document.attachEvent('click', inspectorOnClick);
Is attached, once an element is clicked I dynamically create an overlay div in the position of the cursor. I want to take the event off of this dynamically created div. I have tried:
//prepend dynamicly created div to body
document.body.insertBefore(overlayDiv, document.body.childNodes[0];
var getOverlay = document.getElementsByClassName('bsOverlay');
getOverlay.attachEvent("click", function(){ return false; }
I have also tried a different last line which is
getOverlay.detachEvent("click", inspectorCancel)

Cloning elements that have Twitter Bootstrap popover produces a popup in the wrong place

I have had problems getting Bootstrap popovers working with dynamically created elements (but that's for a different question).
So as a workaround, and because the content of these popover elements is not actually dynamic itself, I decided to create a series of hidden elements with popovers that are already in the DOM when the HTML loads. I then planned to clone them using JQuery's clone() and place them where I need them.
The problem is that whilst the new cloned popovers fire, the popover is in the wrong position.
The HTML looks like this
<div style="display: none">
<span id="anid" class="popoverbottom label label-info" data-title="Title" data-content="Content">TAG</span>
</div>
I then register the popover event on the popoverbottom class using code like this:
$(".popoverbottom").popover( {placement : 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }} );
I then clone the element with the popover on it using JQuery code like this:
e = $('#anid').clone(true);
e.attr('id','anewid');
I then append() the new element dynamically and it appears fine. If I hover over it, a popover fires, but it appears in the top left hand corner of the browser window - half cut off on the left hand side.
If I make the <div> containing the popover elements visible - i.e. remove the display:none, then the popover appears over the original, non-dynamically created DOM element instead of the new cloned one.
This is obviously because when the popover was registered, the popover was tied to the original element. Whilst JQuery's .clone(true) appears to copy the element and the associated events, the original popover position isn't updated.
Is there a way to tell the popover that it's been cloned and it needs to attach the popover to an new element?
Or, would I be better off trying to get dynamically-created popovers working a la this jsFiddle snippet.
As mentioned above, I did try to get this dynamic approach to work but had issues where multiple popovers would stay on the screen and not hide when the mouse moved away - but that's for another question.
Any advice would be appreciated.
I think the problem is that Bootstrap creates the popovers before you've added all the cloned popover nodes to the DOM. You need to register the newly-appended popovers. Don't call $(".popoverbottom").popover() until you've appended all the cloned nodes. $.clone(true) copies events, but it doesn't attach functions. popover() is a function, not an event.

Forcing an element to :hover with JavaScript when dragging an element over it. No jQuery

I've found a couple of search results here but they're all for jQuery and the couple I looked at weren't applicable to my case.
This is a small project and I've avoided using jQuery so far. I want to keep it like that as to not need the library.
Basically, I'm dragging an <article> element to a <div> element. The div has the background-image of a closed trashbin. In the CSS it is set to display the same, but open, trashbin when :hover is triggered.
Now, when I pull my article element to the div, the :hover effect isn't being triggered.
How do I do this?
All required elements are set draggable and the needed event listeners have been added, Console.log confirms they work.
You can define a CSS class called 'open_trash' and set the background image of a open trash there and then you can use javascript to change the class of the dragged element on mousedown like this
document.getElementById("draggedItem").className = "open_trash";
You can set the class name to either an empty string or something else onmousedown.

Take all elements matching a selector, put them in a dialog, hide everything else on the page

In a dialog, I would like to show all elements with a specific class. The dialog should hide the rest of the page.
So for example: On this Stack Overflow page, I want to show all elements with class="user-info". Those elements would be shown in a dialog with the same width and height and the same CSS and everything else would be hidden. It would be like cutting them out of the page and pasting them in a dialog.
Any ideas how this could be done?
I would like to show in dialog all
elements with specific class.
So clone those elements, e.g.:
var $div = $("<div />").append($(".fooClass").clone()).dialog();
The dialog should hide the rest of the
page.
Either set the overlay graphic (which you can do using themeroller) to something opaque, or attach some code to the open and close events:
$div.dialog({
open: function(event, ui) { $("body").hide() } // that will hide everything, including the dialog, so watch out.
close: function(event, ui) { $("body").show() }
});
Proof of concept here.
EDIT: This demo keeps the inline style defined in a parent element.
Found an answer thanks to this post
Check it out here. It demonstrates pulling all elements of certain class from iframe and than appending them to main document and copying their style. Problem is that its very slow, especially if we copy many elements with a lot of child elements. If anyone knows a way to improve performance let me know (post here:)).
note: The reason I loaded jsFiddle page in iframe is that it(browser?) won't let jquery inspect content of iframe that's not loaded from same domain.

Categories

Resources