I have this code as an example:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
</head>
<body>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
</body>
</html>
On a different page, I want to have a link that will show Div #2 when the user loads the page by clicking that external link. I would presume that such thing would be possible by some type of adjustment to the URL? For instance: domain.com/page.php?=showdiv2
Any assistance is appreciate, my knowledge of coding is limited (especially with PHP) so please be detailed if you choose to help.
I would code it with PHP, something like this:
page.php?id=idofdiv
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});
</script>
</head>
<body>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
What I have done is :
$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});
When PHP is parsed (which is server side) it will send the id given in the url ($_GET['id']) to parse within your jQuery code. This code will excecute when the document is ready.
if $_GET['id'] is empty, or nonexistence, then nothing will happen (there is no div to show).
As always there are many solutions, however we have a similar requirement in an application where we want one page to send a message to another to be displayed to the user. For example, after updating a setting return to the main page with the message "Setting Updated" at the top. Our solution was to send the message in the url, and then have a javascript that runs on every page load looking for a message in the url. If it's there it's shown to the user, if it's not there, nothing happens.
In our common pageLoad routine (javascript on every page) we do
if (jQuery.query.get('fadeMessage'))
{
FadeMessage(jQuery.query.get('fadeMessage'));
}
And then FadeMessage is defined as:
function FadeMessage(message) {
jQuery('#fadeMessage').html(message).animate({ "top": "0" }, 1000).delay(2000).animate({ "top": "-80px" }, 1000);
}
The "fadeMessage" div is on every page as:
<div id="fadeMessage">
</div>
Although as I'm typing this I'm thinking we could just inject that div when it's needed. Hmmm... :-)
There are a number of ways to accomplish what you want to do here. I will explain how you can do it with $_GET.
You can control this with a $_GET variable (at the end of the URL, just add ?varName=value where varName is the name of a variable (this is arbitrary), and value is the value you want to assign it.
Then in your PHP code you can access this variable by a) checking if it exists and b) performing logic based on its value:
<?php
$divToShow = isset($_GET['div']) ? $_GET['div'] : "";
//logic here
?>
So for example, if you want <div id="div_2"> to be displayed, you could plug this in to jQuery by writing:
<script language="javascript" type="text/javascript">
$("div#div_<?= $divToShow ?>").show();
$("div:not(#div_<?= $divToShow ?>)").hide();
</script>
OR you could simply force PHP to only print out div # 2:
<?php
// set $divId to a value
if ($divId == $divToShow) : ?>
<div id="<?= $divId ?>">
<!-- content here -->
</div>
<?php endif; ?>
There are two steps to do: At first we need to know how to use parameters in our domain and finally the contents need to be switched.
1) You can add parameters to the called files as following:
http://server/path/file?key=value
For this examples let's use the key page. So these would be the urls you'd need to link:
http://server/path/file?page=div-1
http://server/path/file?page=div-2
2) Split your code into one php file containing all that's in there right now and two ones, called whatever you like, e.g. div-1.php and div-2.php . Into the latter ones you copy the specific div-1 and div-2 contents.
3) Finally open your main php file and remove div-1 and div-2. They should both be in the other files now. And enter the following php code:
<?php
if (isset($_REQUEST['page']) === false || in_array($_REQUEST['page'], array('div-1', 'div-2')) === false) {
$_REQUEST['page'] = 'div-1';
}
include $_REQUEST['page'] . '.php';
?>
That urls will call the php file, that's pushing its content to the browser and while pushing it's executing the script we put in. The script verifies if the url parameter page is set, checks if it is valid and pushes the second file just where we put the script before.
The latter check is highly required for security reasons (see below)!
Note: The following code line is used to display the default page, e.g. index or start. It can be changed easily.
$_REQUEST['page'] = 'div-1';
Note: We need to care about security and therefore do not allow pages, that do not exist. In case we don't do so, various php scripts on your server could be executed.
Just change, edit or add additional elements to the array inside the if statement above:
array('div-1', 'div-2')
You could do this using Javascript/jQuery only by checking for the hash part of the URL on page load:
http://mydomain.com/some/path#showcontainer1
HTML
<div class="container_one" style="display:none;">Content</div>
<div class="container_two" style="display:none;">Other Content</div>
JS
$(function(){
switch( window.location.hash ){
case '#showcontainer1': //if hash is #showcontainer1
$('.container_one').fadeIn(); //fadein the container with some class
break;
default:
$('.container_two').fadeIn() //else fade container with other class
break;
}
});
Related
The display: inline-block technique to make div elements appear next to each other does not work with my dynamically-generated content cards.
My content cards are a modified version of a tutorial found on the w3schools website, which can be found here:
https://www.w3schools.com/howto/howto_css_cards.asp
Goal
I'm in the process of creating a relatively simple search engine for my website based on a query that checks a MySQL database for any potential matches. The results are returned in the form of a content card. If the system finds 3 matches, 3 content cards will be generated in the results. The code is being controlled by a for-loop (PHP) that generates a content card for each match found.
Problem
The corresponding content cards are generated for each match, however, they appear on separate lines below each other (vertically). I attempted to use the display: inline-block technique to force them next to each other with no results. I suspect the reason why is because the code for each content card must already be there for the effect to take place. If not, CSS & HTML assume that there was only ever one content card and doesn't align them properly.
HTML/CSS/PHP Code for Content Cards
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
width: 30%;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 20%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
.shrink {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
<!-- Container -->
<div class="container" style="background-color: white; width:89%; padding-top: 400px;">
<!-- Generates 1 Content Card for each Match -->
<?php
for($x = 0; $x < count($title); $x++) {
?>
<!-- Content Card Design & Data -->
<div class="shrink">
<div class="card" style="background-color: white; border-radius: 2%; display: inline-block;">
<a href="#" data-toggle="modal" data-target="#ModalCarousel<?php echo " $x ";?>" style="text-decoration: none; color: black;">
<img src="listingimages/<?php echo "$firstListingImage[$x]";?>" style="width:100%; border-top-left-radius: 2%; border-top-right-radius: 2%;">
<h4><?php echo "$title[$x]";?></h4>
<hr>
<p><span class = "glyphicon glyphicon-cutlery"></span> <?php echo "$foodType[$x]";?></p>
<hr>
<p><span class = "glyphicon glyphicon-map-marker"></span> <?php echo "$city[$x]";?>, <?php echo "$state[$x]";?></p>
<hr>
<p style="font-size: 30px;"><b>$<?php echo "$price[$x]";?></b><span style="font-size: 15px;"> USD</span></p>
</a>
</div>
</div>
<?php } ?>
</div>
It is very easy just you need to add in the class .card {float:left} then it will work as you want
With inline-block for it to work you must also set a fixed width on .shrink, which is the repeated holder, and maybe vertical-align
The preferred way nowadays is by setting display:flex; flex-wrap:wrap on the container which is made just for this kind of box display. Also set width on .shrink with this solution.
Your .cards are nicely displayed as inline-blocks, but they're each wrapped inside a .shrink which are full blocks. That's why they're not lining up as you'd expect.
How would I be able to load all my login/profile.php files into one specific div without affecting or reloading the rest of my website? I have thought of using $_GET variables to keep the parent url the same and I have used this same tactic for my navigation menu where all my pages load in my #back_drop div.
Below I put together a very basic version of what my site looks like and as you can see the #side_panel is where I would like all my login/profile files to load into while the nav, content, and footer is unaffected by what the #side_panel does. I want to be able to login, logout, get errors, reset password, etc inside this div without it reloading the main portion of my site.
I have an index.php file which is my main index with includes for my header, aside, content, and footer and then I have an entire folder for my php files relating to my login form and other files that will load into my main content page. I didn't want to separate each include so I have them below with comments before each include noting that they are separate so you can see what I am working with.
I am currently loading my login files using an iframe because it is the simplest way to get what I am looking for but have found it very irritating at times especially when I logout and pages requiring to be logged in are still present unless the page is refreshed which seems to be a major security issue.
I have tried to use an include function into my #side_panel but if I attempt to login in, it either won't connect or will end up logging in through the parent url depending on how I edit my login.php file. I am thinking of using $_GET variables but am not sure if that would be a security issue if the variables are in the url but cannot think of any other way
index.php <-- My main index page
<?php
$page = $_GET['page'];
if (!$page) {
$page = 'Home';
}
include('includes/header.php');
echo "<div id='back_drop'><div id='content'>";
include('php/'.strtolower($page).'.php');
echo "</div></div>";
include('includes/footer.php');
?>
aside.php <-- where my login/profile files are included from
<iframe src="php/index.php" height="500px" width="100%" style="position: relative; border:none;"></iframe>
$(document).ready(function(){
$("#show_login").click(function(){
$("#side_panel").toggle("slide");
$("#side_panel").toggleClass("slide");
$(this).find('img').toggle();
if ($("#side_panel").hasClass("slide")) {
$("#back_drop").animate({'padding-left': '0'}, 300);
} else {
$("#back_drop").animate({'padding-left': '230px'}, 300);
}
});
});
* {
margin: 0;
padding: 0;
}
a {
outline: 0;
}
body {
width: 100%;
-webkit-box-pack: center;
background-color: #CCC;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
header, nav, section, aside, footer, article {
display: block;
}
#big_wrapper {
text-align: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
position: fixed;
width: 100%;
text-align: left;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;
border-bottom: 2px solid #262626;
border-radius: 3px 3px 0 0;
background-color: #404040;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), 2px 0 2px 2px rgba(0, 0, 0, 0.19);
z-index: 9999;
}
#back_drop {
background-color: #CCC;
padding-top: 10px;
padding-left: 230px;
max-width: 100%;
}
#content {
border: 5px solid red;
height: 500px;
}
#show_login {
float: left;
width: 24px;
padding-top: 12px;
padding-left: 5px;
height: auto;
cursor: pointer;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#show_login:active {
width: 23px;
padding-top: 13px;
padding-right: 1px;
}
#side_panel {
position: fixed;
background-color: #a19b9b;
color: #000;
margin-top: 54.491px;
width: 230px;
height: 100%;
word-wrap: break-word;
z-index: 9999;
transform: translateX(0);
}
.slide {
transform: translateX(0);
}
#main_section {
clear: right;
text-align: center;
margin-right: auto;
}
#bottom_footer {
clear: both;
text-align: center;
padding: 20px;
background-color: #404040;
}
<!-- header.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='big_wrapper'>
<header id='top_header'>
<nav id="navigation">
<div id="show_login">
<button>Show</button>
</div>
<div id="main_menu">
<!--Navigation header menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li id='menu_list'><a href='index.php?page=$row'&login='$login'";
if ($row==$page) {
echo "class='active'";
}
echo ">$row</a>";
}
?>-->
</div>
</nav>
</header>
</div>
<div id='side_panel'>
<div id='login_contain'>
<!-- aside.php -->
#side_panel<br>
Where my login/profile pages load in
</div>
</div
<!-- This is what is actually in my code. Commented to show in snippet
<?php
echo "<div id='side_panel'><div id='login_contain'>";
include('includes/aside.php');
echo "</div></div>";
?>
-->
<div id='back_drop'>
<div id='content'>
#back_drop<br>
All my navigation links load only in this div by using href='index.php?page=(($_GET['page']))' and if I could do the same thing maybe for my #side_panel to include all my login/profile pages
</div>
</div>
<!--footer.php -->
<div class="footer_nav">
<!--Navigation footer menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li><a href='index.php?page=$row'>$row</a></li>\n";
}
?>
-->
</div>
<footer id='bottom_footer'>
</footer>
</body>
</html>
Couple things here:
You will want to use AJAX for this, an iFrame is not suitable for your needs
Not sure how much of your dynamic page system is represented in your sample script but you should check on your page call on the $_GET, that method can be dangerous if someone tests your $_GET and includes a page that shouldn't.
/index.php
<?php
# Create an allow array (or have these in a database)
$public = array(
'home',
'about'
'contact'
);
# Check that it's not empty. If not empty, make sure it's allowed. Use home as default
$page = (!empty($_GET['page']) && in_array(strtolower($_GET['page']), $public))? $_GET['page'] : 'home';
# Include normally
include('includes/header.php') ?>
<div id='back_drop'>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<div id='content'>
<?php include('php/'.$page.'.php') ?>
</div>
</div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
// On clicking the menu link
$('li > a').on('click',function(e){
// Stop the link from reloading page
e.preventDefault();
// Create ajax
$.ajax({
// Send request as GET
'type': 'get',
// Send to the index page
'url': '/index.php',
// equivalent of ?page={pagename}
'data': {
'page': $(this).attr('href')
},
// When request comes back, find the content and place just the content
// into this page's content
success: function(response) {
// "response" is what is coming back from the ajax all
// Find the content from the returned html
var getContent = $(response).find('#content').html();
// Place it into this page's content id
$('#content').html(getContent);
}
});
});
});
</script>
<?php include('includes/footer.php') ?>
I am retrieving a list of products from a database and want to display them all in a rows of 3 columns not using a table though. So I want 3 divs to be displayed side by side. then below.
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250"></p>
</div>
<div class="producttitle">
<?php echo $row['title'] ?>
</div>
<div class="productprice">
<?php echo "<div id='productrrp'> €" . $row['rrp'] . "</div>";
if(is_null($offeringprice)) {
echo "Not Available";
} else {
echo "€" . $offeringprice['price'];
}
?>
</div>
That is my code but it is just displaying the divs below each other. Is it possible so it fills up the row before starting another one?
Try using display: inline-block; on the divs's css.
A <div> is a block-level element. Block-level elements, like <h1>, <p>, <table> etc. will (by default) span the entire width of their parent elements, so they can't be positioned next to eachother.
You can change this behavior, however, using the following CSS rule:
div.column {
display: inline-block;
}
This will render the <div>s as inline blocks.
Now you can give it a certain width so that three divs fit into a row. Do note that, when you leave whitespace between two <div> elements, there will be some visual whitespace. If you give all div's a width of 33.333333333%, the extra whitespace will cause their combined width to exceed 100%, so the third div will move to the next line.
You can simply prevent this by making sure there is no whitespace between the HTML elements:
<div class="column">
<p>Some contents here</p>
</div><div class="column">
<p>As you can see, no whitespace between the two div elements.</p>
</div>
Of course you can then use margins to control whitespace manually:
div.column {
display: inline-block;
width: 30%;
margin-right: 3.33333333%;
margin-bottom: 10px;
}
You might wanna take a look at this article: Using inline-block to Display a Product Grid View (it uses <li>s instead of <div>s, but the idea is essentially the same)
Here's a FIDDLE
<div class="product-wrapper">
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250">
</div>
<div class="producttitle">
Product Title
</div>
<div class="productprice">
<span>$100</span>
</div>
</div>
...more products...
</div>
.product-wrapper {
width: 960px;
padding: 10px;
}
.productindividualdisplay {
background: #fff;
display: inline-block;
width: 260px;
margin: 5px 5px 15px 5px;
padding: 10px;
text-align: center;
border: 1px solid #999;
box-shadow: 0 5px 6px -3px #333;
}
.productphoto {
width: 95%;
margin: 10px auto;
border-bottom: 1px solid #999;
}
.producttitle a {
font-size: 18px;
text-decoration: none;
}
.productprice {
font-size: 18px;
font-weight: 600;
}
I have two DIV's that are side by side. One div is my side bar (Left Of Screen), the other div is my main content (Right Of Screen).
What I'm looking for:
What I want is one visable scroll bar to the far right of the screen. I would like that scrol bar to scroll both left and right div's.
My Problem:
Currently my left sidebar has a tree menu. When I expand my tree menu, I have no scroll bar to scroll down through the side bar content that was expanded. I'm able to add a scroll bar to my side bar, but that looks very ugly. I just want 1 scroll bar on the far right that handles both div's.
Can someone help me on this one?
My index.php file
<?php
include 'sidebar.php';
include 'main_body.php';
?>
My sidebar.php
<?php
echo '<link rel="stylesheet" href="css/style.css" type="text/css">';
echo '<script type="text/javascript" src="js/jquery1_3_2.js"></script>';
include 'function/functions.php';
// Establish a connection to our database
db_connect();
echo'
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
';
echo'<div class="sidebar">';
// Side Bar Start
echo '
<img src="images/hdc_logo.png">
<br>
<br>
<p class="heading"><strong>CUSTOMER</strong></p>
<div class="content">';
//Display all customers from database
query_all_customers();
echo '</div>
<p class="heading"><strong>CABINET</strong></p>
<div class="content">';
// Display all cabinets from database
query_all_cabinets();
echo'</div>
</div>';
?>
My main content area
<?php
ini_set('display_errors', 1);
echo '<div class="main">';
echo'
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here';
?>
My .css file
.sidebar {
width:200px;
position:fixed;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
/*overflow-y: scroll;*/
}
.main {
width: auto;
margin-left: 200px;
}
.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#000000;
}
.content {
padding: 5px 10px;
}
#submit {
width:185px;
background-color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family:'Oswald';
font-size: 16px;
text-decoration: none;
cursor: pointer;
border:none;
}
#submit:hover {
border: none;
background:#FF9933;
box-shadow: 0px 0px 1px #777;
}
tr:nth-of-type(odd) {
background-color:#D4D4D4;
}
.container0 {
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
padding-bottom: 30px;
background-color:black;
}
JSFiddle
in your css, set position of the sidebar to relative and set float to left, like this:
.sidebar {
width:200px;
position:relative;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
float:left
}
the updated version of your jsfiddle to show you that it works :) http://jsfiddle.net/BrJDE/3/
because you dont want to have the scrollbar at the side of the page, i made some more examples for you. tell me if they are what you want, if its not, i would love to help you again.
both of these examples use 2 additional divs compared to the content you provided. these will make that you can position the scrollbar inside those div's instead of at the side of the browser. if you need me to explain the changes i made, just tell me.
scrollbar inside the page:
http://jsfiddle.net/BrJDE/6/
scrollbar inside the page at the left side of the scrolling div:
http://jsfiddle.net/BrJDE/5/
I have an admin page (admin.php) that I am setting up right now.
When the page is accessed initially, a login box comes up correctly where the user can hit a "Sign In" button.
When they hit the "Sign In" button, the login form gets submitted to a PHP page with this code (I don't have any authenticating going on right now - just starting to get this setup):
<?php
session_start();
$_SESSION['login_success'] = true;
header('Location:http://localhost/mbc/admin');
exit();
?>
Then, I'm expecting that the admin.php page will display the admin form but the page just shows up blank after the redirect. Below is the applicable parts of the admin.php page. Can any of you see what I'm doing wrong here such that the admin form is not displaying after the authentication is done?
<html>
<head>
<title>Welcome Home!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<style>
/* Mask for background, by default is not display */
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
/* You can customize to your needs */
.login-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
img.btn_close { Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border:none;
}
form.signin .textbox label {
display:block;
padding-bottom:7px;
}
form.signin .textbox span {
display:block;
}
form.signin p, form.signin span {
color:#999;
font-size:11px;
line-height:18px;
}
form.signin .textbox input {
background:#666666;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
color:#fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font:13px Arial, Helvetica, sans-serif;
padding:6px 6px 4px;
width:200px;
}
form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
.button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color:#000;
border-width:1px;
border-radius:4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color:#333;
cursor:pointer;
display:inline-block;
padding:6px 6px 4px;
margin-top:10px;
font:12px;
width:214px;
}
.button:hover { background:#ddd; }
</style>
</head>
<body id="page1">
<?php
session_start();
if (isset($_SESSION['login_success'])) {
?>
<!-- Some HTML content should show up here but it isn't... -->
<?php } else { ?>
<!-- Login Dialog -->
<div id="login-box" class="login-popup">
Cancel
<form method="post" class="signin" action="admin_process_login.php">
<fieldset class="textbox">
<label class="username">
<span>Username</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="login" type="submit">Sign in</button>
</fieldset>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
//Getting the variable's value from a link
var loginBox = document.getElementById('login-box');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
// When clicking on the button close or the mask layer the popup closed
$('button.login').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
<?php } ?>
</body>
</html>
EDIT 2012-02-25 16:54EST
For some strange reason, this (and only this as far as I've tested so far) series of events makes the admin form come up correctly...
* Go to admin.php and click on "Sign In" button
* Go to "test" php page in browser (http://localhost/mbc/test)
Code for the test page:
<html>
<head>
<title>Testing</title>
</head>
<body>
<?php
session_start();
if (isset($_SESSION['login_success'])) { ?>
<H1>Login was a success</H1>
<?php } else { ?>
<H1>Login was a failure - next time it should work</H1>
<?php
$_SESSION['login_success'] = true;
}
?>
</body>
</html>
Go to admin page (http://localhost/mbc/admin) and now the admin form comes up fine.
The problem was actually in the jQuery button click code, specifically the "return false" portion:
// When clicking on the button close or the mask layer the popup closed
$('button.login').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
When I removed that code, the "$_SESSION['login_success'] = true;" occurred fine and the admin form portion came back successfully.
Turns out "return false" has some nasty side effects and should be used carefully. See
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ for more information on using "return false" correctly.
I don't have access to test it right now, but I think your problem is that it should be:
header('Location: http://localhost/mbc/admin');
Reference: http://php.net/manual/en/function.header.php
Both of the references show that a space after the ":" is needed before the URI.
There is nothing wrong with your code. You are simply expecting start_session() not to work and $_SESSION['login_success'] to be unset. I suggest you either use a php-framework or read a guide about sessions.
here, change like this and the form pops up:
<?php
//session_start(); // if you uncomment print_r will give you 1
if (isset($_SESSION['login_success'])) {
echo '<pre>';
print_r($_SESSION['login_success']);
?>
<!-- Some HTML content should show up here but it isn't... -->
empty statement</pre>