We Keep Coding

Data-filter showing nothing by default

i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>

make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function

How to get the "id" of moving sortable UIKit 3 element using JavaScript?

I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!

If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html

Bootstrap sidenav scroll

I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.

How to store Bootstrap Rows and Coloumns in a database

I have implemented a grid system in HTML and bootstrap. These grid contains of panels and they carry various information.I have made these panel movable(drag, drop) using jQuery and some custom java-script and bootstrap.
I need to store the position where each and every item after exiting the session(log out)
Here is my code
<div class="container sortable">
<div class="row"><!-- BEGIN ROW -->
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 1
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 2
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
<div class="col-md-4 placeholder-wrapper">
<div class="panel panel-default" id="portlet-linear-color">
<div class="panel-heading">
<div class="panel-title">
Portlet 3
</div>
<div class="panel-controls">
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div>
</div>
</div>
</div><!-- END ROW -->
<div class="row"><!-- BEGIN ROW 1 -->
<div class="col-md-4 placeholder-wrapper"><!-- BEGIN WRAPPER -->
<div class="panel panel-default" id="portlet-linear-color"><!-- BEGIN PANEL -->
<div class="panel-heading"><!-- BEGIN HEADER -->
<div class="panel-title">
Portlet 4
</div>
<div class="panel-controls"><!-- BEGIN ICONS -->
<ul>
<li>
<a class=
"portlet-collapse portlet-icon portlet-icon-collapse"
data-toggle="collapse" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-refresh portlet-icon portlet-icon-refresh"
data-toggle="refresh" href="#" style=
"font-style: italic"></a>
</li>
<li>
<a class=
"portlet-close portlet-icon portlet-icon-close"
data-toggle="close" href="#" style=
"font-style: italic"></a>
</li>
</ul>
</div><!-- END ICONS -->
</div><!-- END HEADER -->
<div class="panel-body"><!-- BEGIN PANEL CONTENT -->
<h3><span class="semi-bold">Linear</span> Progress</h3>
<p>Click on the refresh icon to simulate an AJAX call and to see an
animated progress bar indicator above the portlet. These progress
bars come in seven different colors that are available in the Pages
contextual color scheme.</p>
</div><!-- END PANEL CONTENT -->
</div><!-- END PANEL -->
</div><!-- END WRAPPER -->
</div><!-- END ROW 2 -->
</div>
Is there anyway I can save these instances in a database ?

If you want to get the current html of a page use JQuery.
This will work.
<script>
var contentData = $('#divwithhtml').html();
//If you want to post it
$.post( "yoururl.php", { content: "contentData " })
.done(function( data ) {
alert( "Data Loaded: " + data + " posted html succesfull");
});
</script>

I think you can save base layout in database . then each client reposition each site item then you should save position in database by ajax for clientId .
Edited Post:
It's very simple you can echo string code like this :
select `columnName` from `database` where `clientId`=20
when fetch this return query and save to $row you can try this :
echo $row["columnName"];
OR
$ret="<!DOCTYPE html>
<html>
<head>
<title>site name</title>
</head>
<body>
{$row["columnName"]}
</body>
</html>";
echo $ret;

How can I have the inbox area show once the document is finished loading?

