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.
Related
So I have 22 different lists with 50-100 items inside. And they take ~25k lines of html code. How to make them take less lines?
For example:
I want this to have only one item in list that repeats many times but with different ids, ids in classicImage/shortyImage(' ') and different images if this is possible
<a onclick="showClassic()">
<div class="classic">
<img src="images/classic/classic_default.png" class="imgcol2" id="classicimg" style="max-height: 75px; max-width: 150px;" >
<div class="wname" style="width: 150px;">CLASSIC</div>
</div>
</a>
<a onclick="showShorty()">
<div class="shorty">
<img src="images/shorty/shorty_default.png" class="imgcol2" id="shortyimg">
<div class="wname" style="width: 150px;">SHORTY</div>
</div>
</a>
<div class="results">
<ul id="classicList">
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-avalanche -->
<a onclick="classicImage('classic-avalanche'); setClassicPrice(1275)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_avalanche.png" class="windowimage" id="classic-avalanche">
</div>
<p class="skinname">Classic Avalanche</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-default -->
<a onclick="classicImage('classic-default'); setClassicPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_default.png" class="windowimage" id="classic-default">
</div>
<p class="skinname">Classic Default</p>
</div>
</a>
</li>
</ul>
</div>
<div class="results">
<ul id="shortyList">
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-aerosol -->
<a onclick="shortyImage('shorty-aerosol'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_aerosol.png" class="windowimage" id="shorty-aerosol">
</div>
<p class="skinname">Shorty Aerosol</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-default -->
<a onclick="shortyImage('shorty-default'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_default.png" class="windowimage" id="shorty-default">
</div>
<p class="skinname">Shorty Default</p>
</div>
</a>
</li>
</ul>
</div>
Considering you tagged javascript and html only, i assume you have no backend code to handle the templating.
So my best advice would be to divide those multiple lists into multiple .html file and load them with JS, like this example with jQuery :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#firstList").load("firstList.html");
});
</script>
</head>
<body>
<div id="firstList"></div>
</body>
</html>
Using bootstrap 4 the photos I included so you can see the side nav menu on full screen and then only what shows on the mobile view I highlighted the menus.
https://imgur.com/a/hv7JvZ9
I have a nav bar and then I made a submenu nav on the left side of the website. So the main navbar has login and logout and the side nav menu offers subcategories etc.
Everything looks great on fullscreen.
But on mobile view, the main navbar with login and logout show in the toggle button the sub side nav menu disappears completely. I have tried to add it to the navbar but the issue is its always there, I need it only on mobile view.
I also tried to move it to the top below the navbar on mobile again it's always there. I need to know the way to only make items change positions when on mobile or fullscreen, or if someone knows another workaround.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav and touch icons -->
<div class="header">
<nav class="navbar fixed-top navbar-site navbar-light bg-light navbar-expand-md"
role="navigation">
<div class="container">
<div class="navbar-identity">
<a href="<?php echo base_url();?>posts" class="navbar-brand logo logo-title">
<span class="logo-icon"><img class="navbar-brand" src="<?php echo base_url(); ?>" width="100px" height="78px">
</span>Website<span> </span> </a>
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggler pull-right" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</div>
<ul class="navbar-collapse collapse">
<li class = "dropdown-item"><strong>Posts</strong></li>
<?php if(!$this->session->userdata('logged_in')): ?>
<li class="dropdown-item"><strong>Login</strong></li>
<li class="dropdown-item" ><strong></strong></li>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')) :?>
<li class="dropdown-item"><i class=" icon-logout"></i><strong> Log out</strong>
</li>
<?php endif; ?>
</ul>
</li>
<li class="postadd nav-item"><a class="btn btn-block btn-border btn-post btn-danger nav-link" href="<?php echo base_url();?>posts/create">Blogg</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- /.header -->
<div class="search-row-wrapper" style="background-image: url(images/bg.jpg)">
<div class="inner">
<div class="container ">
<form action="#" method="GET">
<div class="row">
<div class="col-md-3">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="row">
<!-- this (.mobile-filter-sidebar) part will be position fixed in mobile version -->
<div class="col-md-3 page-sidebar mobile-filter-sidebar">
<aside>
<div class="sidebar-modern-inner">
<div class="block-title has-arrow sidebar-header">
<h5><span class="title">Categories</h5>
</div>
<div class="block-content categories-list list-filter ">
<ul class=" list-unstyled">
<li><span class="title">All Categories</span>
</li>
<li><span class="title">Female Escorts </span></li>
<li><span class="title">Massage Parlors and Rub Downs</span></li>
<li><span class="title">Trans and Gay Escorts </span></li>
<li><span class="title">Strip Clubs </span></li>
</li>
</ul>
</div> <!--/.categories-list-->
<div class="block-title has-arrow ">
<h5>Location</h5>
</div>
<div class="block-content locations-list list-filter ">
<ul class="browse-list list-unstyled long-list">
<li> Miami </li>
<li> Broward County </li>
<li> West Palm Beach </li>
<li> Florida Keys </li>
<li>Orlando </li>
<li> Jacksonville</li>
</ul>
</div>
</div>
</aside>
</div>
<!--/.page-side-bar-->
<div class="col-md-9 page-content col-thin-left">
<div class="category-list ">
<div class="tab-box ">
<!-- INSERTING THE CODE HERE TO LOOP-->
<?php
if (empty($posts)) {
echo '<div class="text-center">';
echo "<h3>";
echo "<strong>";
echo "No matching results at this time.";
echo "</strong>";
echo "</h3>";
echo "</div>";
echo '</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
</div>
</div>
</div>';
} else {
foreach($posts as $post):{ ?>
</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
<div style="clear:both"></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<ul class="list-unstyled list-inline no-margin no-padding">
<li class="filter-toggle">
<a class="">
<i class=" icon-th-list"></i>
</a>
</li>
<li>
</li>
</ul>
</div>
<div class="menu-overly-mask"></div>
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
<div class="col-md-2 no-padding photobox">
<div class="add-image"><span class="photo-count"><i class="fa fa-camera"></i> </span> <img class="thumbnail no-margin" src="<?php echo site_url();?>assets/images/posts/<?php echo $post['post_image']; ?>" alt="img">
</div>
</div>
<!--/.photobox-->
<div class="col-md-7 add-desc-box">
<div class="ads-details">
<h5 class="add-title"><a href="<?php echo site_url('/posts/'.$post['slug']); ?>">
<?php echo $post['title']." ---". $post['Number'];//TITLE OF THE POST>?></a></h5>
<span class="info-row">
<span
class="date"><i class=" icon-clock"> </i> </span> <small class="category">Location: <?php echo $post['Area']; ?> </small>
</div>
</div>
<!--/.add-desc-box-->
<div class="col-md-3 text-right price-box">
</div>
<!--/.add-desc-box-->
</div>
</div>
<!--/.item-list-->
<?php }endforeach; ?>
<?php } ?>
<!--/.photobox-->
<!--/.add-desc-box-->
<!--/.item-list-->
</div>
</div>
<div class="tab-box"><a href=""> <i class=" icon-star-empty"></i>
</a></div>
</div>
<div class="pagination-bar text-center">
<nav aria-label="Page navigation " class="d-inline-b">
<div class="pagination">
<?php echo $this->pagination->create_links(); ?>
</div>
</nav>
</div>
<!--/.pagination-bar -->
<div class="post-promo text-center">
<h2> Make a free account to post a add </h2>
<h5>Fast and easy</h5>
Post a Free listing now
</div>
<!--/.post-promo-->
</div>
<!--/.page-content-->
</div>
</div>
<!-- /.main-container -->
</div>
Honestly I didn't check in detail, usually html for bootstrap is a headache to read. However, I have something that might be of interest to your situation: css media queries.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
The concept being that you can define, according to the client's width and height, different css properties. Beside defining css rules to different screen sizes, you can define different media such as print and so on. In this way, you can make an element to look a certain way when there is a lot of space, and in a different way when there is not so much space. That is what bootstrap is based on. Play around with it.
As a side note, I would recommend you to try isolate exactly the bits of code that are problematic. I usually try to re-write the code in order to have only the problem showing, and none of the unrelated stuff off. In this way you get better and more answers. ;)
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
Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks