Page showing unnecessary spaces

Page showing unnecessary spaces - php

I am working on a CSS tab design page and this is how it looks like:
This is it's code (test2.php):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/ajaxtabs.css" />
<script type="text/javascript" src="js/ajaxtabs.js">
</script>
</head>
<body>
<?php
$page = isset($_GET['test2']) ? $_GET['test2'] : "" ;
?>
<ul id="countrytabs" class="shadetabs" style="clear:both">
<!--<li>Tab 1</li>-->
<li>Client</li>
<li>Vendor</li>
<!--<li>Tab 4</li>-->
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:100%; height:100%; margin-bottom: 1em; padding: 10px; clear:both;">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<hr />
</body>
</html>
But once I put this code inside a <div> in another code that calls upon it, it displays unnecessary space.
Here's my code for that (index.php):
<?php session_start(); ?>
<!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>ISYS</title>
<link href="../css/main-style.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.tools.min.js"></script>
<script src="../js/addfunction.js"></script>
<script src="../js/editfunction.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
</script>
<script>
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
</script>
</head>
<body>
<?php
require("../dbconnect.php");
$page = isset($_GET['page']) ? $_GET['page'] : "test2" ;
?>
<div class="container">
<div class="header"><img src="../images/CTILOGO.jpg" width="20%" height="90" style="background-color: #8090AB; display:inline;" />
<img src="../images/logout.png" class="headermenu" style=" display:inline;" />
<img src="../images/home.png" class="headermenu" style=" display:inline;" />
<img src="../images/user.png" class="headermenu" style=" display:inline;" />
<!-- end .header --></div>
<div class="sidebar1" id="link_ul">
<ul class="nav">
<li>Client</li>
<li>Vendor</li>
<li>Product</li>
<li>Users</li>
<li>test</li>
</ul>
<script>
/*for active link*/
(function(){
$('#link_ul a').bind('click', function(e){
var me=$(this);
var as = $('#link').find('a');
as.removeClass('current');
me.addClass('current');
});
}());
</script>
<!-- end .sidebar1 --></div>
<div class="content">
<?php
include(''.$page.'.php');
?>
<!-- end .content --></div>
<div class="footer">
<p></p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
I want the index.php to look like the tabs in test2.php. I haven't change anything in the CSS part and everything's working fine except it's display. I am not sure where in the code's wrong. I'll appreciate any help.

Reset the CSS. Maybe browser adds some unwanted padding or margin. put this code at the top of your css
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 {
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;
}

Related

How to use only next and previous button in pagination in php

