I'm experiencing misalignment when using boostrap 3 and datatables buttons (https://datatables.net/extensions/buttons/). How to align them propery?
everything works fine when on div.dt-buttons margin is set margin-top:2px;, don't know why, but it feels wrong is there any "standard way"?
$(document).ready(function(myApp) {
myApp.myDataTable = $('.my-table').DataTable({
fixedHeader: true,
paging: true,
buttons: {
dom: {
button: {
className: ''
}
},
buttons: [{
extend: 'colvis',
tag: 'button',
className: 'btn btn-default'
}]
}
});
}(window.myApp = window.myApp || {}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css" />
<div class="row">
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 12 of 24 entries</div>
</div>
<div class="col-sm-3">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
Previous
</li>
<li class="paginate_button active">
1
</li>
<li class="paginate_button ">
2
</li>
<li class="paginate_button next" id="DataTables_Table_0_next">
Next
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="dt-buttons">
<button tabindex="0" aria-controls="DataTables_Table_0" type="button" class="buttons-collection buttons-colvis btn btn-default" aria-haspopup="true" aria-expanded="false">
<span>Column visibility</span>
<span class="dt-down-arrow">▼</span>
</button>
</div>
</div>
</div>
There are a few ways you could go here. I'd probably remove the margin from the pagination list as a reset. You can then add spacing back in using your grid instead.
$(document).ready(function(myApp) {
myApp.myDataTable = $('.my-table').DataTable({
fixedHeader: true,
paging: true,
buttons: {
dom: {
button: {
className: ''
}
},
buttons: [{
extend: 'colvis',
tag: 'button',
className: 'btn btn-default'
}]
}
});
}(window.myApp = window.myApp || {}));
ul.pagination {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css" />
<div class="row">
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 12 of 24 entries</div>
</div>
<div class="col-sm-3">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
Previous
</li>
<li class="paginate_button active">
1
</li>
<li class="paginate_button ">
2
</li>
<li class="paginate_button next" id="DataTables_Table_0_next">
Next
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="dt-buttons">
<button tabindex="0" aria-controls="DataTables_Table_0" type="button" class="buttons-collection buttons-colvis btn btn-default" aria-haspopup="true" aria-expanded="false">
<span>Column visibility</span>
<span class="dt-down-arrow">▼</span>
</button>
</div>
</div>
</div>
Related
Not sure where I've gone wrong, here's the issue:
Here's my code:
<?php
require 'config.php';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Vendor list - VendorBase Pro</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<!-- Bootstrap core CSS -->
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Light Bootstrap Table core CSS -->
<link href="assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel="stylesheet"/>
<link href="DataTables/DataTables-1.10.20/css/jQuery.dataTables.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<style>
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
td {
overflow:hidden;
table-layout: fixed;
max-width: 500px;
overflow-wrap:break-word;
}
</style>
<body>
<div class="wrapper">
<div class="sidebar" data-color="blue" data-image="assets/img/sidebar-5.jpg">
<!-- you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->
<div class="sidebar-wrapper">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text">
VendorBase Pro
</a>
</div>
<ul class="nav">
<li>
<a href="dashboard.php">
<i class="pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href="user.php">
<i class="pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
<li class="active">
<a href="table.php">
<i class="pe-7s-note2"></i>
<p>Vendor List</p>
</a>
</li>
<li>
<a href="typography.html">
<i class="pe-7s-news-paper"></i>
<p>Reports</p>
</a>
</li>
<li>
<a href="icons.html">
<i class="pe-7s-science"></i>
<p>Settings</p>
</a>
</li>
<li class="active-pro">
<a href="upgrade.html">
<i class="pe-7s-rocket"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Vendor List</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
<p class="hidden-lg hidden-md">Dashboard</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-globe"></i>
<b class="caret hidden-sm hidden-xs"></b>
<span class="notification hidden-sm hidden-xs">5</span>
<p class="hidden-lg hidden-md">
5 Notifications
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Another notification</li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-search"></i>
<p class="hidden-lg hidden-md">Search</p>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">
<p>Account</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<p>
Dropdown
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something</li>
<li>Another action</li>
<li>Something</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>
<a href="#">
<p>Log out</p>
</a>
</li>
<li class="separator hidden-lg hidden-md"></li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Vendor Database</h4><br>
<table id='tblVendor' class='display cell-border compact stripe' style="width:100%">
<thead>
<tr>
<th>View</th>
<th>Vendor</th>
<th>Company</th>
<th>Type</th>
<th>Status</th>
<th>Owner</th>
<th>Business Email</th>
<th>Department</th>
<th>Descr</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Company
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
<p class="copyright pull-right">
© <script>document.write(new Date().getFullYear())</script> DeedsTech, Inc., Third Party Risk Management Solutions.
</p>
</div>
</footer>
</div>
<!-- Central Modal Medium Info -->
<div class="modal fade" id="activev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
ab officiis totam.</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Medium Info-->
<!-- make rows in tables clickable -->
<!--
<script>
document.addEventListener("DOMContentLoaded", () => {
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () => {
window.location.href = row.dataset.href;
});
});
});
</script>
-->
</body>
<!-- Core JS Files -->
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.12.0/js/mdb.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
</html>
<script>
function format ( d ) {
return '<table>'+
'<tr>'+
'<td><b>Business Owner:</b></td>'+
'<td>'+d.owner+'</b></td>'+
'</tr>'+
'<tr>'+
'<td><b>Contact Email:</b></td>'+
'<td>'+d.owner_email+'</td>'+
'</tr>'+
'<tr>'+
'<td><b>Description:</d></td>'+
'<td style="max-width=280px;">'+d.descr+'</td>'+
'</tr>'+
'<tr>'+
'<td>More Info:</td>'+
'<td><button>View</button></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var dt = $('#tblVendor').DataTable( {
"responsive": true,
"dom": 'Bfrtip',
"buttons":[
{ extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
{ extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
{ extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
{ extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' }
],
"processing": true,
"serverSide": true,
"ajax": "ajax.php",
'serverMethod': 'post',
"columns": [
{
"width": "5%",
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "name" },
{ "data": "company" },
{ "data": "type" },
{ "data": "status" },
{ "data": "owner", "visible": false},
{ "data": "owner_email", "visible": false},
{ "data": "descr", "visible": false},
{ "data": "dept" },
], "order": [[1, 'asc']],
} );
new $.fn.dataTable.Buttons( dt, {
buttons: [
{
className: 'btn btn-info btn-fill',
text: 'Add New Vendor',
action: function ( e, dt, node, conf ) {
window.location.replace("new.php");
},
},
]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#tblVendor'+id+' td.details-control').trigger( 'click' );
} );
} );
dt.buttons( 1, null ).container().appendTo(
dt.table().container()
);
} );
</script>
I have literally tried everything, even searching through CSS (no changes permanently made) and making changes to color schemes and what not. There literally is nothing that has worked so I'm reaching out to you guru's to see where I'm going wrong. I'm hoping it's just a silly oversight and no drastic changes but I'm open to anything.
In a nav-bar I have a dropdown-menu, in which I occupy bootstrap-multiselect.
When I occupy a normal select it works fine, but I integrate the bootstrap-multiselect and closes the dropdown-menu
I work in codeigniter, I load the multiselect with a getJSON function from an api, which works well with a normal select
this is the html code
<nav class="navbar navbar-default navbar-expand-lg navbar-light navbar-fixed-top">
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item">
<a id="btn_navbar" href="#" data-toggle="dropdown"
class="btn btn-primary dropdown-toggle get-started-btn mt-1 mb-1">Button</a>
<ul class="dropdown-menu form-wrapper">
<li>
<form>
<div class="form-group">
<label for="select_establecimiento">Colegio</label>
<select class="form-control" id="select_establecimiento">
</select>
</div>
<div class="form-group">
<label for="select_mes">Mes</label>
<select class="form-control" id="select_mes">
</select>
</div>
<div class="form-group">
<label for="select_periodo">Periodo</label>
<select class="form-control" id="select_periodo">
</select>
</div>
<button id="change" class="btn btn-primary btn-md btn-block">Cambiar</button>
<button id="logout" class="btn btn-info btn-md btn-block">Salir</button>
</form>
</li>
</ul>
</li>
</ul>
</div>
</nav>
this is the javascript code
function select_establecimiento() {
$.getJSON('get_establecimiento', function (result) {
var mySelect = $('#select_establecimiento').empty();
$.each(result.data, function (index, value) {
mySelect.append(new Option(value.name, value.id));
})
mySelect.multiselect({
buttonWidth: '100%',
refresh: true
});
})
}
Here is working snippet.
Bootstrap dropdown closes after every click, so it will close if you try to open another dropdown (multiselect).
Your problem mixed with this:
Avoid dropdown menu close on click inside
var result = {data: [
{name: "aaa",
id: 0}, {name: "bbb",
id: 1}, {name: "ccc",
id: 2},
]
}
var mySelect = $('#select_establecimiento').empty();
$.each(result.data, function (index, value) {
mySelect.append(new Option(value.name, value.id));
})
mySelect.multiselect({
buttonWidth: '100%',
refresh: true
});
$('#btn_navbar').on('click', function (event) {
$(this).parent().toggleClass('open');
});
$('body').on('click', function (e) {
if (!$('.dropdown.form-wrapper').is(e.target)
&& $('.dropdown.form-wrapper').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('.dropdown.form-wrapper').removeClass('open');
}
});
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<nav class="navbar navbar-default navbar-expand-lg navbar-light navbar-fixed-top">
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item">
<a id="btn_navbar" href="#"
class="btn btn-primary dropdown-toggle get-started-btn mt-1 mb-1">Button</a>
<ul class="dropdown-menu form-wrapper">
<li>
<form>
<div class="form-group">
<label for="select_establecimiento">Colegio</label>
<select class="form-control" id="select_establecimiento">
</select>
</div>
<div class="form-group">
<label for="select_mes">Mes</label>
<select class="form-control" id="select_mes">
</select>
</div>
<div class="form-group">
<label for="select_periodo">Periodo</label>
<select class="form-control" id="select_periodo">
</select>
</div>
<button id="change" class="btn btn-primary btn-md btn-block">Cambiar</button>
<button id="logout" class="btn btn-info btn-md btn-block">Salir</button>
</form>
</li>
</ul>
</li>
</ul>
</nav>
I am trying to combine bootstrap and fullpage.js to have a vertical scrolling website with a horizontal scroll section that is controlled by its own separate navigation. I an trying to implement a page section just like how this website (http://www.lottanieminen.com/) is done. I am trying to implement the horizontal scroll in the 'Portfolio' page. Here is my code:
`
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="author" content=" ">
<!-- Bootstrap CSS -->
<link href="img/mylogo.ico" rel="shortcut icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/fullpage.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<title>Stephanie Daniels</title>
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
<img src="img/mylogo.png" alt="mylogo" style="display: inline-block;">
<span style="display: inline-block;"></span>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio" data-toggle="tab">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
</ul>
</div>
</nav>
<section id="home">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="center">
<img src="img/nameheader.png" alt="nameheader" class="img-fluid" size="contain" width="40%" />
<div class="row">
<div class="col-12">
<img src="img/DesktopHomebox.png" alt="desktophomebox" class="img-fluid desktophomebox" size="contain" width="50%" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img src="img/about.png" alt="aboutme" class="img-fluid aboutme" margin="0px" />
</div>
<div class="col-sm-6">
<h1 align="center">ABOUT</h1>
<h2 align="center"> Hi! I’m Stephanie...</h2>
<p align="center" class="big">I am Nigerian and currently a second year student at the University of Kent, studying Digital Arts. I have always been interested in graphics and digitalised work but I decided I was going to turn this interest into profession by combining my ICT skills with my fine art skills. <br><br>I am quite proficient in a range of design software which include
<span class="software">Adobe Illustrator</span> and <span class="software">InDesign</span>. My interest lies more in designing than developing as I am a very visual-oriented person. <br><br>Also, I am very energetic, although I generally enjoy being indoors and working with other people. This is just a brief overview of myself. Feel free to explore the site!</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h1 align="center">PORTFOLIO</h1>
</div>
</div>
</div>
</section>
<section id="contact"> </section>
<footer class="container-fluid">
<div class="row">
<div class="col-12 text-center">
<p> © Stephanie Daniels 2018 </p>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko -lightbox/5.3.0/ekko-lightbox.js">
</script>
<script src="js/fullpage.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
new fullpage('#fullpage', {
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js"></script>
<script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
</script>
<script>
$(function() {
$('#mainNav a').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
return false;
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav'
});
// Closes responsive menu when a link is clicked
$('.navbar-collapse>ul>li>a').click(function() {
$('.navbar-collapse').collapse('hide');
});
});
</script>
`
This question already has answers here:
how to select all class except the clicked element in JQuery?
(3 answers)
Closed 5 years ago.
This code removes the div that is selected, i was trying to when i click in the button that is in the div,all the other would disapear, and the one that i clicked stayed, but i only can remove the one that i click, sry for my english and sry for being a beginner at jquery.
I have here a video to youtube to show you better what is my problem https://www.youtube.com/watch?v=kiUECo33-d0
$('.product-removal button').click( function() {
removeItem(this);
});
function removeItem(removeButton)
{
var productRow = $(removeButton).parent().parent();
productRow.remove();
}
<html>
<head>
<title>Configurador</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/ResponsiveAccordianMenu.css" rel="stylesheet" type="text/css">
<link href="css/table.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="twd_container">
<h1 style="margin:150px auto 30px auto; text-align:center">Configurar</h1>
<!--Processador-->
<div id="AL" class="expandContent">
<h3 class="header">
<div class="headerColumn1">Processador</div>
<div class="headerColumn2 expand"><img src="img/plus.png" /></div>
<div class="expandedContentClearFloat"></div>
</h3>
<div class="expandedContent">
<div class="container">
<ul id="orders">
{% for item in processador %}
<div class="product-removal">
<li>
<div class="row carousel-row" >
<div class="col-xs-8 col-xs-offset-2 slide-row" id="container">
<div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="iconcomp" src="{{ item.img|e }}" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>{{ item.marca|e }}</h4>
<p>
{{ item.descr|e }}
</p>
</div>
<div class="slide-cima" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button class="btn2" id='remove' value='{{ item.id|e }}' onclick="rmv(this)"><i class="fa fa-fw fa-undo"></i></button>
</span>
</div>
<div class="slide-footer" id="{{ item.id|e }}">
<span class="pull-right buttons">
<button name="" class="btn1" id='item' value='{{ item.id|e }}' ><i class="fa fa-fw fa-shopping-cart"></i></button>
</span>
<button class="remove-product">
Remove
</button>
</div>
</div>
</div>
</li>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<!-- scripts-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/ResponsiveAccordianMenu.js"></script>
</body>
</html>
use this this hides all div except one you click
$('div').click(function(){
$('div').not(this).hide();
});
provide selector as per your's
Trying to use a custom build example to generate and load code pages only when the user clicks on check boxes and submits. However the textarea does not seem to update at all.
I am attempting to get my code working like this example
http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html
Here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link href="css/docs.css" type="text/css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Enter Project Name Here</a>
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Custom Download</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Customize and download</h1>
<p class="lead">Download the full repository or customize your entire <em>Enter Project Name Here</em> build by selecting only the components that you need.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li>1. Choose and Generate CSS components</li>
<li>2. Choose and Generate JavaScript components</li>
<li>3. Be Happy</li>
</ul>
</div>
</header>
<hr>
<p class="well note">
<strong>Note:</strong> This example page uses the jQuery plugin, SelectBoxIt, to demonstrate how to create custom builds with Downloadbuilder.js.
</p>
<section class="custom-downloads" id="css-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Choose and Download CSS components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.css"> SelectBoxIt CSS</label>
</div>
</div>
<br />
<a class="btn" data-bind="css-downloads" id="css-generate">Generate CSS</a>
<a class="btn btn-primary download-button" id="css-download" download="jquery.selectboxit.css">Download CSS</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-css-source">// Minified source</textarea>
</section>
<section class="custom-downloads" id="javascript-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Choose and Download JavaScript components
<small>Get just the JavaScript you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.core.min.js" disabled> SelectBoxIt Core</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.ariaAccessibility.min.js"> Aria Accessibility</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.destroy.min.js"> Destroy method</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.disable.min.js"> Disable method</label>
</div>
</div><!-- /row -->
<br />
<a class="btn" href="#" data-bind="javascript-downloads" id="javascript-generate">Generate JavaScript</a>
<a class="btn btn-primary download-button" id="javascript-download" download="jquery.selectboxit.js">Download JavaScript</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-javascript-source">// Minified source</textarea>
</section>
</div>
</div><!--/.fluid-container-->
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Downloads</h3>
</div>
<div class="modal-body">
<a class="btn btn-large" href="#" target="_blank" data-lang="css" download="jquery.selectboxit.css">Download CSS</a>
<a class="btn btn-large" href="#" target="_blank" data-lang="javascript">Download JavaScript</a>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tocify.min.js"></script>
<script src ="js/base64.js"></script>
<script src="js/javascripts/DownloadBuilder.js"></script>
<script>
$(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
$(".toggle-all").on("click", function() {
$(this).parent().parent().find('input[type="checkbox"]').not(":disabled").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
var builder = new DownloadBuilder();
$("#css-generate").on("click", function() {
builder.buildURL($("#css-downloads input[type='checkbox']:checked"), "jquery.selectboxit.css", "css", function(data) {
$("#generated-css-source").text(data.content);
if(!data.content) {
$("#css-download").fadeOut("slow");
}
if(data.url) {
$("#css-download").attr("href", data.url).fadeIn("slow");
}
});
});
$("#javascript-generate").on("click", function() {
builder.buildURL($("#javascript-downloads input[type='checkbox']:checked"), "jquery.selectboxit.js", "javascript", function(data) {
$("#generated-javascript-source").text(data.content);
if(!data.content) {
$("#javascript-download").fadeOut("slow");
}
if(data.url) {
$("#javascript-download").attr("href", data.url).fadeIn("slow");
}
});
});
});
</script>
</body>
</html>
Use $("#generated-javascript-source").val(data.content);
instead of
$("#generated-javascript-source").text(data.content);
replace all .text(data.content); with .val(data.content);;