Firefox change table layout - php

I am having problem in fix layout of categories of video in firefox it works normally in google chrome but in firefox the table which is align center is leave its place and make horizontal scroll bar enable it need some expert hand in smarty I am showing the smarty coding please guys help me yiu guys can also check Page Where Firefox Givin Prob.
Check this page in Google Chrome and in Firefox its works well in Chrome but not in Firefox please help me
<div align="center">
<table border="0" align="center">
{section name=i loop=$cat step=4 max=6} <!--ROWS EG change max=???-->
<tr>
{section name=cat loop=$cat start=$smarty.section.i.index max=4}<!-- COLUMNS EG change max=??? to the ammount and step=??? to the same ammount-->
<td align="center"><b>{$cat[cat].name}</b><br /><img border="0" width="153" height="120" src="{$cat[cat].picture}" {if $firefox eq "1"}class="reflect" alt="No Image Yet"{/if} /></td>
{/section}
</tr>
{/section}
</table>
</div>

Put br as first element inside your div:
<div align="center">
<br/>
<table border="0" align="center">
.
.
or you can add a clearer after your search section:
.
.
</div>
<div style="clear:both"></div>
<div align="center">
.
.
The reason why the issue occurred is because your search section's div, which is float to left, overlaps your second div and pushes the table. After adding a clearer, the first div has something to push instead of your table.

Related

Images with more info on the next page

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>

Forms elements don't insert with the correct jquery mobile design

