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: '/' });
});
Related
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");
}
}
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 ...
Hey can someone please help this is driving me nuts. I need to make a url from the 3 filters 'ecvnd', 'ecdiv', and 'ecclas' and I have values for all 3 plus the base url. I'm stuck and I think this wouldn't be that difficult if my colleague didn't leave me guessing. This is for ecom site so I need the filters to display the proper products in the link.
the values are as such: ECVND=59375, ECDIV=53 and ECCLAS=59
the closest I got was, but not returning the right products.
https://shop.michells.com/orders/catalog/filter_ECVND=59375&filter_ECDIV=53&ECCLAS=59
As you can see from the snippet below, the filters are hidden in the url on click but when you arrive I need the proper filters to display as there are thousands of other products in the system.
ss snippet hint
<!DOCTYPE html>
<!-- saved from url=(0050)http://getbootstrap.com/examples/starter-template/ -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Henry F. Michell's</title>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/css/michells.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="/js/respond.js"></script>
<script src="/js/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<link href="/css/michells.ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]>
<link href="/css/michells.notie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!-- Bootstrap core CSS -->
<link href="//fonts.googleapis.com/css?family=Bree+Serif" media="screen" rel="stylesheet" type="text/css">
<link href="/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/select2.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/css/select2-bootstrap.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>
<body>
<div class="subpage hidden-print">
<img src="/img/bg-subpage-banner.jpg">
</div>
<div class="container-fluid">
<!-- HEADER -->
<div class="header">
<!-- green bar across the top -->
<div class="row hidden-print">
<div class="col-xs-12 col-lg-11 lg-right navigationBar">
<!-- contents of the green nav bar -->
<!-- expanded links -->
<ul class="hidden-xs hidden-sm">
<li>Michells.com|</li>
<li>Contact Us|</li>
<li class="hoverMenu">My Account
<ul class="dropdown-menu myaccountMenu left" role="menu">
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Plant Report</li>
</ul>
|</li>
<li>Saved Carts|</li>
<li>Account 1 <a class="small" href="/orders/login/logout">Logout</a></li>
</ul>
<!-- mobile menu -->
<div class="hidden-md hidden-lg right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>Michells.com</li>
<li>Contact Us</li>
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Saved Carts</li>
<li>Plant Report</li>
</ul>
</div>
</div>
<!--/mobile menu -->
<!-- /nav bar contents -->
</div>
</div><!-- /green nav bar -->
<img class="logo" src="/img/michells-logo.png">
<div class="mobilelogoutIcon visible-xs hidden-print"><a class="small" href="/orders/login/logout"><i class='fa fa-sign-out'></i></div>
<div class="tabletWelcome hidden-xs hidden-print">
<div>1 <a class="small" href="/orders/login/logout">Logout</a></div>
</div>
<div class="minicart hidden-print">
<a href="/orders/cart/reviewcart">
<i class="fa fa-shopping-cart"></i>
<span class="shoppingCartQty">0</span>
<span class="items"> Items</span>
</a>
</div>
</div>
<!-- / HEADER -->
<!-- Vendors -->
<div class="contents vendorselect">
<h1><span class="hidden-xs"> Online Ordering: </span>Vendors</h1>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 loginform">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<form id="run" action="/orders/catalog/filter" method="post">
<p>Please select a vendor to view their products</p>
<select name="filter_ECVND" id="filter_ECVND" class="form-control">
<option>Select Vendor</option>
<option value='940' >Agri Starts (940)</option><option value='1004' >Aldershot (1004)</option><option value='72761' >Aris (72761)</option><option value='26600' >Aris Horticulture Inc (26600)</option><option value='3650' >Athena Brazil (3650)</option><option value='6795' >Blue Heron (6795)</option><option value='9735' >Botany (9735)</option><option value='07600' >Bountiful Farm (07600)</option><option value='9225' >Burchell Nursery (9225)</option><option value='10500' >Cal Seedling (10500)</option><option value='11740' >Casa Flora (11740)</option><option value='921' >Cohen Nurseries (921)</option><option value='14085' >Colony (14085)</option><option value='13688' >CLI (13688)</option><option value='18997' >Dummen (18997)</option><option value='18997' >Dummen Group (18997)</option><option value='18997' >Dummen USA (18997)</option><option value='22470' >Dummen/Fides (22470)</option><option value='19300' >Duwaynes (19300)</option><option value='47200' >Ecke (47200)</option><option value='47200' >Ecke Geraniums, LLC (47200)</option><option value='20100' >Eckert's Greenhouse (20100)</option><option value='20415' >Ekstrom (20415)</option><option value='20710' >Emerald Coast Growers (20710)</option><option value='21320' >Euro American (21320)</option><option value='14085' >F Henny (14085)</option><option value='21901' >Fairy Gardening (21901)</option><option value='22844' >Floral Plant Growers (22844)</option><option value='23720' >Four Star (23720)</option><option value='22702' >Geraniums (22702)</option><option value='26572' >Green Fuse (26572)</option><option value='26473' >Greenheart (26473)</option><option value='26760' >Gro 'N Sell (26760)</option><option value='26750' >Gro Link (26750)</option><option value='26920' >Gulley (26920)</option><option value='26920' >Gulley Greenhouse (26920)</option><option value='35290' >Knox Nursery (35290)</option><option value='35499' >Koba (35499)</option><option value='35500' >Kogut (35500)</option><option value='35700' >Kube Pak (35700)</option><option value='36091' >Lancaster Farms (36091)</option><option value='38030' >Lucas Greenhouses (38030)</option><option value='28480' >Marjama (28480)</option><option value='39345' >Mast Young Plants (39345)</option><option value='40185' >Meadowview (40185)</option><option value='43322' >Morris (43322)</option><option value='43370' >Mountain Creek (43370)</option><option value='46928' >Obersinner (46928)</option><option value='49150' >Pell Greenhouse (49150)</option><option value='51480' >Plainview Growers (51480)</option><option value='51480' >Plainview Growers Inc (51480)</option><option value='51500' >Pleasant View (51500)</option><option value='51555' >Plug Connection (51555)</option><option value='53625' >Reardon (53625)</option><option value='56105' >Russell (56105)</option><option value='57600' >Scott Farms (57600)</option><option value='59375' selected>Silverleaf Greenhouses (59375)</option><option value='59680' >Skagit Gardens (59680)</option><option value='61100' >Spada Nursery (61100)</option><option value='61166' >Speedling Blairsville (61166)</option><option value='61160' >Speedling Inc (61160)</option><option value='61160' >Speedling Inc. (61160)</option><option value='62850' >Sun Gro (62850)</option><option value='32690' >Sunfire (32690)</option><option value='63290' >Swift Greenhouse (63290)</option><option value='22701' >Syngenta (22701)</option><option value='22701' >Syngenta Flowers (22701)</option><option value='22700' >Syngenta Flowers, Inc (22700)</option><option value='51555' >The Plug Connection (51555)</option><option value='66546' >Twin Srpings (66546)</option><option value='68065' >Van Essen (68065)</option><option value='69605' >Wagner Greenhouses Inc (69605)</option><option value='69899' >Walters Gardens (69899)</option><option value='70250' >Welby (70250)</option><option value='72050' >Woodburn Nursery (72050)</option><option value='72055' >Woodburn Nursery (72055)</option> </select>
<div class="btncontainer right">
<button type="submit" class="btn btn-default right">Select</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- / Vendors -->
</div><!-- /.container -->
<div class="footerouter hidden-print">
<div class="footerinner">
<footer class="row">
<div class="col-xs-12 col-lg-4 row center">
<div class="col-xs-12 col-lg-10 col-lg-offset-1 row">
<img src="/img/michells-logo.png" class="footerlogo">
<p class="stayconnected"><em>Stay Connected</em></p>
<div class="col-xs-3"><img src="/img/icon-fb.png"></div>
<div class="col-xs-3"><img src="/img/icon-tw.png"></div>
<div class="col-xs-3"><img src="/img/icon-in.png"></div>
<div class="col-xs-3"><img src="/img/icon-gp.png"></div>
</div>
</div>
<div class="col-xs-12 col-lg-8">
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Main</strong></li>
<li>Home</li>
<li>About Us</li>
<li>Sales & Service</li>
<li>Michell's Product Catalog</li>
<li>Availability</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Products</strong></li>
<li>Seeds</li>
<li>Nursery</li>
<li>Plugs </li>
</ul>
</div>
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Exclusive Partners</strong></li>
<li>Green Fuse</li>
<li>CLI</li>
<li>Fairy Flowers</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Online Ordering</strong></li>
<li>Shop Now</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
<div class="col-xs-12 footerDisc">Pricing subject to change depending upon volume</div>
</footer>
<div class="pagebottom">
<span class="getupdates"><em>Get Updates!</em></span>
<a target="_blank" class="signup" href="http://visitor.r20.constantcontact.com/d.jsp?llr=gpmby6oab&p=oi&m=1115542303206&sit=6diisxiib&f=2dbee31f-253a-4d91-a0f8-4a2206e36974">Sign Up for Email Updates</a><span class="small">Michell's <span class="Labels">2017</span>. All rights Reserved. <span class="bar">|</span> Sitemap<span class="bar">|</span>Terms & Conditions<span class="bar">|</span>Privacy Policy</span>
</div>
</div>
</div>
<div class="device-xs visible-xs hidden-print"></div>
<div class="device-sm visible-sm hidden-print"></div>
<div class="device-md visible-md hidden-print"></div>
<div class="device-lg visible-lg hidden-print"></div>
<div class="device-landscape visible-landscape hidden-print"></div>
<div class="device-portrait visible-portrait hidden-print"></div>
<!-- Bootstrap core JavaScript
================================================== -->
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/hfm.js"></script>
<script type="text/javascript" src="/js/hfm.vendors.js"></script>
<script type="text/javascript">
//<!--
hfm.vendors.init();
//-->
</script>
<script type="text/javascript">
jQuery('.hoverMenu').hover(
function() {
jQuery(this).addClass('open');
}, function() {
jQuery(this).removeClass('open');
}
);
</script>
</body>
</html>
Thank you so much in advance.
For the life of me, I can't get google event tracking to work. I'm trying to track clicks on certain images in my site. I've waited a number of days, I've tried using firebug and google chrome debugger with no luck. I would be really, really indebted if someone could tell me what I'm doing wrong. My code is below. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hug Addicts | A variety of hug t-shirts.</title>
<!-- js -->
<script type="text/javascript">
var subMenus = new Array();
subMenus[0] = "shirt1";
subMenus[1] = "shirt2";
subMenus[2] = "shirt3";
subMenus[3] = "shirt4";
subMenus[4] = "shirt5";
subMenus[5] = "shirt6";
subMenus[6] = "shirt7";
subMenus[7] = "shirt8";
subMenus[8] = "shirt9";
subMenus[9] = "shirt10";
function revealshirt(id)
{
for (var i = 0; i < subMenus.length; i++)
{
document.getElementById(subMenus[i]).style.background = "transparent";
}
document.getElementById(id).style.background = "#e0e0e0";
}
</script>
<!-- end js -->
<!-- Style Sheet -->
<link href="_css/reset.css" media="screen" type="text/css" rel="stylesheet" />
<link href="_css/layout.css" media="screen" type="text/css" rel="stylesheet" />
<!-- End Style Sheet -->
<meta name="verify-v1" content="G4CQZIfIEXbhZZcpfWDJnAJe+R4lTGtVhzYsKhcRzS4=" />
<!-- Google Analytics -->
<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-47147009-1', 'hugaddict.com');
ga('send', 'pageview');
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-47147009-1']);
_gaq.push(['_trackPageview']);
</script>
<!-- Google Analytics -->
</head>
<body id="homeid">
<div id="wrapper">
<div id="container">
<div id="container_inner">
<div id="header">
<h1>Header</h1>
<div id="navigation">
<ul id="nav">
<li id="prints">
Tees
</li>
<li id="about">
About
</li>
<li id="contact">
Contact
</li>
</ul>
</div>
</div><!-- header -->
<div id="main">
<div id="notice">Hello, my name is . . . and I am an addict.</div>
<div id="mac_nav">
<ul>
<li id="shirt1">
Link
</li>
<li id="shirt2">
Link
</li>
<li id="shirt3">
Link
</li>
<li id="shirt4">
Link
</li>
<li id="shirt5">
Link
</li>
</div>
<div id="content">
<iframe src="shirts/dealing_huggie.html" width="520px" height="600px" name="shirts" scrolling="no"></iframe>
</div>
<div id="pc_nav">
<ul>
<li id="shirt6">
Link
</li>
<li id="shirt7">
Link
</li>
<li id="shirt8">
Link
</li>
<li id="shirt9">
Link
</li>
<li id="shirt10">
Link
</li>
</ul>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
You are using the relatively new universal analytics tracking code (analytics.js) but the event tracking code is for the older analytics version (ga.js). Either use the older version of analytics code or use the proper event tracking code for universal analytics:
instead of:
onClick="_gaq.push(['_trackEvent', 'Click', 'FemaleHugAddicted']);"
Use (you can use spaces for the category / action / label fields):
onclick="ga('send', 'event', 'Click', 'Female Hug Addicted', 'optional label name');"
You can read more here:
https://developers.google.com/analytics/devguides/collection/analyticsjs/events