I have a demo website I have been trying out some capabilities on. What I am trying to do is only display the DIVs with green or blue based on which link you click into the page.
Here is the example main page i use right now, however it requires me to build 3 separate pages to display results; all.php, green.php, and blue.php. I would like to have only one page and hide or show DIVs as needed
<?php
// which page should be shown now
$page = (isset($_GET['page']) && $_GET['page'] != '') ? $_GET['page'] : 'home';
// only the pages listed here can be accessed
// any other pages will result in error
$allowedPages = array('home',
'all',
'blue',
'green',
)
;
if (!in_array($page, $allowedPages) || !file_exists($page . '.php')) {
$page = 'notfound';
}
// set prettier title
//$title .= ($page != 'home') ? ' - ' . ucfirst($page) : '';
// start output buffering so headers can be used in sub pages
ob_start();
?> <html>
<head>
<title>tester</title>
<link rel="stylesheet" href="nav.css" type="text/css" media="all" />
<script type="text/javascript" src="sucker.js"></script>
</head>
<body>
<ul id="nav">
<li>
All Color
</li>
<li>
<a href="index.php?page=green">Greew/a>
<ul>
<li>
Blue
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
<?php
include($page . '.php');
?>
</body>
</html>
This is the content of all.php
<div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue1.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 1</a></h3>
<p class="itemPrice">$5.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" />
</div>
<div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue2.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 2</a></h3>
<p class="itemPrice">$3.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
<div style="min-height: 245px;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue3.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 3</a></h3>
<p class="itemPrice">$4.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" alt= "Quick View" /></div>
<div style="min-height: 245px;" class="itemWrapper last">
<a class="itemLink" href="http://www.demo.com/products/green1.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Green Item 1</a></h3>
<p class="itemPrice">$1.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
<div style="min-height: 245px;" class="itemWrapper last">
<a class="itemLink" href="http://www.demo.com/products/green2.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Green Item 2</a></h3>
<p class="itemPrice">$2.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
</div>
Any help you can provide would be great!
jQuery/JavaScript is the way to go here if you want it to be seamless, but since you're saying this is just a sort of "test" site, I assume you are doing it more to experiment with PHP and have fun. So, what you need to do is put all three pages into one file, then wrap all three pages inside an if...then statement. Effectively:
<?php
if (!isset($_POST['page'])) {
//let the user make a choice
} else if ($_POST['page'] == 'green') {
?>
<!--HTML for the "green" pages goes here!-->
<?php
} else if ($_POST['page'] == 'blue') {
?>
<!--HTML for the "blue" pages goes here!-->
<?php
} else {
print("Invalid page selection!"); //Keep in mind, we want to "error check" to make sure the user actually selected a page
}
?>
If you had many more "pages", you should use a switch statement. If this were a really big application you could use an include() statement (but make sure you check that the file exists!) and just include multiple styled files inside your application.
You could load it all, and have them in different classes, and load them using jQuery. I made an example - check it out here.
$(document).ready(function() {
$(".green").hide();
$(".blue").hide();
Something like that - and then showing them onclick of the buttons.
Just write something like this into your body tag
<body class="
<?php
... if isset... if in_array
switch ($page)
{
case "green":
echo "body_green";
break;
case "blue":
echo "body_blue";
break;
default:
echo "";
}
?>
">
And in your CSS
.green, .blue {
display:none;
}
.body_green .green {
display: block;
}
...
Related
Is there any automatic way to change style of loaded page link? For example, here is my menu:
<a href="private.php?show=link1"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id1.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link1</div>
<div class="clear"></div>
</div></a>
<a href="private.php?show=link2"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id2.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link2</div>
<div class="clear"></div>
</div></a>
<a href="private.php?show=link3"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id3.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link3</div>
<div class="clear"></div>
</div></a>
<a href="private.php?show=link4"><div class="side_cat_btn_grn">
<div class="in_block side_btn_logo"><img src="img/ico/ico_id4.png" alt="" /></div>
<div class="in_block side_btn_txt txtsdw_green">link4</div>
<div class="clear"></div>
</div></a>
So question is, how to change loaded page private.php?show=link1 style without attaching style in each page?
Coz i have lots of pages and whole menu is included from php file. So style would be changed depending from loaded page like: private.php?show=link1 or private.php?show=link3 would it be on PHP or some other way?
Cheers!
In your private.php you can put something like :
switch ($_GET['show']) {
case 'link1':
echo "<style> .... </style>";
break;
case 'link2':
echo "<style> .... </style>";
break;
case 'link3':
echo "<style> .... </style>";
break;
case 'link4':
echo "<style> .... </style>";
break;
default:
echo "<style> .... </style>";
break;
}
Replace the ... with your CSS for each link.
you can use javascrpt to get value of link:
<script>
function loadcontent(link){
$('#mystyle').load('private.php?link='+link);
}
</script>
so your link must be like this:
<div id='mystyle'>
and then in your php file do something like this:
$link = $_GET['link'];
//echo the divs you like depending on value of $link
I want to create tabs that function like toggles, but instead only one toggle can be active at one time. The content of the tab also needs to be above the the tabs themselves. The problem is I am using a loop to generate the content as well as the tabs themselves.
I've got a nice javascript code right here that works perfectly fine. I understand this perfectly as well. The only problem is that it obviously doesn't disable other toggles when another one is clicked. Also having one "tab" / "toggle" always active. Code that could probably check the div id with a prefix of "post" and make all div id's with "post" to display:none besides the one that was clicked on. That would be perfect if that could be possible. Another way I could think of this is putting all the generated content into a container, and it simply disables all id's in the container besides the one that was clicked.
If this code can be modified to achieve that, it would be great. This is some very simple code that I understand very clearly. All I need is that it behaves more like tabs where only one can be active at once.
<script type="text/javascript">
function toggleMeMirror(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
</script>
HTML / PHP
Loop 1 - The Content
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div id="post-<?php the_ID(); ?>" style="display:none;">
<center><?php the_title(); ?><br /><br />
<?php echo get_post_meta(get_the_ID(), 'mirror_embed_code', true); ?>
<?php wprp(true);?>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
Loop 2 - The actual toggles / tabs
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div style="float: left; padding: 4px;">
<center>
<div class="post-<?php the_ID(); ?>" onclick="return toggleMeMirror('post-<?php the_ID(); ?>')" >
<div style="overflow: hidden; width: 150px; height: 100px;">
<div style="background: rgb(0, 0, 0) transparent; /* fallback color */ background: rgba(0, 0, 0, 0.8); color: white; padding: 2px;">
<center>
<?php echo get_post_meta(get_the_ID(), 'video_provider', true);
echo ' Mirror';?>
</center>
</div>
<img src="<?php echo $thumbnail_src; ?>" width="150px"/>
</div>
</div>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
This is also tagged jquery so I'll just recommend that you include the jquery library and include:
$('.someclass').hide();
as the first line in the toggleMeMirror function.
Then, make sure that each of your looped content divs exist in the class "someclass".
like:
foreach($this as $that) {
print "<div class='someclass'>$that</div>";
}
then
function toggleMeMirror(a){
// hide all
$('.someclass').hide();
// show one
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
You can try something like this DEMO
HTML Code
<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br>
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br>
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br>
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>
jQuery
$("#one").click(function() {
$("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >");
});
$("#two").click(function() {
$("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >");
});
$("#three").click(function() {
$("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >");
});
I've created a simple while loop that produces random images I have in my folder. I want to be able to drag these images anywhere on my webpage. I used the draggable function for jQuery but it does not work. My question is does this even work? Here is the code simplified.
<script>
$(document).ready(function(){
$(function()
{
$("#draggable").draggable();
});
});
</script>
<?php
$num_dresses = dress_count ();
$i = 0;
while ($i < 5)
{
$rand_id = rand(1, $num_dresses);
$dress_feed_data = clothing_data($rand_id, 'file_name');
$new_file_name = html_entity_decode($dress_feed_data['file_name']);
if (file_exists('fashion_images/' . $new_file_name))
{
?>
<div id="draggable" class="ui-widget-content">
<img src=" fashion_images/<?php echo $new_file_name;?> " width="70" height="70"/>
</div>
<?php }
$i++;
}
?>
Here is the code viewed as the page source. I cut out anything that wasn't related to the problem.
<?xml version="1.0"?>
<html>
<head>
<script>
$(document).ready(function(){
$(function()
{
$(".ui-widget-content").draggable();
});
});
</script>
<style>
#draggable { width: 50px; height: 50px; padding: 0.5em; }
</style>
</head>
<body>
<div class="ui-widget-content">
<img src=" fashion_images/blouse_belk's_0 " width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src=" fashion_images/red|nail|polish_opi_0 " width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src=" fashion_images/brown|pants_community|store_0 " width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src=" fashion_images/jeans_larry_0 " width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src=" fashion_images/pepsi|tshirt_target_1 " width="70" height="70"/>
</div>
</body>
</html>
typically it not the best idea to have several elements on the page with the same id
try doing something like this maybe it helps
<div class="ui-widget-content">
and get the element by class
$(".ui-widget-content").draggable();
Your source code is not including the jquery plugin. Try to put this before de </head> tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
You should include jquery and jquery ui.
A code similar to yours works for me
Here i have done complete bins for above issue.
DEMO http://codebins.com/bin/4ldqp9u
To solve above draggable problem, you have to first include latest jquery.js and jquery-ui.js (jquery plugin) java script files in header and apply draggable function on all selectors (elements) which has same class say "ui-widget-content" because we should not set same id on more than one element if this will happen then jQuery couldn't work because it will not identify correct element and apply function on only first element.
HTML:
<div class="ui-widget-content">
<img src="http://www3.pictures.fp.zimbio.com/Paris+Fashion+Week+Chanel+Spring+Summer+2009+0IojzkQwqGlt.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src="http://www.fashion-doll-guide.com/images/2010-hallmark-barbie-christmas-ornaments-3.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src="http://www.fashion-doll-guide.com/images/Holiday-Barbie-Dolls.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src="http://www1.pictures.stylebistro.com/gi/KW+Kanye+West+Runway+Paris+Fashion+Week+Spring+rq5fOR7SZfjt.jpg" width="70" height="70"/>
</div>
<div class="ui-widget-content">
<img src="http://www.theuniuni.com/media/catalog/product/cache/1/small_image/70x70/9df78eab33525d08d6e5fb8d27136e95/f/a/fashion-waterproof-platform-mature-horse-fur-01.jpg" width="70" height="70"/>
</div>
CSS:
.ui-widget-content{
display:inline-block;
cursor:move;
}
.ui-widget-content img{
border:1px solid #112266;
}
jQuery:
$(function() {
$(".ui-widget-content").draggable();
});
I have the code below to split my for each statement into two separate divs:
<?php
$previousLetter = false;
?>
<?php
$i=1; // have a counter variable
foreach($this->clubs as $clubs) : ?>
<?php
$firstLetter = substr($clubs->club_name, 0, 1);
if ($firstLetter != $previousLetter) {
if($i==1){
echo "<div class="left_class">"; // open left div
}
?>
<h3 id="club-link-header"><u><?php echo $firstLetter; ?></u></h3>
<?php } ?>
<a id="club-link" href="<?php echo $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $clubs->id));?>"><br />
<?php echo $this->escape($clubs->club_name);?></a>
<?php $previousLetter = $firstLetter; ?>
<?php
if($i==25){
echo "</div>"; //close left div
echo "<div class="right_class">"; // open right div
}
if($i==50){
echo "</div>"; //close right div
}
$i++; // increment the counter variable for each loop
endforeach;
?>
The HTML:
<body>
<div id="top">
<a id="admin-link" href="/MN/public/index.php/admin/index/id/1"></a>
<div id="logged-in-as">
Hello! ric89. Logout </div>
</div>
<div id="header">
<div id="header-wrapper">
<div id="social">
<a id="fb" href="#"><img src="/MN/public/images/fb.png" /></a>
<a id="twitter" href="#"><img src="/MN/public/images/twitter.png" /></a>
</div>
<div id="nav">
<div id="nav-left">
Home
</div>
<div id="nav-middle">
<a id="clubs-link" href="/MN/public/index.php/clubs/index/id/1">Clubs</a>
</div>
<div id="nav-right">
<a id="admin-link" href="/MN/public/index.php/admin/index/id/1">Admin</a>
</div>
</div>
<div id="logo">
</div>
</div>
</div>
<div id="content">
<h1>Clubs</h1>
//database content is echo'd here, 50 items like this:
<h3 id="club-link-header"><u>5</u></h3>
<a id="club-link" href="/MN/public/index.php/club-description/index/id/1/club_id/1"><br />
5th Avenue</a>
</div>
<div id="footer">
<p id="footer-text">created & designed by Richard Knight-Gregson</p>
</div>
</body>
The CSS:
/*Content styles */
.clubs-left {
width: 450px;
}
.clubs-right {
float: right;
margin-left: 450px;
position: absolute;
width: 450px;
}
.right_class {
float: right;
width: 450px;
}
.left_class {
position: absolute;
width: 450px;
}
.clear {
clear: both;
}
Here is an image of the problem -> http://imageshack.us/photo/my-images/84/screenshot20120426at211.png/ The footer should be 100% width.
The issue is I can't float the div right without breaking the layout as the right div needs to be on top of the left in the code but doing so will break the PHP.
Any suggestions?
Thanks
Since the problem that you are describing seams to be purely cosmetic, I believe that you need to clear the float to allow the document to continue its normal rendering:
After your <div class="right_class">...</div>:
HTML
<div class="clear"></div>
CSS
.clear {clear: both;}
wouldn't something like this be more efficient?
Break up your list by alphabet to start...
var glossary=array();
var $half=(int)count($this=>clubs);
var $count=0;
foreach ($this->clubs as $clubs){
$glossary[substr($clubs->club_name, 0, 1)][] = $clubs;
}
# Start a definition list. (http://www.w3schools.com/tags/tag_dl.asp)
echo'<dl>';
foreach ($glossary as $letter => $clubs){
$count++;
$class=($count>=$half)?'float_left':'float_right';
# list all the clbs broken down by letter
echo"<dt class='$class'>$letter</dt>";
foreach ($clubs as $club)
{
echo"<dd class='$class'>
<a id='club-link' href='" . $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $club->id)) . "'>
" . $this->escape($clubs->club_name) .
"</a>
</dd>";
}
}
echo '</dl>';
and the css:
dl{
width:100%;
}
.float_left{
width:49%;
float:left;
clear:left;
}
.float_right{
width:49%;
float:right;
clear:right;
}
this way after you hit the halfway point in clubs, the dt and dd elements stack on the right side, and the list will automatically balance, no matter how many clubs you have.
It turns out the footer was inside the content div and I hadn't closed the content div properly one more extra before the footer starts was all it needed! Sorry to waste your time..
I've added information to some boxes, which are alligned with the 'float' attribute.
The content of all those boxes together is too big to fit in the webpage, so I want to put those boxes on different pages, and to let the user choose which page he wants to view.
E.g: Choose page: 1 2 3... (last page)
The contents of these 'pages' must be in divisions.
For reference, see my css code:
.clear {
clear: both;
}
#over-ons .imagebox,
#over-ons .contentbox
{
background-color: #C4C4A6;
float: left;
margin: 0 10px 40px 0;
padding: 10px;
border: 2px solid black;
}
#over-ons .imagebox {
width: 100px;
text-align: center;
}
#over-ons .contentbox {
width: 200px;
}
Also, see my HTML code of the 'boxes' I mentioned:
<div class="imagebox"><img src="media/images/overons/bas.png" /></div>
<div class="contentbox">
Function: blablablabla<br />
Name: blablabla<br />
City: Breda<br />
Education: HBO Informatica<br />
</div>
<div class="clear"></div>
How do I create the ability to let the user view 3 different boxes, depending on the page number he wants to see?
Edit:
My current solution looks like this, only nothing happens when I click 'page 2':
<?php
//Vraag pagina op
$page = 1;
if (isset($_POST['page']) && is_numeric($_POST['page']))
$page = $_POST['page'];
?>
<? if ($page == 1) { ?>
<div class="imagebox"><img src="media/images/overons/pieter.png" /></div>
<div class="contentbox">
Functie: Bedrijfsleider<br />
Naam: Pieter<br />
Stad: Deurne<br />
Opleiding: HBO Informatica<br />
</div>
<div class="clear"></div>
<div class="imagebox"><img src="media/images/overons/patrick.png" /></div>
<div class="contentbox">
Functie: Verkoper<br />
Naam: Patrick<br />
Stad: Roosendaal<br />
Opleiding: HBO Bedrijfskundige Informatica<br />
</div>
<div class="clear"></div>
<div class="imagebox"><img src="media/images/overons/rick.png" /></div>
<div class="contentbox">
Functie: Ontwikkelaar<br />
Naam: Rick Gommers<br />
Stad: Oosterhout<br />
Opleiding: HBO Informatica<br />
</div>
<div class="clear"></div>
<? }
else if ($page == 2) { ?>
<div class="imagebox"><img src="media/images/overons/bas.png" /></div>
<div class="contentbox">
Functie: Salesmanager<br />
Naam: Bas<br />
Stad: Breda<br />
Opleiding: HBO Informatica<br />
</div>
<div class="clear"></div>
<div class="imagebox"><img src="media/images/overons/robbert.png" /></div>
<div class="contentbox">
Functie: Administrateur<br />
Naam: Robbert Tuerlings<br />
Stad: Goirle<br />
Opleiding: HBO Bedrijfskundige Informatica<br />
</div>
<div class="clear"></div>
<div class="imagebox"><img src="media/images/overons/timothee.png" /></div>
<div class="contentbox">
Functie: Implementatie Technicus<br />
Naam: Timothee<br />
Stad: Breda<br />
Opleiding: HBO Informatica<br />
</div>
<div class="clear"></div>
<? }
else { ?>
<div class="contentbox">
You didn't select a proper page!
</div>
<? } ?>
Imagine your current page is called index.php. So first of all you want to create the links to your pages in your HTML as the following:
Page 1
Page 2
Page 3
And for a clear code you can simply put the content of your "boxes" in an array and then output the corresponding entry for the page:
<?php
$content = array{ "Page 1 data", "Page 2 data", "Page 3 data" };
//Fetch the page
$page = 1;
if (isset($_GET['page']) && is_numeric($_GET['page']))
$page = $_GET['page'];
?>
<div class="contentbox">
<? echo $content[($page - 1)]; ?>
</div>
Another solution (less easy to read and to maintain, but easier if your content is really complex) you can simply fetch the page number and in a regular if else display the box they requested.
<?php
//Fetch the page
$page = 1;
if (isset($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] > 0)
$page = $_GET['page'];
?>
<? if ($page == 1) { ?>
<div class="contentbox">
Your first box for page 1
</div>
<? }
else if ($page == 2) { ?>
<div class="contentbox">
Your second box for page 2
</div>
<? }
else if ($page == 3) { ?>
<div class="contentbox">
Your third box for page 3
</div>
<? }
else { ?>
<div class="contentbox">
You didn't select a proper page!
</div>
<? } ?>
But ye, there are 1001 ways to do this. It really depends on your needs and the way you want to do it. The more you hardcode, the uglier the code usually gets.. ;-)
One way is to have all divisions on the page and make only the one visible which user has clicked to...To do so you can make all 3 divs and by default make them hidden and by javascript trigget action...
Another way is by PHP's output buffering to accomplish this:
ob_start(); // begin collecting output
include 'myfile.php';
$result = ob_get_clean(); // retrieve output from myfile.php, stop buffering
$result will then contain the text..
The first method is preety easy one most people use it..But as you specificaly said you have created all separate pages for all 3 div's I had to add the php method..