How is it possible to have selectable text or clickable hyperlinks on the same HTML page as a cytoscape graph? In all the examples, the title (h1 tag text) is not selectable. Is it somehow possible to a a div container "outside" the graph area, where text is selectable and link can be clicked?
As suggested by canbax, putting the content div after the cy div and setting the z-index of the cy div to 0 solved the issue! At least the first element in this div stays selectable.
Related
I am maintaining a hubspot website and recently I have been asked to change a few things in the webpage. The first thing was, change the image in the ATF section. The section was 2 header tags followed by a form and an image placed side by side. The parent div of the form and image was set to display: flex and justify-content: space-around. Now, after changing the image, I had to resize it as well, the alignment changed. Now the form doesn't have the same left alignment as the h2 tag and p tags above it. I never touched the margin and padding of the parent div or the children divs. All I did was change and resize the image. How do I align the form element to be at par with the other things in the page. Justify-content: space-between solves the alignment issue but creates a lot of empty space in between.
When clicked on a button, I want to position the Vue material dialog under the button.The button is inside nested iframes. So, the x,y coordinates of button does not match the viewport coordinate.
Is there a way to position a Vue md-dialog relative to an element. I cannot use x and y coordinates using css as there are too many iframes and calculation of the exact x,y coordinate is difficult, even with element.getBoundingClientRect().
The issue was that md-dialog css places the dialog box in the center of the screen using css translate. Once it was overridden, it was easy to solve the issue.
.md-dialog{
-webkit-transform: translate(0%,0%);
transform: translate(0%,0%);
}
I am looking for a way to get the caret x y coordinates inside a contenteditable div, in a similar manner to how you can get the mouse coordinates using window.event since I need to open a pop-up exactly where the user is with the caret inside the contenteditable div. How can I do this? Many thanks!
Here's one approach:
Coordinates of selected text in browser page
However, in some circumstances this will not give you coordinates, in which case you'd need to fall back to inserting an element at the caret, getting its position and removing the element again.
I have a canvas element that changes in height after some user interaction.
The canvas is contained in a div. When the canvas changes in height, it currently overflows the div vertically.
Can I add a (javascript or jquery) listener (or something like that) to the height of the canvas, that dynamically changes the div's height according to the canvas height? Or is there a css way to let the div automatically enlarge (like in a table row).
thanks
Have you tried adding this style to the div : height:auto;
As a workaround, I've put the canvas in a table. A bit ugly, but it works.
So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on.
So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect an element. It blacks out the rest of the page, apart from that element.
So, any idea?
Cheers!
J
In working with Dojo Javascript widgets, it implements modal dialogs by having one large element be hidden (display:none; background-color:#000; opacity:0.5;) most of the time, though positioned to cover the screen (position:absolute; top:0; left:0; and width and height set by Javascript to the full window size). Then it is given a z-index value and all elements that are intended to be visible are given a z-index above it. If you can relative-ly or absolute-ly position all the elements you want to highlight, this method would work for you.
With just CSS? If so, the best I could come up with is this:
<style>
a:hover *:not(#except)
{
background:green;
}
</style>
<a href="#">
Link
<p>
green
</p>
<p id="except">
black
</p>
</p>
Unfortunately the :not() selector is part of CSS3 and most browsers do not yet support it (but Safari 4 does).
That is one possibility, but not so nice.
Another option would be with Javascript. If you are only working with rectangular block elements how about getting the x and y value of the element to stay normal, then cutting out four pieces (up, down, left, right) of that element. Absolutely position some divs whose background is some semi-transparent PNG.
ie.
------------------
|lef|---up---|rig|
|t--|________|ht-|
|---| normal |---|
|---|________|---|
|---|-down---|---|
------------------