The following HTML works in Firefox and Google Chrome. But, it does not work with Internet Explorer 8. The panels would not expand (see code below).
Is there anyway I can make it work with IE8?
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src=" http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.custom {
width: 130px !important;
}
div.panel {
display: inline-block;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-primary custom" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Section 1</button>
<div id="collapsible-1" class="collapse">
Content
</div>
</div>
<br/>
<div class="panel">
<button type="button" class="btn btn-primary custom" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Section 2</button>
<div id="collapsible-2" class="collapse">
Content
</div>
</div>
<br/>
</div>
</body>
</html>
Indeed, the way you are doing it is not working on IE. I tested the code directly from jqueryui that you can find here and it's working for me.
You can also try to change the compatibility with <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> and try different versions but I don't think that's the best way of doing it.
Related
I have the switch button showing on/off, when switch in between. I don't seem to see any errors on browser while inspecting it. Yet if I use JsFiddlenet as a browser IDE, the button are working fine. Maybe let me share the order of my HTML for using bootstrap and javascript.
The html Part:
<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" />
<pre lang="Javascript">
<div class = "wrapper" align = "center">
<div class="btn-group" id="toggle_event_editing">
<button type="button" class="btn btn-info locked_active">OFF</button>
<button type="button" class="btn btn-default unlocked_inactive">ON</button>
</div>
<div class="alert alert-info" id="switch_status">
Switched off.
</div>
</div>
And the JS Part:
<script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<script type="text/javascript">
$('#toggle_event_editing button').click(function(){
if( $(this).hasClass('locked_active') ||
$(this).hasClass('unlocked_inactive')) {
/* code to do when unlocking */
$('#switch_status').html('Switched on.');
} else {
/* code to do when locking */
$('#switch_status').html('Switched off.');
}
/* reverse locking status */
$('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
$('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
});
</script>
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" />
<pre lang="Javascript"><div class = "wrapper" align = "center">
<div class="btn-group" id="toggle_event_editing">
<button type="button" class="btn btn-info locked_active">OFF</button><button type="button" class="btn btn-default unlocked_inactive">ON</button>
</div>
<div class="alert alert-info" id="switch_status">Switched off.</div>
</div>
<script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<script type="text/javascript">
$('#toggle_event_editing button').click(function(){
if($(this).hasClass('locked_active') || $(this).hasClass('unlocked_inactive')){
/* code to do when unlocking */
$('#switch_status').html('Switched on.');
}else{
/* code to do when locking */
$('#switch_status').html('Switched off.');
}
/* reverse locking status */
$('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
$('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
});
</script>
I'm writing my first web server, so don't hate.
I am using Golang and HTML with BootStrap.
This program will eventually run on a Raspberry Pi in a small device. So I assume it would be best to use a downloaded version of BootStrap rather than the CDN version right?
But when I do this, my buttons on my page lose their formatting.
Here is my HTML code using the CDN version:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- Camera Positioning -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>
<h4>{{.Head}}<h4>
</body>
</html>
Here is the new HTML which is not working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href = "css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- Camera Positioning -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>
I have only changed 2 lines, so that I use (or try to) the local BootStrap CSS and JS.
And I call it from Go like this:
http.HandleFunc("/", managementinterface.IndexHandler)
log.Fatal(http.ListenAndServe(":8080", nil))
And IndexHandler is like this:
func IndexHandler(w http.ResponseWriter, r *http.Request) {
t, _ := template.ParseFiles("../html/index.html")
t.Execute(w, "")
}
One final note: The CDN version is 3.3.7, the version I downloaded is 4.1.1
And also if I look at the local BootStrap CSS file, I can see this:
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
Which is the styling I want. Any help appreciated, thanks.
it turns out someone else on this open source project answered this.
What they did was pack all the static css and html pages into the Go executable. They did this with a package called packr: https://github.com/gobuffalo/packr
It's a tool that does that for you.
So then you have only 1 file to deploy, which is really nice.
Are you actually serving the JS and CSS code from the Go code? If not, your browser is asking the Go HTTP server for the resources, but it has no idea what you're talking about (if you look at the developer console in your browser it will show you a 404 response on the requests for those files.
You may need to do something like (assuming you've got your CSS and JS in a directory called assets)
cssFs := http.FileServer(http.Dir("/home/user/www/assets/css"))
http.Handle("/css", fs)
jsFs := http.FileServer(http.Dir("/home/user/www/assets/js"))
http.Handle("/js", fs)
More info at http.FileServer
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
<style type="text/css">
button{
background-color:red;
}
</style>
</body>
</html>
In the above segment, Bootstrap is being used and when tried to apply the background-color property for the button tag,it is not being reflected.What is the reason for that?
Try to add !important:
<style type="text/css">
button{
background-color: red !important;
}
</style>
Or put your <style> upper, than your divs and buttons... sometimes that is the issue.
You can use !important, because bootstrap already written a style. So if you want to overwrite that style, maybe you will need to write it down under the bootstrap's style, otherwise you will need to add !important.
I think this website will help you to understand the reason of !important.
https://css-tricks.com/when-using-important-is-the-right-choice/
I am trying to develop a simple front end for displaying images using BootStrap. However before using BootStrap the button to view images was working fine but after styling the page using bootstrap, It does nothing, Can anybody tell me what am I doing wrong? When I tried seeing in Developer tools of Chrome , I get 2 exceptions:
Uncaught Error: You must include the utils.js file before tether.js
at tether.js:4
(anonymous) # tether.js:4
bootstrap.min.js:7 Uncaught ReferenceError: Tether is not defined
Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="script/tether.min.js"></script>
<script src="script/tether.js"></script>
<script src="script/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/styles.css"></link>
<script src="script/bootstrap.min.js"></script>
</head>
<body>
<h1 class="mt-4" align='center'> Demo Website </h1><br>
<div class="container" style="width:300px; background-color:ghostwhite;">
<div class="form-group">
<form action='viewimages2.php' method="GET">
<button class="btn-block btn btn-info" align='center' type="submit" name="Submit"> View Images </button>
</form>
</div>
</body>
</html>
Working Code without Bootstrap:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<H1 align='center'>Demo Website/h1><br>
<button align='center' type="button" onclick="window.location='Register.php';" value="Register"> Register </Button>
<button align='center' type="button" onclick="window.location='Login.php';" value="Login"> Login </Button>
<form action='viewimages2.php' method="GET">
<button type='submit' name="Submit"> View Images </button>
</form>
</body>
</html>
You can try this, put the jquery.min.js before the other .js files. I think you can remove tether.js since you are already using tether.min.js
<script src="script/jquery.min.js"></script>
<script src="script/tether.min.js"></script>
I am using bootstrap to toggle the div element. I am using the following code, its working for its default behavior i.e. to hide the toggled content in the beginning.
I want to show the toggled content at the beginning and so using "collapse in" bootstrap class as suggested on their site. But still its giving its default behavior to hide the content at the beginning.
Code snippet
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
Note: All the necessary files for working of bootstrap have been added i.e. bootstrap and jquery file.
Can anyone help me with this ?
Your Code Working Fine .some How bootstrap.min.js , & css Missing .
Check Live Demo Here
Snippet Example
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
Please verify the following things.
You have included bootstrap js and css and jQuery
As well as the jQuery version is latest.
I have attached a sample snippet. This seems to be working perfect for me.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
</div>
</body>
</html>
Thanks for your concern and comments, those were helpful. Issue got resolved, in our project solution we were having some bootstrap overridden classes, so "collapse in" class was conflicting with one of those overridden classes.
cheers..