I want to make a snippet of javascript that my users can integrate in their website.The snippet would then load a series of elements such as divs, modals, toolstips.
A few years ago, I did this using an async javascript code that would load an iframe. Are there better ways to do this in 2019 than iframes?
Also, will my generic css iframe rules (i.e. a, div, common class names etc) interfer with the websites css? For example, can I use bootstrap or do I need to write custom css and be specific about targeting so I don't mess the other websites layout?
What else should I pay attention to?
Related
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.
I'm going to be re-designing a website that currently uses Bootstrap.
I'm more of a fan of building my own layouts however as this site already uses Bootstrap, I'm unsure how to go about the re-design.
I've never used Bootstrap before (I know how it works from looking at the documentation and videos) but is it possible for me to have parts of a webpage use Bootstrap and other parts not?
For example, say there are 5 sections on a home page. The first section is a full screen hero etc.. then sections 3 and 5 break the grid. Could I use Bootstrap only for sections 2 and 4 but then do my own layout for sections 1, 3 and 5? I'm just curious as to whether or not it would cause problems doing this?
Another example is that we would want something like this on the site: https://codyhouse.co/demo/horizontal-timeline/index.html
I assume the best way to implement that would be outside of Bootstrap? So, this would be a section on a page where I don't use it?
I know we could scrap Bootstrap but not all pages on the site are being re-designed, so Bootstrap is already going to be in use. I'm trying to make parts of the site more interactive and "different", so using Bootstrap would be good for basic layout but I don't want to be fighting with it to achieve my goal.
Thanks!
you have two way to building your own layout
Overwrite the css of bootstap, create new css file and write your won styles into it and load embed it after bootstrap.min.css in you code.
Avoid use of bootstrap class, because bootstrap is working on classes so
avoid to use of bootstrap class.
I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?
put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.
Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this
As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.
Is there a way to wipe out all CSS rules once style sheets have already been loaded?
I have to use a proprietary JavaScript library (ESRI's ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo's widgets and would like to use Dojo's claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.
So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.
Something like the following would be nice:
* {none}
but I figure I'll have to end up using either Dojo or jQuery to accomplish this.
check out this bookmarklet called RefreshCSS by Paul Irish:
javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()
It refreshes the CSS stylesheets on a page, without refreshing the page itself.
I think you could do some alterations to it and get it to do what you want?
Another approach using jQuery that might work is to run this once the page has loaded:
$('head link, head style').remove();
Nope. Sadly, such a thing does not exist.
The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.
Is there a way to “sandbox” an html block away from its page's CSS without using iframes?
Reset CSS for a certain area of the page?
prevent meyer reset css to mess with dynamic content
How to reset css in middle of html document ?
There is always document.head.innerHTML = ""; But it really cleans house so you have to store away any scripts,metatags, titles or whatever you want to save and add them again.
Is it possible to create a text sprite and selectively display parts of the same HTML file and ignore the rest. The part to be displayed is selected by a menu generated generated using CSS with links within the same page.
(The length of each section is unknown and expected to vary greatly).
Communicating with the server is unfortunately not an option.
And as you might expect i am new to CSS,PHP and JS
you will want to wrap each section with an ID tag, and control the visibility with javascript. There are several methods of controlling visibility in JavaScript.
The CSS elements that control visibility are visibility and display.
Visibility shows or hides text using the attributes in the above reply, and display allows you to actually remove that block from the DOM by using "block" and "none" as the attributes. You'll want to choose whichever element works best for your application.
Javascript libraries such as Prototype/script.aculo.us or J-Query, MooTools, etc are fantastic for this kind of control.
If you want to learn this kind of scripting from scratch, the book "DOM Scripting" by Jeremy Keith is a fantastic book that can be completed in a couple of days.
Sounds like CSS property visibility set to hidden | visible | collapse.
You should use display none to hide things and display block to show them again (or display inline)