I am using angular, and added bootstrap-toggle using bower. I also included the appropriate css, and js files in my index.html. In my resource file, I need to create a toggle switch. I include the following line:
<div>
<input type="checkbox" checked data-toggle="toggle">
</div>
I don't want to add this line using javascript. It is showing up as a checkbox rather than a toggle. Is there something that I am missing?
css link snapshopt
js links snapshot
If you are using, Bootstrap v2.3.2, then you should be using bootstrap2-toggle.min.js and bootstrap2-toggle.min.css.
Make sure you load the bootstrap-toggle.css after the main bootstrap.css file.
Also, make sure load the bootstrap-toggle.js after the main bootstrap.js. right before you close the body tag.
Don't forget the jquery, it needs to go before both js files.
For future readers.
I have fixed the issue by loading jquery and bootstrap js files before bootstrap toggle js.
Same for css files. First bootstrap css and then bootstrap toggle css.
It is better to include the .min.css and .min.js since these versions are minified meaning all whitespace removed to reduce file size and increase speed.
Firstly include jquery JS.
<script src='https://code.jquery.com/jquery-1.10.2.js'></script>
You need to include bootstrap-toggle.min.css after the main bootstrap.min.css file.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
Then also include, bootstrap-toggle.min.js followed by bootstrap.min.js.
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>
Now your checkbox will work as a toggle-checkbox.
Related
I created a blank jekyll blog and I included parallax.js with CDNlink and the link is :
(script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">)
but when I ran it in localhost the moving effect that I have imported doesn't work. In my rails app that I created it works perfect there.Also if I deploy it on GITHUB pages will the parallax work there?What should I do to fix that issue?
I upload in github pages https://lazospap.github.io/LazPap/. There are a lot to be fixed but for now i can't see the images.
YES, parallax effect can work on Github pages.
You probably just made some coding errors/mistakes.
Rules to follow
1. Nothing can be placed after </body></html>
The first mistake I see is that nothing can be placed after </body></html>. Your layout file contains this:
</body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
It should be:
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
</body></html>
2. Open and close the body only once
You embed the content in your layout. Your layout has a body open and a body close tag... however, your content also has a body open and a body close tag. Therefore you open and close the body of your HTML file twice. Remove it in your content file and your are set. Find <body id="page-top"> and </body> in this file and this file and remove them.
3. Use layouts for (complex) HTML and JS
The code < 150 on line 184 gets wrongfully escaped. This is probably due to the fact that you are writing complex HTML and JS in a markdown file. You could prevent this by combining the HTML from 'index.md' and 'default.html' in a file 'home.html' in your layout directory. Your index.md file should then reference 'home' as layout instead of 'default'. Here is the error:
SyntaxError: missing ) after conditionLazPap:184:34
4. Call functions only after they are declared
I know it gets kind of hard to grasp when you use 'defer', but the rule of thumb is to call a function only after you have declared it. Parallax is a function that gets declared in line 71 of default.html:
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
But you call the function inside the content part of that same file on line 38. That does not work, and if it does it is solely due to the 'defer' statement.
5. Use a baseurl
When you host on Github Pages you need a basurl. The reference to your images is /images/HTML_5.png. Because you host on Github pages your baseurl should be /LazPap so your url becomes /LazPap/images/HTML_5.png. More reading about baseurl...
A simpler solution...
You started out with a copy of this code: https://blackrockdigital.github.io/startbootstrap-creative/. The easiest way to achieve a parallax-like effect would be to add JUST ONE CSS rule to the original code:
header.masthead {background-attachment: fixed;}
Although it is the solution I would use, it is probably not what you want, as you specifically mentioned parallax and a javascript solution.
I've been using W3Schools' Javascript library to handle HTML includes onto other HTML pages. Everything has been going good, except I'm running into some formatting issues. When the include processes, it puts the HTML into the body tag when I'd prefer it into a different tag. I don't want my body tag formatting to impact the HTML content that's imported. I'm open to any solutions, but I'd prefer something that allows me to specify a specific tag in the HTML document to be imported into.
I've tried putting the Javascript call into the head or outside of the body tag but haven't had any luck.
Here's the code used by W3Schools: https://www.w3schools.com/howto/howto_html_include.asp
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- import header -->
<div w3-include-HTML="./includes/header.html"></div>
<!-- import navigation bar -->
<div w3-include-HTML="./includes/navbar.html"></div>
<!-- Script to Handle W3Schools HTML Includes -->
<script>
w3.includeHTML();
</script>
Thanks for the help! I'm hoping there's a good way to do this, otherwise I guess I can format my text outside of the body tag... That's far from ideal though.
Did you try to replace <script> w3.includeHTML(); </script> by <script>includeHTML(); </script> ?
Is there a way to drop in a stylesheet that updates the form elements to material theme?
I'm using a plain HTML page and want the theme to fill in the width and heights of the form elements I have on the page.
I can assign class names to the elements to style them or if the stylesheet would apply to existing elements that would work as well.
You can assign the Material Design classes after you include the asset files in your project header and footer.
CDN:
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
NPM:
npm install #material/form-field
Button Example:
To style the button (submit for example), you add class as following, where foo-button will be your custom CSS to overwrite:
<button class="mdc-button foo-button">Button</button>
Form Example:
To style the form you can follow the Form Fields instruction.
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
...
</div>
</div>
<label for="my-checkbox">This is my checkbox</label>
</div>
The JS part to handle error and validation is a little bit tricky, but if you use the console to manage the handlers etc, you should be able to manage.
I have a complex site that has lots of CSS, including jQuery UI and more.
I have added twitter bootstrap 3 (latest at this time) and I wanted to use it just to style a single link as a button.
Well, I got the button and it is awesome!
But also, somehow my fieldset's <legend> element got a different styling, and my existing menu suddenly started using larger font-sizes, messing up my existing layout.
My impression is therefor that adding twitter bootstrap messes with your existing components, whether you like it or not. I am not sure if it always does this, or if it is a complex interaction between my existing CSS and the bootstrap.
My question: how do I limit bootstrap to styling my single button only (and leave the rest alone)? Is that possible?
My code was:
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="screen" />
.....
<fieldset>
<!-- somehow the legend text below changed from existing pre-bootstrap styling -->
<legend>Menu Selection</legend>
<table>
.....
<a href="#" class="btn btn-default btn-info btn-lg">
<span class="glyphicon glyphicon-cog"></span>
button</a>
Why don't you copy the Button style and include it in custom.css and ignore Bootstrap.css.
I don't think it's a good idea to include a big framework just to style a button/link?
Alternatively, use the Bootstrap customizer to download the parts you 'want' to use.
Also, you can create different versions of the Bootstrap.css file via division.
Here's an image.
I am using jsonform (https://github.com/joshfire/jsonform) in order to generate forms from json schema, and the jsonform requires his own css for the form, but i am using another css for my site's template.
Is there a way to apply a css only on a specific tag ? for example only to the html inside ?
I am using rails, so the head is not changing from page to page.
thanks.
If you're using a CSS preprocessor (i.e. SASS, LESS, SCSS, etc.) then it might be an easy job to just indent your custom css under one class/id/tag. You can check this SO question: apply CSS style to particular elements dynamically.
Try this>>>
<link rel="stylesheet" type="text/css" href="theme1.css">
<link rel="stylesheet" type="text/css" href="theme2.css">
Inside theme 1 you would link to certain classes and in theme2 you would link to other classes. Please comment back if you need more help or this is not ideal
for example html
<div id="test" class="testing"></div>
the css would be
#test{color:red;}/*for ids*/
.testing{color:red}/*for classes*/
the styling in the curly brackets can be changed to what you want and the classes and ids can be in any external css if you link your page to it using link rel=
Yes you can. You need to give an ID to the body of your HTML doc if you want to target only that page, or give an ID or class to the element you need to.
<!-- HTML -->
<div class="your-class">
Your content
In the CSS:
.your-class {
your: style;
}
or
<!-- HTML -->
<body id="your-id-name">
<div class="generic-class">
Your content
/* using CSS */
body#your-id-name {
your: style;
}
body#your-id-name .generic-class {
your: style;
}
Hope it helps ;-)
Yes, offcourse there is, that's what CSS is all about.
If you add an ID or a class to the containing element that holds the form, you can add that ID or class to all the CSS selectors in the JSONform css.
for instance:
<div class="jsonform">
{json form goes here}
</div>
and then in your jsonform css, prepend '.jsonform' to all the necessary selectors:
.jsonform input.text {border:none...}
.jsonform input.submit {background-color:...}
I had a look at that jsonform css. I'm amazed that it just uses the complete Twitter bootstrap CSS, there's quite a lot of styling in there that will definitely override your own CSS. I would try to strip out anything that's not directly needed for the form, like body, img, p and h1 declarations.
Maybe the form works fine without the extra styling; you can then apply your own CSS to the form elements...
The CSS included with jsonform is Bootstrap, but the README.md in the /deps directory states that usage of this file is optional. As long as you don't include bootstrap.css in your HTML, you can style the form controls however you'd like/avoid Bootstrap overriding your own styles.
If you want to keep using Bootstrap for jsonform ONLY, you can try "namespacing" the Bootstrap styles using LESS or SASS. Have a look at the first two answers to 'How to namespace Twitter Bootstrap so styles don't conflict' for an idea how to do that with LESS.