Hello i am having php code for pagination where page number displaying i want to use only
Next and Previous Button How can i achieve this
Here is my code
<?php
session_start();
$con = mysql_connect('localhost', 'root', 'root');
mysql_select_db('Helixcrm', $con);
$per_page = 15;
$select_table = "select * from tbl_site_configs";
$variable = mysql_query($select_table);
$count = mysql_num_rows($variable);
$pages = ceil($count/$per_page)
?>
<!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>Qjuery pagination with loading effect using PHP and MySql</title>
//Scripts
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function Display_Load() {
$("#load").fadeIn(1000, 0);
$("#load").html("<img src='load.gif' />");
}
function Hide_Load() {
$("#load").fadeOut('slow');
};
$("#paginate li:first").not('.page').css({
'color': '#FF0084'
}).css({
'border': 'none'
});
Display_Load();
$("#content").load("pagination.php?page=1", Hide_Load());
<? php $page; ?>
$("#paginate li").not('.page').click(function() {
Display_Load();
$("#paginate li").css({
'border': 'solid #193d81 1px'
}).css({
'color': '#0063DC'
}).removeClass("active");
$(this).css({
'color': '#FF0084'
}).css({
'border': 'none'
}).addClass("active");
var pageNum = this.id;
$("#content").load("pagination.php?page=" + pageNum, Hide_Load());
});
$("#paginate li.page").click(function() {
var page = $(this).attr("data-value");
if (page == "prev") {
var index = $("#paginate li.active").index();
if (index > 1) {
$("#paginate li.active").prev().trigger("click");
} else {
$("#paginate li.active").trigger("click");
}
} else {
var index = $("#paginate li.active").index();
if (index < $("#paginate li").length - 2) {
$("#paginate li.active").next().trigger("click");
} else {
$("#paginate li.active").trigger("click");
}
}
});
});
</script>
<style type="text/css">
#load {
width:30px;
padding-top:50px;
border:0px green dashed;
margin:0 auto;
}
#paginate {
text-align:center;
border:0px green solid;
width:500px;
margin:0 auto;
}
.link {
width:800px;
margin:0 auto;
border:0px green solid;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #193d81;
color:#0063DC;
}
li:hover {
color:#FF0084;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content" ></div>
<div class="link" align="center">
<ul id="paginate">
<li id="" class="page" data-value="prev">Prev</li>
<?php
for($i=1; $i<=$pages; $i++) {
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
<li id="" class="page" data-value="next">Next</li>
</ul>
</div>
<div style="clear:both"> </div>
<div id="load" align="center" ></div>
</body>
</html>
please help me to short out my problem
Any help will be appreciated

If you can't solve your issue, I'd recommend that you don't really need javascript for pagination, it can be achieved purely through PHP (Which is actually really simple to do), I've done it myself for one of my websites using this code example..
http://www.developphp.com/page.php?id=289
Go ahead and check it out if you can't solve this problem out,
Also he produced a video explaining which sections you need to change, and going through what each part of the code does/means:
https://www.youtube.com/watch?v=K8xYGnEOXYc

Im guessing removing the echo wont work because then you have no data elements which have active bound to them.
Try making a .hidden class in your css to hide each of your echoed li elements, that way they can still have active bound to them, but they won't be visible on the DOM
.hidden { display: none; }
Your markup would then look something like this
<li class='next'><li>
<li id="1" class="hidden active">1</li>
<li id="2" class="hidden">2</li>
<li id="3" class="hidden">3</li>
<li class='prev'><li>

How to convert html page to pdf and breaking the content with header in each pdf page?

I am using css to break the content as required to be printed in fresh pdf page, I want to include the header/footer on each pdf page, I tried with fixed css/ along with margin but that works for first page not the successive page. The footer is getting overlapped with page content..
mypage.php
<?php //call_db
//call_func
?>
<!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>My Print Page</title>
<style>
body {
background-color: white;
color: black;
font-size: small;
font-family: sans-serif, helvetica, tahoma, arial;
margin: 20%;
}
.page-break {
display:block;
page-break-before:always;
}
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
div.divHeader {
position: fixed;
top: 0;
}
}
</style>
<script type="text/javascript" src="jquery.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
window.print();
});
</script>
</head>
<body>
//call sql query for content // A collection of 200 lists
<div class="divHeader"> <h1 align="center" style="font-size:36px;"> THE GAME OF THORNES</h1> </div>
<h1>Sean's CSS Print vs. Screen Example</h1>
<h2>Lesson 1</h2>
<p>This is my first Page in the document.</p>
<div class="page-break"></div>
<h2>Lesson 2</h2>
<p>Examples and theory of lesson2</p>
<div class="page-break"></div>
<h2>Lesson 3</h2>
<p>Examples and theory of lesson2</p>
<div class="divFooter">UNCLASSIFIED </div>
</body>
</html>
** I am adding PHP tag as if you have any other better way to print the content from db, please suggest.

I think this is duplicate of this Convert HTML + CSS to PDF with PHP? ,
you must use your pdf convertor library to add header and footer to pdf.
I'm used http://www.tcpdf.org/ in my project. you can use it too.

Link to Name in Slide Show

