Organizing database content with jquery mobile using php - html

So I have this code :
<div data-role="content" class="ui-widget-content" align="justify">
<div class="ui-grid-a">
<div class="ui-block-a" id="clients"><strong>Clients</strong></div>
<div class="ui-block-b" id="freelancers"><strong>Freelancers</strong></div>
<?php
$sql = "SELECT * FROM users";
$query =mysqli_query($link,$sql) or die(mysqli_error($link));
$checkuser= mysqli_num_rows($query);
if ($checkuser > 1) {
while($row = mysqli_fetch_assoc($query)) {
extract($row);
if ($usertype == 'client') {
echo '<div class="ui-block-a" align="justify"> '.ucfirst($username).'</div>';
}
if ($usertype == 'freelancer') {
echo '<div class="ui-block-b" align="justify"> '.ucfirst($username).'</div>';
}
}
}
mysqli_close($link);
?>
</strong></div>
And it gives out this result :
Can someone help me understand why the second column freelancers displays the data spaced like that and what I need to change in my code to make it look like the first column, without that vertical spacing ?

Related

how to create space between anchor tag elements in loop in paging

I'm creating a paging option in my website. The problem is that the paging digits is not align in the appropriate way in fact the images is attached. [This is my image in which number not align correctly
This is output of my paging numbers:
This is my code.
<section>
<div class="container" style="padding-bottom:10px; font-size:20px;">
<?php $sql1 = "SELECT * FROM videos ";
$query = $conn->query($sql1);
// Return the number of rows in result set
$rowcount = $query->rowCount();
$a=$rowcount/3;
$a= ceil($a);
for($b=1; $b<=$a; $b++)
{
?> <a style=" " href="index.php?page=<?php echo $b; ?>"><?php echo $b. " " ?> </a> <?php
}?>
</div>
</section>
But I want to align these numbering in this way:
This image exactly shows requirement of my result:
please anyone can help me. how to fix it. thanks
you should use a table as grid
Try this
<table>
<tr>
<?php
$numbers_per_row = 5;
$rowi= 0;
$numbers_limit = 25;
for($b=1; $b<=$numbers_limit ; $b++)
{
echo '<td><a href="index.php?page='.$b.'">'.$b.'</td>';
if($rowi<=$numbers_per_row) {
$rowi++;
}
else { echo '</tr><tr style="margin-top:10px;">';
/* <-- change it ^ to what you want */
/* Reset counter */
$rowi = 0; }
}
?>
</table>

Align loop output in one row

I have this code in which the image output $check or $uncheck and title $val_c are inside a loop, what i want is to output everything in one row using <div class="col-sm-12"> but what i always get is a column. what i want is like this
image_title_______________image_title________________image_title
what im getting is like this...
image
title
image
title
image
title
heres is the code
<div class="panel-body">
<div class="col-sm-12">
';
$funcs->viewSurvey();
$array4 = $funcs->viewSurvey();
$searchengine = $array4['searchengine'];
$sum = $array4['sum'];
$searches = explode(',', $searchengine);
$searchesa = array("google","yahoo","bing");
$check = '<img src="images/checked.png" height="40px" width="40px">';
$uncheck = '<img src="images/unchecked.png" height="40px" width="40px">';
foreach ($searchesa as $key_a => $val_c) {
$found = false;
foreach ($searches as $key_b => $val_d) {
if ($val_c == $val_d) {
echo ''.$check.'<h3 class="head8">'. $val_c.'</h3>' ;
$found = true;
}
}
if (!$found)
echo ''.$uncheck.'<h3 class="head8">'. $val_c.'</h3>' ;
}
echo '
</div>
</div>
Use this style
h3 {
display:inline;
}
I already solved it. i just placed the <div class="col-sm-12"> inside the first foreach.

Inserting mysql inside a div inside an array

I have created a database to access the images inside a slider which uses jquery. The problem starts when I try to insert the connection given that it is an array:
<?php
$slides = array(
'<div data-thumb="images/slider/slides/image1_small.jpg" data-src="images/slider/slides/image1.jpg">
<div class="camera_caption fadeFromBottom">
Text 1 below image
</div>
</div>',
'<div data-thumb="images/slider/slides/image2_small.jpg" data-src="images/slider/slides/image2.jpg">
<div class="camera_caption fadeFromBottom">
Text 2 below image
</div>
</div>',
'<div data-thumb="images/slider/slidesimage3_small.jpg" data-src="images/slider/slides/image3.jpg">
<div class="camera_caption fadeFromBottom">
Text 3 below image
</div>
</div>'
);
shuffle($slides);
foreach ($slides as $slides) {
echo "$slides\n";
}
?>
My question is, is there a way to change that array to access the images and the text? I've tried with a while loop but couldn't figure it out.
Update: What I want is to change the array to
<?php
$query = "SELECT * FROM tblslider";
if ($result=mysqli_query($connection, $query)) {
while ($slides = mysqli_fetch_array($result)) {
'<div data-thumb="images/slider/slides/<? echo $row_DataSlider['strImagesmall'] ?>" data-src="images/slider/slides/<? echo $row_DataSlider['strImage'] ?>">
<div class="camera_caption fadeFromBottom">
<? echo $row_DataSlider['strText'] ?>
</div>
</div>'
}
}
?>
obviously this is not possible but im looking for a solution to get something like it
I believe you have a typo in your foreach...foreach ($slides as $slides) (using $slides twice)
I'd put:
foreach ($slides as $s) {
echo $s . "</br>";
}

