The page is getting messed up because of something in the page I searched a while and I just cant find what is wrong.
Probably the div in zoek.html but could you guys take a look?
EXACTLY WHATS HAPPENING: NORMAL PAGE MENU FLOATS IN THE MID WHEN OPENING THIS ONE THE MENU GOES TO THE LEFT CORNER AND ALSO the CONTENT menu goes to the left.
home_zoek.php *PHP:
<?php
include("config/instellingen.php");
ob_start();
session_start();
$loggedin = $_SESSION['loggedin'];
if (empty($_SESSION['naam'])){
die("Log eerst in voordat u deze pagina bezoekt.");
}
if (isset($_GET['logout'])){
session_destroy();
header("Refresh: 0; url=\"index.php\"");
}
date_default_timezone_set("Europe/Amsterdam");
$logdate = date('H:i:s');
$logs = "INSERT INTO `logs` (`id` ,`naam` ,`text`,`datum`,`ip`)VALUES (NULL , '$_SESSION[naam]', 'Heeft pagina $_SERVER[PHP_SELF] bekeken', '$logdate','$_SERVER[REMOTE_ADDR]');";
$meldingen2 = mysqli_query($connect, $logs);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Heijmans | Planning</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/_style_logged.css" />
<link rel="stylesheet" type="text/css" href="css/_style_menu_left.css" />
<link rel="stylesheet" type="text/css" href="../css/_style_menu_left.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/script.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<?php include("home_menu.php"); ?>
<div id="header-with-tabs">
<?php include("home_menu-3.php"); ?>
</div>
<div id="content">
<?php include("home_menu-2.php"); ?>
<div class="page-full-width cf">
<div class="side-content fr">
<div class="content-module">
<div class="content-module-heading cf">
<h3 class="fl">Hoofd pagina</h3>
<span class="fr expand-collapse-text">Klik om te verkleinen</span>
<span class="fr expand-collapse-text initial-expand">Klik om te vergroten</span>
</div>
<div class="content-module-main">
<thead>
<p>
<font color="black">Zoek hier op postcode of klantvraagnummer de resultaten verschijnen automatisch en zijn altijd up to date</font>
</p>
<p>
<font color="black">Minimum 3 letters, bijv. 1093 VD.</font>
</p>
<?php include("zoek.html"); ?><br />
<div id="show_results"></div>
</div>
</div>
</div>
</div>
</thead>
</ul>
</table>
</div>
</div>
</div>
<?php include("home_footer.php"); ?>
</body>
</html>
zoek.html *PHP:
<head>
<script type="text/javascript" src="js/search.js"></script>
<script src="js/pagination.js" type="text/javascript"></script>
<script>
htmlData('search.php', '');
</script>
</head>
<body>
<div id="form">
<input type="text" id="terms" onkeyup="getScriptPage('show_results','terms','1')" onblur="if ( this.value == '' ) this.value = this.defaultValue" onfocus="if ( this.value == this.defaultValue ) this.value = ''"/>
</div>
</div>
</html>
It is important to ident your code to see if you have extra tags, or missplaced tags in your html code. In this case, your </thead> in your <div class="content-module-main"> is at the wrong place. Furthermore, you have extra </div> tags.
Another issue here is that you have <head>, <body> and </html> tags in your zoek.html file. They are not expected here since the code is directly inserted in the parent file home_zoek.php.
Remove them, clean your code and it should behave as expected.
Related
I have coded a working page but did not incorporate webpage responsiveness which I now need desperately! Is there a single line of code that will make the entire webpage responsive or do I need to make each element responsive?
I have tried to include the following code but to no success:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the full code:
<?php
session_start();
$customer = $_SESSION['id_login'];
$order = $_SESSION['id_login'];
if (!isset($_SESSION['mysesi']) && !isset($_SESSION['mytype'])=='customer')
{
echo "<script>window.location.assign('LoginAndReg.php')</script>";
}
?>
<?php
include("admin/php/myFunctions.php");
#mysql_connect("localhost","root","") or die("Could not connect to database");
#mysql_select_db("bookstore") or die("Could not select database");
$displayImages = "";
if((isset($_GET['cat']) ? $_GET['cat'] : '') == "children")
$sqlSelProd = #mysql_query("select * from tblproduct where prod_cat = '$_GET[cat]'") or die(mysql_error());
else if((isset($_GET['cat']) ? $_GET['cat'] : '') == "Horror")
$sqlSelProd = #mysql_query("select * from tblproduct where prod_cat = '$_GET[cat]'") or die(mysql_error());
else if((isset($_GET['cat']) ? $_GET['cat'] : '') == "Thriller")
$sqlSelProd = #mysql_query("select * from tblproduct where prod_cat = '$_GET[cat]'") or die(mysql_error());
else
$sqlSelProd = #mysql_query("select * from tblproduct") or die(mysql_error());
if(mysql_num_rows($sqlSelProd) >= 1){
while($getProdInfo = mysql_fetch_array($sqlSelProd)){
$prodNo = $getProdInfo["prod_no"];
$prodID = $getProdInfo["prod_id"];
$prodName = $getProdInfo["prod_name"];
$prodPrice = $getProdInfo["prod_price"];
$displayImages .= '<div class="col col_14 product_gallery">
<img src="images/product/'.$prodNo.'.jpg" alt="Product '.$prodNo.'" width="170" height="150" />
<h3>'.$prodName.'</h3>
<p class="product_price">R '.$prodPrice.'</p>
Add to Cart</div>';
}
}
?>
<!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>
<!-- Responsive code -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Great selling Book Store</title>
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body id="home">
<div id="main_wrapper">
<div id="main_header">
<div id="site_title"><h1>Book Store</h1></div>
<div id="header_right">
<div id="main_search">
<form action="products.php" method="get" name="search_form">
<input type="text" value="Search" name="keyword" onfocus="clearText(this)" onblur="clearText(this)" class="txt_field" />
<input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" class="sub_btn" />
<p>Welcome, <?php echo $_SESSION['mysesi'] ?></p> Log Out
<?php echo $customer ?>
<?php echo $order ?>
</form>
</div>
</div> <!-- END -->
</div> <!-- END of header -->
<div id="main_menu" class="ddsmoothmenu">
<ul>
<li>Home</li>
<li>Books</li>
<li>Cart</li>
<li>Checkout</li>
<li>About</li>
</ul>
<br style="clear: left" />
</div> <!-- end of menu -->
<div id="main_middle">
<img src="images/image_book.png" alt="Image 01" width="500" height="170" />
<h1>Great Selling book Store</h1>
<p>Great Selling book Store is a country wide book store.</p>
Browse All books
</div> <!-- END of middle -->
<div id="main_top"></div>
<div id="main">
<div id="sidebar">
<h3>Categories</h3>
<ul class="sidebar_menu">
<li>Children</li>
<li>Horror</li>
<li>Thriller</li>
</ul>
</div> <!-- END of sidebar -->
<div id="content">
<h2>Products</h2>
<?php echo $displayImages; ?>
</div> <!-- END of content -->
<div class="cleaner"></div>
</div> <!-- END of main -->
<div id="main_footer">
<div class="cleaner h40"></div>
<center>
Copyright © 2048 DigitalNinja
</center>
</div> <!-- END of footer -->
</div>
<script type='text/javascript' src='js/logging.js'></script>
</body>
</html>
I would recommend using bootstrap it's easy to use and it can make your page responsive by just adding some classes to your file.
I think this is what you've been looking for:
How to get just the responsive grid from Bootstrap 3?
I have a webpage and a place to submit data. I made a preview page for this, and whenever a user clicks 'preview' he can see what it would look like. The trouble is whenever they click the back button from the preview all the data is gone. How do I avoid this and keep the data without any very complex solutions?
preview.php
<?php
session_start();
$getTitle = $_POST['title'];
$getEntry = $_POST['entry'];
date_default_timezone_set('UTC');
$getTime = date('D, M jS, o, H:i a e');
$user = $_SESSION['username'];
?>
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="css/main.css">
<head> <title> Blog - Preview </title> </head>
<body>
<div class="wrap">
<div class="navPreview">
<ul>
<li>Back<br></li>
</ul>
</div>
<div class="main">
<h1>Preview</h1>
<div class="mainscroll">
<?php
echo "<span>Submitted at: $getTime by $user</span><br>";
echo "<h2>$getTitle</h2>";
echo "<p>$getEntry</p><hr>";
?>
</div>
</div>
</div>
<div class="footer">x</div>
</body>
addentry.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="css/main.css">
<head> <title> Blog - Add Entry </title> </head>
<body>
<div class="wrap">
<div class="header">
<h2> Welcome.. </h2>
<p>..add an entry below</p>
</div>
<div class="nav">
<ul>
<li>Home<br></li>
<li>Add Entry<br></li>
<li>Logout<br></li>
</ul>
</div>
<div class="main">
<form id="entryForm" action="addentry.php" method="post">
<p class="title">
<label>Title:</label>
<input type="text" name="title"><br>
</p>
<p class="body">
<label>Entry:</label>
<textarea name="entry"></textarea><br>
</p>
<p class = "buttons">
<script type="text/javascript">
function clearConfirm() {
var confirm = window.confirm("Are you sure you want to clear?");
if (confirm) {
document.getElementById("entryForm").reset();
}
}
function previewForm(action) { document.getElementById('entryForm').action = action;
document.getElementById('entryForm').submit();
}
</script>
<input type="button" onclick="clearConfirm()" value="Clear" />
<input type="button" onclick="previewForm('preview.php')" value="Preview" />
<input type="submit" value="Submit" />
</p>
</form>
</div>
<div class="footer">x</div>
</div>
Maybe add a target="_blank" ? It will open the preview in a new tab.
<input type="button" onclick="previewForm('preview.php')" value="Preview" target="_blank"/>
EDIT: Oups not in the form but on your preview link...
Or something like this : http://www.w3schools.com/tags/att_button_formtarget.asp
Hey guys I am creating a search engine with two parameters, first is TEXT, second is RADIO BOX. However my query seems to know what the radio value is, but seems tends to ignore it completely. Can't quite put my finger on where I am going wrong. Any help would be greatly appreciated.
<?php
session_start();
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>site title</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function search(partialSearch,level){
$.ajax({type: "POST",url:"php/bigsearch.php",data: {partialSearch: partialSearch, level: level},success:function(result){
$("#results").html(result);
}});#
alert("dsfsgdfg");
};
</script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<!-- Delete everything in this .container and get started on your own site! -->
<div class="container">
<?php include 'navigation.php' ?>
<div class="sixteen columns">
<img src="images/glass.jpg" alt=""/>
<h3 class="forum">Search the site</h3>
<form action="bigsearch.php" method="POST" >
<label><input type="radio" name="level" value="beginner">Beginner</label>
<label><input type="radio" name="level" value="intemediate">Intemediate</label>
<label><input type="radio" name="level" value="advanced">Advanced</label>
<label><input type="radio" name="level" value="idontcare" checked="checked">I Don't Care</label>
<input type="text" name="partialSearch"/>
<input type="submit" name="search"/>
</form>
<div id="results">
<?php
include 'php/config.php';
$partialSearch = "%".$_POST['partialSearch']."%";
$check = $_POST['level'];
if($check == "idontcare"){
$stmt = $mysqli->prepare("SELECT VideoId, Name, Level FROM videos WHERE Keywords LIKE ? OR Name LIKE ? ");
$stmt->bind_param('ss',$partialSearch,$partialSearch);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($VideoId,$Name,$Level);
}else{
$stmt = $mysqli->prepare("SELECT VideoId, Name, Level FROM videos WHERE Keywords LIKE ? OR Name LIKE ? AND Level = ?");
$stmt->bind_param('sss',$partialSearch,$partialSearch,$check);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($VideoId,$Name,$Level);
}
$length = strlen($partialSearch);
if($length < 3){
}else{
if($stmt->num_rows == 0){
echo "No results";
}else{
while($rows = $stmt->fetch()){
echo "".$Name."";
echo "<p>".$Level."</p>";
}}}
?>
</div>
</div>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
<!-- Delete everything in this .container and get started on your own site! -->
<div class="container">
<?php include 'navigation.php' ?>
<div class="sixteen columns">
<img src="images/glass.jpg" alt=""/>
<h3 class="forum">Search the site</h3>
<form action="bigsearch.php" method="POST" >
<label><input type="radio" name="level" value="beginner">Beginner</label>
<label><input type="radio" name="level" value="intemediate">Intemediate</label>
<label><input type="radio" name="level" value="advanced">Advanced</label>
<label><input type="radio" name="level" value="idontcare" checked="checked">I Don't Care</label>
<input type="text" name="partialSearch"/>
<input type="submit" name="search"/>
</form>
<div id="results">
<?php
include 'php/config.php';
$partialSearch = "%".$_POST['partialSearch']."%";
$check = $_POST['level'];
if($check == "idontcare"){
$stmt = $mysqli->prepare("SELECT VideoId, Name, Level FROM videos WHERE Keywords LIKE ? OR Name LIKE ? ");
$stmt->bind_param('ss',$partialSearch,$partialSearch);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($VideoId,$Name,$Level);
}else{
$stmt = $mysqli->prepare("SELECT VideoId, Name, Level FROM videos WHERE (Keywords LIKE ? OR Name LIKE ?) AND Level = ?");
$stmt->bind_param('sss',$partialSearch,$partialSearch,$check);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($VideoId,$Name,$Level);
}
$length = strlen($partialSearch);
if($length < 3){
}else{
if($stmt->num_rows == 0){
echo "No results";
}else{
while($rows = $stmt->fetch()){
echo "".$Name."";
echo "<p>".$Level."</p>";
}}}
?>
</div>
</div>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
Try out this i guess the main problem with your sql command as you have mixed OR/AND in Where clause you should combine the OR between () to fix it
Hope this answer helps you
I have a Header File by the name header.php which goes like this :
It is inside a folder called includes so the path is includes/header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>***</title>
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.css' type='text/css' media='screen' />
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.print.css' type='text/css' media='print' />
<!-- Styles -->
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<!--[if IE]>
<link rel='stylesheet' href='../_layout/IE.css' type='text/css' media='all' />
<![endif]-->
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7'></script>
<!-- WYSISYG Editor -->
<script type='text/javascript' src='../_layout/scripts/nicEdit/nicEdit.js'></script>
<!-- Forms Elemets -->
<script type='text/javascript' src='../_layout/scripts/jquery.uniform/jquery.uniform.min.js'></script>
<link rel='stylesheet' href='../_layout/scripts/jquery.uniform/uniform.default.css' type='text/css' media='screen' />
<!-- Scripts -->
<script type='text/javascript' src='../_layout/custom.js'></script>
</head>
<body>
<div id="layout">
<div id="header-wrapper">
<div id="header">
<div id="user-wrapper" class="fixed">
<div class="color-scheme">
</div>
<div class='user'>
<?php
if($_SESSION['user'] != 'NULL')
{
?>
<img src="../_content/user-img.png" alt="" />
<span>Welcome Admin <?PHP echo $_SESSION['user']; ?></span>
<span class="logout">Logout</span>
<?php
}
?>
</div>
</div>
<div id="launcher-wrapper" class="fixed"><img src="../_layout/images/NGBU Logo.png" width="68" height="81" alt="logo" style="margin-left:35px;" /> <img src="../_content/NGBU_logo.png" width="777" height="57" alt="logo" longdesc="http://index.php" style="margin-top: 25px; float: left; margin-left: 25px;"/></div>
</div>
</div>
I am calling this file at the beginning of my Index.php but for some reasons its not rendering from the hosted server although it is being rendered when i was testing it under localhost?
My index.php which is inside a folder admin goes like :
<?PHP
session_start();
ob_start();
$_SESSION['user'] = "NULL";
$_SESSION['password'] = "";
$_SESSION['error'] = 0;
include_once("../includes/header.php");
if(!$_SESSION['error'])
$_SESSION['error'] = "Please Login to Continue";
?>
<?PHP
if(isset($_REQUEST['check']))
{
if(!$_REQUEST['User'] == "")
{
if(!$_REQUEST['Password'] == "")
{
$_SESSION['user'] = $_REQUEST['User'];
$_SESSION['password'] = $_REQUEST['Password'];
unset($_SESSION['error']);
header('Location: checklogin.php');
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
?>
<DIV class="page fixed">
<DIV id="sidebar" style="height:400px; width:250px; margin-left:5px;"> </DIV>
<DIV id="content">
<?PHP
echo "<h1 style='margin-left:150px;' >".$_SESSION['error']."</h1>";
?>
<FORM action="index.php" method="post" name="loginfrm" class="form-elements-inputs" style="margin-left:150px;width:90px;">
<INPUT class="normal" type="text" name="User" value="User Name" /><BR />
<INPUT class="normal" type="password" name="Password" value="Password" /><BR />
<INPUT type="hidden" name="check" value="login" />
<INPUT type="submit" value="Login" class="button-orange" style="width:100px; margin:auto;" />
</FORM>
</DIV>
</DIV>
</div>
</BODY>
</HTML>
The style.css file is sitting right next to header.php in includes folder then why it is not being applied?
While checking through firebug in mozilla its showing me this output :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>***</title>
<link type="text/css" href="style.css" rel="stylesheet">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /style.css was not found on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
<hr>
<address>Apache Server at www.***.com Port 80</address>
</body></html>
</link>
<link media="screen" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.css" rel="stylesheet">
<link media="print" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link media="screen" type="text/css" href="scripts/jquery.uniform/uniform.default.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1">
<script src="../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7" type="text/javascript">
<script src="../_layout/scripts/nicEdit/nicEdit.js" type="text/javascript">
<script src="../_layout/scripts/jquery.uniform/jquery.uniform.min.js" type="text/javascript">
<script src="../_layout/custom.js" type="text/javascript">
</head>
<body>
</html>
Why there is a 404 not found error when the path is correct?
Please help
You're including ../include/header.php and style.css is there too, namely ../include/style.css. So, you must either use the same relative path or an absolute path to your css /include/style.css.
The link to your CSS file should be relative to the URL of the page you are viewing.
For example, if you view your page at example.com, you must reference the CSS file with example.com/includes/style.css.
Maybe it's better to test with header.php absolute path first.
Also path of your scripts and style sheets should be relative to index.php not header.
(Sorry for bad English)
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.