I'm working with D3, and I'm trying to create two overlaid SVG elements and displaying only one at a time (a tab panel) but I really don't know how to overlay them.
I already tried to insert each SVG element into a < div> and set the display to inline, I also tried to directly set the SVG's display attribute to "inline" but none of these methods work, and now,I'm stuck !
Thank you in advance for your help !
You cannot use HTML elements like <div> inside an SVG. The CSS display property works in SVG, but only to turn the visibility of objects on and off. The value none will hide an element, but all of the other values (inline, block etc) make an element visible.
Related
I am trying to create a drop down menu. The smaller DIV inside the main DIV that contains an image gallery does not load properly when the website is live (space is there but images do not show up). I am looking for the proper code to make this work properly. This is the code I am using for the drop down of the main DIV with the smaller image gallery DIVs inside.
Read More
The smaller DIVs with the image galleries work fine when the website is live until I change the beginning of the code to . I would like to get the drop down to start off closed and not open when the page is visited.
I am going blind here, but I am assuming that your div does not have height. Give height property to a div and that should solve the problem. Its a common mistake.
Please leave us some code sample next time. Ty.
Don't see your code yet, but here is some possible help.
With showing or hiding HTML elements, like div's, you are dealing with visibility and display. One hides the element altogether and the other takes up the space but does not display the inner elements.
You can read more about display and visibility here:
https://www.lifewire.com/display-none-vs-visibility-hidden-3466884
I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example (http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html).
Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page.
So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div).
This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo
This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA
So, any of you guys have a tip for me on how to solve this problem?
I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result.
Thanks very much in advance and sorry for english errors,
Matheus Barreto.
You might want to try setting the position property of the overlay to absolute. Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work.
Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it.
Also, you may try really high z-index, such as 8000 or higher. You should be able to use up to 65535 (higher depending on the browser's implementation).
It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items.
I have a div with several divs inside. The number of internal divs can change so the height of the outer div is dynamic. Then I have another div on the right of the first whose height must always match, which I want to use as an SVG canvas. I've solved the height issue using table-row and table-cell in CSS. But when I try to add SVG to it using a library such as Raphael or D3 the layout completely breaks. I've tried several variations and fixes suggested online with no success: if the canvas div doesn't change size then the SVG doesn't fill it up properly. Please help. I struggle to understand HTML and CSS layout.
You can see the problem here: http://jsfiddle.net/ofuh701p/4/ by clicking on the button. The black should all turn into red, without any layout changes.
Here is another simpler example of the same problem: http://jsfiddle.net/88f2L4h1/ . In this case I'm using the solution from https://stackoverflow.com/a/8418039/2482744 to achieve equal height divs.
You can explicitly set your SVG element's width and height to the same values as its parent container using clientWidth and clientHeight.
Here's a fiddle demonstrating it using D3.
http://jsfiddle.net/ofuh701p/8/
Here is the kind of thing I want:
http://jsfiddle.net/ofuh701p/6/
I was hoping that this could be solved using just CSS, as this seems like a really simple requirement and I can't understand why the SVG messes things up so much. This solution uses uses javascript to set the height dynamically based on the DOM elements which feels like a hack:
var c = Raphael("braces-canvas", 50, $("#selectable-container").outerHeight());
Also the divs are now using display: inline-block.
At the moment I've been using the css line-height property in the parent div to increase the line spacing, and this works fine for the text, and even <input> elements. The only problem is any custom controls like the JQuery spinner or Chosen will try to fill up this entire line height (as they're set to display:inline-block)
Currently it appears like this:
How do I get these widgets to appear the same height as the text? I mean the default <input> elements can, so surely it's possible?
Find the element class/id and on your own style.css you can customize it's property with !important But use of !important is not considered as a good practice. (But if there's issue on one-or-two places, i think that is Ok)
Another way can be, why not making changes on jquery ui css that you are linked to.
Is there a javascript way to display or hide element title (defined as an html attribute), as if the mouse was hovering above said dom element, without actually involving the mouse?
Thanks in advance.
Not with native tooltips/titles. But there are jQuery plugins like this which let you cutomize and control them.
I would use an absolutely positioned DIV that looks like the native tooltip and contains the same text as an alternative. It should be fairly trivial to loop through all elements and create a DIV for each one that has a title attribute.
Very little hassle and no JavaScript plugins required.
You can make a tooltip layout (div with border) yourself, and show it when you want with jQuery. You can select a link element with a title like this:
a[title] {}