Wordpress: previous_post_link() sits on top, after div "entry-content", no matter where I place it

I have installed a plugin which is custom post type, I am trying to use the previous_post_link() and next_post_link() to get previous and next posts.
It is working fine but the only problem is that I am placing it in my 4th div container where as it always sits on top of page right after div "entry-content".
Is it a known issue?
Here is the piece of code:
function some_function () {
global $post;
if ('team' == get_post_type() && is_single() && in_the_loop()) {
$fields = WPMTPv2_OPTIONS()->fields;
$meta = WPMTPv2_FIELDS($post->ID);
$tmp = '<div id="wpmtp-single-wrap">';
$tmp .= '<div class="wpmtp-vcard">';
$tmp .= '<div class="wpmtp-vcard-left">';
$tmp .= wpmtpv2_featured_img($post->ID);
$previous = previous_post_link('%link', '<div class="wpmtp-gonext">view next</div>');
$next = next_post_link('%link', '<div class="wpmtp-goback">go back</div>');
// $tmp .= '<div class="wpmtp-goback">go back</div>';
// $tmp .= '<div class="wpmtp-gonext">view next</div>';
$tmp .= $previous;
$tmp .= $next;
$tmp .= '</div>';
...........
..........
..........
........
return $tmp;
}
If I place the commented html code instead or previous and next functions, it works fine. Which mean that html and css are right in place, and the problem is in the functions I guess.
And this is what I get after inspecting it in firebug:
<article .....>
<h2 .....></h2>
<div class="meta"></div>
<div class="entry-content">
<a href="link to next" rel="prev">
<div class="wpmtp-gonext">view next</div>
</a>
<a href="link to previous" rel="next">
<div class="wpmtp-goback">go back</div>
</a>
<div id="wpmtp-single-wrap">
<div class="wpmtp-vcard">
<div class="wpmtp-vcard-left">
.....
....
....
....
try this code:
<?php
function some_function () {
global $post;
if ('team' == get_post_type() && is_single() && in_the_loop()) {
$fields = WPMTPv2_OPTIONS()->fields;
$meta = WPMTPv2_FIELDS($post->ID);
?>
<div id="wpmtp-single-wrap">
<div class="wpmtp-vcard">
<div class="wpmtp-vcard-left">
<?php echo wpmtpv2_featured_img($post->ID); ?>
<div class="wpmtp-goback"><?php previous_post_link( '%link', __( ' go back', 'twentyeleven' ),TRUE ); ?></div>
<div class="wpmtp-gonext"><?php next_post_link( '%link', __( 'view next', 'twentyeleven' ),TRUE ); ?></div>
<?php
// replace **twentyeleven** with your theme name
//or try with this line
//previous_post_link('%link', '<div class="wpmtp-gonext">view next</div>');
//next_post_link('%link', '<div class="wpmtp-goback">go back</div>');
?>
</div>
<?php
.........
.........
........
return $tmp;
}
or best to try this plugin : wp-pagenavi
This plugin provides the wp_pagenavi() template tag which generates fancy pagination links.
thanks

Floating divs top to bottom

I'm making a productscreen, I've made a Paint example what i've in mind.
The big black block is the productView with an sliding container in the back. I want to alphabetically order those products (All these little roundend blocks are products in a divs). But this order is "A" from beginning and 'Z' to end of slindingcontainer.
I want to order the products like the red line. I now have a second container with an modules, only this breaks my code.
Is there an other way to order the products like my example drawing?
Update - My code now:
<?php
if(!empty($productByType)){
for($i=0;$i < count($productByType); $i++){
$id = $productByType[$i]['id'];
$title = $productByType[$i]['title'];
$img = base_url('/img/producten/'.$productByType[$i]["img"]);
if($i % 2 == 0){
echo '<div class="seperatorforproduct">';
//0,2,4,6,8
}
============
Content divs
**Example of one product:** (Using modal from bootstrap)
echo '<div class="button btnstyle">';
echo '<div class="imgbtn">';
// <!-- Picture-->
echo '<img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" />';
echo '</div>';
echo '<div class="txtbtn txtstyle">';
echo '<a class="btn" data-toggle="modal" href="#modal'.$id.'" >'.$title.'</a>';
echo '</div>';
echo '</div>';
?>
<div class="modal" style="display:none;" id="modal<?=$id?>">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h2><?=$title?></h2>
</div>
<div class="modal-body">
<div class="modal-left">
<img src="<?=$img?>" title="<?=$title?>" alt="<?=$title?>" />
</div>
<div class="modal-right">
<p><?=$productByType[$i]['info']?></p>
</div>
</div>
<div class="modal-footer">
Telephone number etc.
</div>
</div>
============
<?php
if($i % 2 == 1 || $i == count($productByType)){
// 0,3,6,9,12
echo '</div>';
}
}
}?>
Check this http://jsfiddle.net/Mzmay/18/
Using PHP you generate the markup like that in fiddle & later you can use the jQuery to do that. I am not sure how to do the same by just using Php.