I have a template that picks wordpress post variables from the db and loads them on a html template i designed.
what i want is for the user to select articles they like then submit the selection to a template which will intern be a newsletter.
so far i have the code that pics the data from the db and arranges them in my template . the code is as below:
<?php /*
Template Name: News Selector Template
*/
//Pull the data
$posts = $wpdb->get_results
("
SELECT
p1.*,
wm2.meta_value
FROM
mp_posts p1
LEFT JOIN
mp_postmeta wm1
ON (
wm1.post_id = p1.id
AND wm1.meta_value IS NOT NULL
AND wm1.meta_key = '_thumbnail_id'
)
LEFT JOIN
mp_postmeta wm2
ON (
wm1.meta_value = wm2.post_id
AND wm2.meta_key = '_wp_attached_file'
AND wm2.meta_value IS NOT NULL
)
WHERE
p1.post_status='publish'
AND p1.post_type='post'
ORDER BY
p1.post_date DESC LIMIT 0,30
");
?>
<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFF;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #000;
color:#FFF
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>
<body>
<div class="container">
<div class="header"><img src="/example/images/logo_main_300x100px.png" alt="logo" name="example_logo" width="300" height="100" id="logo" style="background-color: #FFF; display:block;" />
<!-- end .header --></div>
<div class="content">
<h1>example Top 30 Articles</h1>
<p>Select the articles you want to add to the newsletter</p>
<table width="960" border="2" summary="A collection of all the articles">
<caption>
Article Selection
</caption>
<form action="http://samples.net/brands/design/newsletter/" method="post">
<tr>
<th scope="col">Select</th>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Cover</th>
<th scope="col">link</th>
</tr>
<?php
if (have_posts($posts)) {
// var_dump($posts); die();
foreach($posts as $post) {
?>
<tr>
<th scope="row"><input type="checkbox" name="article" value="<?php echo $post->ID; ?>" /></th>
<td><?php echo $post->post_title; ?></td>
<td><?php echo $post->post_excerpt; ?></td>
<td><?php echo '<img src="https:sample.net/wp-content/uploads/'.$post->meta_value.'" width="100px" alt="" />'?></td>
<td><?php echo $post->guid; ?></td>
</tr>
<?php
}
}
?>
</table>
<div></div>
<p><tr>
<td>
<div> <input name="Generate" type="submit" id="submitt" target="_blank" /></div>
</form>
</td>
</tr></p>
<p> </p>
<!-- end .content --></div>
<div class="footer">
<p>samples Management System</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
What i want to know is how i can submit an array containing the data items(post_title, post_excerpt, meta_value, guid) in the loop.
Use a hidden input, and implode the array into the input
<input type="hidden" name="metas" value="<?php echo implode(',', $posts);?>">
Then on the backend, you can use explode to retrieve the values:
$posts = explode(',', $_POST['metas']);
Related
How can i be able to search and retrieve data from a mysql table fields. When the records are found then the user is notified the record was found.
I have created my html form with action and php script to fetch data from the database.
When i click on search it only displays no records found.
I want to fetch data from 3 fields in the table.
my html form below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Conduct Database Search</title>
<style type="text/css">
body,
td,
th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<p><img src="images/logonew.png" width="150" height="73" alt="Find Real Me Logo" /> </p>
<hr>
<p>Welcome to the conduct database search page. You can verify domestic worker's conduct and history.
</p>
<p>Search database by entering First name, Middle name and ID No. below and click the Search Conduct Database.
</p>
<form id="form1" action="search15.php" name="form1" method="post">
<p>
<label for="First_name">First name:</label>
<input name="First_name" type="text" required="required" id="First_name" title="First name" size="30" maxlength="30">
</p>
<p>
<label for="Last_name">Last name:</label>
<input name="Last_name" type="text" required="required" id="Last_name" title="last_name" size="30" maxlength="30">
</p>
<p>
<label for="ID_NO">ID Number:</label>
<input name="ID_NO" type="number" required="required" id="ID_NO" title="ID_NO">
</p>
<p>
<input name="submit" type="submit" id="submit" formaction="search15.php" formmethod="POST" value="Search Conduct Database">
</p>
<p> </p>
</form>
<hr>
<p>Copyright All Rights Reserved </p>
</body>
</html>
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Conduct Database Search Results</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!-- body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #006600;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul,
ol,
dl {
/* Due to variations between browsers, it's best practices to zero padding and margin
on lists. For consistency, you can either specify the amounts you want here, or on the list items
(LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you
write a more specific selector. */
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
/* removing the top margin gets around an issue where margins can escape from their
containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px;
/* adding the padding to the sides of the elements within the divs, instead of
the divs themselves, gets rid of any box model math. A nested div with side padding can also be
used as an alternate method. */
}
a img {
/* this selector removes the default blue border displayed in some browsers around an image
when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors
that
create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline;
/* unless you style your links to look extremely unique, it's best to
provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover,
a:active,
a:focus {
/* this group of selectors will give a keyboard navigator the same
hover
experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an
image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFFFFF;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have
padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side
padding or border to the div itself, it will be added to the width you define to create the *total*
width. You may also choose to remove the padding on the element in the div and place a second div
within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #333333;
color: #CCC;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
/* this class can be used to float an element right in your page. The floated element must
precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft {
/* this class can be used to float an element left in your page. The floated element must
precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat {
/* this class can be placed on a <br /> or empty div as the final element following
the last floated div (within the #container) if the #footer is removed or taken out of the
#container */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<div align="left">
<img src="logo.png" width="180" height="88"></div>
<!-- end .header -->
</div>
<div class="content">
<div align="right"></div>
<div align="right">
<p>Home | Services | Contact | Search Again</p>
<hr>
<p> </p>
</div>
<h1>Results</h1>
<?php
//load database connection
$host = "localhost";
$user = "mydata";
$password = "mydata";
$database_name = "mydata";
$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
// Search from MySQL database table
$search=$_POST['submit'];
$query = $pdo->prepare("select * from red_data1 where ID_NO LIKE '%$search%' OR First_name LIKE
'%$search%' OR Middle_name LIKE '%$search%' OR Last_name LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, "%$search%", PDO::PARAM_STR);
$query->execute();
// Display search result
if (!$query->rowCount() == 0) {
echo "Your Reference Search <b>found</b> the following in our database:<br/> <br/>";
echo "<a href='http://localhost/frm_test2/contact' target='_blank'>Click here </a> to
contact us for more information relating to your search.<br/> <br/>";
echo "<table style=\"font-family:arial;color:#333333;\">";
echo "<tr><td style=\"border-style:solid;border-width:1px;border-
color:#98bf21;background:#98bf21;\">ID No.</td><td style=\"border-style:solid;border-
width:1px;border-color:#98bf21;background:#98bf21;\">First Name</td><td style=\"border-
style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Middle Name</td><td
style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Last
Name</td>
</tr>";
while ($results = $query->fetch()) {
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['ID_NO'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['First_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Middle_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Last_name'];
echo "</td></tr>";
}
echo "</table>";
} else {
echo 'No Records found ';
}
?>
<p> </p>
<!-- end .content -->
</div>
<div class="footer">
<p align="center">Copyright </p>
<!-- end .footer -->
</div>
<!-- end .container -->
</div>
</body>
</html>
$search = $_POST['search'];
$sql = "SELECT * FROM TABLE_NAME WHERE CONCAT('database column names') LIKE '%".$search."%' ";
I have a style set out for a div class, for some html that is loaded from this text file.
content.txt
<div class="container">
<main class="content">
<strong>Paragraph Title</strong> <br>
Lots of text that actually goes here.
</main><!-- .content -->
</div><!-- .container-->
In fact, the text between the <strong> tags doesn't look any different that the rest of that text.
CSS
<style type="text/css">
#auto-slideshow {
position:relative;
z-index:1;
overflow:hidden;
margin:0 auto;
height:300px;
border:2px solid #333333;
box-shadow:0 0 5px 0 #000;
-webkit-box-shadow:0 0 5px 0 #666;
}
#auto-slideshow img {
height: 100%;
width: 25%;
position:absolute;
margin-left: 32.5%;
z-index:1;
opacity:0;
-webkit-transition:opacity .8s linear;
}
#auto-slideshow img.show {
opacity:1;
}
.content {
border-right: solid 1px #999999;
}
</style>
HTML
<div class="middle">
<?php
echo file_get_contents( "modules/content.txt" ); // get the contents, and echo it out.
?>
<?php
echo file_get_contents( "modules/leftSidebar.txt" ); // get the contents, and echo it out.
?>
<?php
echo file_get_contents( "modules/rightSidebar.txt" ); // get the contents, and echo it out.
?>
</div><!-- .middle-->
And here is what shows up when I inspect the element
Update
I increased the size of the border to crazy amounts (100px) and found that the text is wrapping around what should be the border, but it's still not showing the border.
Check your stylesheet. In the inspect element panel, it shows that the padding property is defined two different times, one in line 113, and the second one in 162. Remember that css uses the last definition, so you should:
Specify your rules after line 162
Remove the rules in line 162
Use the !important tag in the first definition so it uses that one instead
Any of these should work
I am creating a basic website with Microsoft WebMatrix. I have an array of float values in PHP. I want to use the values to create a bar chart in CSS (e.g. A value of 50.0 creates a bar of height 50% of 300px). This is the entirety of the code I am using since there's not that much of it. When I run it in a browser (Google Chrome or Internet Explorer), it writes the first echo statement but it does not produce any bars. How do I edit my code so that the bars are drawn?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bar chart</title>
<style>
.bar
{
color: #00ff21;
width: 30px; //This defines the colour and width of the bars
}
</style>
</head>
<body>
<?php
echo("<p>This is my bar chart!</p>");
$values = array(50.0, 20.0, 35.0, 70.0); //This is the array of float values
for ($i = 0; $i < count($values); $i++) //This loop should create a bar for each element in the array
{
$currentHeight = 300 * $values[$i] / 100.0; ?>
<div class="bar" style="height: <?php echo($currentHeight); ?> "></div>
<?php
}
?>
</body>
So I am not very familiar with css, but you have some arguments missing from your div element for it to work.
<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?> border: solid; display: inline-block;"></div>
You echoed the height without adding px recognition and you didnt give it solid border, so it wouldn't have displayed out in web browser anyway.
Also you can add border and display values inside style tags, but you also need to have empty height selector in there,im not entirely sure why it is that way but the code would look like that:
.bar
{
color: #00ff21;
width: 30px; //This defines the colour and width of the bars
height: ;
display: inline-block;
border: solid;
}
<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?>"></div>
I'm not sure of the look you're going for, but here are three issues:
The divs need a border or a background color in order to see them:
background-color: #00ff21; or border: solid;
You need to specify the height unit like px:
style="height: <?php echo($currentHeight); ?>px"
The divs overwrite each other so position them or maybe float:
style="float: left; height: <?php echo($currentHeight); ?>px"
I have just "created" a script that orders the songs by number of votes (see here : http://radiowhisper.com/demo/demo.php), using a tutorial. And now, the problem: Everytime when i refresh the page i see the song names randomized. How can i order them by number of votes? (FOR ALL THE TIME -> NOT TO BE RANDOMIZED).
Info: The song names are writed in "sort-objects" table from PhpMyAdmin.
The tutorial: http://tutorialzine.com/2009/11/jquery-sort-vote/
Files:
demo.php
<?php
// Hiding notices:
error_reporting(E_ALL^E_NOTICE);
// Including file for the DB connection:
define("INCLUDE_CHECK",1);
require 'connect.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>Radio Whisper - Top 40</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
<h1>Radio Whisper - Top 40</h1>
<h2>Ordonati melodiile in functie de preferinte.</h2>
<hr />
<?php
// Checking whether the user has voted today:
$voted=false;
$vcheck=mysql_query(" SELECT 1 FROM sort_votes
WHERE ip='".$_SERVER['REMOTE_ADDR']."'
AND date_submit=CURDATE()");
if(mysql_num_rows($vcheck)==1)
$voted=true;
// If we are not on the data.php?results page:
if(!array_key_exists('results',$_GET))
{
echo '<ul class="sort">';
// Showing the tutorials by random
$res = mysql_query("SELECT * FROM sort_objects ORDER BY RAND()");
while($row=mysql_fetch_assoc($res))
{?>
<li id="li<?php echo $row['id']?>">
<div class="tut">
<div class="tut-img">
<img src="<?php echo $row['img']?>" width="50" height="50" alt="<?php echo $row['title']?>" />
<div class="drag-label"></div>
</div>
<div class="tut-title">
<?php echo $row['title']?>
</div>
<div class="tut-description"><?php echo $row['description']?></div>
<div class="clear"></div>
</div>
</li>
<?php } ?>
</ul>
<div class="button-holder">
<?php if(!$voted):?>Trimite topul<span></span><?php endif;?>
Vezi rezultatele<span></span>
</div>
<?php
}
else require "results.php";
// The above require saves us from having to style another separate page
?>
<!-- The form below is not directly available to the user -->
<form action="?results" id="sform" method="post">
<input name="sortdata" id="sortdata" type="hidden" value="" />
</form>
</body>
</html>
demo.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* A simple page reset */
margin:0px;
padding:0px;
}
body{
color:white;
font-size:13px;
background: url(img/bg.jpg) repeat-x #003951;
font-family:Arial, Helvetica, sans-serif;
text-shadow:2px 2px 5px #333333;
}
.tut-title{
font-size:20px;
font-weight:bold;
}
.tut-description{
color:#DDDDDD;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
padding-top:5px;
}
.tut-img{
border:0px solid white;
float:right;
margin:0 110px 0 0;
width:50px;
height:50px;
overflow:hidden;
/* CSS3 Box Shadow */
-moz-box-shadow:2px 2px 3px #333333;
-webkit-box-shadow:2px 2px 3px #333333;
box-shadow:2px 2px 3px #333333;
cursor:n-resize;
position:relative;
}
.drag-label{
/* The DRAG label that scrolls into visibility on hover */
background:url(img/label_small.png) no-repeat;
width:71px;
height:25px;
position:relative;
margin-left:25px;
}
a.button{
/* The pretty buttons on the bottom are actually hyperlinks.. */
color:#434343 !important;
display:block;
float:left;
font-size:10px;
font-weight:bold;
height:23px;
margin:10px;
padding:12px 10px 0 12px;
position:relative;
text-shadow:none;
text-transform:uppercase;
/* This is the left part of the button background image */
background:transparent url(img/button_gray_bg.png) no-repeat;
}
a.button:hover{
text-decoration:none !important;
background-position:bottom left;
}
a.button:active{
/* Offsetting the text 1px to the bottom on mouse-click*/
padding-top:13px;
height:22px;
}
a.button span{
/* This span holds the right part of the button backgound */
background:transparent url(img/button_gray_bg.png) no-repeat right top;
height:35px;
position:absolute;
right:-2px;
top:0;
width:10px;
display:block;
}
a.button:hover span{
background-position:bottom right;
}
.button-holder{
padding-left:107px;
}
ul.sort{
/* This UL gets converted to a sortable by jQuery */
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:20px;
}
ul.sort li{
margin:25px 50px 25px 0;
height:102px;
list-style:none;
}
.chart{
/* Styling the chart container */
background:#002A3C;
border:1px solid #005A7F;
height:300px;
width:550px;
}
.bar{
/* Each bar in the chart is a div. Colors and width are assigned later */
height:17px;
margin:15px;
overflow:hidden;
padding:15px 10px 10px;
text-shadow:none;
white-space:nowrap;
}
.bar a, .bar a:visited{
color:white;
font-size:12px;
}
.tot-votes{
float:right;
font-size:10px;
font-weight:bold;
position:relative;
right:50px;
text-transform:uppercase;
top:18px;
}
/* General styles for the demo page */
h1{
/* The title of the page */
color:white;
font-family:"MyRiad Pro",Arial,Helvetica,sans-serif;
font-size:38px;
font-weight:normal;
}
h2{
/* The subtitle */
font-family:"MyRiad Pro","Arial Narrow",Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:normal;
letter-spacing:1px;
padding-left:2px;
text-transform:uppercase;
white-space:nowrap;
margin:10px 0 25px;
}
#orig{
/* The link that is positioned above the title */
font-family:"MyRiad Pro",Arial;
font-size:10px;
letter-spacing:1px;
padding-bottom:15px;
text-transform:uppercase;
}
hr{
/* The horizontal ruler */
background-color:#BBBBBB;
border:medium none;
color:#BBBBBB;
height:1px;
margin:30px auto;
width:450px;
}
.clear{
/* The clearfix hack */
clear:both;
}
#main{
/* The main container */
width:600px;
margin:30px auto;
}
a img{
border:none;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
.tutorial-info{
text-align:center;
padding:10px;
}
connect.php
<?php
if(!defined('INCLUDE_CHECK')) die('You are not allowed to execute this file directly');
/* Database config */ (Edit: I don't want to see them)
$db_host = '*********';
$db_user = '***********';
$db_pass = '******';
$db_database = '***************';
/* End config */
$link = mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');
mysql_select_db($db_database,$link);
mysql_query("SET names UTF8");
?>
results.php
<?php
if(!defined('INCLUDE_CHECK')) die('You are not allowed to execute this file directly');
// If the poll has been submitted:
if($_POST['sortdata'])
{
// The data arrives as a comma-separated string,
// so we extract each post ids:
$data=explode(',',str_replace('li','',$_POST['sortdata']));
// Getting the number of objects
list($tot_objects) = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM sort_objects"));
if(count($data)!=$tot_objects) die("Wrong data!");
foreach($data as $k=>$v)
{
// Building the sql query:
$str[]='('.(int)$v.','.($tot_objects-$k).')';
}
$str = 'VALUES'.join(',',$str);
// This will limit voting to once a day per IP:
mysql_query(" INSERT INTO `sort_votes` (ip,date_submit,dt_submit)
VALUES ('".$_SERVER['REMOTE_ADDR']."',NOW(),NOW())");
// If the user has not voted before today:
if(mysql_affected_rows($link)==1)
{
mysql_query(' INSERT INTO `sort_objects` (id,votes) '.$str.'
ON DUPLICATE KEY UPDATE votes = votes+VALUES(votes)');
}
}
// Selecting the sample tutorials and ordering
// them by the votes each of them received:
$res = mysql_query("SELECT * FROM sort_objects ORDER BY votes DESC");
$maxVote=0;
$bars=array();
while($row=mysql_fetch_assoc($res))
{
$bars[]=$row;
// Storing the max vote, so we can scale the bars of the chart:
if($row['votes']>$maxVote) $maxVote = $row['votes'];
}
$barstr='';
// The colors of the bars:
$colors=array('#ff9900','#66cc00','#3399cc','#dd0000','#800080');
foreach($bars as $k=>$v)
{
// Buildling the bar string:
$barstr.='
<div class="bar" style="width:'.max((int)(($v['votes']/$maxVote)*450),100).'px;background:'.$colors[$k].'">
'.$v['short'].'
</div>';
}
// The total number of votes cast in the poll:
list($totVotes) = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM sort_votes"));
?>
<div class="chart">
<?php echo $barstr?>
</div>
Go Back<span></span>
<div class="tot-votes"><?php echo $totVotes?> votes</div>
script.js
$(document).ready(function(){
// Executed once all the page elements are loaded
// Convert the UL with all the tutorials into a sortable list:
$("ul.sort").sortable({
handle : '.tut-img',
axis:'y',
containment: 'document',
opacity: 0.6
});
// The hover method takes a mouseover and a mouseout function:
$(".tut").hover(
function(){
$(this).find('.drag-label').stop().animate({marginTop:'-25px'},'fast');
},
function(){
$(this).find('.drag-label').stop().animate({marginTop:'0'},'fast');
}
);
// Binding an action to the submitPoll button:
$('#submitPoll').click(function(e){
// We then turn the sortable into a comma-separated string
// and assign it to the sortdata hidden form field:
$('#sortdata').val($('ul.sort').sortable('toArray').join(','));
// After this we submit the form:
$('#sform').submit();
// Preventing the default action triggered by clicking on the link
e.preventDefault();
});
});
So, what's the problem ?!?
Don't want to be rude but instead of just copying and pasting code, you would actually read the code and try to understand it you might see these 2 lines
// Showing the tutorials by random
$res = mysql_query("SELECT * FROM sort_objects ORDER BY RAND()");
Seriously, one of them is a comment on what the next line of code does!
ORDER BY is the part of the query that tells it how to sort the results. ORDER BY RAND() will, not surprisingly, give you randomly sorted results. Instead, you should do ORDER BY votes or whatever the name of the column that contains votes is. ORDER BY votes asc will sort them in ascending order (fewest votes first) and ORDER BY votes desc will sort them in descending order (most votes first).
This assumes that you have votes stored in a single field in your table. If that's not the case (e.g., if you have a table with one record per vote), you'll need to tell us about your database schema.
I am trying to get a div that resides in a container div to scale the container divs height when the div inside the container gets taller. When the height of the div inside the container gets taller than the container itself it just moves past the bottom of the container. I want the container to scale with the contained div. How do I do this in CSS?
Graham. What you describe is the default behavior of a DIV, or any block element for that matter. e.g. for the following HTML:
<style type="text/css">
dl { margin: 0; padding: 0;}
#container {
background-color: blue;
padding: 5px 5px 5px 5px;
}
#inner {
background-color: red;
}
</style>
<div id="container">
<div id="inner">
<dl>
<dt>Stuff</dt>
<dd>Blah blah blah</dd>
<dt>Foobar</dt>
<dd>Bazquux</dd>
</dl>
</div>
</div>
You will get the following rendered HTML:
(source: rackspacecloud.com)
The situation you describe when the container div doesn't expand to contain the inner div occurs when you have floated the inner div. Floating, by definition, breaks a block element out of the constraints of it's containing element. Applying "float: left;" to your #inner element gives the following:
(source: rackspacecloud.com)
The solution is to add a block level element at the bottom of the containing div that clears the floated element. This causes the containing div to wrap around this new block level element, and thus your floated elements as well.
e.g.
<style type="text/css">
dl { margin: 0; padding: 0;}
#container {
background-color: blue;
padding: 5px 5px 5px 5px;
}
#inner {
background-color: red;
float: left;
}
</style>
<div id="container">
<div id="inner">
<dl>
<dt>Stuff</dt>
<dd>Blah blah blah</dd>
<dt>Foobar</dt>
<dd>Bazquux</dd>
</dl>
</div>
<div style="clear: both;"></div>
</div>
This will give output identical to the first image.
Obviously, this can be a tedious thing to add to the bottom of your container divs if you do a lot of floating.
Using CSS2 you can do this with a simple class definition (and a hack for IE of course):
<style type="text/css">
dl { margin: 0; padding: 0;}
#container {
background-color: blue;
padding: 5px 5px 5px 5px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {height: 1%;}
#inner {
background-color: red;
float: left;
}
</style>
<div id="container" class="clearfix">
<div id="inner">
<dl>
<dt>Stuff</dt>
<dd>Blah blah blah</dd>
<dt>Foobar</dt>
<dd>Bazquux</dd>
</dl>
</div>
</div>
Simply add the clearfix class to any of your container divs that contain floated elements. Note the "* html" is the hack required by IE.
You just need to give height property by percent such as:
percent { display:block:height:100%; } as your div stands in html:
<div class="percent"></div>
Simply add
overflow: auto;
to the outer div.
If you mean "scale" as in just simply expanding, perhaps I read your description as the container div having a height of, say, 500px, and the contained divs will push this out more if they grow too large. In that case, perhaps you can use min-height instead?
min-height: 500px;
If you mean "scale" as in the container div is 500x500px, the contained takes up an initial height of 200px that expands to 400px with more content, which pushes the container div to 1000x1000px (akin to zooming/enlarging), then that might be more complicated.