this is my fiddle with html and css: http://jsfiddle.net/v2r5we0r/
I'm trying to show a DIV "station_info"(shape of a square) when either clicked/hovered on those DIVs "boxes" right next to it (it will have information from my database table that I will put later on).
I have my PHP posted since I'm looping through my DB to create those boxes.
Is it possible using only CSS and HTML? If so, how can i? I only find examples with Jquery, I don't want to use JQuery or Javascript.
Scroll down the Result in fiddle to see the smalss boxes
Thank you in advance.
HTML:
<body>
<div id="map_size" align="center">
<div class='desk_box' style='position:absolute;left:20px;top:1230px;'>id:84
<div class='station_info'>Hello</div></div>
</div> <!-- end div map_Size -->
</body>
CSS:
/*body*/
body{
margin:0px auto;
width:80%;
height:80%;
}
/*map size*/
#map_size{
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
}
/* desk boxes*/
.desk_box{
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
.desk_box > .station_info{
display:none;
}
.desk_box > .station_info:first-child{
display:block;
}
.desk_box > div:hover + div {
display: block;
}
PHP:
<?php
include 'db_conn.php';
//query to get X,Y coordinates from DB
$coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates";
$coord_result = mysqli_query($conn,$coord_sql);
//see if query is good
if($coord_result === false) {
die(mysqli_error());
}
?>
<div id="map_size" align="center">
<?php
//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){
//naming X,Y values
$x_id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
//draw a box with a DIV at its X,Y coord
echo "<div class='desk_box' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$x_id."<div class='station_info'>Hello</div></div>";
} //end while coord_result loop
?>
</div>
CSS can only work descending or going further in the same level in the DOM tree, so you'll have to put the div you wanna hide/show on hover AFTER all the DIVs you're going to hover. Then you can use the general sibling operator: ~ which looks for elements AFTER a given element.
Say you have
.toto ~ .titi {}
then those <div class="titi"> will match
<div class="toto"><div>
<div class="titi"></div>
Or
<div class="toto"></div>
<div class="whatever"></div>
<div class="titi"></div>
But this one won't
<div class="titi"></div>
<div class="toto"></div>
Here's a snippet to see if this is what you want.
/*body*/
body{
margin:0px auto;
width:80%;
height:80%;
}
/*map size*/
#map_size{
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
}
/* desk boxes*/
.desk_box{
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
.desk_box > .station_info{
display:none;
}
.desk_box > .station_info:first-child{
display:block;
}
.desk_box > div:hover + div {
display: block
}
.div-to-show {
display: none;
}
.desk_box:hover ~ .div-to-show {
display: block;
}
<div id="map_size" align="center">
<div class='desk_box' style='position:absolute;left:20px;top:1230px;'>id:84<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:20px;top:1165px;'>id:85<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:20px;top:1100px;'>id:86<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:20px;top:1035px;'>id:87<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:73px;top:1230px;'>id:92<div class='station_info'>Hello</div></div>
<div class="div-to-show" style="position: absolute; left:150px; bottom: 100px;">Oh hi !</div>
</div> <!-- end div map_Size -->
How to display one by one fadein element from db when using loop for ?
.........................................................................................
When i load page index.php , it's will display 40 element from db,
but i want to apply code to show one by one element fadein , How can i do that ?
use in IE7
.
.
index.php
<?php
for($i=0;$i<40;$i++)
{
$strSQL = "SELECT * FROM products order by id desc Limit $i,1 ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$objResult = mysql_fetch_array($objQuery);
$products_img_thumbnail_path_grid[$i] = $objResult["products_img_path"];
}
?>
<ul>
<?PHP
for($i=0;$i<40;$i++)
{
?>
<li class="thumbnail" style=" list-style: none; float: left; margin: 7px; width: 80px; ">
<div class="imgWrap" style=" float: left; height: 80px; " >
<a href="xxxxx.php">
<img border="0" src="<?PHP echo $products_img_thumbnail_path_grid[$i]; ?>" width="80" height="80" style=" background-color: #fff; border: 1px solid #aaa; "/>
</a>
</div>
</li>
<?PHP
}
?>
</ul>
Check this answer:
Using CSS for fade-in effect on page load
Basically you want to use css3 animations to apply a fade in effect to the images
var test = $('ul li');
current = 0;
test.hide();
Rotator();
function Rotator() {
$(test[current]).fadeIn('slow').delay(5000).fadeOut('slow');
$(test[current]).queue(function() {
current = current < test.length - 1 ? current + 1 : 0;
Rotator();
$(this).dequeue();
});
}
use above code after the ul section, hope it work for you
.
I'm currently working on a "webshop" kind of project. I am creating a product panel with a
float:left; property but when I loop the products they are not coming next to each other but underneath the previous one.. What am I missing?
Code:
$web_string = "
<div class='product'>
<div class='image'>
<img class='image' src='iphone.jpg' alt='iPhone' height='100%' width='100%' />
</div>
<div class='under'>
<div class='info'>
<ul>
<li>iPhone</li>
<li>iOS</li>
<li>16 GB</li>
<li>Black & White</li>
</ul>
<a href='#'>more info...</a>
</div>
<div class='extra'>
<p>price: 588</p>
<button>put in cart!</button>
</div>
<div>
</div>";
CSS:
#wrapper{
width: 100%;
height:100%;
background-color: blue;
}
.product
{
float:left;
width:250px;
height:250px;
background-color:red;
}
.onder
{
height:50%;
}
.afbeelding
{
background-color: green;
}
.info
{
background-color:yellow;
float:left;
width:50%;
height:100%;
}
.extra
{
background-color: purple;
float:right;
width:50%;
height:100%;
}
PHP Loop:
<?
echo $web_string;
for($i = 0; $i < 4; $i++)
{
echo $web_string;
if($i == 2)
{
echo "Hello World";
}
}
?>
EDIT: Changed ID's to Classes
You're using CSS ID selector which can be used to point only ONE element. So the float property is applied only on the first one. Use class instead : <div class='product'> and then in your CSS : .product { float: left; }
Same thing for "image" and "under"
Here is a jfiddle fix:
link
Had to add float: left; on image and under ID too
#image {
float: left;
}
#under {
float: left;
}
Let me know if this is what you needed
I have been racking my brains trying to figure out how to change what I have into something that will organise my content into as many rows as necessary and as many columns (divs) as necessary when the screen resolution changes.
Basically, my current website set up has a content div with a height of 430px which can accommodate any number of columns because I have a horizontal scroll. Within each column there can be up to 10 rows of data before another column is created for the next lot of data.
What I want to do is change the height of the content div to % not px so it will scale with the browser res. My current script will still only output the same number of rows and columns if the content div is too small of too big, so what I want is to have the number of rows less for smaller screen res's and more for higher res screens.
I kind of want the content to wrap into the next column (div) if the browser is made smaller.
Hope this makes sense.
Can someone point me in the right direction? I know this code is currently written differently but I cant think how to do it:
functions.php:
<?php
function printTranscriptions()
{
global $link;
$query = "SELECT * FROM transcriptions ORDER BY artist, title";
if ($result = mysqli_query($link, $query)) {
$count = 0;
while ($row = mysqli_fetch_row($result)) {
if (($count % 10) == 0) {
if ($count > 0) {
echo "</div>\n";
}
echo '<div class="content_columns">'."\n";
}
$artistTitle = $row[1] . ' - ' . $row[2];
echo '<p>' . $artistTitle . '</p>'."\n";
$count++;
}
if ($count > 0) {
echo "</div>\n";
}
/* free result set */
mysqli_free_result($result);
}
}
My index file calls the content in the following structure:
<!-- Transcriptions page start -->
<div class="transcriptions_page">
<h1>
Transcriptions
</h1>
<div class="content">
<div class="list-wrapper">
<div class="transcription-list">
<?php printTranscriptions();?>
</div>
<!-- transcription-list end -->
</div>
<!-- list-wrapper end -->
</div>
<!-- content end -->
</div>
<!-- Transcriptions page end -->
My css:
.content {
display: block;
overflow: hidden;
background-color: #2D949E;
color: #fff;
text-shadow: #FAFAFA;
margin-top: 75px;
margin-left: 10%;
margin-right: 10%;
padding: 20px 20px 20px 20px;
height: 430px;
border: 1px solid #99E9F1;
}
.list-wrapper {
overflow: hidden;
}
.transcription-list {
display: block;
white-space: nowrap;
}
.content_columns {
display: inline-block;
background-color: #429EA8;
letter-spacing: 1px;
margin-right: 20px;
padding: 0 10px;
}
.content_columns:last-child {
margin-right: 0 !important;
}
Thanks
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.