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 );
Related
I am implementing a page on which when page loads, the slideshow starts. The pictures for that slideshows are coming form back-end(database). Each picture has its own timer as there are some pictures with the content while some with only heading or logos. At present, I have the same time interval set to each pictures, but now I want to set the time intervals according to their values in database.
here is the code that I have for now with the same time interval:
index.php
<section class='images'>
<? foreach($model->slides as $slide){ ?>
<div class='image'>
<img class='image' src="<?= $slide->image ?.'/pictures/'.$slides->image : '' ?>">
</div>
<? } ?>
</section>
<script type="text/javascript">
$(document).ready(function(){
$('.images').slick({
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 10000,
});
});
</script>
In indexController.php(Controller)
public function index(Array $params = []){
$this->view->slides = \Model\Slide_Picture::getList(['orderBy'=>"image_order asc"]);
$this->loadView($this->view);
}
My table 'slide_images' consist of 3 fields: image, image_order and timer.
As mentioned earlier, this code helps me to get the image slideshow with the time interval of 10s, but now I want to set it different for each images. Say for example, there are 3 images in the database, Picture 1 has a timer value 30s, picture 2 has that of 10s, and picture 3 has value of 40s. So is this possible? If yes, how can I achieve it. Thanks in advance. Appreciate the help.
You would need to add your timing to the database for each image, then once you do that you can return the timing value, and use it in a data attribute. (seems you have done that timer)
Then utilise the afterChange event to get the value and then dynamically change the autoplaySpeed speed.
Below is an example, you would need to integrate it.
$(document).ready(function() {
var images = $('.images');
images.slick({
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 1000,
}).on("afterChange", function(e, slick) {
var slideTime = $('div[data-slick-index="' + slick.currentSlide + '"]').data("timer");
images.slick("setOption", "autoplaySpeed", slideTime);
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<section class='images'>
<div class='image' data-timer="2000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="100">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="1000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="3000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="1000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
</section>
Run the snippet to see it in action.
So your loop would look something like:
<section class="images">
<?php foreach ($model->slides as $slide): ?>
<div class="image"<?= !empty($slide->timer) ? ' data-timer="'.$slide->timer.'"' : null ?>>
<img class="image" src="<?= $slide->image ? '/pictures/'.$slides->image : null ?>">
</div>
<?php endforeach ?>
</section>
I'm stuck again! So hopefully you awesome people can help me...
So far what I have is a search function that queries the database, and returns results, which works fine, and then the user can click one of the results, which takes them through to a new detailed page of what they clicked, for example a brand. Then on the detailed page, it returns all of that brands details (using $_GET['id']) and a new set of data, from a relational table, with a list of all the offers corresponding to that brand, which also works. But then I get stuck, I want the user to be able to click on each offer, and have the details of that offer load into a modal... I've tried using the $_GET['id'] for the offers id, but obviously, with it being on the same page (i presume), it passes the id of the brand / parent instead of the offer.
This is the code that calls back all the offers relating to the brand
$offers_sql = 'SELECT * FROM codes WHERE client_id LIKE :client_id AND CURDATE() between start AND expiry';
$offersq = $db->prepare($offers_sql);
$offers_params = array(':client_id' => $id);
$offersq->execute($offers_params);
$results = $offersq->fetchAll(PDO::FETCH_ASSOC);
if(count($results) < 1) {
$output = "<h4>no current offers available</h4>";
}
else {
foreach($results as $r) {
$title = $r['title'];
$code = $r['textcode'];
$offer_id = $r['id'];
$expiry = $r['expiry'];
$date = new DateTime($expiry);
$output .= '<h4>' . $title . '</h4><hr>';
}
}
} catch (PDOException $e) {
echo "failed to load offers";
}
?>
and this is the code i was using for the modal
require('inc/connect/config.php');
include('inc/result.php');
$page_title = "Title - " . $name . " Offers";
include('inc/style.php');
include('inc/header.php');
include('inc/offers.php');
?>
<!-- Intro Section -->
<section class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3 class="navbar-fixed-top">Latest Deals</h3>
<h1><?php echo $name; ?></h1>
</div>
</div>
</div>
</section>
<section class="offer-section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
<?php echo $output; ?>
</div>
</div>
</div>
</section>
<div class="md-modal md-effect-flip" id="offer">
<div class="md-content">
<h4><?php $offer = (int) $_GET['id'];
echo $offer ?></h4>
<button type="submit" class="modal-btn md-close navbar-fixed-bottom" value="submit"><p>close</p></button>
</div>
</div>
<?php include('inc/footer.php'); ?>
The code that returns the details of the brand is on a separate page, but i can include that if necessary.
What am i doing wrong? Please go easy on me, I am relatively new to php.
Thanks in advance
Kaylee
Make Changes, Where Output is declared in else condition. (Changes Done)
$output='<h4><a class="OfferIdClass" data-OfferID="<?echo $offer_id;?>" href="#offer" data-modal="offer" data-toggle="modal">'.$title.'</a></h4>';
// Add This to footer.php (Changes Done)
<div class="md-modal md-effect-flip" id="offer">
<div class="md-content">
</div>
</div>
//Add this below in that page, where you are clicking Modal.
//Changes Done
<script>
$('.OfferIdClass').click(function(){
var OfferID=$(this).attr('data-OfferID');
$.ajax({url:"Open-Offer.php?OfferID="+OfferID,cache:false,success:function(result){
$(".md-content").html(result); //Here, Changes Done
}});
});
</script>
//Create one Open-Offer.php page. (Changes Done)
Open-Offer.php
<?
extract($_GET);
<h4><?php $offer = (int) $_GET['id'];
echo $offer ?></h4>
<button type="submit" class="modal-btn md-close navbar-fixed-bottom" value="submit"><p>close</p></button>
?>
This question already has answers here:
Hiding a Div using php
(6 answers)
Closed 1 year ago.
I have a foreach look that checks if user has a picture or not. If the user doesn't have the picture I want to hide a <li> tab that shows the picture.
Inside my else how do I say, for this user hide tab 2?
I tried using echo 'id="tabHeader_2" style:"visibility:hidden"; but that doesn't work. I need a reference to that tab2, don't I?
<div id="picture<?php echo $i ?>" style="display: none;">
<?php
$picture = $user->pic;
if(isset($picture))
{
// show picture.
}
else
{
// hide tab2
}
?>
</div>
Then the list of tabs:
<div class="profiles">
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1"> Profile </li>
<li id="tabHeader_2"> Picture </li>
</ul>
</div>
<div id="tabsContent">
<div class="tabpage" id="tabpage_1"></div>
<div class="tabpage" id="tabpage_2"></div>
</div>
<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/tabs.js"></script>
</div>
</div>
Picture of what the page looks like:
I am not 100% sure about your code, but you are using isset() which would not be correct, because you set the variable right behind that check so it will be set 100% of the time. You will want to check empty() or is_file() perhaps, depends on what is in that variable.
<!-- This display: none seems strange if you are going to show the wrapped elements -->
<div id="picture<?php echo $i ?>" style="display: none;">
<?php
$picture = $user->pic;
if(!empty($picture)) {
// show picture.
}
else {
// hide tab2
}
?>
</div>
If you put the real code, it would be easier to see how you are laying out your elements.
Do Like This :-
<div class="tabs">
<ul>
<?php
$i = 1;
foreach($yourarray as $key => $value){
if(isset($value) && $value != '')
?>
<li id="tabProfileHeader<?php echo $i;?>"> Profile </li>
<li id="tabPictureHeader<?php echo $i;?>"> Picture </li>
<?php
$i++;
}
?>
</ul>
</div>
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 need help passing row from a mysql database into a div popup window?
how doI pass product id into popup div which I call through View?
For Example I Want Like This
View</li>
Here My Code
<div class="latest_products_sec">
<div class="latest_products">
<div class="title_box">
</div>
<!--Latest Products Slider -->
<div class="latest_pro_box">
<h4>Latest Shirt's Collection</h4>
<div class="latest_products_slider">
<?php
$queryshirt=mysql_query("select image,id from products
where cid='1' LIMIT 5") or die ('die shirt query');
while($rowshirt=mysql_fetch_array($queryshirt))
{
echo '<ul>';
echo '<li><img src="admin/'.$rowshirt['image'].'"
width="225" height="300" alt="" />
View</li>';
echo '</ul>';?>
}
?>
#shirt Div Popup Window
<div id="shirt" class="proquickview">
<span class="close_btn" onclick="parent.jQuery.fancybox.close();">Close</span>
<h2 class="title">quick view</h2>
<div class="quickviewinfo">
<?php
// I Need To Get ID Here
echo $id=$_REQUEST['id'];
?>
<div class="quickviewinforight">
<div class="titlerow">
<h2>Latest Shirt's Collection</h2>
<div class="start_ratings">
<div class="start_rating">
</div>
</div>
<div>
<div class="quick_review">
<h3>Quick Discription</h3>
<p>TEST.</p>
</div>
<div class="qty_row">
<div class="qty_field">
<label>Select Quantity</label>
<span>
<select name="S">
<option>5</option>
</select>
</span>
</div>
<br class="clear" />
<span class="total_price">Price <strong>$88.00</strong>
<del>$102.00</del></span>
ADD TO CART
</div>
<div class="total_price_row">
</div>
</div>
</div>
</div>
Javascript For Popup Window
$(document).ready(function() {
$(".view_btn").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
$(document).ready(function(){
// Cufon Functions //
Cufon.replace ('.latest_products_slider ul li a.view_btn',{hover:true});
});
You can use new 'echo'
echo 'View</li>';
instead of using this
echo '<li><img src="admin/'.$rowshirt['image'].'" width="225" height="300" alt="" />
View</li>';
combined 'echo' statement for image and link to View
Use jQuery .load function. Then make a hidden div, tgen on an action, use the load function to load the hidden div and change the css selection to visible. Very simple, add effects as well.