Kendo mobile app with drawer layout using Angular - kendo-mobile

I have the following html that works beautifully. The drawer works as expected.
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div data-role="view" id="drawer-content" data-layout="drawer-layout" data-title="Content" data-use-native-scrolling="true">
Welcome to the Jungle
</div>
<div data-role="drawer" id="my-drawer" style="width: 20em" data-views="['drawer-content', 'views/inbox.html', 'views/starred.html', 'views/deleted.html', 'views/drafts.html', 'views/sentItems.html']" data-use-native-scrolling="true">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="button" class="nav-button" data-icon="contacts"></a>
<span data-role="view-title">My Mail</span>
<a data-align="right" data-role="button" class="nav-button" data-icon="settings"></a>
</div>
</header>
<ul data-role="listview" class="km-listview-icons">
<li data-icon="source-code">Dashboard </li>
<li data-icon="downloads">Inbox <span class="km-badge">6</span></li>
<li data-icon="favorites">Starred Items <span class="km-badge">5</span></li>
<li data-icon="edit">Drafts <span class="km-badge">8</span></li>
<li data-icon="reply">Sent Items</li>
<li data-icon="trash">Deleted Items</li>
</ul>
<ul data-role="listview" data-type="group" class="km-listview-icons">
<li>
Setup
<ul>
<li data-icon="favorites">Penns</li>
<li data-icon="favorites">Animal Types</li>
<li data-icon="favorites">Feeding Types</li>
<li data-icon="favorites">Treatment Types</li>
</ul>
</li>
<li>
Account
<ul>
<li data-icon="settings">Settings</li>
<li data-icon="action">Log Out</li>
</ul>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-icon" data-align="left"></a>
<span data-role="view-title"></span>
<a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
<a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { skin: "nova" });
</script>
</body>
</html>
I'm now trying to convert it to an Angular app, using Kendo mobile directives:
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application k-skin="nova" ng-app="cattleApp">
<kendo-mobile-view id="drawer-content" k-layout="'drawer-layout'" k-title="Content" k-use-native-scrolling="true">
Welcome to the Jungle
</kendo-mobile-view>
<kendo-mobile-drawer id="my-drawer" style="width: 20em" k-views="['drawer-content', 'views/inbox.html', 'views/starred.html', 'views/deleted.html', 'views/drafts.html', 'views/sentItems.html']" k-use-native-scrolling="true">
<kendo-mobile-header>
<div data-role="navbar">
<a data-align="left" data-role="button" class="nav-button" data-icon="contacts"></a>
<span data-role="view-title">My Mail</span>
<a data-align="right" data-role="button" class="nav-button" data-icon="settings"></a>
</div>
</kendo-mobile-header>
<ul data-role="listview" class="km-listview-icons">
<li data-icon="source-code">Dashboard </li>
<li data-icon="downloads">Inbox <span class="km-badge">6</span></li>
<li data-icon="favorites">Starred Items <span class="km-badge">5</span></li>
<li data-icon="edit">Drafts <span class="km-badge">8</span></li>
<li data-icon="reply">Sent Items</li>
<li data-icon="trash">Deleted Items</li>
</ul>
<ul data-role="listview" data-type="group" class="km-listview-icons">
<li>
Setup
<ul>
<li data-icon="favorites">Penns</li>
<li data-icon="favorites">Animal Types</li>
<li data-icon="favorites">Feeding Types</li>
<li data-icon="favorites">Treatment Types</li>
</ul>
</li>
<li>
Account
<ul>
<li data-icon="settings">Settings</li>
<li data-icon="action">Log Out</li>
</ul>
</li>
</ul>
</kendo-mobile-drawer>
<kendo-mobile-layout k-id="'drawer-layout'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-mobile-button k-rel="'drawer'" href="#my-drawer" k-icon="drawer-icon" k-align="left"></kendo-mobile-button>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
</kendo-mobile-layout>
<script>
angular.module('cattleApp', ['kendo.directives']);
</script>
</body>
</html>
I get no errors at runtime (in the browser dev tools), but it shows up as a blank page in my browser, and I have NO idea why.
Please advise what I am missing?


