Include html file in page without applying original pages CSS/JS - javascript

firstly I am new here, so forgive me if this questions seems poorly written.
Is there any way to include a separate html file without applying the referenced CSS/JS of the original?
For instance, I have a file "index.php" with several references to external style sheets.
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
I then include another file navbar.html with its own external style sheet reference.
<link href="navbar.css" rel="stylesheet">
However, the CSS and JS of the original file always seem to apply to the included file, which unfortunately often leads to the included page being styled inappropriately.
Is there any way to include a page while applying only its desired CSS and JS?
Althou I find IFrames usefull, I am looking for a solution that does not use them, as they are not always browser compatible, and do not dynamically change shape. For instance if a navbar has a dropdown link it will not be shown because the iframe has a set size.

I think what you want to do its not possible as per my knowledge.
Because when you include any file in html, in your case its navbar.html
When it render on browser ultimately it consider as single html file.
With all css / js applied to same html page.
So you can use different class names in your navbar.html and also in css.
So it will not affect to other index.html elements.
Hope it helps you.

the css can be covered,so you can use yours classname for the html style,so lang as you write the core css before yours css.
as well as the javascript, you can use the global variable to manage yours variable avoid global namespace pollution.

Related

external css for specific div only

I am still a newbie, I have an issue.
I have a website which uses some custom edited mybootstrap.css.
I want to add a page by <?php include 'page.html';?>
For this page.html, I want to use a normal bootstrap.css
Now the issue is when i use external css bootstrap.css to my page.html, it messes the whole page. I want this bootstrap.css only for my page.html and not for whole website.
I tried to search a lot on Google and StackOverflow, there were 2 possible ways to do it:
First, by creating a frameset and the other was
`<div>
<style scoped>
#import "scoped.css";
</style>
enter code here
</div>`
Both are not working effectively. Is there any other way? Like using some jquery/javascript for it?
Thanks in advance.
you need to add this in the html page
<link rel="stylesheet" type="text/css" href="scoped.css">
or like this
<!doctype html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="scoped.css">
</head>
<body>
</body>
</html>
If I understand the question well, the header/footer of the page is being styled by the CSS you have mentioned. In this case, you could modify your page to contain the header/footer and and iframe. The iframe would point to a page where an empty header/footer is being used and only the content is being shown. The content will be page.html. This way you will be able to show page.html with the new styles without being worried that the design of the other content of the page will be ruined.
You can directly link your CSS like:
<link rel="stylesheet" type="text/css" href="scoped.css">
You can try this **jQuery Scoped CSS plugin**
Include this plugin file (minified, ideally) and call $.scoped() on load. If you add style blocks to the page later, you need to rerun the plugin.
Any style blocks with the scoped attribute are processed and limited to only affect their parent's children:
<section>
<style scoped>
p {color:red;}
</style>
<p>This will be red.</p>
</section>
checked that you haven't use some bootstrap classes on your website e.g container, container-fluid, row e.t.c
add the bootstrap.css only to page.html and not on your main index file..note that if you include page.html in your index file probably through php include, then your website will inherit some css classes from bootstrap
Just like #hamza suggested, you can copy the css styles you neex from boostrap and add it to mycss.css or better still google the css styles you need for the page.html and add it to your css

Order of bootstrap and CSS library in header effect h3 Tag

When I change the order of bootstrap (online) and CSS library(offline-internal) that affect the h3 used in HTML document. let me explain more about the conflict.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
<link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />
The sequence of the files and below is the result of the HTML document:
Now let's change the sequence of the main.css file, h3 tag and logo (have an h1 tag as well) will change its colour, font, size and layout.
<link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
now take look at the screenshot below:
Now my main concern is to just know that where the problem exists in bootstrap.js? bootsrap.css ? or browse have a bug.
Anyone help to understand the reason behind?
It seems that you have very little knowledge in how CSS works.
CSS is read by the browser from top to bottom and therefore the order matters. Default bootstrap file already cotains styles for the H3 tag. You also can define custom styles for H3 tag inside main.css. So if you put bootstrap css file after your main.css file ultimately browser will first apply your main.css style for H3 tag first and within a split second it will again apply the bootstrap css styles. As a result you will finally see the bootstrap styles on the H3 tag. This can happen vice versa. This is the intended behavior and how CSS works.
Also browsers don't do mistakes when it comes to css rendering. 😉
The order and weight of CSS attributes matter. When you change the order of your files, it is possible that style that was coming from an earlier file was overwritten once a later file was brought in.
This isn't a bug it's just the nature of CSS. In addition to order, things like whether you've selected a Class or Id, the !important attribute, and other things will effect the weight of a particular attribute. If there are competing attributes, the one with the higher weight is applied.
Hope this helps
Seems like you are using your custom css (main.css) to style your html page. The order of your CSS files DOES MATTER. When you place your custom css (main.css) file at the end, it will override rest of your css files. And if you place any other CSS file(bootstrap.min.css in this case) after your custom (main.css), it will override your custom CSS file, hence result may vary. Bootstrap.min.css has its own style that is different from your custom css and that is causing this issue.
My understanding is that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Should be at the top, before all other js.