It's me again - The code is working now, but I can't seem to be able to add a link to the '$info['name']' in the alt.
I want to be able to add links to the picture and the name. The picture link works, but the link does not appear in the name.
I may have some mistakes in the code below.
The link works on the picture but now in the alt.
Here's the code:
<!DOCTYPE html>
<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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#main { margin: 20px }
#nav { margin: 10px; position: relative }
#nav li { float: left; list-style: none}
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav li.activeSlide a { background: #faa; color: black }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
prev: '.prev', // Setup prev links
next: '.next', // Setup next links
pager: '.nav', // Setup pager navs
before: function () {
$("#name").html($(this).children("img").attr("alt"));
}
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?php
mysql_connect("localhost", "root", "")or die("cannot connect");
mysql_select_db($db_name)or die("cannot select DB");
$data = mysql_query("SELECT * FROM people") or die(mysql_error());
while($info = mysql_fetch_array( $data )){
<!--THIS CODE BELOW -->
echo "<img src=\"uploads/".$info['pic'] . "\" alt=\"<b><a href=\"display.php?id=".$info['id']."\">".$info['name']."</b><br />".$info['sex']. "<br />".$info['location'].
"<br />".$info['age']."</a>";
}
?>
</div>
<div id="name">
</div>
<!-- right nav bar -->
<div id="right">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>
I would appreciate your help folks to be able to add link to the name dynamically.

instead of echo-ing the string, why not read it into a variable and echo the variable inside you html at the appropriate location <?php echo $myString; ?> also looks like you are using HTML inside the alt attribute. You can't do that. Even if you can do that, you are using double quotes inside double quotes, which will end the double quote and break the string.
Try changing your echo command to:
echo "<img src=\"uploads/".$info['pic'] . "\" alt=\"<b><a href='display.php?id=".$info['id']."'>".$info['name']."</b><br />".$info['sex']. "<br />".$info['location'].
"<br />".$info['age']."</a>";
The only thing Ive changed is the anchor link (i.e. the part below I replace " with '
<a href='display.php?id=".$info['id']."'>

Display Image Name in Slide Show

I have been learning to use a slideshow code I saw on a website somewhere. Although I have managed to get it working with the images showing well, but I can't figure out how to show the image name in another table alongside the images when the slide changes.
I have provided the code here. so I need your help. What I'm looking for s that whenever the slideshow changes with another picture, I want the picture name displayed next to it.
Thanks for your asisstance.
Update - Here's the updated code based on Gilly3's suggestion, but I'm still confused on how to get the name displayed
<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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#main { margin: 20px }
#nav { margin: 10px; position: relative }
#nav li { float: left; list-style: none}
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav li.activeSlide a { background: #faa; color: black }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
prev: '.prev', // Setup prev links
next: '.next', // Setup next links
pager: '.nav', // Setup pager navs
before: function () {
$("#name").text(this.alt);
}
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?php
mysql_connect("localhost", "root", "")or die("cannot connect");
mysql_select_db($db_name)or die("cannot select DB");
$data = mysql_query("SELECT * FROM people") or die(mysql_error());
while($info = mysql_fetch_array( $data )){
echo "<img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/>";
}
?>
</div>
<div id="name">
HELP ME PRINT THE NAME HERE
</div>
<!-- right nav bar -->
<div id="right">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>

Use either of the before or after events, depending on when you want the name to change.
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
before: function () {
$("#name").text(this.alt);
}
});
You'll need to populate alt with the name in your php. If you don't want to add a tooltip, also add title="".
echo "<img src=\"http://localhost:8080/people/uploads/".$info['pic'] . "\" alt=\"".$info['name'] . "\" title=\"\" />";

Here is what I think should work:
Add a 'data-name' attribute to each image. Something like:
echo "<img src='http://localhost:8080/people/uploads/".$info['pic']."' data-name='".$info['name']."'/>";
In the jquery.cycle plugin set an option for the 'onPrevNextEvent'. Probably something like:
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement){
var name = slideElement.data('name');
$("#name").html(name);
}
});
Hope that helps.
Bob

Need help with a Session Script, Show JQModal Pop-up only Once

I have a JQModal alert that needs to come up when a client's site is first accessed, but not show again when the index page is accessed again from inside the site. I'm not real far along in setting up session cookies so I'll be needing some explicit help, if that's possible. I've set up a short page with the vitals on it to test with: The URL is http://www.caycecookbook.com/pop_ups/jqm_onDocReady/code.php. I'm attaching the code here.
<?php session_start();
if( $_SESSION['visited'] ){
//don't show the modal box
} else {
$_SESSION['visited'] = true;
//show modal box;
}
?>
<!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>Cayce CookBook</title>
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
loaded offscreen, and thus cached. Caching CSS created with the help of;
Klaus Hartl <klaus.hartl#stilbuero.de> */
#media projection, screen {
div.imgCache { position: absolute; left: -8000px; top: -8000px; }
div.imgCache img { display:block; }
}
#media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
Brice Burgess <bhb#iceburg.net> */
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). You
can change this value by either;
a) supplying one via CSS
b) passing the "zIndex" parameter. E.g. (window).jqm({zIndex: 500}); */
.jqmWindow {
display: none;
position: fixed;
top: 5%;
left: 50%;
margin-left: -265px;
width: 530px;
/*width: auto;*/
background-color:#777777;
color: #333;
border: 1px solid black;
padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#rename').jqm();
$('#rename').jqmShow(); // This is the line you need to add.
});
</script>
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;">Close</p></td></tr>
</table>
</div>
</body>
</html>