I noticed you need to put "http:" before your references. When I tried your code with "http:" it worked much better.
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
Also, I noticed that the following reference did not work right:
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
However, when I plugged in the reference from the Telerik demo documentation it worked much better:
<script src="http://kendo.cdn.telerik.com/2014.3.1029/js/kendo.all.min.js"></script>
In your mobile drawer use "kendo-mobile-list-view" such as:
<kendo-mobile-list-view class="km-listview-icons">
<li data-icon="source-code">Dashboard </li>
<li data-icon="downloads">Inbox <span class="km-badge">6</span></li>
<li data-icon="favorites">Starred Items <span class="km-badge">5</span></li>
<li data-icon="edit">Drafts <span class="km-badge">8</span></li>
<li data-icon="reply">Sent Items</li>
<li data-icon="trash">Deleted Items</li>
</kendo-mobile-list-view>
instead of
<ul data-role="listview" class="km-listview-icons">

Related

How to integrate a themeforest theme in Blazor web assembly?

I am creating a new Blazor web assembly pwa app. I have bought a theme from themeforest and trying to integrate it in my Blazor web assembly app. I am using visual studio and .net core 3.1.202. I was able to get the layout UI to work but my side navigation is not working. I am unable to collapse or expand any menu option or even clicking on the hamburger icon doesn't work. I couldn't figure out what I have missed. There are no errors in the console window of the browser. Hence, I request help in this matter. Thanks in advance.
This is what my index.razor page looks like:
This is my wwwroot folder:
Screenshot of console window:
This is my index.html
<!DOCTYPE html>
<html class="fixed sidebar-light" data-style-switcher-options="{'sidebarColor': 'light'}">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>Light Sidebar Layout | Porto Admin - Responsive HTML5 Template</title>
<meta name="keywords" content="HTML5 Admin Template" />
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
<link rel="stylesheet" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css" />
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="vendor/bootstrap-multiselect/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="vendor/morris/morris.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<!--<script src="vendor/modernizr/modernizr.js"></script>-->
<!--<script src="master/style-switcher/style.switcher.localstorage.js"></script>-->
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
<!-- Vendor -->
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
<!--<script src="master/style-switcher/style.switcher.js"></script>-->
<script src="vendor/popper/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendor/common/common.js"></script>
<script src="vendor/nanoscroller/nanoscroller.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="vendor/jquery-placeholder/jquery.placeholder.js"></script>
<!-- Specific Page Vendor -->
<script src="vendor/jquery-ui/jquery-ui.js"></script>
<script src="vendor/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script>
<script src="vendor/jquery-appear/jquery.appear.js"></script>
<script src="vendor/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script src="vendor/jquery.easy-pie-chart/jquery.easypiechart.js"></script>
<script src="vendor/flot/jquery.flot.js"></script>
<script src="vendor/flot.tooltip/jquery.flot.tooltip.js"></script>
<script src="vendor/flot/jquery.flot.pie.js"></script>
<script src="vendor/flot/jquery.flot.categories.js"></script>
<script src="vendor/flot/jquery.flot.resize.js"></script>
<script src="vendor/jquery-sparkline/jquery.sparkline.js"></script>
<script src="vendor/raphael/raphael.js"></script>
<script src="vendor/morris/morris.js"></script>
<script src="vendor/gauge/gauge.js"></script>
<script src="vendor/snap.svg/snap.svg.js"></script>
<script src="vendor/liquid-meter/liquid.meter.js"></script>
<script src="vendor/jqvmap/jquery.vmap.js"></script>
<script src="vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<!--(remove-empty-lines-end)-->
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="js/theme.init.js"></script>
<!-- Analytics to Track Preview Website -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-42715764-8', 'auto');
ga('send', 'pageview');
</script>
<script>
// Maintain Scroll Position
if (typeof localStorage !== 'undefined') {
if (localStorage.getItem('sidebar-left-position') !== null) {
var initialPosition = localStorage.getItem('sidebar-left-position'),
sidebarLeft = document.querySelector('#sidebar-left .nano-content');
sidebarLeft.scrollTop = initialPosition;
}
}
</script>
<!-- Examples -->
<script src="js/examples/examples.dashboard.js"></script>
</body>
</html>
My MainLayout.razor
#inherits LayoutComponentBase
<section class="body">
<!-- start: header -->
<header class="header">
<div class="logo-container">
<a href="/" class="logo">
<img src="img/logo.png" width="75" height="35" alt="Porto Admin" />
</a>
<div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search & user box -->
<div class="header-right">
<span class="separator"></span>
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="img/!logged-user.jpg" alt="Joseph Doe" class="rounded-circle" data-lock-picture="img/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe#okler.com">
<span class="name">John Doe Junior</span>
<span class="role">Administrator</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled mb-2">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user-circle"></i> My Profile</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock"></i> Lock Screen</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="pages-signin.html"><i class="bx bx-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search & user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<NavMenu />
<section role="main" class="content-body">
<header class="page-header">
<h2>Light Sidebar Layout</h2>
<div class="right-wrapper text-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="bx bx-home-alt"></i>
</a>
</li>
<li><span>Layouts</span></li>
<li><span>Light Sidebar</span></li>
</ol>
<a class="sidebar-right-toggle disabled"><i class="fas fa-chevron-left"></i></a>
</div>
</header>
<!-- start: page -->
#Body
</section>
</div>
</section>
My NavMenu.razor
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li>
<a class="nav-link" href="layouts-default.html">
<i class="bx bx-home-alt" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-parent">
<a class="nav-link" href="#">
<i class="bx bx-cart-alt" aria-hidden="true"></i>
<span>eCommerce</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="ecommerce-dashboard.html">
Dashboard
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-list.html">
Products List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-form.html">
Products Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-list.html">
Categories List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-form.html">
Category Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-list.html">
Coupons List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-form.html">
Coupons Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-list.html">
Orders List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-detail.html">
Orders Detail
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-list.html">
Customers List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-form.html">
Customers Form
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="mailbox-folder.html">
<span class="float-right badge badge-primary">182</span>
<i class="bx bx-envelope" aria-hidden="true"></i>
<span>Mailbox</span>
</a>
</li>
<li class="nav-parent nav-expanded nav-active">
<a class="nav-link" href="#">
<i class="bx bx-layout" aria-hidden="true"></i>
<span>Layouts</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="index.html">
Landing Page
</a>
</li>
<li>
<a class="nav-link" href="layouts-default.html">
Default
</a>
</li>
<li>
<a class="nav-link" href="layouts-modern.html">
Modern
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Horizontal Menu Header
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-header-menu.html">
Pills
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-stripe.html">
Stripe
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-top-line.html">
Top Line
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-two-navigations.html">
Two Navigations
</a>
</li>
<li class="nav-parent">
<a>
Tab Navigation
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-tab-navigation-dark.html">
Tab Navigation Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation.html">
Tab Navigation Light
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation-boxed.html">
Tab Navigation Boxed
</a>
</li>
</ul>
</li>
<li class="nav-active">
<a class="nav-link" href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Big Icons
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons.html">
Left Sidebar Big Icons Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons-light.html">
Left Sidebar Big Icons Light
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Left Sidebar Panel
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-panel.html">
Left Sidebar Panel Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-panel-light.html">
Left Sidebar Panel Light
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<!-- end: sidebar -->

