I am Using Bootstrap 3 class col-md-8 and the col-md-4.but the left column will not pull all the way to the left.
The original page works on Safari, and Firefox on Mac and Windows. IE8 does not work using header section html5shiv.js, responds.js,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Store Sale</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!--End Bootstrap-->
<!--Font Awesome-->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!--End Font Awesome-->
<!--<link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="css/style.css">
<!-- Pushy CSS -->
<link rel="stylesheet" href="css/pushy.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--DD Search-->
<script src="js/jquery.ddslick.js"></script>
<script src="js/main.js"></script>
<!--End DD-->
<!--[if lt IE 8]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
</head>
<body>
<!-- Pushy Menu -->
<nav class="pushy pushy-left">
<ul>
<li class="pushy-submenu">
Submenu 1
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-submenu">
Submenu 2
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-submenu">
Submenu 3
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-submenu">
Submenu 4
<ul>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
</ul>
</li>
<li class="pushy-link">Item 1</li>
<li class="pushy-link">Item 2</li>
<li class="pushy-link">Item 3</li>
<li class="pushy-link">Item 4</li>
</ul>
</nav>
<!-- Site Overlay -->
<div class="site-overlay"></div>
<!-- Your Content -->
<!-- Menu Button -->
<div class="headerT">
<div class="col-md-2">
<div class="headerL menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<div class="col-md-8">
<div class="headerM">
<div class="logo"><img src="images/logo_1.gif" alt="Store Sales" class="img-responsive"></div>
<div class="navM">
<ul>
<li><img src="images/stores.png" alt="Stores" class="fade"><br/>Stores</li>
<li><img src="images/brands.png" alt="Brands" class="fade"><br/>Brands</li>
<li><img src="images/offers.png" alt="Offers" class="fade"><br/>Offers</li>
<li><img src="images/loyalty-cards.png" alt="Loyalty Cards" class="fade"><br/>Loyalty Cards</li>
<li><img src="images/vouchers.png" alt="Vouchers" class="fade"><br/>Vouchers</li>
<li><img src="images/favourites.png" alt="Favourites" class="fade"><br/>My Favourites</li>
<li><img src="images/shopoholic.png" alt="Shopoholic" class="fade"><br/>Shopoholic</li>
<div class="clearfix"></div>
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<div class="headerR"><i class="fa fa-search" aria-hidden="true"></i><i class="fa fa-user" aria-hidden="true"></i><i class="fa fa-map-marker" aria-hidden="true"></i></div>
</div>
</div>
<div class="clearfix"></div>
<!--Drop Down Animation Search Box-->
<div class="searchM">
<div class="container">
<div class="col-md-3 searchL">
<div id="demoBasic" class="dd-container">
</div>
</div>
<div class="col-md-6 searchMB searchMM">
<div id="searchMM">
</div>
</div>
<div class="col-md-3 searchF searchR">
<button type="button" class="btn btn-danger btn-dan">Search</button>
<i class="fa fa-filter" aria-hidden="true"></i>Filter Search
</div>
</div>
</div>
<!--End Drop Down Animation Search Box-->
<div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like</p>
</div>
<!-- Pushy JS -->
<script src="js/pushy.min.js"></script>
<script>
$( document ).ready(function() {
$( ".search" ).click(function() {
$( ".searchM" ).toggle( "blind" );
});
});
</script>
</body>
</html>
i think this should be ie9, so it just can search < ie9.
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->
Related
I am working on a simple Laravel project where I want to display images from the public directory in laravel blade but it is showing a blank white screen instead of the images, below are the screenshots and information about my project.
This is my path to images:
The blade file is here:
In the above file, I tried both images/file.pnj and /images/file.png but neither worked for me.
Here is the nav.blade.php code:
<!--HEADER START-->
<header>
<div class="top-strip">
<div class="container">
<div class="site-info">
<ul>
<li><i class="fa fa-envelope-o"></i>Info#bookguide.com</li>
<li><i class="fa fa-heart"></i></li>
<li><i class="fa fa-shopping-cart"></i></li>
<li><a id="search-box" href="#"><i class="fa fa-search"></i></a></li>
</ul>
</div>
</div>
</div>
<!--Search Overlay Box Starts -->
<div id="kode_search_box" class="kode_search_box">
<form class="kode_search_box-form">
<input class="kode_search_box-input" type="search" placeholder="Search..."/>
<button class="kode_search_box-submit" type="submit">Search</button>
</form>
<span class="kode_search_box-close"></span>
</div><!-- /kode_search_box -->
<div class="overlay"></div>
<div class="logo-container">
<div class="container">
<!--LOGO START-->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!--LOGO END-->
<div class="kode-navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Blog
<ul>
<li>Blog</li>
<li>Blog Full</li>
<li>Blog Detail</li>
</ul>
</li>
<li class="last">Teams
<ul>
<li>Author</li>
<li>Author Detail</li>
</ul>
</li>
<li>Products
<ul>
<li>Products Style 1</li>
<li>Products Style 2</li>
<li>Products Style 3</li>
<li>Product 2 W/S</li>
<li>Product 3 W/S</li>
<li>Product Detail</li>
</ul>
</li>
<li class="last">Contact Us</li>
</ul>
</div>
<div id="kode-responsive-navigation" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li>Home</li>
<li>About Us</li>
<li class="menu-item kode-parent-menu">Our Blog
<ul class="dl-submenu">
<li>Blog</li>
<li>Blog Full</li>
<li>Blog Detail</li>
</ul>
</li>
<li class="menu-item kode-parent-menu last">Teams
<ul class="dl-submenu">
<li>Author</li>
<li>Author Detail</li>
</ul>
</li>
<li class="menu-item kode-parent-menu last">Products
<ul class="dl-submenu">
<li>Products Style 1</li>
<li>Products Style 2</li>
<li>Products Style 3</li>
<li>Product 2 W/S</li>
<li>Product 3 W/S</li>
<li>Product Detail</li>
</ul>
</li>
<li class="last">Contact Us</li>
</ul>
</div>
</div>
</div>
</header>
<!--HEADER END-->
<!--BANNER START-->
<div class="kode-banner">
<ul class="bxslider">
<li>
<img src="{{ url('images/banner-1.png') }}" alt="">
<div class="kode-caption">
<h2>book guide</h2>
<h5>online books store</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor<br>emque laudantium, totam rem aperiam.ipsam voluptatem.</p>
<div class="input-container">
<input type="text" placeholder="Enter Your Book Title Here">
<button><i class="fa fa-search"></i></button>
</div>
</div>
</li>
<li>
<img src="{{ url('images/banner-2.png') }}" alt="">
<div class="kode-caption">
<h2>book Reading</h2>
<h5>Best Book Available</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor<br>emque laudantium, totam rem aperiam.ipsam voluptatem.</p>
<div class="input-container">
<input type="text" placeholder="Enter Your Book Title Here">
<button><i class="fa fa-search"></i></button>
</div>
</div>
</li>
<li>
<img src="{{ url('images/banner-3.png') }}" alt="">
<div class="kode-caption">
<h2>Book Store</h2>
<h5>Books Guiders</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolor<br>emque laudantium, totam rem aperiam.ipsam voluptatem.</p>
<div class="input-container">
<input type="text" placeholder="Enter Your Book Title Here">
<button><i class="fa fa-search"></i></button>
</div>
</div>
</li>
</ul>
</div>
<!--BANNER END-->
<!--BUT NOW START-->
<section class="buy-template">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>The World's Largest online bookstore</h2>
<p>Here you can get the Ebooks easily where are available in our stock. </p>
</div>
<div class="col-md-6">
<div class="kode-btns">
Start Now
Buy Now
</div>
</div>
</div>
</div>
</section>
<!--BUT NOW END-->
When I inspect the image in chrome and hover on it, it is displayed correctly there:
Here is the layout.blade.php file:
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from kodeforest.net/html/books/store/index.html by HTTrack Website Copier/3.x
[XR&CO'2014], Fri, 22 May 2020 03:48:28 GMT -->
<head>
#include('partials.header')
#yield('styles')
</head>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!--WRAPPER START-->
<div class="wrapper kode-home-page">
#include('partials.nav')
#yield('content')
#include('partials.footer')
<div class="copyrights">
<div class="container">
<p>Copyrights © 2015-16 KodeForest. All rights reserved</p>
<div class="cards"><img src="images/cards.png" alt=""></div>
</div>
</div>
</div>
<!--WRAPPER END-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ url('js/app.js') }}"></script>
<script src="{{ url('js/jquery.min.js') }}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ url('js/bootstrap.min.js') }}"></script>
<script src="{{ url('js/jquery.bxslider.min.js') }}"></script>
<script src="{{ url('js/bootstrap-slider.js') }}"></script>
<script src="{{ url('js/waypoints.min.js') }}"></script>
<script src="{{ url('js/jquery.counterup.min.js') }}"></script>
<script src="{{ url('js/dl-menu/modernizr.custom.js') }}"></script>
<script src="{{ url('js/dl-menu/jquery.dlmenu.js') }}"></script>
<script src="{{ url('js/classie.js') }}"></script>
<script src="{{ url('js/functions.js') }}"></script>
</body>
<!-- Mirrored from kodeforest.net/html/books/store/index.html by HTTrack Website Copier/3.x
[XR&CO'2014], Fri, 22 May 2020 03:53:23 GMT -->
</html>
Note: The interesting point is that sometimes the images are displayed but most of the times, I see blank white page instead of the images.
When I open the page in the browser, everything works fine but the banner images are not displayed and instead I see a white screen. Any help is appreciated in advanced.
Add '/' before images. Try Like this <img src="/images/cards.png" alt="">
Laravel provides a very neat helper function (ie asset) to refer the contents of public directory. Instead of doing url(), you can use the asset function to add the fully qualified public url of the image.
You can use asset function like:
$url = asset('img/photo.jpg'); // http://example.com/assets/img/photo.jpg
Lear more about it here.
I am trying to add a carousel of photos into my Laravel app's home page, but for some reason, the photo's do not show. If I slip the image in alone without the carousel divs, then the image appears, but when I use the carousel code, the images stop appearing. As you can see I am using a blade to include the other files to keep my code broken up modularly.
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="/css/app.css" type="text/css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
#include('inc.navbar')
#include('inc.imageslider')
<div class="container mt-3">
#if(request()->is('/'))
#include('inc.showcase')
#endif
<div class="row">
<div class="col-md-8 col-lg-8">
#include('inc.messages')
#yield('content')
</div>
<div class="col-md-4 col-lg-4">
#include('inc.sidebar')
</div>
</div>
</div>
</body>
</html>
imageslider.blade.php
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item">
<img src="img/background.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background3.png" alt="background image">
</div>
</div>
</div>
Replace your imageslider.blade.php with below code. you missed the active class. It will work now.
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/background.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background3.png" alt="background image">
</div>
</div>
</div>
New to Bootstrap and trying to layout a very simple page.
When adding the img element ('Great price') below, this causes some sort of gap down the right-hand side on portable devices, and the html and body elements no longer cover the full page. I have tried adjusting this using CSS and adjusting the row class to row-fluid etc., however after many hours, I still can't find the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\brian\Desktop\Web Design\Traders web\TemplateOne.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<title>Template One</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-#674c8a .bg-#e23c3a">
<a class="navbar-brand" href="#">Joe Bloggs Electrics</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Tel: 077777777777</li>
</ul>
</nav>
<div class="row">
<div class="col-lg-12">
<img src="C:\Users\brian\Desktop\Great Price.png" class="img-responsive" style="width: 100%">
</div>
</div>
<div class="row-fluid">
<div class="col-lg-12">
<h2>Plymouth and surrounding areas</h2>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
<i class="fas fa-pound-sign fa-8x"></i>
<p>Pricing</p>
</div>
<div class="col-lg-4">
<i class="fas fa-comment-alt fa-8x"></i>
<p>Testimonials</p>
</div>
<div class="col-lg-4">
<i class="fas fa-mobile-alt fa-8x"></i>
<p>Contact</p>
</div>
</div>
</div>
<!-- <div class="row-fluid">
<footer>
<p id="copyright">Copyright: Joe Bloggs Electrics</p>
</footer>
</div> -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Just try replacing the img-responsive class with img-fluid. Because some classes updated in bootstrap 4 version ...
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">
I use angular-ui-router for routing pages. The problem is like the title of this. The first ui-view displays the page normally. the second ui-view display
the first loaded page and unchanged. I don't want to display second one.
'use strict';
angular.module('test').config(['$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/dashboard.html'
})
<html lang="en" ng-app="RedCA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RedCA Admin</title>
<link rel="stylesheet" href="css/main.min.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-cookies.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-loader.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-sanitize.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-touch.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-resource.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="components/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="components/ng-table/dist/ng-table.min.js"></script>
<script type="text/javascript" src="components/bootstrap-3.0.3/js/bootstrap.min.js"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<!-- Ace settings handler -->
<script type="text/javascript" src="components/ace.min/js/ace-extra.min.js"></script>
<!-- Ace Script -->
<script src="components/ace.min/js/ace-elements.min.js"></script>
<script src="components/ace.min/js/ace.min.js"></script>
<!-- Ace Styles -->
<!-- <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-fonts.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-rtl.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-skins.min.css"/> -->
<script type="text/javascript" src="components/angular-1.2.5/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/routingConfig-thirdparty.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/st-openpms.concat.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/dashboard.min.js"></script> <!-- rdash augular ui -->
<script type="text/javascript" src="openpms-st-test.templates.js"></script> <!-- openpms st -->
</head>
<body ng-controller="redcaCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
<!-- <li class="sidebar-list">
Test <span class="menu-icon fa fa-tachometer"></span>
</li> -->
<li class="sidebar-title"><span>Demonstration</span></li>
<li data-access-level="accessLevels.admin" active-nav>Demo Page</li>
<!-- ///smart town
{{DOC_BASE}} -> # -->
<li class="sidebar-title"><span>SmartTown Sample</span></li>
<br>
<li data-access-level="accessLevels.user" active-nav>Home</li>
<!--<li>Select Project </li>-->
<li data-access-level="accessLevels.user" active-nav>Main Menu</li>
<!--<li data-access-level="accessLevels.user" active-nav>Chat</li>-->
<li data-access-level="accessLevels.user" active-nav>ChatMulti</li>
<li data-access-level="accessLevels.user" active-nav>Noti</li>
<!--<li data-access-level="accessLevels.anon" active-nav>Log in</li>-->
<li data-access-level="accessLevels.anon" active-nav>Register</li>
<li data-access-level="accessLevels.admin" active-nav>Comm Pic</li>
<!--<li data-access-level="accessLevels.admin" active-nav>CRUD sample</li>-->
<li data-access-level="accessLevels.admin" active-nav>Comm</li>
<li data-access-level="accessLevels.admin" active-nav>Punch</li>
<li data-access-level="accessLevels.admin" active-nav>Register</li>
<!--<li data-access-level="accessLevels.user" active-nav>Private</li>-->
<li data-access-level="accessLevels.admin" active-nav>Admin</li>
<li data-access-level="accessLevels.user">Log out</li>
<!-- ///smart town -->
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Redca Administration
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
try to call .otherwise on $routeProvider:
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/a.html',
controller: 'ctrlA'
})
.when('/b/:tagId', {
templateUrl: '/b.html',
controller: 'ctrlB'
})
.when('/another', {
templateUrl: '/another.html',
controller: 'ctrlC'
})
.otherwise({ redirectTo: '/' });
});