I am using the newest version of Laravel 4 and the templating engine.
I suddenly get this in my code on every page.
" ";</body></html>
How can this be?
This is my layout file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>mytitle</title>
<!-- Bootstrap core CSS
<link href="{{asset('css/bootstrap.css')}}" rel="stylesheet">-->
<!-- Custom styles for this template -->
<link rel="stylesheet/less" type="text/css" href="{{asset('less/all.less')}}" />
<script src="{{asset('js/less-1.6.2.min.js')}}"></script>
<link href="{{asset('css/sticky-footer-navbar.css')}}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
#yield('page_css')
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
#include('layouts.navigation')
#yield('content')
</div><!-- Wrap End -->
#include('layouts.footer')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{asset('js/jquery-1.11.0.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
#yield('page_js')
</body>
</html>
Altough page_js is not used.
It always appends this "" and semicolon.
Some pages also show this
<script src="http://localhost:8000/js/jquery-1.11.0.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
<script src="http://localhost:8000/js/holder.js"></script>
<script>
$( document ).ready(function() {
});
</script>
</body>
</html>;
Thanks for any help!
Navigation layout:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Test</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Outfits <b class="caret"></b>
<ul class="dropdown-menu">
<li>Top Outfits</li>
<li>Neuste Outfits</li>
<li class="divider"></li>
<li class="dropdown-header">Meine</li>
<li>Outfits</li>
<li>Favoriten</li>
</ul>
</li>
<li>Test</li>
<li>Test</li>
<li class="dropdown">
Test <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!-- Search Bar -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Suchbegriff" style="width:300px">
</div>
</form>
<!-- Right Nav -->
<ul class="nav navbar-nav navbar-right">
<li>Test</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Footer Layout:
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
Somewhere in your template you have semicolon after the blade command, for example:
#include('scripts');
you should have something like
#include('scripts')
First, I'm not sure but you can refer on Laravel Doc Website: http://laravel.com/docs/templates
...
Sometimes, such as when you are not sure if a section has been defined, you may wish to pass a default value to the #yield directive. You may pass the default value as the second argument:
#yield('section', 'Default Content');
For your code, try this:
#yield('page_js', '');
it seems you have included php functionalities but ending with colon for example
#endcan;
remove the colon and will be good to go
Related
I want to display the image from the folder to the webpage. The image directory is already saved on the database. The MySQL query is correct. The syntax can display the image directory but cannot able to display the image.
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Profile |CRB</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
<body>
<?php include 'header.php' ?>
<ul class="nav nav-tabs"> <!-- NAV TABS -->
<li role="presentation">Home</li>
<li role="presentation">Trucks</li>
<li role="presentation">Suppliers</li>
<li role="presentation">Clients</li>
<li role="presentation">Services</li>
<li role="presentation">Uploaded Files
</li>
<li role="presentation">Maintenance</li>
<!-- DROPDOWN start -->
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
About us <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li role="presentation">Contact us</li>
<li role="presentation">About us</li>
</ul>
</li>
<!-- END OF DROPDOWN -->
<?php
if(isset($_SESSION['started']) && $_SESSION['started']) {
}
?>
<li role="presentation" class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="" role="button"
aria-haspopup="true" aria-expanded="true">
<span class="glyphicon glyphicon-user" style="cursor: pointer;" aria-
hidden="true"> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li role="presentation">Settings</li>
<li role="presentation">Log out</li>
</ul>
</li>
<li class="pull-right" class="active"><a href="profile.php"><?php echo
$_SESSION['user'];?></a></li>
</ul>
<!-- end of HEADER -->
<br>
<div class="row">
<div class="col-sm-4">
<?php include 'config.php';
if(isset($_SESSION['started']) && $_SESSION['started']) {
}
$val = '';
$query="SELECT USER_PHOTOPATH FROM useraccounts WHERE USER_NAME =
'".$_SESSION['user']."' ";
$stmt = $conn->prepare($query);
$stmt -> bindParam(1,$val);
$stmt -> execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);
echo $row['USER_PHOTOPATH'];
?>
<img src="<?php echo $row['USER_PHOTOPATH']; ?>;"> <!-- I TRIED THIS SYNTAX
TO DISPLAY THE IMAGE -->
</div>
<?php
?>
<div class="col-sm-4">
<h1 class="text-primary">My Profile</h1>
<div class="col-sm-4"></div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as
needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</script>
</html>
Please remove ; after completing ?> php
<img src="<?php echo $row['USER_PHOTOPATH']; ?>;">
I am using this bootstrap blade view in Laravel. But my view file did not display correctly. That means my #extends('layouts.app') override <div class="container">
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1>ABOUT US</h1>
<h5>Wealth Lanka Management (Private) Ltd (Wealth Lanka or WLM) is a specialized investment banking and financial consultancy firm engaged in feasibility studies , project advisory services, investment banking, capital market and corporate advisory services as well as consultancy services.The main promoters, Messrs Mangala Boyagoda and Asoka Sirimane possess over three decades of local and international expertise in financial and business management, banking and financial services.</h5>
</div>
</div>
</div>
#endsection
How can I fix this?
updated
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>Wealth Lanka</title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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=""><img src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
I have created a simple 4 page site using Twitter Bootstrap. Although it worked previously, but now scrollbars are appearing in different sections on the home page.
I've got a dropdown on the top menu. Whenever the "Product" menu item is clicked ( https://gyazo.com/8edfee3de1f27861dee5488da2b2a168), rather than showing a dropdown menu, it's producing a menu with a scrollbar.
Similarly, I've also created a carousel below the navigation but scrollbars are appearing on the "previous" and "next" button
The scrollbar is even appearing on the footer
When viewed on a mobile device (an emulator) the icon bars are not being displayed. (https://gyazo.com/7f78dfc4797a135cc3083fa1f6aa8bc2)
Here is the code for the index page:
<?php require_once "inc/functions.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simex</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<?php require "inc/navigationTop.php" ?>
<?php require "inc/slider.php"; ?>
<?php require "inc/homeTiles.php" ?>
<?php require "inc/footer.php" ?>
</body>
</html>
Here's the code for the navigation section:
<?php require_once "inc/functions.php" ?>
<nav class="navbar navTop">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="index.php" target="_self">Simex</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav pull-right navigationList">
<li>Home</li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Reverse Osmosis</li>
<li role="separator" class="divider"></li>
<li>Water Treatment</li>
<li role="separator" class="divider"></li>
<li>Water Bottling Plant</li>
<li role="separator" class="divider"></li>
<li>Japanese Reconditional Vehicles</li>
<li role="separator" class="divider"></li>
<li>Export & Sesame Seeds</li>
<li role="separator" class="divider"></li>
<li>Agri Farming & Equipment</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
The problem was with the attached stylesheet.
Previous css style:
* {
.
.
overflow-x:hidden;
}
I erased the overflow-x property and placed it as a property for the body, like:
body {
.
.
.
overflow-x:hidden;
}
I'm new to bootstrap and try to implement the NavBar sample on a website, It works great on bigs screen but when yuo try to see it on small-screen devices, the navbar options disappear.
Here is a picture from my desktop:
Here is a picture of the small screen device:
When I click on the collapse menu on the right nothing happens.
I made the link to the css and js on my html header as follows:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
And implement the nav var with the sample code from Bootstrap site, I test it Chrome and Firefox.
<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">
<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" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<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" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You need to include JQuery before Bootstrap in the header since bootstrap requires JQuery in order to work correctly.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
Otherwise you'll get an error since Bootstrap is referencing a function that does not exist in that point in time.
hope that helps.
I want to know that how to create a common layout for CodeIgniter framework and how to access it in controller.
I created some layout file, but I don't know that how to load files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<base href="<?php //echo base_url(); ?>" />
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url('assets/bootstrap3.0.1/css/bootstrap.min.css'); ?>" rel="stylesheet" >
<!-- Custom styles for this template -->
<!-- <link href="starter-template.css" rel="stylesheet">-->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"> Blog </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"> Admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Add Article</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" style="margin-top: 80px;">
<!--container-->
<?php echo $content; ?>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="<?php echo base_url('assets/bootstrap3.0.1/js/bootstrap.min.js'); ?>"></script>
</body>
please help to me load another view files to this layout file.
First make a custom loader
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Loader extends CI_Loader{
function __construct(){
parent::__construct();
}
function page($page, $vars=array(), $return=FALSE){
$vars['page'] = $page;
$ci = &get_instance();
$ci->load->view('layout',$vars,$return);
}
}
save it into application/core/MY_Loader.php
Now in controller load page
$this->load->page('page_name');
In View
<div class="container">
<?php $this->load->view($page) ?>
</div>