I had the same issue with a theme from themeforest. The problem was, that all event handlers defined in theme js file are not fired by the frontend.
My solution was to find out what css things changes for an event (for example collapse menu) and to write a java script function that does that DOM maniupulation. Then I'm using JS Interopt from Blazor to call that function. Basically I rewrite all needed JS handlers by hand and call it by for example #onclick handlers in razor components.
A lot of work to do, but it works.
UPDATE:
Most of my theme components are triggered by a DOMContentLoaded event, so a simple manual call of this event is enough. I created following JS function in my custom.js file
function triggerThemeJS() {
window.document.dispatchEvent(new Event("DOMContentLoaded", {
bubbles: true,
cancelable: true
}));
}
and call this with JS Interopt from Blazor Razor page (for example MainLayout):
#inject IJSRuntime javaScript
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await javaScript.InvokeVoidAsync("triggerThemeJS");
}
}

Why my navbar has no background color and vertical list?

I'm currently making a website using bootstrap 4 and CodeIgniter as backend. But the navigation bar went weird for some reason.
enter image description here (I still don't have enough point to post picture)
There's no navbar color and not to mention, the list is vertical, not horizontal.
This is my code:
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
Edit:
I was following a CodeIgniter tutorial by Traversy Media on youtube. I have followed all the steps, except the navbar went weird.
https://www.youtube.com/watch?v=I752ofYu7ag

just go to this link https://bootswatch.com/flatly/
copy source code from this link
Here Your Solution:-
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url(); ?>">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url(); ?>/about">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>

Issue in laravel boostrap navbar menu

am new to laravel...this is the first project that I am doing...while following a tutorial, I was trying to put Navbar from bootstrap and put the following code into my header.blade page...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
But while checking in the browser it looks like the following... Could not actually figure out whether any new library of bootstrap to be added in the header or not...

I think You have an conflict in placing your bootstrap asset in html. just add this bootstrap assets inside element
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
in your codes just Look at this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>

In bootstrap, How do I make an image a dropdown?

In bootstrap, How do I make an image a dropdown?
Hi, I have created a dropdown in bootstrap, I want to put an image such that it will be the item to click so as to see the dropdown.
Here is my code below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-limanAbba-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LimanAbba</a>
</div>
<div class="collapse navbar-collapse" id="bs-limanAbba-navbar-collapse-1">
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li>Freelance</li>
<li>About</li>
<li>Contact</li>\
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span><ul class="dropdown-menu">
<li>Liman</li>
<li>Code90</li>
<li>Coding</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Just put the image link on the dropdown button. See below code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown with image link.</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
<img src="https://i.stack.imgur.com/KKhkr.png?s=128&g=1">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 4</a></li>
</ul>
</div>
</div>
</body>

If you want a pure image as the dropdown toggle, you can use an anchor (a) instead of a button to have only the image displayed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container">
<h2>Pure Image Dropdown</h2>
<p>Click the image to see the dropdown</p>
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img src="https://picsum.photos/50">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 4</a></li>
</ul>
</div>
</div>
</body>

FlexSlider click on pictures to bring up LightBox like ability

I have a FlexSlider/Carousel plug in working great on my site. Now, I would like to be able to click on the Slider image to bring up a lightbox like plug in so I can 'blow up' the images to be able to see more detail. I have read and tried to implement a lightbox: true attribute which sounds like it is supposed to do what I am looking for, but it doesn't seem to work. I can't click on the slider image to do anything.
<div id="main" role="main">
<section class="slider">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>
</section>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="~/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 100,
itemMargin: 0,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
},
lightbox: true
});
});

Just in case someone needs this. Try this:
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<a href="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" data-lightbox="1000 500">
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</a>
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>

A solution I'm using on a current WordPress project is "Responsive Lightbox" by dFactory. It uses the HTML element rel="lightbox" as a hook. Instant lightbox galleries!
<div class="flexslider">
<ul class="slides">
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
</ul>
</div>

<div class="flexslider">
<ul class="slides">
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
</ul> </div>
This is the one that worked for me - I also added a target="blank" to open a new window.

Resources