Has anyone tried to implement endless scroll in a tab?
Forum user: encinoman
Basic information
| Registered | Nov 7, 2009 |
| Last login | Nov 7, 2009 |
| Forum posts | 5 |
| Direct URL | http://www.flowplayer.org/forum/users/18327 |
Latest forum posts
More than a few of us are having problems with using dynamic content and tooltips. A workaround is to use htmlentities(title) and in place of an img[title], but this is lame. The problem arises mainly when something like an overlay is used in addition to the tooltip, hence it becomes hard to put straight html into the tooltip because of <div> placement. The following code is modified example code. I am trying to get the tooltip to update with each image in a non-scrollable gallery, not just it's title and im not sure where to put the "demotip" div.
<?php
include 'dbc.php';
page_protect();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MY ACCOUNT</title>
<script type = "text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-gallery.css"/>
<style type="text/css">
.items img {
margin:0;
}
.items a {
display:block;
float:left;
margin:20px 15px;
}
#tooltip {
display:none;
background:url(images/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
#gallery .disabled {
visibility:visible !important;
}
#gallery .inactive {
visibility:hidden !important;
}
.pictures {
background-color: #E4F8FA;
padding: 10px;
width: 60%;
height: 20em;
position: center;
* {
margin: 0;
padding: 0;
border: 0;
</style>
</head>
<body>
<div id = "text">
Testing Testing Testing
</div>
<div class="pictures">
<!-- root element for the items -->
<div class="items">
<a id = "test" href="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg" title="Back view">
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" alt= "none" /></a>
<a href="http://farm4.static.flickr.com/3275/2765571978_43771e81eb.jpg" title="From south north">
<img src="http://farm4.static.flickr.com/3275/2765571978_43771e81eb_t.jpg" alt= "none" /></a>
<a href="http://farm1.static.flickr.com/79/244441862_08ec9b6b49.jpg" title="View from the pool">
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" alt= "none"/></a>
<a href="http://farm1.static.flickr.com/28/66523124_b468cf4978.jpg" title="Granite stones">
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" alt= "none"/></a>
<a href="http://farm1.static.flickr.com/164/399223606_b875ddf797.jpg" title="The bronze statue">
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" alt= "none"/></a>
<a href="http://farm2.static.flickr.com/1083/1118933512_5ea1fe8f41.jpg" title="Marble walls">
<img src="http://farm2.static.flickr.com/1083/1118933512_5ea1fe8f41_t.jpg" alt= "none"/></a>
<a href="http://farm1.static.flickr.com/135/321464104_c010dbf34c.jpg" title="Statue again">
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" alt= "none"/></a>
<a href="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" title="Monumental walls">
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_t.jpg" alt= "none"/></a>
<a href="http://farm1.static.flickr.com/153/399232237_6928a527c1.jpg" title="Water view">
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" alt= "none"/></a>
<a href="http://farm1.static.flickr.com/50/117346182_1fded507fa.jpg">
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" alt= "none"/></a>
</div>
</div>
<div id="tooltip"></div>
<!-- "next page" action -->
<a class="nextPage browse right"></a>
<br clear="all" />
<!-- overlay element -->
<div class="simple_overlay" id="gallery">
<!-- "previous image" action -->
<a class="prev">prev</a>
<!-- "next image" action -->
<a class="next">next</a>
<!-- image information -->
<div class="info"></div>
<!-- load indicator (animated gif) -->
<img class="progress" src="http://static.flowplayer.org/tools/img/overlay/loading.gif" alt = "none" />
</div>
<!-- javascript coding -->
<script type="text/javascript">
$(document).ready(function() {
$(".pictures").find("a").tooltip({
// use this single tooltip element for all trigger elements
tip: '#tooltip'
}).overlay({
target: '#gallery',
expose: '#111',
closeOnClick: false
}).gallery({
disabledClass: 'inactive'
});
});
</script>
</body>
</html>
I think you need to make #demo a class. Then use $(.demo).find("a").tooltip('demotip');
I just did the same thing. Look at my last post. If you need more help, I can see what I can do. I am now trying to do the same thing but use html in the tooltips after being generated. It is a bit of a pain.
Hi, Im populating a page of thumbs using a php script. Im trying to echo out the description as the title of the overlay but keep getting a parse error : Parse error: syntax error, unexpected $end. I know this is usually from a missing curly bracket, but that doesnt seem to be the case. I'm not exactly new to web design, but I am just trying to fool around with some ideas. Most of my code comes from the examples on the front page.
Thanks, heres the code I have so far. The parse error is for the last line.
Thanks, heres the code I have so far. The parse error is for the last line.
<?php
include 'dbc.php';
page_protect();
?>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- DOCTYPE is always recommended. see: http://www.quirksmode.org/css/quirksmode.html -->
<head>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<title>My Account</title>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!-- <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script> -->
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/myaccount.css"/>
<style>
/* black version of the overlay. simply uses a different background image */
div.apple_overlay.black {
background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);
color:#fff;
}
div.apple_overlay h2 {
margin:10px 0 -9px 0;
font-weight:bold;
font-size:14px;
}
div.black h2 {
color:#fff;
}
#triggers {
margin-top:10px;
text-align:center;
}
#triggers img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:2px 5px;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
</style>
<!--[if lt IE 7]>
<style>
div.apple_overlay {
background-image:url(images/overlay_IE6.gif);
color:#fff;
}
/* default close button positioned on upper right corner */
div.apple_overlay div.close {
background-image:url(images/overlay_close_IE6.gif);
}
</style>
<![endif]-->
<?php
$user_id = $_SESSION['user_id'];
#echo $user_id;
require 'database.php';
$query = "SELECT id,user_name, title, src FROM photos";
//$query = "SELECT max(id) FROM photos";
$query2 = "SELECT user_name FROM users WHERE id=$user_id";
#echo $query2;
$result = $mysqli->query($query) or die(mysqli_error($mysqli));
$username = $mysqli->query($query2) or die(mysqli_error($mysqli));
$A = $username->fetch_object();
$userName = $A->user_name;
$sql = "select max(id)+1 as maxid from photos";
$result2 = mysql_query($sql);
$field = mysql_fetch_array($result2);
if ($result) {
echo "<ul id='photos'>
";
while ($row = $result->fetch_object()) {
$title = $row->title;
$src = $row->src;
$username_2 = $row->user_name;
$id = $row->id;
$Description = $row->description;
$photo_path='photos/'.$userName.'/'.$src.'-desc.php';
if($userName == $username_2){
$descr = <<<DESCR
<?php
<div id="triggers">
<img src="photos/$userName/thumbs/$src" rel="#photo1"/>
</div>
<div class="apple_overlay black" id="photo1">
<img src="photos/$userName/$src" />
<div class="details">
<h2>$title</h2>
<p></p>
</div>
</div>
<?
DESCR;
$print_html= htmlentities($descr);
echo $print_html;
}
}
}
?>
<script>
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
</body>