Jump to content

Toogle Checkboxes


Recommended Posts

Hello Aurora,

 

You can paste the following code

in Header: 

<script src="[@app:URL_5]"></script>
<script src="[@app:URL_3]"></script>
<link href="[@app:URL_1]" rel="stylesheet" >
<link href="[@app:URL_4]" rel="stylesheet">
<link href="[@app:URL_2]" rel="stylesheet">
<style>
.checkbox label .toggle,
.checkbox-inline .toggle {
 ;
 margin-right: 5px;
}

.toggle {
 position: relative;
 overflow: hidden;
}
.toggle input[type="checkbox"] {
 display: none;
}
.toggle-group {
 position: absolute;
 width: 200%;
 top: 0;
 bottom: 0;
 left: 0;
 transition: left 0.35s;
 -webkit-transition: left 0.35s;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.toggle.off .toggle-group {
 left: -100%;
}
.toggle-on {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 50%;
 margin: 0;
 border: 0;
 border-radius: 0;
}
.toggle-off {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 50%;
 right: 0;
 margin: 0;
 border: 0;
 border-radius: 0;
}
.toggle-handle {
 position: relative;
 margin: 0 auto;
 padding-top: 0px;
 padding-bottom: 0px;
 height: 100%;
 width: 0px;
 border-width: 0 1px;
}

.toggle.btn { min-width: 59px; min-height: 34px; }
.toggle-on.btn { padding-right: 24px; }
.toggle-off.btn { padding-left: 24px; }

.toggle.btn-lg { min-width: 79px; min-height: 45px; }
.toggle-on.btn-lg { padding-right: 31px; }
.toggle-off.btn-lg { padding-left: 31px; }
.toggle-handle.btn-lg { width: 40px; }

.toggle.btn-sm { min-width: 50px; min-height: 30px;}
.toggle-on.btn-sm { padding-right: 20px; }
.toggle-off.btn-sm { padding-left: 20px; }

.toggle.btn-xs { min-width: 35px; min-height: 22px;}
.toggle-on.btn-xs { padding-right: 12px; }
.toggle-off.btn-xs { padding-left: 12px; }

header, footer {
 padding: 20px;
 background-image: url('header.png');
 background-size: 256px 256px;
}
footer {
 color: #fff;
 text-align: center;
}
.nyt-logo {
 max-height: 40px;
 margin-top: 5px;
 margin-right: 5px;
}

nav.navbar {
 margin-bottom: 10px;
 background-color: #fff;
 border: 0px;
 border-radius: 2px;
}
#navbar {
 margin: 0px;
}
#navbar .navbar-nav li iframe {
 margin-top: 15px;
}
#navbar .navbar-nav li:last-child iframe {
 margin-right: 15px;
}

@media screen and (max-width: 767px) {
 #navbar .navbar-nav li iframe {
  display: none;
 }
}

.mast-head {
 margin: 10px 0;
}
.mast-head h1 {
 margin-bottom: 15px;
 color: #fff;
}
.mast-head p {
 color: #fff;
}

.mast-links {
 padding-top: 10px;
}

.mast-links > * {
 vertical-align: middle;
 margin-bottom: 10px;
}

.mast-links > .btn {
 margin-right: 30px;
}
main {
 margin: 10px 20px;
}
main .container {
 margin-bottom: 40px;
}

code.hljs {
 border: 1px solid #ccc;
 padding: 1em;
 white-space: pre;
 margin-bottom: 10px;
}

.example {
 position: relative;
 border: 1px solid #ccc;
 padding: 1em 1em 0.5em 1em;
 border-radius: 4px 4px 0 0;
}

.example:after {
 content: "Example";
 position: absolute;
 top: 0px;
 right: 0px;
 padding: 3px 7px;
 font-size: 12px;
 font-weight: bold;
 background-color: #f5f5f5;
 border: 1px solid #ccc;
 color: #9da0a4;
 border-radius: 0px 4px 0px 4px;
 border-width: 0px 0px 1px 1px;
}

.example + code.hljs {
 border-top: 0;
 border-radius: 0px 0px 4px 4px;
}

.example > * {
 margin-bottom: 10px;
}

.example > div.toggle {
 margin-right: 10px;
}

.table-striped code {
 background-color: inherit;
}
</style>

and in Footer:

<script>
  $(function() {
    $('#InsertRecordyour_field').bootstrapToggle();
  })
</script>

Enter name of your field instead of your_field. 

 

Hope it helps.

Link to comment
Share on other sites

Hello kenanjones,

 

Please change it:

<script src="[@app:URL_5]"></script>
<script src="[@app:URL_3]"></script>
<link href="[@app:URL_1]" rel="stylesheet" >
<link href="[@app:URL_4]" rel="stylesheet">
<link href="[@app:URL_2]" rel="stylesheet">

into:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

in your script.

 

Hope it helps.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...