Firstly, I apologise if this is a really simple question to those with more experience, but I'm a little to new to this so I hope someone may be able to help me please.
I'm trying to implement a jQuery Modal Confirmation box upon a button click. This shown in the script below:
<!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>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css">
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<script type="text/javascript">
var deleteTheSelectedUrl = '';
$(document).ready(function() {
// create the jQuery modal window and set autoOpen to false
$("#jQueryDeleteConfirmationModalWindow").dialog({
title: "Delete Confirmation",
autoOpen: false, // set this to false so we can manually open it
dialogClass: "jQueryDeleteConfirmationModalWindow",
closeOnEscape: false,
draggable: false,
width: 460,
height: 260,
modal: true,
buttons: {
"Yes, I'm sure": function() {
$( this ).dialog( "close" );
if('' != jQuery.trim(deleteTheSelectedUrl)) {
window.location = deleteTheSelectedUrl;
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
resizable: false,
open: function() {
// scrollbar fix for IE
$('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$('body').css('overflow','auto');
}
}); // end of dialog
// bind the loading screen to each delete link, assuming you have some kind of way to select them via jQuery
jQuery('a.deleteConfirmation').click(function() {
deleteTheSelectedUrl = $(this).attr('href');
var name = $(this).parent().parent().children('td.name').html(); // a.delete -> td -> tr -> td.name
name = jQuery.trim(name);
$("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?');
$("#jQueryDeleteConfirmationModalWindow").dialog('open');
return false;
});
});
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -476px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<input name="username" type="hidden" id="username" value="IRHM73" />
<input name="locationid" type="hidden" id="locationid" value="1" />
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<input type="button" name="deleteimage" value="Delete Selected Image" onclick="jQueryDeleteConfirmationModalWindow"/>
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
//$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $galleryPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a><input type="radio" name="delete" /></li>
<p><span class="style4"><b>Image Name:</b> <?php echo htmlentities($xmlFile->getAttribute('originalname'));?> <br />
<b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The problem I'm having, is that when I click the 'Delete Selected Image' button, I receive this error:'jQueryDeleteConfirmationModalWindow' is undefined at line 92 which is this
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
I've rebuilt the page a few times, but I still get the same error, but I'm not sure why.
I just wondered whether someone could have a look at this please and let me know where I'm going wrong?
Thanks and regards
I don't see a div with the ID jQueryDeleteConfirmationModalWindow. Perhaps I am missing it? The jQuery Dialog is performed on an existing div.
http://jqueryui.com/demos/dialog/
<div id="jQueryDeleteConfirmationModalWindow">ARE YOU SURE???</div>
Your onlclick event handler should call a function name
<input type="button" onclick="showDialog()" ... />
then your JS will access it this way
function showDialog(){
$("#jQueryDeleteConfirmationModalWindow").dialog({...});
}
Related
hello everyone i just wanna ask on how to add three attempts in my login page here is the code
<?php
include 'connect.php';
?>
<?php
if(isset($_POST) && !empty($_POST))
{
session_start();
include("config_DB.php"); //including config.php in our file
$username = mysql_real_escape_string(stripslashes($_POST['username']));
$password = mysql_real_escape_string(stripslashes(md5($_POST['password'])));
$user_type= $_GET['user_type'];
$match = "select * from $table where username = '".$username."' and password = '".sha1($password)."';";
$qry = mysql_query($match);
$row=mysql_fetch_array($qry);
$num_rows = mysql_num_rows($qry);
if($num_rows >= 1){
$_SESSION['user']= $_POST["username"];
$_SESSION['name'] = $row['empName'];
$_SESSION['position'] = $row['empPosition'];
$_SESSION['user_type'] = $row['user_type'];
header("location:index.php/index_controller/home");
} else {
$username = mysql_real_escape_string(stripslashes($_POST['username']));
$password = mysql_real_escape_string(stripslashes($_POST['password']));
include("config_DB.php"); //including config.php in our file
$match = "select * from $table where username = '".$username."' and password = '".sha1($password)."';";
$qry = mysql_query($match);
$row=mysql_fetch_array($qry);
$num_rows = mysql_num_rows($qry);
$attemps =0;
if($num_rows <= 0){
echo
"<script type=\"text/javascript\">".
"window.alert('Invalid username/password!');".
'window.location.href="index.php";'.
"</script>";
exit;
}
$_SESSION['user']= $_POST["username"];
$_SESSION['name'] = $row['empName'];
$_SESSION['position'] = $row['empPosition'];
$_SESSION['user_type'] = $row['user_type'];
header("location:index.php/index_controller/home");
}
}else{
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>City Planning and Development Office--Login</title>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/login-style.css"/>
<link rel="stylesheet/less" href="<?php echo base_url();?>assets/less/icons.less"/>
<!-- Load JavaScript Libraries -->
<script src="<?php echo base_url();?>assets/js/jquery/jquery-1.11.1.min.js"></script>
<script src="<?php echo base_url();?>assets/js/jquery/jquery-ui.js"></script>
<script src="<?php echo base_url();?>assets/js/jquery/jquery.widget.min.js"></script>
<!-- Load Metro JavaScript -->
<script src="<?php echo base_url();?>assets/js/load-metro.js"></script>
<script src="<?php echo base_url();?>assets/js/metro.min.js"></script>
<script src="<?php echo base_url();?>assets/js/metro-calendar.js"></script>
<script src="<?php echo base_url();?>assets/js/metro-datepicker.js"></script>
<!-- Load Bootstrap JavaScript -->
<script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>assets/js/validate.js"></script>
<script src="<?php echo base_url();?>assets/js/condition.js"></script>
<!-- Login parallax -->
<style type="text/css">
body{
background:#000;
}
input.info{
color:#000 !important;
}
.vertical-offset-100{
padding-top:100px;
}
.login{
background:#ed1c24;
color:#fff;
}
body{
background: url(img/back.png);
background-color: #444;
background: url(/cpdo_ci/assets/images/pinlayer2.png),url(/cpdo_ci/assets/images/pinlayer1.png),url(/cpdo_ci/assets/images/back.png);
}
.vertical-offset-100{
padding-top:100px;
}
</style>
</head>
<body>
<script src="<?php echo base_url();?>assets/js/TweenLite.min.js"></script>
<div class="container" >
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<center><img src="/cpdo_ci/assets/images/malolos.png" height="200" width="200" alt="CPDO"></center>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" id="login" action="<?php $_SERVER['PHP_SELF'] ?>" method="post" name="login" class="form-signin" role="form">
<fieldset>
<div class="form-group">
<input class="form-control info" placeholder="Username" name="username" id="username" required type="text">
</div>
<div class="form-group">
<input class="form-control info" placeholder="Password" name="password" id="password" required type="password" value="">
</div>
<label>
<div style=" font-size:90%" >
</div>
</label>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
TweenLite.to($('body'),
.5,
{ css:
{
backgroundPosition: ""+ parseInt(event.pageX/8) + "px "+parseInt(event.pageY/'12')+"px, "+parseInt(event.pageX/'15')+"px "+parseInt(event.pageY/'15')+"px, "+parseInt(event.pageX/'30')+"px "+parseInt(event.pageY/'30')+"px"
}
});
});
});
</script>
</body>
<?php
}
?>
</html>
</html>
Try this to the back-end which receives the login parameters.
if($_POST["password"]) !== $password_stored_in_db) {
if($attempts == 3) {
header('Location: login.php?max_attempt=exceeded');
}
} else if (isset($attempts)) {
$attempts = ++ $attempts;
} else {
$attempts = 0;
}
header('Location: login.php?attempt=' . $attempts);
Also add this to login.php to determine if user has exceeded max attempts:
Make sure that login.php is set to check for max_attempt=exceeded by adding:
if(isset($_GET["max_attempt"])) {
if($_GET["max_attempt"] == "exceeded") {
// Error message
// Use $_SESSION to record the time and to stop user from trying again for a while because if you use cookies, it maybe overridden or re-set.
}
}
You really should store the information of attempts on the DB, but some quick hack by storing the data on the session would be
<?php
include 'connect.php';
if(isset($_POST) && !empty($_POST))
{
session_start();
include("config_DB.php"); //including config.php in our file
$username = mysql_real_escape_string(stripslashes($_POST['username']));
$password = mysql_real_escape_string(stripslashes(md5($_POST['password'])));
$user_type= $_GET['user_type'];
$match = "select * from $table where username = '".$username."' and password = '".sha1($password)."';";
$qry = mysql_query($match);
$row=mysql_fetch_array($qry);
$num_rows = mysql_num_rows($qry);
if($num_rows >= 1){
$_SESSION['attemps'] = 0;
$_SESSION['user']= $_POST["username"];
$_SESSION['name'] = $row['empName'];
$_SESSION['position'] = $row['empPosition'];
$_SESSION['user_type'] = $row['user_type'];
header("your_home_page");
} else {
$_SESSION['attemps'] ||= 0;
$_SESSION['attemps'] += 1;
if ($_SESSION['attemps'] > 3) {
header("location:/access_denied.php");
}
$display_warning = true;
}
}else{
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>City Planning and Development Office--Login</title>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/login-style.css"/>
<link rel="stylesheet/less" href="<?php echo base_url();?>assets/less/icons.less"/>
<!-- Load JavaScript Libraries -->
<script src="<?php echo base_url();?>assets/js/jquery/jquery-1.11.1.min.js"></script>
<script src="<?php echo base_url();?>assets/js/jquery/jquery-ui.js"></script>
<script src="<?php echo base_url();?>assets/js/jquery/jquery.widget.min.js"></script>
<!-- Load Metro JavaScript -->
<script src="<?php echo base_url();?>assets/js/load-metro.js"></script>
<script src="<?php echo base_url();?>assets/js/metro.min.js"></script>
<script src="<?php echo base_url();?>assets/js/metro-calendar.js"></script>
<script src="<?php echo base_url();?>assets/js/metro-datepicker.js"></script>
<!-- Load Bootstrap JavaScript -->
<script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>assets/js/validate.js"></script>
<script src="<?php echo base_url();?>assets/js/condition.js"></script>
<!-- Login parallax -->
<style type="text/css">
body{
background:#000;
}
input.info{
color:#000 !important;
}
.vertical-offset-100{
padding-top:100px;
}
.login{
background:#ed1c24;
color:#fff;
}
body{
background: url(img/back.png);
background-color: #444;
background: url(/cpdo_ci/assets/images/pinlayer2.png),url(/cpdo_ci/assets/images/pinlayer1.png),url(/cpdo_ci/assets/images/back.png);
}
.vertical-offset-100{
padding-top:100px;
}
</style>
</head>
<body>
<script src="<?php echo base_url();?>assets/js/TweenLite.min.js"></script>
<div class="container" >
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<center><img src="/cpdo_ci/assets/images/malolos.png" height="200" width="200" alt="CPDO"></center>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" id="login" action="<?php $_SERVER['PHP_SELF'] ?>" method="post" name="login" class="form-signin" role="form">
<fieldset>
<div class="form-group">
<input class="form-control info" placeholder="Username" name="username" id="username" required type="text">
</div>
<div class="form-group">
<input class="form-control info" placeholder="Password" name="password" id="password" required type="password" value="">
</div>
<label>
<div style=" font-size:90%" >
</div>
</label>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
<?php if defined($display_warning) : ?>
window.alert('Invalid username/password!');
<?php endif; ?>
$(document).mousemove(function(e){
TweenLite.to($('body'),
.5,
{ css:
{
backgroundPosition: ""+ parseInt(event.pageX/8) + "px "+parseInt(event.pageY/'12')+"px, "+parseInt(event.pageX/'15')+"px "+parseInt(event.pageY/'15')+"px, "+parseInt(event.pageX/'30')+"px "+parseInt(event.pageY/'30')+"px"
}
});
});
});
</script>
</body>
</html>
</html>
I have a master page that uses ajax to load contents in a div named 'Wrapper'.
Now I have a problem loading jquery UI tabs this way. I can load and show them if I ignore using AJAX. But when Using ajax just the tabs are being shown and not the panes! I have read all the topics regarding this issue but they didn't solve my problem.
JQuery code is :
$(function(){
$('#link').live('click',function(){
$.ajax({
url: "tabs.php",
success: function(response)
{
$("#Wrapper").html(response);
console.log(response);
}
});
});
});
The tabs.php :
<!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" xml:lang="fa-ir" lang="fa-ir">
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/menu.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<style>
div.panes div h2
{
margin:5px 0 15px 0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="css/tabs-panes.css"/>
<style type="text/css">
div.panes div
{
-background:#fff;
height:auto;
}
div.panes label
{
margin-bottom:15px;
display:block;
}
label.error
{
color:red;
}
body
{
background-color:#d4d6da;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/syntax.css"/>
<link rel="stylesheet" type="text/css" href="css/demos.css"/>
</head>
<body>
<table style="width:100%;height:auto;border:1px dashed blue;" >
<tr>
<td align="center">
<div id="wizard_tabs">
<!-- tabs -->
<ul class="tabs">
<li>1- File upload</li>
<li>2- Proj explanation</li>
</ul>
<!-- form and panes -->
<form action="projects-regEN.php" method="post" enctype="multipart/form-data">
<div class="panes" style="font-family:tahoma">
<div style="border:1px solid #1c94c4;" id="tabs-1">
<table id="projINFO" style="width:100%">
<tr>
<td>
<span class="innerStyle">Title</span>
</td>
<td>
<input type="text" style="width:150px" maxlength="50" id="projectTitle" name="projectTitle"/>
</td>
</tr>
<tr>
<td style="width:31%" >
<span class="innerStyle">Proj Upload</span>
</td>
<td style="width:30%">
<input type="file" id="projectUpload" name="projectUpload"/>
</td>
</tr>
</table>
<br/>
<input type="button" class="next" id="next" name="continue"/>
</div>
<div style="border:1px solid #1c94c4;" id="tabs-2">
<table style="width:100%;border:1px solid black;font-family:tahoma;font-size:11px">
<tr>
<th>
title
</th>
</tr>
<tr>
<td id="firstCol"></td>
</tr>
</table>
<br/>
<span class="innerStyle">explanation</span>
<textarea rows="4" maxlength="150" class="formItems" id="ProjInfo" name="ProjInfo" placeholder="پیام خود را اینجا وارد کنید"></textarea>
<input type="submit" id="submitproj" name="done"/>
</div>
</div>
</form>
</div>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(function(){
var wizard = $("#wizard_tabs");
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index)
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if (index > 0 && (projUp==''|| projTi=='' ))
{
$("#projectUpload").parent().addClass("error");
return false;
}
$("#projectUpload").parent().removeClass("error");
});
// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");
$(".next", wizard).click(function()
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if(projUp!='' && projTi!='')
api.next();
});
});
</script>
</td>
</tr>
</table>
</body>
</html>
Using the papers I have read I tried initializing :
$("ul.tabs").tabs("div.panes <> div");
I put it in the success function of ajax but it didn't help. I also put it in the tabs.php but neither it helped. I don't know what else to do?!
Based on where I put the initial statement, it gives me different errors like:
"Uncaught Error:cannot call methods on tabs prior to initialization; attempted to call method 'div.panes > div'"
or
"Uncaught TypeError: Object [object Object] has no method 'tabs' "
Thanks
It looks like there is a small error (though maybe a typo for the question) in your code: <> should simply be >. Also, are you including every js file you need for tabs to work? The second error indicates that a required JS file/class may be missing.
For example, you may have included the jquery base, but did you include tools?
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
I wonder whether someone may be able to help me please.
Firstly I apologise for what most may feel is a really simple question. But this is my first attempt so please bear with me.
I'm using the script below to create an Image Gallery with Fancybox.
UPDATED CODE
<!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>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox-thumb").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: 100px; margin-right: 100px; margin-bottom: -10px; float: left; position: absolute;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<a class="fancybox-thumb" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
</form>
</body>
</html>
I can view the images, but I just can't seem to get the gallery functionality working. I've been working through the examples on the 'fancyBox' and 'fancyApps'websites, but clearly I've misunderstood something along the way.
I feel that once I get started I can format the page as I need it to look, I'll just working through the tutorials. But I just wondered if someone could perhaps please show me where I've gone wrong in creating the initial gallery.
Many thanks and regards
I're attaching your fancybox to a class called ".fancybox-thumb", yet there is no such class on the page. Instead, your links bear class called ".images"
So try replacing this line
<a class="images" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
with
<a class="fancybox-thumb" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
I haven't tested your code but that's one obvious mistake I found so far.
After the initial issues raised by #kernelpanic, #ryan and #Mr_DeLeTeD were rectified, through further testing and having looked through the documenation, the 'grey vertical stripe' was the opacity setting and not an error.
I would whether someone can help me please.
I have the following test form ('form.html'), which if I use a 'Submit Button' I can pass the 'username' and 'locationid' variables to the next form, in this case 'gallery.php'
<form method="post" action="gallery.php"><br/><br/>
<input type="text" name="username" value="IRHM73" /><br/><br/>
<input type="text" name="locationid" value="1" /><br/><br/>
<input type="submit" name="submit"/><br/><br/>
</form>
and this is the 'gallery.php'
<?php
$_SESSION['username']=$_POST['username'];
$_SESSION['locationid']=$_POST['locationid'];
?>
<!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">
<?php
$galleryPath = 'UploadedFiles/' . $_SESSION['username'] . '/' . $_SESSION['locationid'] . '/';
$thumbnailsPath = $galleryPath . 'Thumbnails/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -476px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "imagefolders.php" /> View Uploaded Images In Folder Structure <a/> ← View All Uploaded Images </div>
<form id="gallery" class="page">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<input name="username" type="text" id="username" value="IRHM73" />
<input name="locationid" type="text" id="locationid" value="1" />
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a></li>
<p><span class="style4"><b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> <br />
<b>Contained in folder:</b> <?php echo htmlentities($xmlFile->getAttribute('folder'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aB-a"> </div>
</div>
</div>
</div>
</form>
</body>
</html>
I'm now trying to perform the same action but this time via a link rather than a button.
I've not changed my 'gallery.php script, but my revised form is as follows:
<?php
session_start();
$_SESSION['username']="username";
$_SESSION['locationid']="locationid";
echo 'Gallery';
?>
<input type="text" name="username" value="IRHM73" /><br/><br/>
<input type="text" name="locationid" value="1" /><br/><br/>
</form>
However when I load the form I receive the following error:
Warning: session_start() [function.session-start]: Cannot send session
cache limiter - headers already sent (output started at
/homepages/2/d333603417/htdocs/development/form.php:2) in
/homepages/2/d333603417/htdocs/development/form.php on line 3
I'm not too familiar with 'Session variables' as I'm only just learning. But I just wondered whether someone could perhaps take a look at this and let me know where I'm going wrong.
Many thanks and regards
Put the following:
session_start();
at the top of gallery.php, not form.html. Also, You cannot submit a form that way unless you use javascript to submit the form upon click of a link, see here: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml. Also, you have no opening < form> tag on your form.
session_start() should be called before any output to the browser, so put it before anything is sent. The output is sent from the form.php file.
It seems like somewhere in your php pages you have the session_start(); call after other operations (like print hmtl).
Put always session_start() as the first instruction in php pages
I am using a jquery banner to show advertisements on my site. When I include one of these banners, it works well, however when I include a second only the first one works, the other just shows as a static image. Does anyone know why this happens?
Find below the html code with the JQuery banner:
<!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=iso-8859-1" />
<title>Simple JavaScript Rotating Banner Using jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner/js/jqbanner1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner/css/jqbanner1.css" />
</head>
<body>
<div class="sec sec3 ">
<right>
<div id="jqb_object">
<div class="jqb_slides">
<div class="jqb_slide" title=" "><img src="jqbanner/images/ads/entebeJuniorSchool.png" alt=" Entebbe Junior School Logo"/></div>
<div class="jqb_slide" title="" ><span> <br> <br> <br> Achievers in the making </span>...</div>
</div>
<div class="jqb_bar2">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>
</div>
</right>
</div>
</body>
</html>
Attached find the code to the jquery file (jqbanner1.js):
// Simple JavaScript Rotating Banner Using jQuery
// www.mclelun.com
var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 5000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 460;
var jqb_imgH = 250;
jQuery(document).ready(function() {
jqb_vTotal = $(".jqb_slides").children().size() -1;
$(".jqb_info").text($(".jqb_slide").attr("title"));
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
//Horizontal
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
});
/*
//Vertical
$("#jqb_object").find(".jqb_slide").each(function(i) {
jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
$(this).animate({"top": jqb_tmp+"px"}, 500);
});
*/
$("#btn_pauseplay").click(function() {
if(jqb_vIsPause){
jqb_fnChange();
jqb_vIsPause = false;
$("#btn_pauseplay").removeClass("jqb_btn_play");
$("#btn_pauseplay").addClass("jqb_btn_pause");
} else {
clearInterval(jqb_intInterval);
jqb_vIsPause = true;
$("#btn_pauseplay").removeClass("jqb_btn_pause");
$("#btn_pauseplay").addClass("jqb_btn_play");
}
});
$("#btn_prev").click(function() {
jqb_vGo = -1;
jqb_fnChange();
});
$("#btn_next").click(function() {
jqb_vGo = 1;
jqb_fnChange();
});
});
function jqb_fnChange(){
clearInterval(jqb_intInterval);
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
jqb_fnLoop();
}
function jqb_fnLoop(){
if(jqb_vGo == 1){
jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;
} else {
jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
}
$("#jqb_object").find(".jqb_slide").each(function(i) {
if(i == jqb_vCurrent){
jqb_title = $(this).attr("title");
$(".jqb_info").animate({ opacity: 'hide', "left": "-50px"}, 250,function(){
$(".jqb_info").text(jqb_title).animate({ opacity: 'show', "left": "0px"}, 500);
});
}
//Horizontal Scrolling
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$(this).animate({"left": jqb_tmp+"px"}, 500);
/*
//Vertical Scrolling
jqb_tmp = ((i - 1)*jqb_imgH) - ((jqb_vCurrent -1)*jqb_imgH);
$(this).animate({"top": jqb_tmp+"px"}, 500);
*/
/*
//Fade In & Fade Out
if(i == jqb_vCurrent){
$(".jqb_info").text($(this).attr("title"));
$(this).animate({ opacity: 'show', height: 'show' }, 500);
} else {
$(this).animate({ opacity: 'hide', height: 'hide' }, 500);
}
*/
});
}
Find attached the php file with the embedded html file:
Focus on :<div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>
<?php
include("config/functions.inc.php");
include("config/function.php");
$detail=Get_Contents(16);
?>
<!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" />
<title><?php echo ms_stripslashes($detail['meta_title'])?></title>
<meta name="description" content="<?php echo ms_stripslashes($detail['page_keyword'])?>" />
<meta name="keywords" content="<?php echo ms_stripslashes($detail['page_metadesc'])?>" />
<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/contentslider.css" />
<link href="css/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<!-- Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/featuredcontentglider.js"></script>
<script type="text/javascript" src="js/jquery.min14.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/contentslider.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/acordin.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_400-Trebuchet_MS_700-Trebuchet_MS_italic_700-Trebuchet_MS_italic_400.font.js"></script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper_sec">
<!-- Header -->
<div id="masthead">
<div class="inner">
<?php include("include/logo.php");?>
<div class="right_head">
<?php include("include/search.php");?>
<!-- Navigation -->
<?php include("include/nav_top.php");?>
</div>
</div>
</div>
<div class="clear"></div>
<!-- Bread Crumb -->
<?php include("include/breadcrumb.php");?>
<!-- Content -->
<div id="content_sec">
<div class="inner2">
<div class="col3">
<h3 class="heading colr">About Jigsaw</h3>
<div class="">
<p><?php echo ms_stripslashes($detail['page_desc'])?></p>
<br />
</div>
<div class="clear"></div>
</div>
<div class="col4"> <?php include("jqbanner/EntebbeJuniorAd.html");?> </br> </br> <?php include("jqbanner/EntebbeJuniorAd.html");?> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="content_botm"> </div>
</div>
<div class="clear"></div>
<!-- Footer -->
<div id="footer">
<div class="inner">
<?php include("include/footer/left.php");?>
<?php include("include/footer/share.php");?>
<?php include("include/footer/connect.php");?>
<?php include("include/footer/resource.php");?>
</div>
</div>
</div>
</body>
</html>
since you are initialising your banners via IDs $("#jqb_object"), it only matches your first banner, all others wont get initialised.
To work around this, give a really UNIQUE Id to all the elements you currently address via id (e.g. attach a unique string with php). Or you could use classes, but that most likey breaks your pause/next/prev - buttons.