I've created a nav menu like in the screenshot below. It spans the entire width of the container and the left/right padding of each menu item is constant. This was easy to do by hardcoding the left/right padding in the CSS, but I want the paddings to be able to change as the site admin edits the menus.
Is there a way to do this with pure CSS (CSS3 is okay)?
This was easy enough to do with jQuery (I totaled up the width of the menu items and calculated the necessary padding). But I ran into some issues on some browsers due to our use of Google Web Fonts. On Chrome and Firefox 4 on Windows (not on Mac), the web font was not loaded at the time that my script ran, resulting in incorrect width measurements. I tried running the script in the jQuery's DOM ready event and in the Google Font API's active event. The active event worked in Chrome but in Firefox 4 it was often fired before the font had been applied.
Thanks in advance.
Here's a jsfiddle of a potential different solution.
Using that layout, and assuming the number of menu items is going to change, you call a recalculation method once a list item is added/removed. In this example provided, I've used YUI3 to do the DOM manipulation, but you could do that a number of ways. Note - I didn't test the javascript function, its "probably working pseudo code".
(You may need to make subtract a further 2% or so from the list item widths, if you're trying to deal with IE6/7)
Use jQuery's .load event as suggested by user thirtydot.
Related
Is there any way of setting the browser's tab background color (not the favicon image) and text color with the help of an browser extension/addon.
I've searched the internet to and fro and found nothing in the APIs. So I think it is not possible. But maybe someone has a solution for that.
What I want to achieve is to tint the colors of TYPO3 tabs according to the application context (Development, Production/Staging, Staging). I managed to set the top-bar color in the TYPO3 backend depending in the application context, so the logic works well. What I'd like to have now is a way of tinting the tab.
You are right: there's nothing in Firefox or Chrome API that allows you to color individual tabs easily. But there are some workaround ideas..
Colorful Tabs uses theme override to style individual tabs, including (by default) based on domain, using the browser.theme API that only Firefox supports. However, after trying it out, it might not fit your requirements: in current Firefox version it only affects the color of the currently selected tab (and the address bar), not providing you with a good overview.
Some other extensions for Firefox, for example TST Colored Tabs use sidebar tab representation that duplicates the tab bar, with possible enhancements. Also not ideal, and also Firefox-specific.
For Chrome, there's a Chrome-specific API tabGroups that can add color outline to tabs, but only by adding them to a group. You can have many groups, but it's still going to be ugly if your tabs are interspersed or moved around.
So let me propose an out of the box solution: use a custom favicon per application context instead of trying to change how the tab UI looks. That would be always visible in the tabs strip without any code on the browser's part. You could also override favicons from extension code if there's no easy way to do it on the application side.
I used Coverage to identify unused CSS and JavaScript Code on my landing page. This helped tremendously to reduce loading times. But now I experience the problem that when I view my page on a small device there seems to be missing css code (or javascript code not sure about that) for a drop down menu which should transform into a burger menu.
So my question is how does coverage calculate code which is not used. Does it do this just with the current browser view (which probably does not use all css code in case of responsive design?)
If this is true how can I find out whats really not used. Try various resolutions and run coverage several times?
Anyone experience the same problems?
The coverage panel is "live", as you use the page more CSS and JS will be used.
What I mean is that when you first load the page all of the CSS and JS required to render and make interactive that initial view will be highlighted as green and needed. If you then opened your menu that CSS would turn green as it was used. If you never open your menu with the coverage panel running it will not count the CSS as needed.
So because your menu CSS code was not needed when you ran the coverage panel and you removed the CSS for the menu you obviously will have issues.
You are kind of misusing the coverage panel, it is more intended to help you optimise your critical CSS or to find libraries that are completely unused.
If you want to use it to identify CSS and JS that is not used at all you would have to resize the screen to every break point (to account for different screen sizes and the different layouts you use for mobile, tablet etc.), open every menu item, tab to all areas of the site, fill in all the forms, both correctly and incorrectly etc. to ensure all states were covered and the relevant CSS and JS was used.
If you did manage to successfully do the above, that would show you the coverage for one page, but what about other pages? You would have to repeat the process there to ensure you haven't removed a needed style. As you can imagine this is not likely to be successful without mistakes!
Instead you should use the coverage panel to identify items that are required for "above the fold" content as this means you can inline any critical CSS and JS within your initial page HTML and get sub 1 second First Contentful Paint etc. (Yet again you need to resize the screen here to account for different breakpoints, but you do not need to open menus etc.)
Don't use it to try and identify things that aren't used unless you are absolutely certain they will not be needed (for example if there is a whole library included by mistake that does not get used, you can safely remove that.)
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
I have a dojo text area which I'm binding it to a field. I saw that on browser, its height is OK but if I open the xpage in the Notes client its height is twice bigger. I tried adding height property for the text area, but it doesn't work.
Thanks in advance!
Browsers Firefox and XPiNC (XPages in Notes Client - that is XULrunner based on Firefox) show Dojo Text Area (dijit.form.Textarea) always with at least two rows even it contains only one line of text.
Other browsers like Chrome and IE work like expected.
You don't have a chance to change that behavior with style "height"/"minHeight" or parameter "rows".
The only solution I found is to create an own Textarea widget. But I am not sure if it's worth it...
This issue shows up only for contents with one line. As soon as you have two or more text lines Dojo Text Area's height adapts exactly - for all browsers.
Try setting the height using css styles, that should do it.
Update:
In case css should not be working here try using the classic HTML attributes 'cols' and 'rows'. I don't have Domino Designer ata hand right now, so I can't tell whether those attributes are available. If not you could add them yourself using the 'attrs' group.
Here's a tricky one: has anybody seen a YUI dialog/panel implementation with nice OS X style shadows around the dialog, instead of the blocky shadow that is implemented by default with the "underlay" element?
You can see this type of shadow on Amazon.com popup windows. It requires quite a bit of PNGs but looks very nice.
I'm thinking of inserting extra DIVs or replacing the .underlay element, and hook into the dialog size event to adapt the dimensions. The latter would be required because YUI uses some CSS trickery to make the underlay element "snap" to the dialog dimensions with CSS only in modern browsers, and uses a manual dimension update for IE.
EDIT: Just checked YUI 3. The Panel widget is not available yet, only the Container and it's still beta. So I'm looking at solving this in YUI 2.
PS: Oh I guess I could include the PNG shadow as part of the Panel's header, body and footer (hd, bd, ft), as an extra padding. And use a css rule to hide YUI's underlay. Hmmmmmm I just wish I didn't have to do this because it changes calculations for the draggable area, it's not a great way to do it.