I'm writing JS plugin which will be placed in several different websites. Those websites are using different styling, some Bootstrap, some Bulma and some just custom styles.
My plugin is generating DOM elements like divs, inputs, selects. I want to style those elements on my own. How to make this plugin look the same in any website which it will be embed?
Maybe creating Shadow DOM elements would help. Then you will be able to add your custom DOM elements and they will not be affected by whatever is outside. See here: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Related
i'm using bootstrap nav-tabs(vertical pills). i want to make this - when i click on tab, the content of THIS tab drop downing exactly under this tab(not somewhere else) like this
Then the Bootstrap feature what you are looking for is called Accordion or Collapse and not Nav-Tabs.
Here is the link where its available in the bootstrap documentation. You do not need any extra plugin except ofcourse jquery.min.js', bootstrap.js and bootstrap.css to make this work.
Important Note : jquery.min.js should be loaded before bootstrap.js.
http://getbootstrap.com/javascript/#collapse
Here is the basic Accordion example with the required libraries.
Hope it helped :-)
I have found solution. if someone also have this problem, just check bootstrap accordion
accordion
thats it!
From the Bootstrap docs:
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Using navs for tab panels requires JavaScript tabs plugin
For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.
Make navs used as navigation accessible
If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
I'm very new to this and don't know how to use javascript or jquery and would prefer to avoid using it in all possible cases as I know it's not compatible in all browsers, takes time to load and can be disabled by users.
I've already made and designed the menu but would like the main heading in the menu to change to the submenu link when clicked on whilst keeping the rest of the menu in tact. How do I achieve this in css?
You can take a look at http://davidwalsh.name/css-target and use the css target selector (But it's not supported in IE - I haven't checked IE10 though).
but-
If you want to change the text or href attribute then, it's not possible in pure css (correct me if I'm wrong). You would have to use javascript. Jquery makes it easier to make your site support most used browsers, why not give it a go? I am certain if you get stuck, people on Stack overflow would gladly help you.
on a sidenote, css can also be disabled by the user (and not all browsers support all css features). Css and Javascript are in the same boat, because the browser dictates what is supported.
I want to style form elements but im finding I cant do everything I want with CSS as sometimes the browsers ignore the styles. jQuery Mobile seems to get around this by creating new divs and spans around form elements. I dont want to use the entire jQuery Mobile library and I dont believe its possible to just use this behavior from it. Are their any other frameworks / methods that standardize form elements cross device and allow you to style them how you want? Thanks
I have Javascript codes building a small div layer with CSS. The div layer has inline style codes to display the way I want. I notice the div layer looks distorted on some microsites. Are there ways to write the inline style code from being overwritten by other CSS?
Thanks in advance
Inline styling cannot be overwritten by a stylesheet. However, if there are properties in a stylesheet that aren't written inline, and therefore nothing is conflicting with one another, those styles will also be active.
The reason for distortion could be that other CSS files from these 'microsites' share similar naming conventions for this particular element. If this is the case, the stylesheets from these microsites are applying their styles that are otherwise unfounded within your inline styling.