i have bellow code which display 10 items and each item in each of table
<div class="baner_main shadow">
<div id="adds">
<div class="latest_ads">
<table border="0" cellspacing="0" style="width:800px">
<tbody>
<tr class="">
<?php
for($i=;$i<=10;$i++)
{
?>
<td class="even">
<img src="images/photo.gif" alt="" title=""><br>
<h3>Item Name</h3>
<p><strong>Price: 70.00 USD <br> () <br> December 3, 2011</strong></p>
</td>
<?php
}
?>
</tr>
</tbody>
</table>
</div>
</div>
</div>
in 800 width of table it only show 5 items on screen one time.
what i need is
Move the first item and bring the next five items automatically after 10 sec using Jquery.
A small dot under table to move items next and previous with jquery.
this is common in image slide shows but i can't find any idea how to do with table.
if available give me any example link and i will it myself.
Thanks
You can use jQuery cycle plugin http://malsup.com/jquery/cycle/ and check http://malsup.com/jquery/cycle/div.html for grouping set of items together. Most of the examples provided are Div based layouts. However, You can achieve the same effect using TD's as well. Let me know if you still need help
Related
I would like to display three images from the database in one row. At the moment, all the images are in a vertical line and I do not know how to fix it. Any help would be appreciated. I am only learning PHP, have checked other questions and they have been no help.
I have tried using Bootstrap however that has not worked either. The way I have it does display 3 in a row however, shoes the same product in each row and only if I have the query $show_men="SELECT model, id, price,image FROM products WHERE id='id' "
<div class="col-xs-12 col-sm-4">
<!--selecting products from database and displaying. when user clicks on more info button, information is stored in array and displayed on item.php-->
<?php
include 'mysql.php';
$show_men="SELECT model, id, price,image FROM products WHERE cat='men' ";
$query_men=mysqli_query($conn,$show_men);
while($row=mysqli_fetch_array($query_men,MYSQLI_ASSOC)){
echo '<br><br><table class="table"><tbody>
<tr>
<div><center><img class="img-responsive" src="../images/'.$row['image'].'" width="200" height="200"></center><br>
<center><strong>'.$row['model'].'</strong><br><br><strong>Price:£ '.$row['price'].'</strong><br><br>
More Info<br><br><strong></center></div><hr>
</tr>
</tbody>
</table>';
}?>
</div>
You need to iterate the column instead of the table..
<div class="row">
<?php
include 'mysql.php';
$show_men="SELECT model, id, price,image FROM products WHERE cat='men' ";
$query_men=mysqli_query($conn,$show_men);
while($row=mysqli_fetch_array($query_men,MYSQLI_ASSOC)){
echo '<div class="col-xs-12 col-sm-4"><br><br><table class="table"><tbody>
<tr>
<div><center><img class="img-responsive" src="../images/'.$row['image'].'" width="200" height="200"></center><br>
<center><strong>'.$row['model'].'</strong><br><br><strong>Price:£ '.$row['price'].'</strong><br><br>
More Info<br><br><strong></center></div><hr>
</tr>
</tbody>
</table></div>';
}
?>
</div>
The images are stored in my folder and not in database. When i click on one of the images, it will lead me to see more info on the next page. This would means that i can see the image with a bigger size.
How do I do this with less php pages created? Below are snippets of my codes
<table>
<tr>
<th class="timgB"><h4><img src="city/GVcementMixture.jpg" style="vertical-align: text-bottom;" title="Cement Mixture"/> Cement Mixture </a></h4></th>
</tr>
</table>
You could keep it all in one form/page with a big if/else or switch/case statement to evaluate the selected image and show only info pertaining to the selected image such as the full size image or a sub-set of child images. But it would be best presented in jQuery as #Razor said.
<form ...>
<button type=submit name=imgID value=1>
<button type=submit name=imgID value=2>
...
<?php
if (isset($_POST['imgID'])):
// Show info related to selected image
...
you can do it like this. use class="small for make image size small and class="big-img" to big size image. the ?img=img23.jpg in your link decide which image should be shown with big size. or if you use thumbnail of image as small size and want to show a full size only when some one click on thumbnail then update the link in upper div (class="big-img") or leave comment.
//it will work as you want
<body>
<div class = "big-img"> <!-- set class to show big size image-->
<?php if(isset($_GET['img'])): ?>
<img src="city/.<?php echo $_GET['img']; ?>" alt="">
<?php endif; ?>
</div>
<table>
<tr><!-- set class to show small size image-->
<td class = "small"><img src="city/img23.jpg" alt=""></td>
<td class = "small"><img src="city/img24.jpg" alt=""></td>
<td class = "small"><img src="city/img25.jpg" alt=""></td>
</tr>
</table>
</body>
I want to create a popup depending on the item. The text to appear is taken from the database depending on each item.Specifically, I have this code:
{foreach $images as $item}
<div class="icoana" id="container">
<img class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}">
<div class="detalii">
<table style="font-size: 25px">
<tr><td>Nume:</td><td>{$item->title}</td> </tr>
<tr><td>Lungime:</td><td>{$item->width}  cm</td> </tr>
<tr><td>Latime:</td><td>{$item->height}  cm</td></tr>
</table>
</div>
<div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai multe...</div>
</div>
{/foreach}
and when mouseover div class="despre" I want appear a pop-up with text's description stored in {$item->description}. The pop-up I want to look like this: http://creativeindividual.co.uk/2011/02/create-a-pop-up-div-in-jquery/.I would like a link to an example or source code.
Broadly, what you need to do is two steps
1) Print out the div description in the php code immediately below the div mentioned.
So your code becomes.
{foreach $images as $item}
<div class="icoana" id="container">
<img class="icoane" src="{base_url()}assets/image/{$item->code}/{$item->name}">
<div class="detalii">
<table style="font-size: 25px">
<tr><td>Nume:</td><td>{$item->title}</td> </tr>
<tr><td>Lungime:</td><td>{$item->width}  cm</td> </tr>
<tr><td>Latime:</td><td>{$item->height}  cm</td></tr>
</table>
</div>
<div class="despre" id="popup"><img src="{base_url()}assets/image/go.jpg" style="weight: 20px; height:20px;" >Mai multe...</div>
<div class="desc" style="display:hidden">
{$item->description}
</div>
</div>
{/foreach}
2) After that use the same code in the link you provided above and modify the the display part
$(function() {
$('.despre').hover(function(e) {
//Code to show the popup
// Modify to use any standard popup library
// The code below , for now display the desc only.
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
For now this will show and hide the div. You can use any ToolTip library to actually display the popup
Examples here : http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Regards
Shreyas N
HTML
<td time='10:00 AM'>
<span timeStart="00" timeEnd="10" class="entry deletable">Entery 1 from 10:00-10:15</span>
<span timeStart="15" timeEnd="30" class="entry deletable">Entery 2</span>
</td>
This is an example of how td looks inside my jquery/php calendar.
my question is
how can i make Css position and set height of those spans according to time start and time end, also how to avoid overlaping ?
should i or should i not include timeStart and end in html ? i can set style dynamicly on php that would be a cleaner way to do it !
i think i didnt make myself clear.
here is wt i have tried so far
html
<td style='width:60px;'>
<div style="position:relative">
<span style="position:absolute;top:00px;" title="Time:10:00 AM">demo patient</span>
<span style="position:absolute;top:40px;" title="Time:10:20 AM">new patient</span>
</div>
</td>
PHP used to generate this
echo"<span style='position:absolute;top:".
date("i", strtotime($data['time_booked']))."px;' title='{$data['time_booked']}'>{$data['name']}</span>";
Now i can position spans as i want, only problem is that if 2 bookings made same time they overlap , how can i avoid this ?
Give this a try. It utilizes data-attributes to determine how big of a block to use. I also changed your spans to divs, if you need them inline-block you can change the css accordingly. jsFiddle Example
HTML
<table>
<tr>
<td time='10:00 AM'>
<div data-time-start="00" data-time-end="15" class="entry deletable">Entry 1 from 10:00-10:15</div>
<div data-time-start="15" data-time-end="45" class="entry deletable">Entry 2 from 10:15-10:45</div>
<div data-time-start="45" data-time-end="60" class="entry deletable">Entry 3 from 10:45-11:00</div>
</td>
</tr>
</table>
CSS
.entry{
border-top:1px solid #000;
background:#bad;
}
jQuery
$('.entry').each(function (i) {
var $this = $(this);
timestart = $this.data('time-start'),
timeend = $this.data('time-end');
$this.height(timeend - timestart);
});
Why not just go to Google's calendar. Download the html + stylesheets, and use you favorite code editor to study how they do it?
I'm trying to display data from two different tables in mysql using PHP and something like spry.. Originally, I wanted to used spry tabbed panels, but I'm not sure if that's possible. I would want the tab name to be populated from one table and the contents of that tab to be populated from another table. Here's the basic html...
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">NAME_1 POPULATED FROM FIRST TABLE</li>
<li class="TabbedPanelsTab" tabindex="0">NAME_2 POPULATED FROM FIRST TABLE</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<!-- CONTENT POPULATED FROM SECOND TABLE!-->
<td width="450"> </td>
<td width="50"> </td>
<td width="50"> </td>
<td width="50"> </td>
<td width="50"> </td>
</tr>
</table></div>
</div>
</div>
</div>
The problem I think I'll have is that I won't be able to connect the tabs with the content. Since the tabs are listed first in the html... then the content. I don't know if this is possible or if there is a better way.
It depends a little on the final result you want to get. For example:
If the only thing you want is a list of tabs taken from a table and their content completed from another DB table you just need to do 2 query, one for each table, and save the results in variables. You can then complete the HTML structure inside a variable and finally do a echo of this variable at the end.
// $result1 has the info of the tab names.
// $result2 has the contents of each tab.
$final_html='<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">';
while($row1=$result1->mysqli_fetch_array()){
$final_html.="<li class=\"TabbedPanelsTab\" tabindex=\"0\">$row1[0]</li>";
}
$final_html.='</ul><div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table border="0" cellspacing="5" cellpadding="5">
<tr>';
while($row2=$result2->mysqli_fetch_array()){
$final_html.="<td width=\"450\">$row2[0]</td>";
}
$final_html.='</tr></table></div></div></div></div>';
echo $final_html;
If the problem is how to make tabs work I would suggest using Jquery.
The main idea would be to use ids based on the same variable in the tab and the tab content. For example one tab could be named 'tab1' and its contents could be named 'tab1content'.
If you want more detail in the Jquery part please post some of your code to see how do you want these tabs to work.