im using a jcarousel:
$(document).ready(function() {
$('#mycarousel').jcarousel({
vertical: true,
auto: 3,
wrap: 'circular'
})
})
so it is a circular config , i have a query like this :
$sql=mysql_query("SELECT * FROM my_insujets, my_inmessages WHERE my_insujets.insujets_idforum = my_inmessages.inmessages_idsujet ORDER BY inmessages_date DESC LIMIT 6");
so the carousel shows 3 rows then the other 3 rows, but after this it keeps on in a loop where nothing is showed.
<div id="wrap">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
while($row=mysql_fetch_array($sql) ) { ?>
<li>
<?php echo $row["message"]; ?>
</li>
<?php } ?>
</ul>
</div>
I do not know if this is the problem, but it appears that your <li> tags are not closed.
I don't see an end </li> in your example code.
Related
I am going to try and explain this as clearly as I can.
I am working with some script from #Prabu Parthipan which uses JQuery to open and close child lists of parent lists.
I have a query that returns an array of data. In the array I have two fields:
SeqHeader
SeqText
Each SeqHeader has variable number of SeqText items.
Example:
SeqHeader:Bedroom Door & Frame (inside & Outside)
SeqText:Chipped - Scratched - Stained - Needs Paint
SeqText:Chipped - Threshold - Sand/Stain - Repair
SeqText:Door Hinges - Squeaks/Sticks - Requires Oil/Repair
SeqHeader:Entry Door Lock
SeqText:Room Door Handle/Strike plate - Not Secure/Not Working
SeqText:Security Door Chain - Not Working
SeqText:Room Door Dead Lock - Not operating Correctly
SeqHeader:Bathroom Door Lock
SeqText:Door Handle/Strike plate - Not secure/Not Working
SeqText:Door Lock - Inoperable
I could display the above as rows using a PHP do while loop but I though it would be better to produce a list with sublists that open and close.
So adopting Prabu Parthipan code
#Prabu Parthipan code is:
$(document).ready(function(){
$('ul li.expanded > a')
.attr('data-active','0')
.click(function(event){
$('.submuneu').hide();
if($(this).attr('data-active')==0){
$(this).parent().find('ul').slideToggle('slow');
$(this).attr('data-active','1');
}
else
$(this).attr('data-active','0');
});
$('a.on').click(function(){
$('a.on').removeClass("active");
$(this).addClass("active");
});
});
In the body of the page I have:
<?php do { ?>
<tr>
<td colspan="3" class="imaindateselleft_padding">
<div class="leftsidebar_templ1">
<ul id="nav">
<li class="expanded"><a class="on"><?php print $row_AuditItems['SeqHeader']; ?></a>
<ul class="submuneu">
<li><a><?php print $row_AuditItems['SeqText']; ?></a> </li>
</ul>
</li>
</ul>
</div>
</td>
<td class="imaindatesel"> </td>
</tr>
<?php } while ($row_AuditItems = mysql_fetch_assoc($AuditItems)); ?>
As it is when the page is loaded it displays a SeqHeader for each SeqText. They are clickable and when clicked they open up the sub list.
What I want to do is have all the SeqText items relating to thier parent SeqHeader as a sublist so when the SeqHeader is clicked all the related sub items show, and click again so they hide.
Sorry if I have rabbled on.
Any help would be great and I thank you for your time.
Cheers.
Wouldn't it make more since to make a simple to use multi-dimensional array of the items you're getting? As I gather, you're using the deprecated mysql call to get rows of info from a DB. Each row will have the Header and the Text associated. Thus, if you call inline by each, row, you'll have a header for each row. Try the following instead.
<?php
$res = array();
while ($row = mysql_fetch_assoc($AuditItems)) {
if ($row['SeqHeader'] && $row['SeqText']) {
if (!$res[$row['SeqHeader']]) $res[$row['SeqHeader']] = array();
$res[$row['SeqHeader']][] = $row['SeqText'];
}
}
?>
<ul id="nav">
<?php foreach ($res as $k => $v): ?>
<li class="expanded">
<a class="on"><?php echo $k; ?></a>
<ul class="submuneu">
<?php foreach ($v as $item): ?>
<li><a><?php echo $item; ?></a></li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>
I believe you're biggest problem now is in HTML layout. But this should help that. Fix that and then determine if the JS is still a problem, though what you want in JS is relatively easy.
Example of Easy JavaScript for dealing with opening and closing submenus using HTML Markup as:
UL > LI > A + UL > LI > A
// simply jQuery shorthand for document.ready = function() { ...
$(function() {
// the following is how to add events so that they work for even "dynamically" created elements.
// That is, elements created after code/page load.
$(document).on('click', 'li a', function(e) {
e.preventDefault(); // ensure it doesn't try to follow a link
// close all possible siblings and cousins
$(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); });
// slide toggle current possible sub menu
$(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); });
});
// uncomment the following line to ensure all sublist are closed,
// however, i strongly recommend this should be done using css
// $('ul ul').hide();
// change cursor for li elements having a sub menu
$('li').each(function(i) {
if ($(this).children('ul').length) { // test if it has a submenu
$(this).css({ cursor: 'pointer' });
// just for this test, i'm going to add a background color to A tags on li's having a submenu
$(this).children('a').css({ backgroundColor: '#f8f800' })
}
});
})
/* this simply hides all submenus outright */
ul ul { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><a>test1</a>
<ul>
<li><a>bleh</a></li>
<li><a>bleh Blah</a>
<ul>
<li><a>blo</a></li>
<li><a>bli</a>
<li><a>blu</a>
<ul>
<li><a>orange</a></li>
<li><a>fruit</a></li>
<li><a>apple</a></li>
</ul>
</li>
<li><a>ble</a>
<ul>
<li><a>gravy</a></li>
<li><a>steak</a></li>
<li><a>bra</a></li>
</ul>
</li>
</li>
<li><a>testCc</a></li>
</ul>
</li>
</ul>
</li>
<li><a>test2</a>
<ul>
<li><a>testPrev</a>
<ul>
<li><a>testA</a></li>
<li><a>testB</a></li>
<li><a>testC</a></li>
</ul>
</li>
<li><a>testNext</a>
<ul>
<li><a>testAa</a></li>
<li><a>testBb</a>
<li><a>testPrev2</a>
<ul>
<li><a>testA1</a></li>
<li><a>testB2</a></li>
<li><a>testC3</a></li>
</ul>
</li>
<li><a>testNext4</a>
<ul>
<li><a>testAa4</a></li>
<li><a>testBb5</a></li>
<li><a>testCc6</a></li>
</ul>
</li>
</li>
<li><a>testCc</a></li>
</ul>
</li>
</ul>
</li>
<li><a>test3</a>
<ul>
<li><a>blah</a></li>
</ul>
</li>
</ul>
You could try:
$(document).ready(function(){
$('ul li.expanded > a')
.attr('data-active','0')
.click(function(event){
$('.submuneu').hide();
if($(this).attr('data-active')==0){
$(this).parent().find('ul').slideToggle('slow');
$(this).attr('data-active','1');
}
else
{
$(this).attr('data-active','0');
}
});
$(document).on('click', 'a.on', function(){
$('a.on').removeClass("active");
$(this).addClass("active");
});
});
Some -code generated- elements need to be "listen" using $(document).on('event', 'element', function(){...});.
Hope it helps.
I have the structure of a Tab component, but I will like that the head of each tab is the name of a person that is in the database stored.
For example, normally this is a tabs structure
<div id="tabs">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="panels">
<div id="tab-1">
</div>
<div id="tab-2">
</div>
<div id="tab-3">
</div>
</div>
</div>
But instead of Tab 1,2 and 3 as head text for each tab, I will like to have Marc, Josef, Luis and these are name from the DB. This also includes that everytime that a person is added I will have a new tab. Has anybody a idea how I can do this?
I tryed to call the result of the PHP query in the text of the head, but was not working
**********EDITED WITH CODE******************
<?php
$connection = mysql_connect(/*DAta connectionns*/);
if (!$connection)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("", $connection);
$result = mysql_query("SELECT * FROM People");
while($row = mysql_fetch_array($result))
{
$r = $row["name"];
<div id="tabs">
<ul>
<li><?php $r ?></li>
</ul>
<div class="panels">
</div>
</div>
}
?>
I know that there is something wrong, but I can not see
Assume you have a JavaScript Object (from your ajax?) you can do:
var mytabs = [{
name: "Marc"
}, {
name: "Josef"
}, {
name: "Luis"
}];
$('#tabs').tabs();
$.each(mytabs, function(indexInArray, myobj) {
$('#tabs').find('li> a').eq(indexInArray).text(myobj.name);
});
Here is a fiddle you can play with: http://jsfiddle.net/MarkSchultheiss/p4mzy3hb/
I'm using bootstrap framework.
i have code like this
<?php
$id=$_GET["pid"];
$query="Select * FROM product WHERE pid='$id'";
$result=mysql_query($query) or trigger_error(mysql_error());
while ($row=mysql_fetch_array($result)) {
$image=$row['image']; --->image path
$head=$row['head'];
?>
<div class="col-md-12">
<ul class="cgrid">
<li>
<a href=<?php echo "\" page.php?pid=$id \"" ;?>><?php echo $image;?>
<h4><?php echo $head ;?></h4>
</a>
</li>
</ul>
</div>
<?php
}
?>
.cgrid li {width: -webkit-calc(100% / 3);}
I have included responsive CDN as well.
Let's say i have 6 records in my database that fetches as 3 records per row.
What i want is:I want the records to be responsive ie.,i don't want it to stretch ,i want it to align it to 2 or 1 for a row as the screen size decreases. how can i achieve this ?Thanks in advance :)
This problem is doing my nut. I have jpages plugin configured ok. I'm using it to list jobs on a site. My issue is that i'm using php generated content for the returned results. Some of the content works fine with jpages but as soon as i add my short description field it just stops working.
<ul id="itemContainer">
<?php
foreach ($search_res as $value) {
?>
<li>
<div class="searchlongbox">
<h3 id="search-title"><?php echo "Job title: " . $value['title'];?></h3>
<div id="search-wrap">
<div class="search-salary"><strong>Salary:</strong> £<?php echo $value['salary'];?></div>
<div class="search-location"><strong>Location:</strong> <?php echo $value['region'];?></div>
</div>
<div id="search-description-short">
<?php
echo limit_text($value['description'], 40);
?>
</div>
<div id="search-added"><strong>Job Added:</strong>
<?
php echo date("d-m-Y", strtotime($value['date_added']));
?>
</div>
<?php
$job_id = $value['jobs_id'];
echo "<div class='buttonsleft'><br/><a id='sendmore' class='button' href=jobs_details.php?jobId=$job_id>find out more</a>
</div>";
?>
</div>
</li>
<?php }?>
</ul>
<!-- navigation holder -->
<div class="holder">
</div>
Here's the js
/* initiate the plugin */
$("div.holder").jPages({
containerID : "itemContainer",
perPage : 5,
startPage : 1,
startRange : 1,
midRange : 5,
endRange : 1,
callback : function( pages, items ){
$('html, body').animate({ scrollTop: 0 }, 'slow');
console.log(items);
}
});
I just don't know why it won't work.
Thanks in advance
Rob
Here's the solution to those of you who may have this problem. It's taken me about 2 weeks on and off to fix this!
If you are dynamically creating content for use with this plugin. use php's strip_tags() function. It seems that any html or MSWord(YUK) formatting will prevent this plugin from working correctly solution snippet below.....
<div id="search-description-short">
<?php
echo limit_text(strip_tags($value['description']), 40);
?>
</div>
Hope this helps someone.
Rob
I have a meny.php file who loads in with ajax the selected link to the div with id=content as you can see before the footer is included. This code is working and it´s nothing spacial with that. I just think this code may be helpfull.
<!DOCTYPE html>
<?php
include 'includes/head.php';
?>
<body>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'href' : '#fancybox-inner',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("a.single_image").fancybox({
'href' : '#fancybox-inner',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
$(function(){
// hide the div on page load and use a slidedown effect
$('div.content').fadeOut(0, function(){
$(this).slideDown(500);
});
// capture link clicks and slide up then go to the links href attribute
$('a.slide_page1').click(function(e){
e.preventDefault();
var $href = $(this).attr('href');
$('div.content').slideUp(500, function(){
// window.location = $href;
// alert($href);
});
});
});
</script>
<div class="page">
<?php
include 'includes/header.php';
?>
<div class="container-fluid" id = "bodu">
<div class="row-fluid">
<div class="span12">
<div class="bodu">
<div class="blog">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" id ="sidebarspan">
<h2>Meny</h2>
<ul id="nav">
<li id ="sidebar">
Hamburgare
</li>
<li id ="sidebar">
Måltider
</li>
<li id ="sidebar">
Dryck
</li>
<li id ="sidebar">
Tillbehör
</li>
<li id ="sidebar">
Desserter
</li>
<li id ="sidebar">
Övrigt
</li>
</ul>
</div>
<div class="span10">
<div id = "content" class="content">
<script src="jquery/general.js"></script>
</div>
</div>
</div>
</div>
</div>
<?php
include 'includes/footer.php';
?>
</div>
</div>
</div>
</div>
<div id="bg-bottom" >
<img src="images/bg-bottom.png" alt="bottom">
</div>
</div>
</div>
</body>
Now for the real problem. Lets say we selected the "hamburgere" from the meny.php. It will then try to load in like I said with ajax the hamburgare.php file. That file looks like this
<?php
include '../includes/head.php';
?>
<h1>Hamburgare!</h1>
<p>hamburgare är gott!</p>
<div class="row-fluid" id = "meals">
<div class="span12" id="right-pane">
<?php
$select = "SELECT * FROM hamburgare";
$sql = mysql_query($select) or die(mysql_error());
mysql_num_rows($sql);
while ($row = mysql_fetch_array($sql)) {
$name = "<name>".$row['name']."</name>";
$price = "<price>".$row['price']."</price>";
$description = "<description>".$row['description']." </description>";
$img = $row['image'];
$event = " <a name='$img' class='single_image' href='fancybox-inner' ><img src='Login/$img'/></a>";
echo $event;
/*closing the whileloop*/
}
?>
</div>
</div>
<div style="display:none">
<div id="fancybox-inner">
<?php
$query = mysql_query('SELECT name FROM hamburgare WHERE image = "' . $img . '"');
?>
<div class="container-fluid">
<div class="row-fluid">
<h2><?php echo $query ?></h2>
<h2><?php echo $name ?></h2>
<div class="span4">
<img src="Login/<?php echo $img; ?>" />
<!--Sidebar content-->
</div>
<div class="span8">
<?php echo $description ?>
<!--Body content-->
</div>
</div>
</div>
</div>
</div>
What I am trying to do here is to load all the images from the hamburgare table in the database and for now i am just printing them out in the while loop in a a-tag. Thats working fine but when a customer clicks on one of the images more specific information shall be shown to the customer.
What happens here is when you click on one of the images the fancybox-inner div is shown but the information the fancybox-inner contains is about the last loaded image. That means it doesn´t matter witch image is selected it will always show information about the last loaded image.
The reason is because the WHERE Clause in the last SQL query, I compare the the last loaded image ($img) who is equal to the one in the database. So what happens is I get this overlapping problem. Also I compare with $img and not the name = $img from the showsen a-tag, who I dont know how to write as a SQL query.
How ever I think the problem is bigger than that. The only thing I do is hiding the fancybox-inner div and just show it when some of the images is selected. That code is stil executed from the start. So I thing I needs Jquery/AJAX to load right information for each image. So I think I need to add onClick for each a-tag in the while-loop.
But since I am new in this stuff I dont know how to write that code. Maybe my hypothesis is wrong as well. I dont know.
What do you guys think? I will appreciate all kinds of help.
thanks in advance
You should add the returned values to an array first and do the output later.
For example:
$formattedResults = array();
while( $row = mysql_fetch_array( $sql ) )
{
$formattedResults[] = array(
'name' => sprintf( '<name>%s</name>', $row['name'] ),
'price' => sprintf( '<price>%s</price>', $row['price'] ),
'description' => sprintf( '<description>%s</description>', $row['description'] ),
'img' => $row['image'],
'event' => sprintf( '<a name="%s" class="single_image" href="fancybox-inner" ><img src="Login/%s"/></a>', $row['image'], $row['image'] ),
);
}
var_dump( $formattedResults );