external css for specific div only - javascript

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

Related

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 Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

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

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.

Where in the HTML file should Jquery and Bootstrap be placed?

Curious at to where I place my Jquery and Bootstrap files. They recommend that you always place at the bottom for performance purposes yet when I check sites that use Jquery/Bootstrap the majority of users always place them at the top. Also should I be loading my own JavaScript files before or after the bootstrap/Jquery files?
I take it that I load the my own css file first before the bootstrap file if I want to override some of their styling, is this correct and does the same apply to javascript files?
Typically stylesheets in the head and scripts before the closing </body> tag:
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your-other-styles.css">
</head>
<body>
<!-- content -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="your-other-scripts.js"></script>
</body>
</html>
You'll want files from vendors such as jQuery and Bootstrap to be included before yours. This means that:
CSS: You can override their styles with your own*
Scripts: You have access to any objects added to the global scope such as window (jQuery adds $,
for example)
However, if you require a script to be available before your content loads (such as Modernizr), then putting it in the <head> ensures it's ready before any of your content.
Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.
* assuming your selector specificity is at least equal to those in your vendor CSS
Bottom is best to place all your script references at the end of the page before </body>.It should look like below in normal page.
<html>
<head>
<link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="path/to/file.js" type="text/javascript"></script>
</body>
</html>
Although in some cases it may be necessary to load JavaScript before page load if any of your function need to access JavaScript before Page Load.Specially if you are working with JQuery UI And Bootstrap.
You can decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="Jquery.js" type="text/javascript" defer="defer"></script>
or
<script src="demo_async.js" async></script>
When present, it specifies that the script will be executed asynchronously as soon as it is available.
http://www.w3schools.com/tags/att_script_async.asp
If you need script to access in page for use then script need to available before using it. Although it need to be sure the browser support defer="defer". Async is supported by all major browsers.
Javascript by default block any other parallel downloads. So if you have many tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the java script files have completely loaded. Another advantage to load script in bottom is that any error caused by external script will not stop the page from Loading to browser.
Style css need to present in top <Head> to access in page.
It really depends on what you want to achieve, but generally JS is placed at the bottom and CSS in your head section. Make sure that jquery library loads before Bootstrap's JS library and your custom css file loads after Bootstrap's CSS, so it will override. You can load Bootstrap's CSS from their CDN (or others, like cloudflare - for example http://cdnjs.com/libraries).
Make sure you minify all that & activate compression and you shouldn't experience any performance issues.
Advanced techniques imply using the most important part of your CSS in your head area, then send the rest of the CSS in the bottom area. Or have your whole static content (CSS + JS) hosted on a CDN.

javascript not pulling through - sticky bar

I'm using this:
http://codesandnotes.com/sticky-elements/ (see the jsfiddle)
but I'm having problems in getting it to work. The pink css pulls through but it doesn't stick/doesn't change to red.
I've changed the article to an aside in the html and js. I'm using wordpress. I've added the js to the js folder and called it in the header which is pulling into the correct template. I've added the css to the main style.css. The js and css files are in different locations- could this be what's stopping the js being called?
Any help would be much appreciated. Thanks
is it fixed?
Anyway!
First add css and jQuery Library link to your WordPress Header. Then add html codes from the jsfiddle. after all the things done.
include copied js script file from the jsfiddle to the bottom of the page. See below code will help you to understand. but it's in html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="copied_css_file_from_the_jsfiddle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!-- jQuery Library -->
</head>
<body>
<p>This is the proper way <small>How to use css js and html in correct way</small></p>
<!-- add the html code from the JSFIDDLE-->
<script type="text/javascript">
$( document ).ready(function() {
//Copy and paste the script from the JSFIDDLE
});
</script>
</body>
Contact me by searching yeshansachithak in any social network. Thanks

Categories