You can't control js/html/css behavior explicitly from PHP.
You have two options
1) Don't include the javascript for modal box if $_SESSION['visited'] is true
2) Echo true/false from $_SESSION['visited'] to javascript code and do a logic there
Code for first option:
<?php session_start(); ?>
<!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>Cayce CookBook</title>
<?php
if( $_SESSION['visited'] ){
} else {
$_SESSION['visited'] = true;
?>
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
loaded offscreen, and thus cached. Caching CSS created with the help of;
Klaus Hartl <klaus.hartl#stilbuero.de> */
#media projection, screen {
div.imgCache { position: absolute; left: -8000px; top: -8000px; }
div.imgCache img { display:block; }
}
#media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
Brice Burgess <bhb#iceburg.net> */
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). You
can change this value by either;
a) supplying one via CSS
b) passing the "zIndex" parameter. E.g. (window).jqm({zIndex: 500}); */
.jqmWindow {
display: none;
position: fixed;
top: 5%;
left: 50%;
margin-left: -265px;
width: 530px;
/*width: auto;*/
background-color:#777777;
color: #333;
border: 1px solid black;
padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<?php
}
?>
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#rename').jqm();
$('#rename').jqmShow(); // This is the line you need to add.
});
</script>
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;">Close</p></td></tr>
</table>
</div>
</body>
</html>

Replace below code in your file in below code i changed 3 things.
1> position of php code. I put php code at the end of file
2> Cookie rather than session
3> javascript popup opning code has some changes
Please apply below file after still you have some problem than let me know your prob.
<!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>Cayce CookBook</title>
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> TOGGLE-INSERT DEPENDENCIES >>>>>>>>>> -->
<link href="css/vwd_up.css" rel="stylesheet" type="text/css" />
<script src="scripts/main.js" type="text/javascript"></script>
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< TOGGLE-INSERT DEPENDENCIES <<<<<<<<<< -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="scripts/jqModal.js"></script>
<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
loaded offscreen, and thus cached. Caching CSS created with the help of;
Klaus Hartl <klaus.hartl#stilbuero.de> */
#media projection, screen {
div.imgCache { position: absolute; left: -8000px; top: -8000px; }
div.imgCache img { display:block; }
}
#media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
Brice Burgess <bhb#iceburg.net> */
/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). You
can change this value by either;
a) supplying one via CSS
b) passing the "zIndex" parameter. E.g. (window).jqm({zIndex: 500}); */
.jqmWindow {
display: none;
position: fixed;
top: 5%;
left: 50%;
margin-left: -265px;
width: 530px;
/*width: auto;*/
background-color:#777777;
color: #333;
border: 1px solid black;
padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
</head>
<body>
<script type="text/javascript">
<?php if( !isset($_COOKIE["visited"]) || $_COOKIE["visited"] != true ): ?>
$('#rename').jqm();
$('#rename').jqmShow(); // This is the line you need to add.
<?php endif; ?>
</script>
<!-- POP-UP DIV -->
<DIV class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="530" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center"><P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p></td></tr>
<TR><TD align="center" valign="middle"><P style="margin:6px 0px 0px 0px;">Close</p></td></tr>
</table>
</div>
<?php
if( !isset($_COOKIE["visited"]) || $_COOKIE["visited"] != true )
{
$expireTime = time() + (60 * 60 * 24 * 1);
// Set cookie for 1 day or 24 hour from current time
setcookie("visited", true, );
}
?>
</body>
</html>

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.

Page showing unnecessary spaces - php

Related

How to use only next and previous button in pagination in php

How to convert html page to pdf and breaking the content with header in each pdf page?

Link to Name in Slide Show

Display Image Name in Slide Show

Need help with a Session Script, Show JQModal Pop-up only Once

Categories

Resources