How to apply css and js to specific element? [duplicate] - javascript

This question already has answers here:
Limit scope of external css to only a specific element?
(6 answers)
Closed 5 years ago.
I am using Bootstrap 4 for my project and I need to add some div to my project. Problem is this div element created using Bootstrap 3. Is there any way to use Bootstrap 3 for specific div?
<html>
<head>
<!--use Bootstrap 4 js and css-->
</head>
<!--Start to use Bootstrap 3 js and css-->
<div>
</div>
<!--Stop to use Bootstrap 3 js and css-->
</html>

First and foremost, if that is the website structure you got it is incorrect, and a proper structure can look something like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<meta charset="UTF-8"/>
<!-- Any required CSS or JS files goes here -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Apart from that, Bootstrap does indeed have CSS classes including "div", however, most of what it does requires you to give a class to an element in order for anything to happen. If it does anything else, you should double check in what order you are linking your CSS files since it does matter, and if that doesn't help, make specific classes yourself in your own CSS file to override it.

Related

How to know if javascript is suppose to be in the <head> or at bottom of the html? [duplicate]

This question already has answers here:
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 3 years ago.
I have a <head> full of .css, .js and metadata. But there is just one script that will not run properly if it is put in the <head> of the html. It will only work if it is at the end of the file.
What I would like to know is, if there are any documentation regarding this or a special type of rules I should follow as a beginner web designer.
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style2.css" rel="stylesheet">
<script src="js/script.js"></script>
<script src="js/scipt2.js"></script>
</head>
<body>
<----------HTML---------->
</body>
<script src="js/secret.js"></script>
</html>
The modern way to solve this issue is to use the defer attribute on the script tag. Put all your tags in the <head>
From MDN:
This Boolean attribute is set to indicate to a browser that the script
is meant to be executed after the document has been parsed, but before
firing DOMContentLoaded.
So this:
<script src="js/secret.js"></script>
becomes this:
<script defer src="js/secret.js"></script>
But the tag now goes into the <head>.

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

VS Intellisense not predicting things with JavaScript libraries [duplicate]

This question already has answers here:
How do you get JavaScript/jQuery Intellisense Working in Visual Studio 2008?
(9 answers)
Closed 6 years ago.
When I include a JavaScript library with my normal script, is there a way to make Visual Studio (2015)'s Intellisense work?
My setup:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!-- the library I want Intellisense to work with -->
<script src="libs/three/build/three.min.js"></script>
</head>
<body>
<h1>Hello</h1>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
And in my main.js I want to use the Three library I have specified:
var scene = new THREE.Scene();
When I enter THREE. I want to see a list of available attributes as I begin typing Scene.
Is my setup wrong - do I need some sort of config file? Or does this functionality not exist with JS?
I found the answer here, in another SO question. Go and vote on it instead of this one.
For anyone else reading this: include this line at the top of your external JavaScript file:
/// <reference path="myLibrary.js"/>
So in my case, in my main.js, I would have
/// <reference path="libs/three/build/three.min.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.

Script tags needed in HTML? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
What are the script tags I HAVE TO insert into the <head> of my HTML???
Here is what I have:
<head>
<title>My Web Site</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='scrollup.js'></script>
<script type='text/javascript' src='verticalsmoothscrolling.js'></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
</head>
But if I delete first three script tags above and add this one instead:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...everything works the same way (plus it looks clean and neat).
Can anyone explain me in simple words what each of the first three script tags does, and how do they differ from the one I added instead of those three??? Which one would you use?
I prefer the bottom solution but I am not sure if that's correct/best option???
The core difference here between the libraries is that one is basic jQuery, while the other two are jQuery UI and its stylesheet. jQuery UI isn't often a library that's included in pages unless it's very deliberate. If you're not sure that you're using it, you're probably not using it.
The tag that you added is simply a newer version of jQuery. The reason everything works the same is that your code likely isn't using jQuery UI, so there's no issue if it goes missing.
Also, you don't HAVE to put your script tags in the head. They can go anywhere on the page. However, it's good practice to put your script tags at the BOTTOM of the page. This is so that your page is able to load and render the HTML elements without first having to load JavaScript, which can occasionally cause a bit of hangup on page load.
Update
As far as when to use jQuery UI, it's commonly used in projects with very dynamic UI elements. For instance, jQuery UI allows for click/draggable elements, dynamic sorting, resizable elements, etc. You can see a full listing of its features and demos here.
This library stands out because while standard jQuery does support these interactions, it's not quite as easy and clean as using jQuery UI. Note that jQuery UI is an extension of jQuery and relies on jQuery to run.
You replaced jquery 1.9.1 with jquery 2.0.0. If you want to know, what's different in the new version, you can always take a look at the patchnotes.
you dont HAVE to put any tags in the head of your page.
Although it is recommended you add META tags, the charset and the TITLE tag to name your page.
javascript can be placed anywhere on a page

Categories