I am making a really big system for my YouTube network and I am kind of confused with why my bootstrap dropdown doesn't work. It worked all fine until I put the PHP code in it to check if the user is logged in.
Here's my code:
<?php
require_once 'core/init.php';
?>
<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>Bgtracker Group | Home</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
</head>
<body>
<!-- Navigation -->
<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="#">Bgtracker Group</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Menu<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">General Links</li>
<li>About Us</li>
<li>Become a partner</li>
<li>Become a recruiter</li>
<li>Become a network</li>
<li>About Us</li>
<li>Contact Us</li>
<li class="dropdown-header">System Links</li>
<?php
$user = new user();
if(!$user->isLoggedIn()) {
echo "<li><a href='login.php'>Log-in</a></li>";
} else if($user->isLoggedIn()) {
echo "<li><a href='update.php'>Update Profile</a></li>";
echo "<li><a href='changepassword.php'>Change Password</a></li>";
echo "<li><a href='logout.php'>Log-out</a></li>";
}
if($user->isLoggedIn()) {
if($user->hasPermission('admin')) {
echo "<li><a href='#'>|</a></li>";
echo "<li><a href='admin.php'>Admin CP</a></li>";
}
return false;
}
?>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>
<?php
if($user->isLoggedIn()) {
echo "Welcome, ";
echo escape($user->data()->username);
echo "!";
} else if(!$user->isLoggedIn()) {
echo "Welcome, guest!";
}
//YouTube Stats
?>
</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I managed to fix it myself. It was the 'return false' statement. It was somehow returning false on my code and thus not displaying anything. I put it there with the mindset that if the user is not logged in it will just not display anything but oh well.
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']; ?>;">
Published
Unpublished
My Navbar went missing i use Laravel and the function blade
Bootstrap is working seeing that the Jumbotron is activated
Can someone help?
Here is the navigation Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#yield('title')</title>
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Sweet Alert Css -->
<link href="plugins/sweetalert/sweetalert.css" rel="stylesheet" />
<!-- Design Css -->
<link href="plugins/pagecss/front_master.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<img id = "brnd" style="float:left;margin-top: 0.7em;margin-right: 1em;" alt="Brand" src="../images/index.jpg"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">i-Kasal</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li><div class="fb-share-button" data-
href="https://ikasal.uphero.com" data-layout="button_count" data-
size="small" data-mobile-iframe="true"><a
class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fikasal.uphero.com%2F&src=sdkpreparse"><button
id = "sharebtn" class="btn btn-primary navbar-btn">Share
#Facebook</button></a></div></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "#yield('Signup')"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li class = "#yield('Login')"><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="plugins/tether-master/dist/js/tether.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Jquery Validation Plugin Css -->
<script src="plugins/jquery-validation/jquery.validate.js"></script>
<!-- Sweet Alert Plugin Js -->
<script src="plugins/sweetalert/sweetalert.min.js"></script>
#yield('body')
</body>
</html>
And here is the welcome page code
#extends('layout.main.front_master')
#section('title','iKasal')
#section('body')
<!-- Design Css -->
<link href="../../../plugins/pagecss/welcome.css" rel="stylesheet" />
<div class="jumbotron" style = "padding-top:100px;">
<div class="container">
<h1 style="font-size:200px;">i-Kasal</h1>
<p style="font-size:80px;">Welcome to iKasal</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button"
style="font-size:50px;width: 25%">Learn more</a></p>
</div>
</div>
#endsection
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 am trying to create a simple cms, with the ability to allow users to change the body background colour when a img is clicked, however I am unable to get the background colour to change? I am using php and GET variables to pass colour id info and sessions to save user input. I keep getting this error: "Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /Applications/MAMP/htdocs/CMS/index.php:1) in /Applications/MAMP/htdocs/CMS/header.php on line 2" yet nothing is sent before session start? And how can I make my css body background colour change depending on which image is clicked? Can someone please shed some wisdom?
thanks in advance
The code:
<?php
session_start();
if(isset($_GET['colour'])) {
$colour = $_GET['colour'];
$_SESSION['colour'] = $colour;
}
$colour_session = $_SESSION['colour'];
echo "bgcolour = $colour_session";
?>
<!DOCTYPE html>
<html>
<head>
<title>CMS</title>
<meta charset="UTF-8">
<link type='text/css' rel='stylesheet' href='css/bootstrap.min.css'/>
<link type='text/css' rel='stylesheet' href='css/main.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user- scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#navbar-collapse" 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"><span class="glyphicon glyphicon-home"></span> CMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> User</li>
<li role="separator" class="divider"></li>
<li><i class="fa fa-user-plus"></i> Admin </li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="conatiner-fluid">
<div class="col-md-12">
<div class="col-md-4 col-md-offset-4 text-center bgColour">
<p>Choose Background Colour:</p>
<img src="images/grey.jpg">
<img src="images/white.jpg">
<img src="images/pink.jpg">
<img src="images/blue.jpg">
<img src="images/purple.jpg">
<img src="images/green.jpg">
<img src="images/yellow.jpg">
<img src="images/orange.jpg">
<img src="images/red.jpg">
</div>
</div>
</div>
**body and html tags are closed by 'require 'footer.php'
<body bgcolor='<?php echo $colour_session; ?>'>
just add this in your code to set the bgcolor of body
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