Basically trying to create kind of an inbox for my person portfolio (more of a learning experience, then anything serious, or of use).
Right now when this document loads within an ajax/javascript function, it loads showing ALL emails (instead of just showing the Inbox section by default)
I've tried adding a function in javascript for "on document load" but I believe I may not have the css correct or anything.
My code is below:
<div id="messages" class="container-fluid">
<div class="row">
<div id="breadcrumb" class="col-xs-12">
<a href="#" class="show-sidebar">
<i class="fa fa-bars"></i>
</a>
<ol class="breadcrumb pull-left">
<li>Dashboard</li>
<li>Modules</li>
<li>Messages</li>
</ol>
<div id="social" class="pull-right">
<i class="fa fa-google-plus"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
<div class="row" id="test">
<div class="col-xs-12">
<div class="row">
<ul id="messages-menu" class="nav msg-menu">
<li>
<a href="#" class="" id="msg-inbox">
<i class="fa fa-inbox"></i>
<span class="hidden-xs">Inbox (<?php echo $inboxCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-starred">
<i class="fa fa-star"></i>
<span class="hidden-xs">Unread (<?php echo $unreadCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-important">
<i class="fa fa-bookmark"></i>
<span class="hidden-xs">Read (<?php echo $readCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-trash">
<i class="fa fa-trash-o"></i>
<span class="hidden-xs">Trash (<?php echo $trashCount; ?>)</span>
</a>
</li>
</ul>
<div id="messages-list" class="col-xs-10 col-xs-offset-2">
<?php
while ($row = mysqli_fetch_assoc($getEmails)) {
$email_id = $row['email_id'];
$emailStatus = $row['emailStatus'];
$contactName = $row['contactName'];
$contactEmailAddress = $row['contactEmailAddress'];
$messageBody = $row['messageBody'];
$tempEmailDate = $row['emailDate'];
$emailDate = date("d-m-Y", strtotime($tempEmailDate));
$contactName = strtoupper($contactName);
$contactEmailAddress = strtoupper($contactEmailAddress);
if ($row == 1 && ($emailStatus == 1 || $emailStatus == 2)) {
echo "
<div class='row one-list-message msg-inbox-item' id='msg-one'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else if ($emailStatus == 1 || $emailStatus == 2) {
echo "
<div class='row one-list-message msg-inbox-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
if ($emailStatus == 1) {
// Unread section
echo "
<div class='row one-list-message msg-starred-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
$updateEmailStatus = mysqli_query($db, "UPDATE emails SET emailStatus='2' WHERE email_id='$email_id'");
} else {
if ($emailStatus == 2) {
// Read section
echo "
<div class='row one-list-message msg-important-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else {
if ($emailStatus == 3) {
// Deleted section
echo "
<div class='row one-list-message msg-trash-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
}
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#msg-inbox').show();
});
// Add listener for redraw menu when windows resized
window.onresize = MessagesMenuWidth;
$(document).ready(function() {
// Add class for correctly view of messages page
$('#content').addClass('full-content');
// Run script for change menu width
MessagesMenuWidth();
$('#content').on('click','[id^=msg-]', function(e){
e.preventDefault();
$('[id^=msg-]').removeClass('active');
$(this).addClass('active');
$('.one-list-message').slideUp('fast');
$('.'+$(this).attr('id')+'-item').slideDown('fast');
});
$('html').animate({scrollTop: 0},'slow');
});
</script>
Can anyone see how I'd do the javascript to have the msg-inbox load when the page loads? instead of loading none and displaying all emails.
Thank you!

When trying to hide and/or show divs, jquery is your best friend. It's simple and looks nice.
Start by wrapping your read & unread messages in a div id of "inbox"
Then give each of your inbox divs an id like "read" & "unread"
Using the code below you can hide/show your individual divs.
Place this between your <head> </head> tags
<script src="JS/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#Unread").click(function(){
$("#unread").slideToggle(500, function() {
});
});
$("#Read").click(function(){
$("#read").slideToggle(500, function() {
});
});
$("#Deleted").click(function(){
$("#deleted").slideToggle(500, function() {
});
});
});
</script>
<style>
#unread {
display: none;
}
#read {
display: none;
}
#deleted {
display: none;
}
</style>
Then in the body of your page, you can do something like this
<div id="inbox">
<div id="unread_msgs">
<button id="Unread">Show/Hide Unread</button>
<div id="unread">
<p>These </p>
<p>are</p>
<p>my</p>
<p>unread</p>
<p>messages</p>
</div><!-- end unread -->
</div><!-- end unread_msgs -->
<div id="read_msgs">
<button id="Read">Show/Hide Read</button>
<div id="read">
<p>These </p>
<p>are</p>
<p>my</p>
<p>read</p>
<p>messages</p>
</div><!-- end read -->
</div><!-- end read_msgs -->
</div><!-- end inbox -->
<div id="deleted_msgs">
<button id="Deleted">Show/Hide Deleted</button>
<div id="deleted">
<p>These </p>
<p>are</p>
<p>my</p>
<p>deleted</p>
<p>messages</p>
</div>
</div>
Hope this helps. It should get you going in the right direction.
References
jquery slidetoggle