I am making the mobile version of a php website that has a sortable list.
Inside the li tag there are three divs, the first and the second are clickable and should open a modal window.
<ul id='sortable'>
//...multiple li tags
<li class='ui-state-default row'>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-edit' onclick='modificaModale()'>
<i class='fas fa-edit iconeScheda'></i>
</div>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-elimina-esercizio' onclick='eliminaModale()'>
<i class='fas fa-trash-alt iconeScheda'></i>
</div>
<div class='col-sm-10 col-xs-10'>
<b>Name of exercise</b>
</div>
</li>
//...
</ul>
On a desktop browser everything works fine but on mobile devices the two divs are not clickable and the modal won't open.
If I remove the sortable the modal opens on mobile too.
My head tag looks like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
function modificaModale(id) {
//do stuff
}
function eliminaModale() {
//do stuff
}
$(function () {
$("#sortable").sortable({
axis: 'y',
type: 'li',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'some url'
});
}
});
});
</script>
</head>
and the style of those
#sortable { list-style-type: none; margin: 0; padding: 0; cursor: grab;}
#sortable li span { position: absolute; margin-left: -1.3em; }
.iconeScheda{
cursor:pointer;
font-size: 20px;
padding: 5px;
font-weight: 100;
}
one of my modal is like this (the other is pretty much the same)
<div class="modal fade" id="confirm-elimina-esercizio" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="background: none">
<div class="modal-dialog">
<div class="modal-content">
<form action="eliminaScheda.php" method="post">
<input type="text" name="id" id="idElimina" style="display:none"/>
<div class="modal-header">
<h3>Elimina</h3>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare <span id="esercizioModale"></span>?
</div>
<div class="modal-footer">
<input type="submit" value="Conferma"/>
<input type="button" data-dismiss="modal" value="Annulla"/>
</div>
</form>
</div>
</div>
</div>
Without the "sortable" id, the modals open normally.
Here pictures of the web:
desktop version here
and the mobile version:
mobile version here
Thanks in advance
As I checked code in codepen
codepen.io/nickjackson139/pen/PoorWOG in mobile view it is opening model.
function modificaModale(id) {
//do stuff
}
function eliminaModale() {
//do stuff
}
$(function() {
$("#sortable").sortable({
axis: 'y',
type: 'li',
update: function(event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'some url'
});
}
});
});
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
cursor: grab;
}
#sortable li span {
position: absolute;
margin-left: -1.3em;
}
.iconeScheda {
cursor: pointer;
font-size: 20px;
padding: 5px;
font-weight: 100;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<ul id='sortable'>
<li class='ui-state-default row'>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-edit' onclick='modificaModale()'>
<i class='fas fa-edit iconeScheda'></i>
</div>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-elimina-esercizio' onclick='eliminaModale()'>
<i class='fas fa-trash-alt iconeScheda'></i>
</div>
<div class='col-sm-10 col-xs-10'>
<b>Name of exercise</b>
</div>
</li>
</ul>
<div class="modal fade" id="confirm-elimina-esercizio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="background: none">
<div class="modal-dialog">
<div class="modal-content">
<form action="eliminaScheda.php" method="post">
<input type="text" name="id" id="idElimina" style="display:none" />
<div class="modal-header">
<h3>Elimina</h3>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare <span id="esercizioModale"></span>?
</div>
<div class="modal-footer">
<input type="submit" value="Conferma" />
<input type="button" data-dismiss="modal" value="Annulla" />
</div>
</form>
</div>
</div>
</div>
The div id = "retrieve" is the div where I am retrieving my data from a database. But then the footer below appears in the div id ="retrieve".
Where am I going wrong?
Retrieval happens properly but it displays footer inside it too.
<!DOCTYPE html>
<html>
<head>
<title>Shreegurudev Datta | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&subset=devanagari,latin-ext" rel="stylesheet">
<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Advent+Pro" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<style>
body{
background:url("bg.jpg");
background-size: cover;
font-family: 'Dosis', sans-serif;
}
slider{
width:100%;
height:auto;
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from {
bottom:-100px;
opacity:0
}
to {
bottom:0px;
opacity:1
}
}
#keyframes animatebottom {
from{
bottom:-100px;
opacity:0
}
to{
bottom:0;
opacity:1
}
}
</style>
</head>
<body>
<!-- Corousel-->
<div class = "navbar">
<nav class="orange">
<div class="nav-wrapper">
<image src = "dattaguru.jpg" style = "padding-top : 10px; padding-left:10px;"/>
<i class="material-icons" style = "color:indigo;">menu</i>
<ul class="right hide-on-med-and-down" >
<li class = "active"><i class="material-icons left">home</i>Home</li>
<li><i class="material-icons left">stars</i>History</li>
<li><i class="material-icons left">equalizer</i>Festivals</li>
<li><i class="material-icons left">widgets</i>Sevas</li>
<li><i class="material-icons left">wallpaper</i>Gallery</li>
<li><i class="material-icons left">today</i>Projects</li>
<li><i class="material-icons left">contacts</i>Contact</li>
<li><i class="material-icons left">payment</i>Donations</li>
</ul>
<ul class="side-nav" id="mobile-demo" style = "color:white;">
<img src="logo.png">
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
<div style="" id="main" class="animate-bottom">
<div class = "header">
<h3 style="text-align:center; color: #b91100; font-weight: bolder">|| श्रीगुरूदेव दत्त ||</h3>
<marquee scrollamount="7" behavior="infinite" hspace="70"><h5 style="text-align:center; color: #b91100; font-weight: bold">|| दिगंबरा दिगंबरा श्रीपाद वल्लभ दिगंबरा ||</h5></marquee>
</div>
<div class = "cover">
<img src="banner.jpg" style="padding-left:250px; width:1100px; height:420px;">
</div>
<div class="row">
<h2 style="text-align:justify; padding-left:60px; color:green;">Shree Gurudev Datta</h2>
<hr width="90%">
<h5 style="text-align:justify; padding-left:60px; color:green;">|| Digambara Digambara Shreepad Vallabh Digambara ||</h5>
<div class="col s9" style="text-align:justify; padding-left:50px;">
<p style="font-size:20px; color:maroon; padding-left:5px; padding-right:5px; border-radius:10px;"> Shree Saunsthan Dattawadi, Sankhali, The Holy Abode of Shree Dattaguru - the trinity of Lord Brahma, Lord Vishnu and Lord Mahesh - evokes deep devotion in the heart of every devotee residing not only in Goa but other parts of the world as well.
Situated in beautiful sylvan surroundings, the heavenly and serene ambience pervading within the precincts of the temple catapults visiting devotees to world full of divine bliss.
The precincs normally referred to as 'Dattawadi', is the pilgrimage centre visited by thousands of devotees and legend has it that their prayers are answered by the Almighty. It is also famous as a centre for miraculous cure for mental troubles. This beautiful structure was established way back in the year 1925 ('shakey' 1804 according to the Hindu almanac).
The Dattatray temple completed 125th anniversary of it's inception in April 2007 with great pomp and splendour. The centenary celebrations in 1982, too, had witnessed similar grandeur.</p></div>
<div id = "retrieve" class="col s3" style="text-align:justify; background-color:orange; width:250px; height:300px; margin-top:23px; border-radius:10px;">
<?php
$host="localhost";
$user="root";
$password="";
$db="db_name";
$con=mysqli_connect($host,$user,$password,$db);
$sql_query="select * from Notifications";
$result=mysqli_query($con,$sql_query);
//echo '<h1>News Flash</h1>';
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center>
";
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
echo '
<tr>
<td>'.$row['date'].'</td>
<td>'.$row['news'].'</td>
</tr>
';
}
?>
</div>
</div>
<!--this footer comes in the div id ="retrieve"-->
<div class="footer-copyright" style="padding-left:100px;">
<p style="text-align:center; background-color:#004d40; width:auto; height:50px; padding-top:15px;color:#ffffff;">In memory of late Sau Sunanda & late Avadhut Dattatraya Gaitonde</p>
</div>
<!--close loader-->
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script>$(document).ready(function(){
$('.slider').slider({full_width: true});
});</script>
</body>
</html>
The problem seems to be the 'table' tag on line 126 since I can't find it's counterpart anwhere in the code:
[...]
echo "<center><table cellpadding='5' border='5'>
<tr>
<th>Date</th>
<th>News</th>
</tr></center> //<-- there is no </table> before </center>
";
[...]
I am using a custom theme I have found on the Internet for bootstrap. when I add a new "Row" for my grid system things get a bit messed up,
I am not sure what I am doing wrong but I do belive is styling problem, since it does not appear to show me what I want it do show so when I load the page i see the following
if you need further information to be able to help me I be glad to give it
and a scroll bar on the browser (allowing you to scroll down)
by doing so for a second you can see what else should have been there like so
but the it disspears , I will share my code if anyone can help me, I not an exprienced prgoramer but I am trying to get there.
here is the code for viewHero.php
<?php session_start();
//error_reporting(0);
//ini_set('display_errors', 0);
?>
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="style/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Overblog</title>
</head>
<body >
<header class="cd-main-header">
<img src="img/cd-logo.svg" alt="Logo">
<div class="cd-search is-hidden">
<form action="#0">
<input type="search" placeholder="Search...">
</form>
</div> <!-- cd-search -->
Menu<span></span>
<nav class="cd-nav">
<ul class="cd-top-nav">
<li class="has-children account">
<ul>
</ul>
</li>
</ul>
</nav>
</header> <!-- .cd-main-header -->
<main class="cd-main-content">
<nav class="cd-side-nav">
<ul>
<li class="cd-label">Main</li>
<li class="has-children overview">
Blog
<ul>
<li>Latest news</li>
<li>Public Test Region</li>
<li>RedPost (Redit)</li>
</ul>
</li>
<li class="has-children notifications active">
<li class="has-children comments">
Guides
</li>
<li class="has-children users">
Hereos
</li>
</ul>
</nav>
<style>
body
{
font-family: 'Open Sans', sans-serif;
}
.fb-profile img.fb-image-lg{
z-index: 0;
width: 100%;
margin-bottom: 10px;
}
.fb-image-profile
{
margin: -90px 10px 0px 50px;
z-index: 9;
width: 20%;
}
#media (max-width:768px)
{
.fb-profile-text>h1{
font-weight: 700;
font-size:16px;
}
.fb-image-profile
{
margin: -45px 10px 0px 25px;
z-index: 9;
width: 20%;
}
}
h2{font-size:40px;
}
</style>
<div class="content-wrapper">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<?php
//show users code.
define('SITE_ROOT', dirname(__FILE__));
echo "<br/>";
require SITE_ROOT . '\includes\loadHeroProfile.php';
?>
</div>
<div class="row">
<div class='col-lg-4'>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div> <!-- /container -->
</div>
</main> <!-- .cd-main-content -->
<script src="scripts/jquery-2.1.4.js"></script>
<script src="scripts/jquery.menu-aim.js"></script>
<script src="scripts/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
and here is the loadHeroProfile.php
<?php
//show users code.
require SITE_ROOT . '\includes\db_connect.php';
//create connection and check it
global $connect;
$ids = intval($_GET['ids']);
$result = $conn->prepare("SELECT id,nickname,avatar,name,age,occupation,operations,affiliation,difficulty,ability,tips,story FROM heroes WHERE id=$ids");
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$id = $row["id"];
$nickname = $row["nickname"];
$avatar = $row["avatar"];
$name = $row["name"];
$age = $row["age"];
$occ = $row["occupation"];
$opp = $row["operations"];
$aff = $row["affiliation"];
$diff = $row["difficulty"];
$ability = $row["ability"];
$tips = $row["tips"];
$story = $row["story"];
$avatar = "./img/" . $avatar;
echo " <div class='fb-profile'> ";
echo " <img align='left' class='fb-image-lg' src='./img/Untitled.png' alt='Profile image example'/> ";
echo " <img align='left' class='fb-image-profile thumbnail' src=". $avatar ." alt='Profile image example' /> ";
echo " <div class='fb-profile-text'> ";
echo " <h2>" . $nickname . "</h2><br/> ";
echo " <p>" . $name . "</p> ";
echo " </div> ";
echo " </div> ";
}
?>
What can I do to fix this issue ?
EDIT THE FINAL HTML CODE:
<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="style/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Overblog</title>
</head>
<body >
<header class="cd-main-header">
<img src="img/cd-logo.svg" alt="Logo">
<div class="cd-search is-hidden">
<form action="#0">
<input type="search" placeholder="Search...">
</form>
</div> <!-- cd-search -->
Menu<span></span>
<nav class="cd-nav">
<ul class="cd-top-nav">
<li class="has-children account">
<ul>
</ul>
</li>
</ul>
</nav>
</header> <!-- .cd-main-header -->
<main class="cd-main-content">
<nav class="cd-side-nav">
<ul>
<li class="cd-label">Main</li>
<li class="has-children overview">
Blog
<ul>
<li>Latest news</li>
<li>Public Test Region</li>
<li>RedPost (Redit)</li>
</ul>
</li>
<li class="has-children notifications active">
<li class="has-children comments">
Guides
</li>
<li class="has-children users">
Hereos
</li>
</ul>
</nav>
<style>
body
{
font-family: 'Open Sans', sans-serif;
}
.fb-profile img.fb-image-lg{
z-index: 0;
width: 100%;
margin-bottom: 10px;
}
.fb-image-profile
{
margin: -90px 10px 0px 50px;
z-index: 9;
width: 20%;
}
#media (max-width:768px)
{
.fb-profile-text>h1{
font-weight: 700;
font-size:16px;
}
.fb-image-profile
{
margin: -45px 10px 0px 25px;
z-index: 9;
width: 20%;
}
}
h2{font-size:40px;
}
</style>
<div class="content-wrapper">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<br/> <div class='fb-profile'> <img align='left' class='fb-image-lg' src='./img/Untitled.png' alt='Profile image example'/> <img align='left' class='fb-image-profile thumbnail' src=./img/bastion.png alt='Profile image example' /> <div class='fb-profile-text'> <h2>Bastion</h2><br/> <p>SST Laboratories Siege Automaton E54, "Bastion"</p> </div> </div> </div>
<div class="row">
<div class='col-lg-4'>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div> <!-- /container -->
</div>
</main> <!-- .cd-main-content -->
<script src="scripts/jquery-2.1.4.js"></script>
<script src="scripts/jquery.menu-aim.js"></script>
<script src="scripts/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
edit the styling as requested :
note that I did not made or touch this, is a free tempalte over the internet
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Style.css Find it here
I can't post this because it will pass the 3k mark for posting.
The HTML that you have provided is riddled with errors and inconsistencies; I strongly recommend you review the code that your Template provided in order to ensure that these errors are not causing unexpected rendering issues.
That being said, I have created a JSFiddle showcasing corrected HTML here:
https://jsfiddle.net/embed/1pfz7yg2/show/
You can see the HTML / CSS here: https://jsfiddle.net/embed/1pfz7yg2/
From what I understand of your desired output, you want the left-hand navigation to remain static. That being the case, the most relevant bit of CSS is:
.cd-side-nav { position: fixed; }
* I've solved this. Thanks for the help /*
I am attempting to show some images to different users depending on their user_id / username.
I am trying to do so by using userSession.
I tried by using this code:
<?php
if ($_SESSION['user_id'] == 'Charlie') {
// do admin
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" /> </li>
}
?>
I also tried "userSession" and "user_email". None worked.
It cannot even load my website when I type in the code above. When I remove it, it loads perfectly.
Here's my home.php class which is the one that loads when a user is logged in. It's the same for everything atm but I am trying to display just certain images to the users depending on who they are. They have no special rank or anything.
<?php
session_start();
include_once 'dbconnect.php';
if(!isset($_SESSION['userSession']))
{
header("Location: index2.php");
}
$query = $MySQLi_CON->query("SELECT * FROM users WHERE user_id=".$_SESSION['userSession']);
$userRow=$query->fetch_array();
$MySQLi_CON->close();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<!--<link rel="stylesheet" href="css/prettyPhoto.css" />-->
<!--<link rel="stylesheet" href="css/flexslider.css" />-->
<link rel="stylesheet" href="css/custom-styles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/style-ie.css"/>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<!--Fancybox dwuser.com-->
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
-o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
}
</style>
<!--Fancybox end-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test | <?php echo $userRow['user_email']; ?></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>
<div class="container main-container">
<div class="row header"><!-- Begin Header -->
<!-- Logo
================================================== -->
<div class="span5 logo">
<img src="img/%20black.png" alt="" />
</div>
<!-- Main Navigation
================================================== -->
<div class="span7 navigation">
<div class="navbar hidden-phone">
<ul class="nav">
<li>Hjem</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="gallery.html">Galleri <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Galleri</li>
<li>Bryllup</li>
<li>Portræt</li>
<li>Udendørs</li>
<li>Andet</li>
<!--<li></li>-->
</ul>
</li>
<li>Kontakt</li>
</ul>
<!-- Username and logout button .... nav bar only -->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> <?php echo $userRow['user_name']; ?></li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</div><!-- End Header -->
<div class="row headline"><!-- Begin Headline -->
<!-- Page Content
================================================== -->
<div class="row">
<!-- Gallery Items
================================================== -->
<div class="span12 gallery">
<div class="row clearfix">
<ul class="gallery-post-grid holder">
<h6>Tryk på billederne for at forstørre dem og for at opnå bedre kvalitet</h6>
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" />
</li>
<li class="span4 gallery-item" data-id="id-2">
<img class="fancybox" src="img/IMG_2205-Edit-1_small.jpg" data-big="img/IMG_2205-Edit-1.jpg" />
</li>
</ul>
</div>
</div><!-- End gallery list-->
</div><!-- End container row -->
</div> <!-- End Container -->
<!-- Footer Area
================================================== -->
<div class="row"><!-- Begin Bottom Section -->
</div><!-- End Bottom Section -->
</div> <!-- End Container -->
<!-- Scroll to Top -->
<div id="toTop" class="hidden-phone hidden-tablet">Back to Top</div>
<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!--<script src="js/jquery.easing.1.3.js"></script>-->
<script src="js/bootstrap.js"></script>
<!--<script src="js/jquery.prettyPhoto.js"></script>-->
<!--<script src="js/jquery.quicksand.js"></script>-->
<!--<script src="js/jquery.custom.js"></script>-->
<!--Fancybox script-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = true;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
</body>
</html>
You never changed the session data in your example code. You should do something like:
$_SESSION['user_id'] = $userRow['user_id']
to set the concerning session var.
try this code instead of yours:
<?php
if ($_SESSION['user_id'] == 'Charlie') { ?>
// do admin
<li class="span4 gallery-item" data-id="id-1">
<img class="fancybox" src="img/photoshop2_small.jpg" data-big="img/photoshop2.jpg" /> </li>
<?php } ?>
EDIT if user ID is unique and not depended on letters casing you can do
if (strtolower($_SESSION['user_id']) === 'charlie')
i need one help.I want to redirect into another page after user login using angular.js.I am using php for back end and here i want to use Angular router.I have done some coding but its not working properly.I am explaining my code below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="controller/loginController.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.png">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
<link href="css/demo.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
<!--
body{
background-color:#FFF !important;
}
.well {
min-height: 20px;
padding: 19px !important;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}
-->
</style>
</head>
<body>
<!-- /#wrapper -->
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-md-12 text-center login-header" style="padding:40px 0px;">
</div>
<!--/span-->
</div><!--/row-->
<div class="col-md-6 marginautodiv floatnonediv well" ng-controller="loginController">
<div class="totalaligndiv">
<div class="alert alert-info text-center">
<span style="font-weight:bold; font-size:22px">Channabasavashwara Institude of Technology</span>
<BR>
Please login with your Username and Password.
</div>
<form class="form-horizontal" name="frmlogin" id="frmlogin" action="" autocomplete="off">
<fieldset>
<div class="input-group input-group-lg">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="txtname" id="txtname" class="form-control" placeholder="Username" ng-model="user_name">
</div>
<div class="clearfix"></div><br>
<div class="input-group input-group-lg">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" name="pwd" id="pwd" class="form-control" placeholder="Password" ng-model="user_pass">
</div>
<div class="clearfix"></div>
<div class="input-prepend">
</div>
<div class="clearfix"></div>
<p class="text-center tbpaddingdiv2">
<button type="text" name="login" id="login" class="btn btn-primary" style="width:270px;" ng-click="user_login();">Login</button>
</p>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- GLOBAL SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/defaults.js"></script>
<!-- Logout Notification Box -->
<!-- /#logout -->
<!-- Logout Notification jQuery -->
<script src="js/logout.js"></script>
<!-- HISRC Retina Images -->
<!-- THEME SCRIPTS -->
<script src="js/flex.js"></script>
<script src="js/dashboard-demo.js"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</body>
</html>
In this page user will login and when click on login button the user will redirect to dashboard page.
loginController.js:
var loginAdmin=angular.module('Channabasavashwara',['ngRoute']);
loginAdmin.config(function($routeProvider){
$routeProvider
.when('/dashboard',{
templateUrl: 'view/dashboard.html',
controller: 'dashboardController'
});
})
loginAdmin.controller('loginController',function($scope,$http){
$scope.user_login=function(){
if($scope.user_name==''){
alert('user name filed should not keep blank');
}else if($scope.user_pass==''){
alert('password filed should not keep blank');
}else{
var userData={'user_name':$scope.user_name,'user_pass':$scope.user_pass};
$http({
method: 'POST',
url: "php/Login/login.php",
data: userdata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
alert(response.data['msg']);
location.href='#dashboard';
},function errorCallback(response) {
alert(response.data['msg']);
});
}
}
});
I want to use router for routing the page.Please help me to resolve this problem.
use this
$location.path == '/dashboard';
instead of using
location.href='#dashboard';
You can use routing also
this.router.navigate(['/dashboard']);
in TS file.