materializecss navigation dropdown - javascript

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..

Related

Adminlte 3 with bootstrap-4 dynamic sidebar menu loaded from ajax sidebar open not working

I want to draw dynamic sidebar menu data from database using AJAX in the adminlte 3 dashboard with bootstrap 4 dashboard. When I loaded sidebar menu data dynamically by using AJAX, sidebar open or collapse not working.My JSFiddle URL is given below. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call menu open/hide not working.
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Rahim</p></li></ul><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Test</p></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--Profile-->
Sign out
</li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>

Just put the code after success function and it will work.
$('[data-widget="treeview"]').Treeview('init');

jQuery all list items in menu is set to active instead of just the selected one

This is the structure of my menu. I have attached the jQuery code below. The way this works is that when I click on Home Page, its parent element which is the list item has a class that is set to active.
At the moment, When I am at the Home Page, its list item has an active class. However, the list-items for Account Codes and Branches also have an active class set on it. How can I make sure that only my Home Page is affected?
Also, how can I change my jQuery code to work with this menu format where there is a new list within a list?
<ul class="sidebar-menu" id="navigation-menu">
<li><i class="far fa-square"></i><span>Home Page</span></li>
<li class="menu-header">Administrator Mode</li>
<li class="nav-item dropdown">
<i class="fas fa-fire"></i><span>Configuration</span>
<ul class="dropdown-menu">
<li>Account Codes</li>
<li>Branches</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
var current = location.pathname;
$("#navigation-menu a").each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
console.log($this);
$this.parent().addClass('active');
console.log("matched");
}
});
});
</script>

Dropdown Layout
The most effective HTML layout pattern for dropdown menus is to alternate between <ul>/<ol> and <li>:
<ul>
<li class='dropdown'>
Dropdown
<ul class='menu' style='display:none'>
<li>Item</li>
<li class='dropdown'>
<a href='#/'>Dropdown</a>
<ul class='menu' style='display:none'>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
Also, if you want the menus to be initially closed, add the following inline style:
<ul class='menu' style='display:none'>
The <a>nchors have default behavior that is hard to override when using a framework like Bootstrap or Foundation. Try toggling the .active class on .has-dropdown children tags.
Demo
Details commented in demo
/*
Delegate click event to each .has-dropdown
Toggle .active class on that particular .has-dropdown children tags
Get next .dropdown-menu and toggle it up/down and toggle .active
*/
$('.has-dropdown').on('click', function(e) {
$(this).children().toggleClass('active');
$(this).next('.dropdown-menu').slideToggle().toggleClass('active');
});
.active {
color: tomato
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css' rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<ul id="navigation-menu" class="sidebar-menu">
<li>
<a href="#/" class="nav-link">
<i class="fas fa-home"></i><span> Home Page</span>
</a>
</li>
<li class="menu-header">
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-tools"></i><span> Administration</span>
</a>
<ul class="nav-item dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-lock"></i><span> Security</span>
</a>
<ul class="dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link">
<span> Account Codes</span>
</a>
</li>
<li>
<a href="#/" class="nav-link">
<span> Branches</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-cog"></i><span> Configuration
</span></a>
<ul class="dropdown-menu" style='display:none'>
<li>
<span> Layout</span>
</li>
<li>
<span> Assets</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

asp.net MVC layout.cshtml's js files get loaded and called multiple times

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

Could not resolve 'javascript:;' from state 'app'

I'm facing a trouble and I'm not understanding. I have a menu of configurations and a submenu when i click on it.
<li ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
The problem is when I set a ng-if I just can see the configurations menu and when I click on it I got the error "Could not resolve 'javascript:;' from state 'app'".
I know that "javascript:;" this is not defined in my routes file. This means anything specific ? This code wasnt mine and I'm trying to make some changes to control who can see the menu by doing a ng-if like
<!-- configurations -->
<li ng-if="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-if="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
To get the permission group on Controller I had this piece of code
var user = JSON.parse(window.localStorage.getItem("userKey"));
$http.get('/api/organization_permissions_groups/'+user.organization_permission_group_id).success(function (data) {
$scope.permissionGroup = data;
});

You should use ng-show instead of ng-if:
<!-- configurations -->
<li ng-show="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-show="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->

Controlling HTML overflow/visibility

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>

Categories

Resources