Web Widget using html, js and bootstrap - javascript

I am building a web widget using javascript only and not using iframe. I want my web widget not to use page's css. I cant use custom css and also don't want to use iframe as it will not be user friendly.
How can i restrict my web widget not to use page's css. As my web widget will return html code and that html uses that page css.

There is a thing like CSS reset: https://meyerweb.com/eric/tools/css/reset/
It basically resets all css properties for a given subtree.

Related

Override CSS style of an external widget

I have a Wordpress where I want to use the tree counter widget from this site: https://kb.tree-nation.com/knowledge/tree-and-co2-counters (the top one).
How do I override the CSS style of that widget? Custom CSS in Wordpress doesn't work.
I actually just need to show the number value (the count of trees).
If you embedded an iframe that is hosted in another website, you will not be able to edit the style of the elements inside the iframe by adding CSS to your website.

How to build a web widget with PHP, Java Script and give custom CSS controls to external sites?

I am trying to create a web widget that can be easily integrated into any website by just copying a small piece of code but most importantly give the user custom CSS controls like changing the font or button color, etc. My code consists of JavaScript and PHP. I tried to do this with <iframe> but it just copies the whole page with menu and footer. I couldn't find any solution on how to remove it. Please help, thank you.

Prevent javascript access to DOM elements of widget

If I develop a Javascript widget that others can embed directly into their page without using an iFrame, is it somehow possible to prevent Javascript access to DOM-elements of the widget from the embedding page?
Suppose the widget is an image gallery and the embedding website selects all images via Javascript and changes both CSS attributes and any click handlers. How can I prevent the functionality or appearance of the widget from being changed without using an iFrame? I imagine this as a kind of firewall that allows/blocks Javascript access by DOM-source and destination.
The perfect solution is Shadow Dom

How to inherit CSS of parent site and apply it on HTML rendered using Javascript?

I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.

Don't apply css on specific page

Is it possible and how to do not apply css on specific web page?
For example, i have some div's on Master Page and some css for them
.header {...}
But i have also some page (Home page), which is different from all site-style.
So i don't want to appy css from Master Page and i don't want overwrite existing css rules like this :
#specific.header{...}
Maybe there is solution such as add new Master Page.
Is it good to add some css using JS before page is loaded?
Maybe you can try any of these options:
Wrap all your standard pages under a <div id="whatever">, except the specific page you want free of your general css. Then prefix your css rules with #whatever, so a {color:red;} would be #whatever a {color:red}
This approach is very easy using LESS, because there is no need of prefixing every rule, just wrap them inside #whatever { ALL YOUR RULES}
Dynamically loading of your css, via JS or your server logic if you are using any MVC flavoured framework.

Categories