I built a form using jquery.
As soon as I use $('#Form').append(''); the newly added elements aren't themed / don't look the same way as I they would, when I insert them using PHP.
To make it clear:
php added: Jquery Mobile Style
Jquery dynamicly added: Regular Form style.
How can I buy pass this?
======ADDON======
Ok, here's the code
this functions adds the block:
function addItem(section){
if(itemcounter[section]>1){
$('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>');
$('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>');
$('table#deductionItemContent'+section+' tr:last').after('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>');
}else{
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>');
}
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'1"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'2"></tr>');
$('#deductionItemContent'+section).append('<tr id="deductionItemContentRow'+section+'_'+itemcounter[section]+'3"></tr>');
$('#deductionItemContentRow'+section+'_'+itemcounter[section]+'1').append('<td id="deductionItemContent'+section+'El'+itemcounter[section]+'"></td>');
$('#deductionItemContent'+section+'El'+itemcounter[section]).append('<div class="type-select"><label for="nu_item_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_item"}{literal}'+itemcounter[section]+'</label><select onchange="updateForm('+section+');" id="nu_item_'+section+'_'+itemcounter[section]+'" name="nu_item_'+section+'_'+itemcounter[section]+'"></select></div>')
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="main">{/literal}{translate text="application_reports_plate5_item_main"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="aux">{/literal}{translate text="application_reports_plate5_item_aux"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="jib">{/literal}{translate text="application_reports_plate5_jib"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="rope">{/literal}{translate text="application_reports_plate5_rope"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="underhookdevice">{/literal}{translate text="application_reports_plate5_underhookdevice"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="rigging">{/literal}{translate text="application_reports_plate5_rigging"}{literal}</option>');
$('#nu_item_'+section+'_'+itemcounter[section]).append('<option value="none">{/literal}{translate text="application_reports_plate5_none"}{literal}</option>');
$('#deductionItemContentRow'+section+'_'+itemcounter[section]+'2').append('<td id="deductionItemContent'+section+'E2'+itemcounter[section]+'"></td>');
$('#deductionItemContent'+section+'E2'+itemcounter[section]).append('<div class="type-select"><label for="nu_status_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_itemstatus"}{literal} '+'</label><select onchange="updateForm('+section+');" id="nu_status_'+section+'_'+itemcounter[section]+'" name="nu_status_'+section+'_'+itemcounter[section]+'"></select></div>')
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="stowed">{/literal}{translate text="application_reports_plate5_item_stowed"}{literal}</option>');
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="erected">{/literal}{translate text="application_reports_plate5_item_erected"}{literal}</option>');
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="inservice">{/literal}{translate text="application_reports_plate5_item_inservice"}{literal}</option>');
$('#nu_status_'+section+'_'+itemcounter[section]).append('<option value="none">{/literal}{translate text="application_reports_plate5_none"}{literal}</option>');
$('#deductionItemContentRow'+section+'_'+itemcounter[section]+'3').append('<td id="deductionItemContent'+section+'E3'+itemcounter[section]+'"></td>');
$('#deductionItemContent'+section+'E3'+itemcounter[section]).append('<div class="type-text"><label for="nu_deduction_'+section+'_'+itemcounter[section]+'">{/literal}{translate text="application_reports_plate5_deduction"}{literal}</label><input onkeyup="updateForm('+section+');" type="text" length="6" maxlength="6" id="nu_deduction_'+section+'_'+itemcounter[section]+'" name="nu_deduction_'+section+'_'+itemcounter[section]+'" /></div>');
/**
* Add Data to page 3
*/
$('#weightMasterDataTable'+section).append('<tr id="weightMasterDataTableRow'+section+itemcounter[section]+'"></tr>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'1"></td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'2"></td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'3">0</td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'4">0</td>');
$('#weightMasterDataTableRow'+section+itemcounter[section]).append('<td id="weightMasterDataTableContent'+section+itemcounter[section]+'5">0</td>');
/**
* Add Radio Buttons
*/
$('#weightMasterDataButtons'+section).append('<input type="radio" name="nu_masterbutton_'+section+'" id="nu_masterbutton_'+section+'_'+itemcounter[section]+'" value="'+itemcounter[section]+'" /><label for="nu_masterbutton_'+section+'_'+itemcounter[section]+'" > {/literal}{translate text="application_reports_plate5_item"}{literal} '+itemcounter[section]+'</label>');
$('#weightMasterDataButtons'+section).append('<br />');
/**
* in the end update counter
*/
itemcounter[section]++;
}
the HTML code that belongs to this looks like this:
<tr>
<td>
<div id="tabs-2">
<h4>deductions for loadtest 1</h4>
<div id="deductions1">
<a onclick="addItem(1);">+ Add item to deduction</a>
<table id="deductionMaster1" class="tablecloth" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr id="deductionMasterRow11">
<td>
<table id="deductionItemContent1" class="tablecloth" width="100%" cellspacing="0" cellpadding="0" border="0"></table>
</td>
</tr>
<tr id="deductionMasterRow12">
<td id="deductionMasterElement12">
total:
<b id="deductionValue1">0</b>
lbs
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
This is only a small part of the form, because everything reacts the same way.
I guess I need to tell the browser somewho that the inserted form elements are to be themed the jquery style.
But I don't know how to.
Try adding
$('select').selectmenu();
at the end of the jQuery script. That should deal with the <select> tags.
If that is successful, refer to jquery mobile's documentation for information on how to deal with any other form element you want on you page.

Display two tables from mysql using PHP and spry or something similar

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.

jquery data slide show like image slide show

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

jquery lightbox plugin group of images effect

http://www.leandrovieira.com/projects/jquery/lightbox/ sample
so i have get images in while loop here is my code
<td id="gallery">
<a href='<?=$path ?>'>
<img width="50" height="50" src=<?php echo $path; ?> />
</a>
</td>
$(function() {
$('#gallery a').lightBox();
});
</script>
when i click first image light box effect works fine but when i click second image light box effect does n't work please guide me
Thanks for Advance
The problem is you have multiple <td id="gallery". You shouldn't use the same id for multiple elements, because $('#gallery') would always return the first one, but also because it's wrong!
Either move it into the table: <table id="gallery",
or change it to class: <td class="gallery" and change the query: $('.gallery a').lightBox();

Categories