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>
Related
I currently have a button with a span that displays an icon with an arrow, like so:
<button id="btnCollapse" type="button" onClick="hey()" class="btn btn-default btn-sm">
<span id="iconCollapse" class="glyphicon glyphicon-collapse-down"></span>
Collapse Views
</button>
I would want onClick function to instead now say Expand Views, and have the glyphicon-collapse icon to be up rather than down
Here's what I have come up with:
function hey() {
var btn = $("#btnCollapse");
var span = btn.children("#iconCollapse");
span.addClass("glyphicon glyphicon-collapse-up");
btn.html = "Expand Views"
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btnCollapse" type="button" onClick="hey()" class="btn btn-default btn-sm">
<span id="iconCollapse" class="glyphicon glyphicon-collapse-down"></span>
Collapse Views
</button>
What I am actually trying to achieve is this:
If user clicks on Collapse View - I want to perform some functionality, something along the lines of
if (btn.html.contains('Collapase'))
Then
//do something
Else
//do something else
First: ID should be unique .. That means if you will use multiple collapse/expand elements you need to change the id to class
Second: if you change the HTML you'll remove the icon so it will be better to wrap the text inside <span>Collapse</span> or change all the html like the example below
<!DOCTYPE html>
<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.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<button type="button" onClick="hey()" class="btnCollapse btn btn-default btn-sm">
<span class="iconCollapse glyphicon glyphicon-collapse-down"></span>
Collapse Views
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
<script>
function hey(){
var btn = $(".btnCollapse");
var span = btn.children(".iconCollapse");
btn.html(
btn.text().trim().indexOf("Collapse") > -1 ?
'<span class="iconCollapse glyphicon glyphicon-collapse-up"></span> Expand Views'
:
'<span class="iconCollapse glyphicon glyphicon-collapse-down"></span> Collapse Views');
}
</script>
For me this isn't the good way to do that .. But you can use this code temporarily untill you get a best code of it
And the good way to do this is:
<!DOCTYPE html>
<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.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<button type="button" onClick="hey(this)" class="btnCollapse btn btn-default btn-sm">
<span class="iconCollapse glyphicon glyphicon-collapse-down"></span>
<span class="textCollapse">Collapse Views</span>
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
<script>
function hey(el){
var btn = $(el);
var span = btn.find(".iconCollapse");
var text = btn.find(".textCollapse");
span.toggleClass("glyphicon-collapse-down glyphicon-collapse-up");
text.text(span.hasClass("glyphicon-collapse-up") ? "Expand Views" : "Collapse Views");
}
</script>
JS ES6/css3 make it easier:
const
btn = document.querySelector('#btnCollapse')
, btnIcon = document.querySelector('#btnCollapse > span.glyphicon')
;
btnCollapse.onclick = () =>
{
btnIcon.className = (btn.classList.toggle('viewExpend'))
? 'glyphicon glyphicon-collapse-up'
: 'glyphicon glyphicon-collapse-down'
;
}
#btnCollapse
{
font-size : 3rem;
}
#btnCollapse::after
{
content : 'Collapse Views'
}
#btnCollapse.viewExpend::after
{
content : 'Expand Views'
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button id="btnCollapse" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-collapse-down"></span>
</button>
also :
const btn = document.querySelector('#btnCollapse')
;
btnCollapse.onclick =()=>
{
console.log( btn.classList.toggle('viewExpend') );
}
#btnCollapse
{
font-size : 3rem;
width : 10em;
}
#btnCollapse > span.glyphicon
{
float : left;
}
#btnCollapse.viewExpend > span:first-of-type,
#btnCollapse:not(.viewExpend) > span:last-of-type
{
display: none;
}
#btnCollapse::after
{
content: 'Collapse Views'
}
#btnCollapse.viewExpend::after
{
content: 'Expand Views'
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button id="btnCollapse" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-collapse-down"></span>
<span class="glyphicon glyphicon-collapse-up"></span>
</button>
I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/
It works fine there.
Same exact code on google apps script, nadda. What do I need to change to make this work properly there?
test4.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<base target="_top">
</head>
<body>
<div data-role="collapsible-set" id="set">
<div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
<h3>Stuff</h3>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<?!= include('test4JS'); ?>
</body>
</html>
test4JS:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$('#submit').on('click', collapse);
function collapse(sender) {
$("#set").children(":first").collapsible( "collapse" );
//$(".stuff").collapsible("collapse");
//$("#set").children(":first").trigger( "collapse" );
//$(".stuff").trigger("collapse");
//none of these work
}
</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
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.
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>