How to change the media attribute of a css file with plain JS

To avoid blocking the rendering of the "above the fold content" of a site one options seems to be using a css file with a bogus media. Browsers will download it asynchronously anyway as the media "could" apply later...
<head>
<link rel="stylesheet" href="style.css" media="bogus">
</head>
Now, one way to get the CSS in place would be a link (with the proper media screen) at the very end of the body tag but i'd rather look at JS options.
Question: How do we change the media bogus using plain JS (no jQuery, no frameworks)
These are the steps you can follow:
Add an id to the <link /> tag.
<link rel="stylesheet" href="style.css" media="bogus" id="myLink" />
Use the following JavaScript (either one of the lines):
document.getElementById("myLink").setAttribute("media", "screen");
document.querySelector("#myLink").setAttribute("media", "screen");
document.querySelectorAll("link")[0].setAttribute("media", "screen");
My recommendation is to better add an id and then call using it.

How to change color and background of whole web site

I need to change the colors and backgrounds of an existing shopping cart web site so that all backgrounds are blue and all texts are black.
When the mouse is over an anchor element, its background should change to gray.
This site is designed using jquery, jquery plugins, jquery-ui,
ASP.NET / Mono MVC3, Razor views. . jquery ui default theme is used but in may places colors and backgrounds are specified in non-jquery ui css files.
There are number of css files so changing all of them is lot of work.
How to implement this ? Is it possible to add some jquery or other plugin javascript code to page which makes such adjustment or other idea ?
It should be changed to use blue and black colors.
How to implement this ?
Update
Most css files are included in Razon Site.cshtml file which is master page for all files.
css files are static and appear in start of every page:
<link rel="stylesheet" href="/comp/themes/base/jquery.ui.all.css"
type="text/css" title="ui-theme" />
<link href="/comp/Content/Css/jquery.ui.menubar.css" rel="stylesheet"
type="text/css" />
<link href="/comp/Scripts/jBreadCrumb/Styles/BreadCrumb.css" rel="stylesheet"
type="text/css" media="screen" />
<link href="/comp/Scripts/Pikachoose/jquery.fancybox.css" rel="stylesheet"
type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/comp/Scripts/jcarousel-0.2/skins/tango/skin.css" />
<link href="/comp/Content/Css/Site.css" rel="stylesheet" type="text/css" />
jquery-ui menubar, breadcrumb, fancybox, pikachoose jcarousel plugins are used.
First off, you wouldn't use JavaScript for this because it would create extra load time, wouldn't work for users with JavaScript disabled, and is entirely unnecessary.
To change the background colour of a page you'd find the body tag and add or change its background (or background-color) property:
body {
background:#F00; /* #F00 being the hex representation of "red" */
}
Your website may have multiple CSS files, but it should have one global CSS file for styles which are already applied to all pages. If this isn't the case, you should really consider combining any commonly used styles into one file and including that on all of your pages.
If changing your body styling doesn't change anything, you'll need to find out where the site is currently getting its background from. If there are two files with body { background:...; } declared, the latter included CSS file will override the former. That said, you can easily find which colour is being pulled through by consulting your browser's Element Inspector to find the body's "computed style".
Edit: based on your latest edit, going by the file names "/comp/Content/Css/Site.css" is the file you'd want to change.
Changing background-color for page can be achieved by applying style to body tag, but there are good chances that your page will have wired fonts because of existing css, thus asking you to push in more time finding individual fix then creating new one,
There is no shortcut to do this kind of work without good chances of failing and ending up spending more time in fixing.
Better would be:-
Create copy of css files and make you changes there, now change path to point to this new css.
If by any chance you are using themes create a new theme, if not consider having themes.
KISS principle:
Put this in a .js file and refer to it in the head or put it in the head tag as a script.
JavaScript:
function colorset(x,y)
{
document.body.style.background = x;
document.getElementById('ElementID').style.color = y;
}
HTML:
white on black

CSS and JavaScript appearing inline in sourcecode

I have a website that runs smoothly, but I just saw that when I'm viewing the source, in Chrome and IE9, it shows my css and javascript inline instead of the link to the files. <style type="text/css" style="display:none">[my css]</style> instead of the <link rel="stylesheet" type="text/css" href="style.css" /> that I see in my PHP editor and that I coded on purpose. I don't see things like this on other websites, only at mine.
How is this possible? A certain change in server settings?
The browser tools are just in-lining it to make your debugging easier. This is merely a convenience to show you the flow of the page. The files are still external and shared across many pages.
There are 3 different ways of adding CSS to your HTML pages: inline, external, and attribute-based.
Inline CSS is what you have now. It's when the CSS code is directly embedded into your HTML.
External CSS is when you reference a CSS file, like your second example.
Attribute based CSS is when you directly set attributes in the HTML file. Ex:
<div style="CSS HERE"></div>
All 3 methods work the same, but for abstraction purposes, external stylesheets are recommended.
In your case, the PHP editor is probably injecting the CSS directly into your code.

Categories