I've been trying to figure out a way to style individual panels or gui's using Dat.gui.
What is the best way to do this? I could search for panel names in the DOM then apply the style but it seems like an overly complicated solution.
From the looks of this example you could use the CSS selector .dg.main to start, that is the panel container element.
You could use CSS to style the elements, or jQuery or similar to manipulate the DOM.
Related
Can I convert bootstrap classes to pure css?
Something like convert 'class="container-sm' to normal css.
I would like to know the CSS that contains the "container-sm" class in bootstrap
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
Bootstrap classes are CSS so there is nothing to convert.
My best guess is that you want to see the actual CSS rules of each class to understand what they do.
If that is the case, you can just right click and inspect the element you want. You will see a pane with all the css rules applied to the element you want to see.
In my angular app, I'm using ui-sortable to sort an <ul>.
The elements itself are resizable.
This is similar to the setup I have:
And I would like that "4" and "5" use the space on top of them:
Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.
Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.
So how can I achieve this?
Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
What are my options without getting rid of the libraries I already have?
What are my options getting rid of the libraries I already have?
I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout
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] {}
I am using this layover plugin to display content: http://jquery.com/demo/grey/ I know there must be a simple way to add a drop shadow border to the layover, similar to: http://fancybox.net/ but I can't figure out what the best method would be. Any suggestions?
Check out the liquidCanvas plugin. It makes it very easy to add drop-shadows (and other things like gradients and borders) to any element.
There is a full write-up and tutorial at http://www.caffeinedi.com/2009/11/02/using-jquery-and-liquidcanvas-to-add-drop-shadows-borders-rounded-corners-and-other-effects-to-your-website-even-in-ie6-and-ie7/
Lets say I had an element with multiple classes, one of these classes has a hover pseudo-class. Lets say this will change the colour.
So what I want to do is find out what colour the element will change to when hovered over. Then I want to override this with Javascript/jQuery.
The animateToSelector jQuery plug-in seems to do what you want.
I found that plug-in through another question on StackOverflow. Also have a look at this question to see there isn't really any other way to do it but by going through document.styleSheets.