I have a dropdown javascript menu on a site that gets included into each page by some php. There's no problem in Firefox, but when viewed in Chrome, the menu acts strangely on most of the pages, but not all, and I can't figure out what's going correctly on the few proper pages.
The homepage looks fine in either one: http://solve-et-coagula.us/
Like this page, most (in Chrome) add a space above the menu: http://solve-et-coagula.us/design.php
This page displays correctly: /rabbithole/k_2.php
This one does not: /hermeticism/gunas.php
Also, in all cases in Chrome, the dropdowns appear from the top of the menu images instead of the bottom.
I've been using the menu for a while, having grabbed the format somewhere years ago and adapting it aesthetically.
The pages start off like (k_2.php):
<?php
session_name("MyLogin");
session_start();
include($_SERVER['DOCUMENT_ROOT']."/menu.html");
?>
<!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" dir="ltr">
<head>
<title>Registration</title>
<meta content="text/html" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="rabbithole.css" />
<link rel="stylesheet" type="text/css" href="/general.css" />
<script src="/javascript.js" type="text/javascript"></script>
<script src="rabbithole.js" type="text/javascript"></script>
</head>
<body>
<table border="0" cellspacing="20" width="100%">
<tr>
<td class="title"><h1>Create an Account</h1></td>
</tr>
[...]
Here's the graphic design page
<?php
session_name("MyLogin");
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" dir="ltr">
<head>
<title>Graphic & Web Design</title>
<meta content="text/html" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="rabbithole/rabbithole.css" />
<link rel="stylesheet" type="text/css" href="general.css" />
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>
<?php
include($_SERVER['DOCUMENT_ROOT']."/menu.html");
?>
<table border="0" cellspacing="20" width="100%">
<tr>
<td class="title"><h1>Graphic & Web Design</h1></td>
</tr>
<tr>
<td>
<p>
[...]
here's the full menu.html file
<div align="center" id="page">
<div id="header">
<div id="mainmenu">
<span onmouseover="dropdownmenu(this, event, menu1, '146px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()"><img alt="Hermetic Qabalah" class="menuimages" src="/images/libri.png" /></span>
<span onmouseover="dropdownmenu(this, event, menu2, '146px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()"><img alt="Eastern Mysticism" class="menuimages" src="/images/theology.png" /></span>
<span onmouseover="dropdownmenu(this, event, menu3, '146px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()"><img alt="Ceremonial Magick" class="menuimages" src="/images/rituals.png" /></span>
<span onmouseover="dropdownmenu(this, event, menu4, '146px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()"><img alt="Solve et Coagula" class="menuimages" src="/images/solveetcoagula.png" /></span>
<span onmouseover="dropdownmenu(this, event, menu5, '146px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()"><img alt="Liber Legis" class="menuimages" src="/images/thelema.png" /></span>
<span onmouseover="dropdownmenu(this, event, menu6, '146px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()"><img alt="Lemegeton" class="menuimages" src="/images/lemegeton.png" /></span>
<span onmouseover="dropdownmenu(this, event, menu7, '146px')" onclick="return clickreturnvalue()" onmouseout="delayhidemenu()"><img alt="Miscellanea" class="menuimages" src="/images/hermeticism.png" /></span>
</div>
</div>
</div>
An help would be appreciated; this has not been solved.
On http://solve-et-coagula.us/design.php there is extra " " at the top (not present on other pages), when its removed then the menu is displayed properly.
Take a look into the code of that page, and see if anything extra is being echoed by PHP.
Also, You should have the meta link and title tag inside the head element.
Related
Currently, I have a jquery function that I'm trying to get to display the time (the jquery I'm using is the Basic Example found here: http://jonthornton.github.io/jquery-timepicker/). When I implement Mr. Thornton's timepicker, I may click on the input field and a list of time options drops down, however there is no scroll bar/slider on the side of the drop down (as there is in his example). The time value that I select (I can use the mouse scroller to move up and down in the selection) is able to be inserted into my SQL db (via $_POST) with no problems, however, I would like to be able to use some of the other jquery examples listed on Mr. Thornton's site - but none of them (with the exception of the Basic Example - which seems to be only partially working) will work. Attached is the pertinent code. Any input would be much appreciated. Also, I tried going through this tutorial (https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery) and hence I tried adding the script (note: 10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js) but that didn't seem to have any effect.
<?php
//DOCTYPE begins header.html
include_once("includes/header.html");
<!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>
<!--<style media="screen"></style>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<!--added 10/9/17-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="js/scripts.js"></script>-->
<!--Austin's Original links and scripts-->
<link rel="stylesheet" type="text/css" href="./styles/styles.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.min.css"/>
<link rel="stylesheet" href="./jquery/timepicker/jquery.timepicker.css"/>
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="./jquery/timepicker/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#basicExample').timepicker();
// $('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
// $('#setTimeExample').timepicker();
// $('#setTimeButton').on('click', function (){
// $('#setTimeExample').timepicker('setTime', new Date());
// });
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header"/></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
</div>
The following code displays the scroll bar for me, as well as enables basic timepicker, as well as the set date example. Its not every example, but will get you on your way
<!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>Crime Stoppers</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker#1.11.12/jquery.timepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker#1.11.12/jquery.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#basicExample').timepicker();
$('#setTimeButton').on('click', function () {
$('#basicExample').timepicker('setTime', new Date());
})
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header" /></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
<button id="setTimeButton">Set current time</button>
</div>
</body>
</html>
Your problem is probably about calling the JavaScript functions before the document is fully loaded.
$(function() {
$(document).ready(function() {
// Your code here
}
});
It is always best practice to use JavaScript only when the document is ready (a.k.a. document.onload event), replaced by jQuery's $(document).ready() event.
I've gone through the archives and read a bunch of questions relating to why PHP include won't work. I've tried to fix my problem using answers to the other questions, but am still having issues.
This is my 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fuel Status Map</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="map">
<?
require 'MapLink.php';
?></div>
<div id="title"><img src="title.png" width="400" height="200" />
</div>
<div id="links">
<img src="FuelStatusLink.png" width="400" />
<br />
<img src="NWSofficeLink.png" width="400" />
<br />
<img src="FuelSpecialistLink.png" width="400" />
<br />
<img src="AdminLink.png" width="400" />
<br />
</div>
<div id="legend"><img src="Legend1.png" width="400">
</div>
<div id="logos">
<img src="PSlogo.png" width="140" height="150" />
<img src="GBlogo.png" width="250" height="150"/>
</div>
</div>
</body>
</html>
The page is supposed to look like this: http://www.directdocuments.com/GACC/GBSite/predictive/FuelStatus/FuelStatusMap.php
but looks like this: http://gacc.nifc.gov/gbcc/predictive/FuelStatus/FuelStatusMap.php
The MapLink.php is in the same directory, and works correctly. I'd post the link to that as well, but I can't post any more links.
It looks like you don't have short open tags enabled in your PHP configuration, so the require line is being output literally (use View Source to see this). Use the full tag.
<?php
require 'MapLink.php';
?>
From the documentation:
PHP also allows for short open tag <? (which is discouraged since it is only available if enabled using the short_open_tag php.ini configuration file directive, or if PHP was configured with the --enable-short-tags option).
See also Are PHP short tags acceptable to use?
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
How to use date picker in Codeigniter?
My view part looks like this
<html>
<head>
<link href="css/CalendarControl.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/CalendarControl.js"></script>
</head>
<body>
<table>
<tr>
<td><input name="txtdatefrom" type="text" id="txtdatefrom" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="From" onKeyPress="return disableEnterKey(event)"/></td>
<td><input name="txtdateto" type="text" id="txtdateto" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="To" onKeyPress="return disableEnterKey(event)"/></td>
<td><input type="submit" value="submit" name="submit" id="submit" /></td>
</tr>
</table>
</body>
</html>
And my controller
public function calender(){
$this->load->view('news/calender1');
}
install datecker's js then call function datepicker() using jQuery on id on which you want date.
This might help you out: Using Datetime picker
Or for Codeigniter:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker Example 1</title>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
</body>
</html>
Download the jquery.ui for datepicker from the internet and put the file in your folder.the file is stored in assessts/js/jquery_ui.the stored location is on your wish
1. jquery-ui.css
2. jquery-ui.js
3. jquery-ui.min.js
provide the css link in head section
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
provide the javascript in body section
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
your code be look like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
</body>
</html>
and finally in control load the view and javascript library
include datepicker js and see the result.
<div class="text">
<?php
$data = array(
'name' => "registration_date",
'id' => "registrationDate",
'class' => "datepicker",
'readonly' => "true",
'value' => $this->input->post('registration_date')
);
echo form_input($data);
?>
<span class="text-error"><?php
echo form_error('registration_date');
?></span></div>
In master.php
<?php
//echo "session check: ".$_SESSION['session_array'];
//exit;
session_start(); // Session Starts
if( !isset($_SESSION['session_array']) )
{
header("Location: index.php");
exit;
}
include("conn.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LMS</title>
<link rel="stylesheet" type="text/css" href="jui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="jui/general.css">
<link rel="stylesheet" type="text/css" href="jui/themes/icon.css">
<script type="text/javascript" src="jui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/core.js"></script>
</head>
<body class="easyui-layout">
<div region="north" class="north_master" border="false" split="false" >
<div style="float:left;">
<img src="images/usr_logo.jpg" alt="Lead Management System" width="168" height="66" title="Lead Management System" >
</div>
<div style="float:right;">
<br/><br/>
<a id="logout" name="logout" href="logout.php?logout=1" class="easyui-linkbutton" iconCls="icon-cancel" onClick="javascript: return confirm('Are you sure you want to log out?');">Logout</a>
</div>
</div>
<div region="south" class="south" border="false">
<?php include('footer.php'); ?>
</div>
<div region="center" class="center" style="background-image:url(img/product-display.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:right bottom; ">
<?php
include('dashboard.php');
?>
</div>
</body>
</html>
In dashboard.php
<script language="javascript">
jQuery(document).ready(function($){
alert("check");
});
</script>
<div class="content">
<h1>Slot Dashboard</h1>
<div>
Add Slot
</div>
<table border='1' bordercolor='#B4B4B4' cellpadding='1' cellspacing='0' width='80%' align="center">
<tr align="left">
<th>Week</th>
<th>Dates</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>09/04/2011 - 09/10/2011</td>
<td>Revised</td>
<td>09/04/2011</td>
<td>View</td>
</tr>
<tr>
<td>2</td>
<td>09/11/2011 - 09/17/2011</td>
<td>Revised</td>
<td>09/11/2011</td>
<td>View</td>
</tr>
<tr>
<td>3</td>
<td>09/18/2011 - 09/24/2011</td>
<td>Not Submitted</td>
<td>09/18/2011</td>
<td>View</td>
</tr>
</table>
</div>
Question: While master.php runs "check" alerts twice.
I need to know why "check" alerts twice. How to solve this
<div region=center>
The scripts within the div runs twice. there is some bug with jeasy-ui. Help me how to solve that.
Technically included page alert shouldn't fire twice. it is only possible in case of you add sample.php file in php.ini as auto_append_file
i found same problem in easyui every version, when script is included in to panel/layout, the script will be run twice, the reason I think:
the page be loaded in browser ,the browser run the script of page once, when dom is loaded ,the easyui render style for the node in dom, the script in the node will be called second by easyui.
this problem isn't only in layout , but in panel, Maybe even for the every thing inherit from panel.
this problem may be in the easyui's root render method, so I can't find solved for this without src.
now i have to change easyui to another ui framework.
example for theis problem, the alert be called twice in browser:
</div>
<div region="south" class="south" border="false">
</div>
<div region="center" class="center" >
<script>
alert("here");
</script>
</div>