Im totaly new to Javascript and i fell so lost. Have done a little HTMl/CSS but no JS. Can some1 tell what I need to do in JS to make my Code work? :)
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 2</title>
<script type="text/javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Mandagens Lunch <span>#</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Carbonara
</a>
</li>
<li>
<a href="#">
Pizza
</a>
</li>
<li>
<a href="#">
Köttbullar Med Mos
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Here i've build something from scratch.. isn't beatiful, but it works.
JS:
var dropdownHidden = true;
function toggleDropdown(){
if(dropdownHidden){
document.getElementById('dropdown-menu').style.display = '';
dropdownHidden = false;
} else {
document.getElementById('dropdown-menu').style.display = 'none';
dropdownHidden = true;
}
}
HTML:
<body>
<ul class="nav">
<li class="button-dropdown">
<a href="#" class="dropdown-toggle" onClick="toggleDropdown()">
Mandagens Lunch <span>#</span>
</a>
<ul id="dropdown-menu" class="dropdown-menu" style="display: none">
<li>
<a href="#">
Carbonara
</a>
</li>
<li>
<a href="#">
Pizza
</a>
</li>
<li>
<a href="#">
Köttbullar Med Mos
</a>
</li>
</ul>
</li>
</ul>
</body>
Codepen: http://codepen.io/anon/pen/xgpdYO
Note: this is a "you havn't provided any code solution"
Related
I am new MVC and have a page layout that looks like the below image. The problem is all module level header,sidemenu,footer related js files are bundled together and these header menu,side menu,footer are in _Layout.cshtml page. The JS files of all these sections gets loaded and executed everytime I go from home(Index.cshtml) view to Playlist menu item(Playlist.cshtml) view. The problem is if I play a song in footer in Home page,and then go to Playlist Page(Both Index.cshtml and Playlist.cshtml are rendered in body section), then I need the same song to be playing in PlayList.cshtml page, not reload JS file to create a new music player in every new page. How do I achieve this? Play the same music in footer,no matter whih page(View) I am in unless I change the music myself.
Home Page
<!DOCTYPE html>
<html>
<head>
<title>#Page.Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- Favicon icon -->
<link rel="shortcut icon" href="~/assets/images/favicon.png" type="image/x-icon">
<link rel="icon" href="~/assets/images/favicon.ico" type="image/x-icon">
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!-- Required Fremwork -->
<link rel="stylesheet" type="text/css" href="~/Content/Template/vendor/bootstrap/css/bootstrap.min.css">
<link href="~/Content/css/ChatStyle.css" rel="stylesheet" />
<!-- Style.css -->
<link rel="stylesheet" type="text/css" href="~/assets/css/main.css">
<!-- Responsive.css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/responsive.css">
<!--color css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/color/color-1.min.css" id="color" />
#RenderSection("head", required: false)
<link rel="stylesheet" type="text/css" href="~/Content/Album/css/albums.min.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/MediaElementJS/js/mediaelement-and-player_2.13.1.min.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/MediaElementJS/mep-feature-playlist-master/mep-feature-playlist.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Poppins.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.sticky-footer {
position: fixed;
bottom: 0;
width: 100%;
}
/*original*/
.liked::before {
color: #600;
content: '\f004';
}
.not-liked::before {
color: #aaa;
content: '\f08a';
}
.smallWidth {
width: 400px;
}
</style>
</head>
<body class="sidebar-mini fixed">
<div class="loader-bg">
<div class="loader-bar">
</div>
</div>
<div class="wrapper">
<!-- Navbar-->
<header class="main-header-top hidden-print">
<img class="img-fluid able-logo" src="~/assets/images/logo.png" alt="Theme-logo">
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<!-- Navbar Right Menu-->
<div class="navbar-custom-menu f-right p-absolute">
<ul class="top-nav">
<!--Notification Menu-->
<li class="dropdown pc-rheader-submenu message-notification search-toggle">
<a href="#!" id="morphsearch-search" class="drop icon-circle txt-white">
<i class="icofont icofont-search-alt-1"></i>
</a>
</li>
<li class="dropdown notification-menu">
<a href="#!" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle">
<i class="icon-bell"></i>
<span class="badge badge-danger header-badge">9</span>
</a>
<ul class="dropdown-menu">
<li class="not-head">You have <b class="text-primary">4</b> new notifications.</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-1.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Lisa sent you a mail</span><span class="text-muted block-time">2min ago</span></div>
</a>
</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-2.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Server Not Working</span><span class="text-muted block-time">20min ago</span></div>
</a>
</li>
<li class="bell-notification">
<a href="javascript:;" class="media">
<span class="media-left media-icon">
<img class="img-circle" src="~/assets/images/avatar-3.png" alt="User Image">
</span>
<div class="media-body"><span class="block">Transaction xyz complete</span><span class="text-muted block-time">3 hours ago</span></div>
</a>
</li>
<li class="not-footer">
See all notifications.
</li>
</ul>
</li>
<!-- chat dropdown -->
<li class="pc-rheader-submenu ">
<a href="#!" class="drop icon-circle displayChatbox">
<i class="icon-bubbles"></i>
<span id="msgCount" class="badge badge-danger header-badge blink"></span>
</a>
</li>
<!-- window screen -->
<li class="pc-rheader-submenu">
<a href="#!" class="drop icon-circle" onclick="javascript:toggleFullScreen()">
<i class="icon-size-fullscreen"></i>
</a>
</li>
<!-- User Menu-->
<li class="dropdown">
<a href="#!" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle drop icon-circle drop-image">
<span><img class="img-circle " src="~/assets/images/avatar-1.png" style="width:40px;" alt="User Image"></span>
<span>John <b>Doe</b> <i class=" icofont icofont-simple-down"></i></span>
</a>
<ul class="dropdown-menu settings-menu">
<li><i class="icon-settings"></i> Settings</li>
<li><i class="icon-user"></i> Profile</li>
<li><i class="icon-envelope-open"></i> My Messages</li>
<li class="p-0">
<div class="dropdown-divider m-0"></div>
</li>
<li><i class="icon-lock"></i> Lock Screen</li>
<li><i class="icon-logout"></i> Logout</li>
</ul>
</li>
</ul>
<!-- search -->
<div id="morphsearch" class="morphsearch">
<form class="morphsearch-form">
<input class="morphsearch-input" type="search" placeholder="Search..." />
<button class="morphsearch-submit" type="submit">Search</button>
</form>
<div class="morphsearch-content">
<div class="dummy-column">
<h2>People</h2>
<a class="dummy-media-object" href="#!">
<img class="round" src="http://0.gravatar.com/avatar/81b58502541f9445253f30497e53c280?s=50&d=identicon&r=G" alt="Sara Soueidan" />
<h3>Sara Soueidan</h3>
</a>
<a class="dummy-media-object" href="#!">
<img class="round" src="http://1.gravatar.com/avatar/9bc7250110c667cd35c0826059b81b75?s=50&d=identicon&r=G" alt="Shaun Dona" />
<h3>Shaun Dona</h3>
</a>
</div>
<div class="dummy-column">
<h2>Popular</h2>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="PagePreloadingEffect" />
<h3>Page Preloading Effect</h3>
</a>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="DraggableDualViewSlideshow" />
<h3>Draggable Dual-View Slideshow</h3>
</a>
</div>
<div class="dummy-column">
<h2>Recent</h2>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="TooltipStylesInspiration" />
<h3>Tooltip Styles Inspiration</h3>
</a>
<a class="dummy-media-object" href="#!">
<img src="~/assets/images/avatar-1.png" alt="NotificationStyles" />
<h3>Notification Styles Inspiration</h3>
</a>
</div>
</div><!-- /morphsearch-content -->
<span class="morphsearch-close"><i class="icofont icofont-search-alt-1"></i></span>
</div>
<!-- search end -->
</div>
</nav>
</header>
<!-- Side-Nav-->
<aside class="main-sidebar hidden-print ">
<section class="sidebar" id="sidebar-scroll">
<div class="user-panel">
<div class="f-left image"><img src="~/assets/images/avatar-1.png" alt="User Image" class="img-circle"></div>
<div class="f-left info">
<p>John Doe</p>
<p class="designation">Weather <i class="icofont icofont-caret-down m-l-5"></i></p>
</div>
</div>
<!-- sidebar profile Menu-->
<ul class="nav sidebar-menu extra-profile-list">
<li>
<a class="waves-effect waves-dark" href="profile.html">
<i class="icon-user"></i>
<span class="menu-text">View Profile</span>
<span class="selected"></span>
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="javascript:void(0)">
<i class="icon-settings"></i>
<span class="menu-text">Settings</span>
<span class="selected"></span>
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="javascript:void(0)">
<i class="icon-logout"></i>
<span class="menu-text">Logout</span>
<span class="selected"></span>
</a>
</li>
</ul>
<!-- Sidebar Menu-->
<ul class="sidebar-menu">
<li class="nav-level">Navigation</li>
<li class="active treeview">
<a class="waves-effect waves-dark" href="index.html">
<i class="icon-speedometer"></i><span> Dashboard</span>
</a>
</li>
<li class="nav-level">Components</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-briefcase"></i><span> UI Elements</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="accordion.html"><i class="icon-arrow-right"></i> Accordion</a></li>
<li><a class="waves-effect waves-dark" href="button.html"><i class="icon-arrow-right"></i> Button</a></li>
<li><a class="waves-effect waves-dark" href="label-badge.html"><i class="icon-arrow-right"></i> Label Badge</a></li>
<li><a class="waves-effect waves-dark" href="bootstrap-ui.html"><i class="icon-arrow-right"></i> Grid system</a></li>
<li><a class="waves-effect waves-dark" href="box-shadow.html"><i class="icon-arrow-right"></i> Box Shadow</a></li>
<li><a class="waves-effect waves-dark" href="color.html"><i class="icon-arrow-right"></i> Color</a></li>
<li><a class="waves-effect waves-dark" href="light-box.html"><i class="icon-arrow-right"></i> Light Box</a></li>
<li><a class="waves-effect waves-dark" href="notification.html"><i class="icon-arrow-right"></i> Notification</a></li>
<li><a class="waves-effect waves-dark" href="panels-wells.html"><i class="icon-arrow-right"></i> Panels-Wells</a></li>
<li><a class="waves-effect waves-dark" href="tabs.html"><i class="icon-arrow-right"></i> Tabs</a></li>
<li><a class="waves-effect waves-dark" href="tooltips.html"><i class="icon-arrow-right"></i> Tooltips</a></li>
<li><a class="waves-effect waves-dark" href="typography.html"><i class="icon-arrow-right"></i> Typography</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-chart"></i><span> Charts & Maps</span><span class="label label-success menu-caption">New</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="float-chart.html"><i class="icon-arrow-right"></i> Float Charts</a></li>
<li><a class="waves-effect waves-dark" href="morris-chart.html"><i class="icon-arrow-right"></i> Morris Charts</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-book-open"></i><span> Forms</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="form-elements-bootstrap.html"><i class="icon-arrow-right"></i> Form Elements Bootstrap</a></li>
<li><a class="waves-effect waves-dark" href="form-elements-materialize.html"><i class="icon-arrow-right"></i> Form Elements Material</a></li>
<li><a class="waves-effect waves-dark" href="form-elements-advance.html"><i class="icon-arrow-right"></i> Form Elements Advance</a></li>
</ul>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" id="mnItemPlaylist">
<i class="icon-list"></i><span> Play Lists</span>
</a>
</li>
<li class="nav-level">More</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icon-docs"></i><span>Pages</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li class="treeview">
<i class="icon-arrow-right"></i><span> Authentication</span><i class="icon-arrow-down"></i>
<ul class="treeview-menu">
<li><a class="waves-effect waves-dark" href="register1.html" target="_blank"><i class="icon-arrow-right"></i> Register 1</a></li>
<li><a class="waves-effect waves-dark" href="login1.html" target="_blank"><i class="icon-arrow-right"></i><span> Login 1</span></a></li>
<li><a class="waves-effect waves-dark" href="forgot-password.html" target="_blank"><i class="icon-arrow-right"></i><span> Forgot Password</span></a></li>
<li><a class="waves-effect waves-dark" href="profile.html"><i class="icon-arrow-right"></i> Profile</a></li>
</ul>
</li>
<li><a class="waves-effect waves-dark" href="lock-screen.html" target="_blank"><i class="icon-arrow-right"></i> Lock Screen</a></li>
<li><a class="waves-effect waves-dark" href="404.html" target="_blank"><i class="icon-arrow-right"></i> Error 404</a></li>
<li><a class="waves-effect waves-dark" href="sample-page.html"><i class="icon-arrow-right"></i> Sample Page</a></li>
<li><a class="waves-effect waves-dark" href="search-result.html"><i class="icon-arrow-right"></i> Search Result</a></li>
</ul>
</li>
<li class="nav-level">Menu Level</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!"><i class="icofont icofont-company"></i><span>Menu Level 1</span><i class="icon-arrow-down"></i></a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Two
</a>
</li>
<li class="treeview">
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
<span>Level Two</span>
<i class="icon-arrow-down"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Three
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
<span>Level Three</span>
<i class="icon-arrow-down"></i>
</a>
<ul class="treeview-menu">
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Four
</a>
</li>
<li>
<a class="waves-effect waves-dark" href="#!">
<i class="icon-arrow-right"></i>
Level Four
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
<!-- Sidebar chat start -->
<!-- Sidebar chat end-->
<div class="content-wrapper">
<!-- Container-fluid starts -->
<!-- Main content starts -->
<div class="container-fluid">
<!-- Item -->
#RenderBody()
</div>
<!-- Main content ends -->
<!-- Container-fluid ends -->
<!-- Page Footer-->
<footer id="sticky-footer" class="sticky-footer">
#Html.Partial("_fullPlayer")
</footer>
</div>
</div>
<script src="~/assets/plugins/jquery/dist/jquery.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="~/assets/plugins/tether/dist/js/tether.min.js"></script>
<!-- Required Fremwork -->
#*Added by*#
<script src="~/Content/Template/vendor/popper.js/umd/popper.min.js"></script>
<script src="~/Content/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.js"></script>
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-2.1.2.js" type="text/javascript"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script type="text/javascript" src="~/signalr/hubs"></script>
<script src="~/Scripts/Modules/Home/ChatBarJS.js" type="text/javascript"></script>
<!-- notification -->
<script src="~/assets/plugins/notification/js/bootstrap-growl.min.js"></script>
<div id="modPlayList" class="modcon" style="width: 20%;height:20%"></div>
#Scripts.Render("~/bundles/mediaelement")
#Scripts.Render("~/bundles/modules")
#RenderSection("scripts", false)
<script type="text/javascript">
$(document).ready(function () { // JQuery not loaded here, $ is undefined
$.getScript('../Scripts/Modules/musicCloud.js', function () {
var $window = $(window);
var nav = $('.fixed-button');
$window.scroll(function () {
if ($window.scrollTop() >= 200) {
nav.addClass('active');
}
else {
nav.removeClass('active');
}
});
$(function () {
$('#mnItemPlaylist').click(function () {
$.get('#Url.Action("PlayList", "PlayList",new {url = "/api/albums" })', function (data) {
debugger;
musicCloud.playlist.AppendToAlbums(data, 'New Releases');
});
});
});
});
});
</script>
</body>
</html>
I achieved what I wanted to do using partial views and viewdata, that is click on menu item in _layout and load a partial view with data in single ajax request in the RenderBody section of layout page. After reading so many articles, I came across two ways of doing it. 1)Passing the entire PartialView with data as JSON 2)Using Viewbag/ViewData to pass the data and return partial view in single ajax call. So, no 2 was the best option for me render json data and partial view with single ajax request
I need to add class="active" to tag <li> when i click on <a> to become <li class="active">
Notice i have multiple <li> tags and i need to class="active" only for tag <li> that i clicked on it.
this my sample code :
<ul class="nav">
<li>
<a href="...">
Personal Informations <i class="pe-7s-user"></i>
</a>
</li>
<li>
<a href="...">
Qualifications <i class="pe-7s-note2"></i>
</a>
</li>
</ul>
Use .parent() and .addClass()
$(function(){
$('a').click(function(e){
e.preventDefault();
$(this).parent().addClass('active');
})
})
.active {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
Personal Informations <i class="pe-7s-user"></i>
</a>
</li>
<li>
<a href="#">
Qualifications <i class="pe-7s-note2"></i>
</a>
</li>
</ul>
I'm working on an AngularJS app where I use Bootstrap 3 to style my navigation (Navbar) and this works perfectly.
My headder
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span>
{{name} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
Right now when on mobile device it is the button in the navbar-header that appears and behaves like a toggle, as expected using Bootstraps navigation. This means the user have to click on it to open it, and then click on it again whenever he wants to close it.
And on tablet/desktop it is two dropdowns (from navbar-collapse). Which I want to keep it that way.
My question is: Is there a way, on mobiles, to have the button behave as a dropdown instead of a toggle? So a user can click anywhere he wants and it closes instead of having to click on the button?
How about this example?
var app = angular.module('app', ['ui.bootstrap']);
app.controller('menu', function($scope) {
$scope.logo = 'http://i.stack.imgur.com/P1BHs.png';
$scope.user = {};
$scope.user.organization = {};
$scope.user.organization.name = "Org test";
$scope.user.image_path = "http://ionicframework.com/img/docs/venkman.jpg";
$scope.app = {name: "App test"};
$scope.lang = {name: "English"};
$scope.langs = [{key: "EN", name: "English"},{key: "IT", name: "Italian"}];
$scope.name = "user123";
$scope.setLang = function(key) {
}
$scope.containerClick = function($event) {
console.log("containerClick: "+$scope.navCollapsed)
$scope.navCollapsed = true;
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="menu">
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" style="width: 200px" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block img-circle" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span> {{name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</div>
<div class="container container-exp" ng-click="containerClick($event)"></div>
<footer>
<hr />
<center>2016 XYZ. All Rights reserved.</center>
</footer>
</body>
</html>
I'm developing a site with a bootstrap three column design, where the pagination controls need to obey the following constraints:
Fit in the middle column.
Remain a single line without wrapping to multiple lines.
Be responsive. I don't need "full"/"fluid" col-xs to col-xl responsive, just something that is fluid above col-md and I can implement an alternative for col-xs and col-sm.
I'm utterly unable to work out how I can get the damn thing to behave at all.
The 'base' was sort of like this:
.pagination-button {
font-size: 2em;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
<div class='col-xs-8'>
<ul class="pagination">
<li>
<a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a>
</li>
<li>
<a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a>
</li>
<li>
<a class="pagination-item" href="?page=1">1</a>
</li>
<li class="active">
<a class="pagination-item" href="?page=2">2</a>
</li>
<li>
<a class="pagination-item" href="?page=3">3</a>
</li>
<li>
<a class="pagination-item" href="?page=4">4</a>
</li>
<li>
<a class="pagination-item" href="?page=5">5</a>
</li>
<li>
<a class="pagination-item" href="?page=6">6</a>
</li>
<li>
<a class="pagination-item" href="?page=7">7</a>
</li>
<li>
<a class="pagination-item" href="?page=8">8</a>
</li>
<li>
<a class="pagination-item" href="?page=9">9</a>
</li>
<li>
<a class="pagination-item" href="?page=10">10</a>
</li>
<li>
<a class="pagination-item" href="?page=11">11</a>
</li>
<li>
<a class="pagination-item" href="?page=12">12</a>
</li>
<li>
<a class="pagination-item" href="?page=13">13</a>
</li>
<li>
<a class="pagination-item" href="?page=14">14</a>
</li>
<li>
<a class="pagination-item" href="?page=15">15</a>
</li>
<li>
<a class="pagination-item" href="?page=16">16</a>
</li>
<li>
<a class="pagination-item" href="?page=17">17</a>
</li>
<li>
<a class="pagination-item" href="?page=18">18</a>
</li>
<li>
<a class="pagination-item" href="?page=19">19</a>
</li>
<li>
<a class="pagination-item" href="?page=20">20</a>
</li>
<li>
<a class="pagination-item" href="?page=21">21</a>
</li>
<li>
<a class="pagination-item" href="?page=22">22</a>
</li>
<li>
<a class="pagination-item" href="?page=23">23</a>
</li>
<li>
<a class="pagination-item" href="?page=24">24</a>
</li>
<li>
<a class="pagination-item" href="?page=25">25</a>
</li>
<li>
<a class="pagination-item" href="?page=26">26</a>
</li>
<li>
<a class="pagination-item" href="?page=27">27</a>
</li>
<li>
<a class="pagination-item" href="?page=28">28</a>
</li>
<li>
<a class="pagination-item" href="?page=29">29</a>
</li>
<li>
<a class="pagination-item" href="?page=30">30</a>
</li>
<li>
<a class="pagination-item" href="?page=31">31</a>
</li>
<li>
<a class="pagination-item" href="?page=32">32</a>
</li>
<li>
<a class="pagination-item" href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a>
</li>
<li>
<a class="pagination-item" href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a>
</li>
</ul>
</div>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
</div>
</div>
</body>
I was able to clean it up into a single line:
.pagination-button {
font-size: 2em;
}
.pagination {
display: inline-flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
justify-content: center;
white-space: nowrap;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
<div class='col-xs-8'>
<ul class="pagination">
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i>
</li>
<li>1
</li>
<li class="active">2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>8
</li>
<li>9
</li>
<li>10
</li>
<li>11
</li>
<li>12
</li>
<li>13
</li>
<li>14
</li>
<li>15
</li>
<li>16
</li>
<li>17
</li>
<li>18
</li>
<li>19
</li>
<li>20
</li>
<li>21
</li>
<li>22
</li>
<li>23
</li>
<li>24
</li>
<li>25
</li>
<li>26
</li>
<li>27
</li>
<li>28
</li>
<li>29
</li>
<li>30
</li>
<li>31
</li>
<li>32
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i>
</li>
</ul>
</div>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
</div>
</div>
</body>
How can I clean up this list so its more responsive?
CSS only would be great but after a few hours trying to get it working, I'm even willing to entertain JavaScript based approaches to solving this UX/UI problem I'm having.
I had the idea that I could solve it pretty easily if I could tag each <li> element with a priority and then add the elements to the <ul> in order of priority until they filled their allowed width, but I'm at a loss as to how to implementing something like this well and avoid all the usual browser edge cases, and I'd be throwing CSS out the window to do it, I'm still hoping their is a simpler CSS based answer.
Currently, .pagination isn't displayed as inline-flex. Bootstrap uses the class too and makes it inline-block. Change .pagination to ul.pagination so your CSS will be picked (since it's more specific).
This will force all the list items in one row.
Depending on what u want, u could give the ul a max-width and work with overflow-x:scroll; in your CSS. You will probably have to add in a width:100%; for your ul.pagination.
Sorry I wasn't specific enough. I've put my suggestions in the snippet below. (Check the ul.pagination CSS block)
It fits the middle column, and stays on one line.
The depending on what u want part is mainly regarding responsive, there are several ways to do this. This is a design/interaction question. I've suggested overflow-x: scroll; for this.
.pagination-button {
font-size: 2em;
}
ul.pagination {
display: inline-flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
justify-content: center;
white-space: nowrap;
width: 100%;
overflow-x: scroll;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
<div class='col-xs-8'>
<ul class="pagination">
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i>
</li>
<li>1
</li>
<li class="active">2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>8
</li>
<li>9
</li>
<li>10
</li>
<li>11
</li>
<li>12
</li>
<li>13
</li>
<li>14
</li>
<li>15
</li>
<li>16
</li>
<li>17
</li>
<li>18
</li>
<li>19
</li>
<li>20
</li>
<li>21
</li>
<li>22
</li>
<li>23
</li>
<li>24
</li>
<li>25
</li>
<li>26
</li>
<li>27
</li>
<li>28
</li>
<li>29
</li>
<li>30
</li>
<li>31
</li>
<li>32
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i>
</li>
<li>
<i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i>
</li>
</ul>
</div>
<div class='col-xs-2'>
<div class="card-panel">
<span>Foo</span>
</div>
</div>
</div>
</div>
</body>
I try to use materializecss dropdown menu feature but out of four dropdown menu items, I am only seeing two of the items in the dropdown menu. Here is my HTML code
<nav class="white blue-text">
<div class="navbar-wrapper container">
<!-- <a class="brand-logo center waves-effect waves-light" href="javascript:void(0)">Abdul-Samii</a> -->
<i class="material-icons">menu</i>
<a href="#" class="brand-logo left">
<img src="images/logo.png" class="top-logo">
</a>
<ul class="hide-on-med-and-down right">
<li class="waves-effect waves-light">Home
</li>
<li class="waves-effect waves-light">About Us
</li>
<li class="waves-effect waves-light"><a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)">Gallery</a>
</li>
<ul id='dropdown1' class='dropdown-content'>
<li>Videos
</li>
<li>Publication
</li>
<li>Interviews
</li>
<li>Pictures
</li>
</ul>
<li class="waves-effect waves-light">News
</li>
<li class="waves-effect waves-light active">Events
</li>
<li class="waves-effect waves-light">Partners
</li>
<li class="waves-effect waves-light">Contact Us
</li>
</ul>
<ul class="side-nav" id="mobile-menu">
<li class="waves-effect waves-light">Home
</li>
<li class="waves-effect waves-light">About Us
</li>
<li class="waves-effect waves-light">Gallery
</li>
<li class="waves-effect waves-light">News
</li>
<li class="waves-effect waves-light active">Events
</li>
<li class="waves-effect waves-light">Partners
</li>
<li class="waves-effect waves-light">Contact Us
</li>
</ul>
</div>
</nav>
and the only thing I did to my nav in my css is this:
nav ul a {
font-size: 1.1rem;
color: #2196F3;
}
nav,
nav .nav-wrapper i,
nav a.button-collapse,
nav a.button-collapse i {
height: 105px;
line-height: 105px;
}
check the navigation bar on this link: http://www.jalasem.com
and click on gallery to understand what i am saying
Guess what i got what u wanted..
There was a very small thing which made your code break..
I just removed the class="waves-effect waves-light" from the<li> tag of dropdown.
Below is Working code and its all CDN files so just copy and paste my code to any file, save with .html extension and run directly.
Header part
<!DOCTYPE HTML><html>
<head><title>
</title>
<!-- Font-Awesome CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
</head>
Next is the Body with nav
<body>
<nav class="white blue-text">
<div class="navbar-wrapper container">
<!-- <a class="brand-logo center waves-effect waves-light" href="javascript:void(0)">Abdul-Samii</a> -->
<i class="material-icons">menu</i>
<a href="#" class="brand-logo left">
<img src="images/logo.png" class="top-logo">
</a>
<ul class="hide-on-med-and-down right">
<li class="waves-effect waves-light">Home
</li>
<li class="waves-effect waves-light">About Us
</li>
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1" href="javascript:void(0)">Gallery</a>
</li>
<ul id='dropdown1' class='dropdown-content'>
<li>
Videos
</li>
<li>
Publication
</li>
<li>
Interviews
</li>
<li>
Pictures
</li>
</ul>
<li class="waves-effect waves-light">News
</li>
<li class="waves-effect waves-light active">Events
</li>
<li class="waves-effect waves-light">Partners
</li>
<li class="waves-effect waves-light">Contact Us
</li>
</ul>
<ul class="side-nav" id="mobile-menu">
<li class="waves-effect waves-light">Home
</li>
<li class="waves-effect waves-light">About Us
</li>
<li class="waves-effect waves-light">Gallery
</li>
<li class="waves-effect waves-light">News
</li>
<li class="waves-effect waves-light active">Events
</li>
<li class="waves-effect waves-light">Partners
</li>
<li class="waves-effect waves-light">Contact Us
</li>
</ul>
Finally the script and style with body end tag and footer
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
</body></html>
style for nav are same as u used i have not added in the code but you add it and then run the code
Hope u got my ans.
good luck..