I created this question before but in another way and got no answers. So today I wrote some simple code to share my problem in a clear way.
I used jQuery to call an image slideshow function.
The AJAX function in show.php will call get.php and print the results in a DIV.
My problem is that sliding (prev - next) inside the DIV supplied by get.php does not work in show.php. But if I call get.php directly in my browser, then it works.
I am confused, I guess I have an error in my div when calling AJAX.
My Files
show.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test </title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="newscript.js"></script>
<link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/2/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include("samiloxide.php");
$sql=mysql_query(" select * from section ");
while($r=mysql_fetch_array($sql)){
echo "<li><a onclick='loadpage($r[id])' >$r[section]</a></li>" ;
}
?>
<div id="pageContent"></div>
</body>
</html>
newscript.js
var section;
function loadpage(section){
var section = section.toString();
$.ajax({
type: "POST",
url: "get.php",
dataType: "script",
data: ({section : section}),
success: function(html){
$("#pageContent").empty();
$("#pageContent").append(html);
}
});
}
get.php
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
<!--
#gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;}
#gallery{position: relative; left: 0; top: 0;}
#gallery li{float: left; margin: 0 20px 15px 0;}
#gallery li a img{border: 4px solid #40331b; height: 175px; width: 160px;}
#gallery-controls{margin: 0 auto; width: 732px;}
#gallery-prev{float: left;}
#gallery-next{float: right;}
-->
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
// Gallery
if(jQuery("#gallery").length){
// Declare variables
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
-->
</script>
<?php
include("samiloxide.php");
//if(!$_POST['page']) die("0");
$section = (int)$_POST['section'];
$sql=mysql_query(" select * from images where section='$section'");
echo "
<div id='gallery-wrap'>
<ul id='gallery'>
";
while($rr=mysql_fetch_array($sql)){
echo " <li><a href='$rr[image]'><img src='$rr[image]' alt='' /></a></li>";
}
echo "
</ul>
</div>
<div id='gallery-controls'>
<a href='#' id='gallery-prev'><img src='images/prev.png' alt='' />next</a>
<a href='#' id='gallery-next'><img src='images/next.png' alt='' />last</a>
</div>
";
?>
This is a bit complicated, and I am unable to provide a quick fix to your code that you could just copy, paste and verify.
In get.php, you load a document with a gallery, and you make it a working gallery from $(document).ready().
But in show.php, when you load the get.php file, $(document).ready() is not called. The $(document).ready() of show.php was already called long before, and your document is now in the interactive state. So when you load the layout, you do not automaticallly execute the code that makes that layout work.
You have to move the $(document).ready() code in your get.php into show.php, and then bind it to the AJAX call completion. Or unbind the code in get.php: just call it from the end of the HTML without wrapping it in $(document).ready().
This is not guaranteed in all browsers all the time, though, because while $(document).ready() is called properly on document being ready, in show.php what you do is you ask to load a HTML file.
And the HTML gets loaded, and so onLoad gets fired. You can't expect different.
Then that HTML asks to load other assets (such as images), but the browser did not know this. It has already fired the onLoad and so you already executed the gallery setup code. If the layout requires the images' SRC to be already loaded in order to style properly, then it will not always work. It might work the second time because the images are in the browser cache. It may work on fast connections and not on slow connections; it may work with small images, quickly loaded, and not with larger images. All these behaviours indicate that images being already loaded is necessary.
Again, a quick and dirty fix is to fire the setup after a suitable delay (but what is suitable? You can't know). Another possibility, if all the images are of known sizes, is to supply those sizes in HTML or CSS. After all, the layout usually requires images being loaded so that they occupy space on the page, but for that, you don't need images to be actually displayable. They might be empty spaces (maybe styled with a background).
A third possibility, more complicated but guaranteed to work in all browsers, is to save the image SRC's into another kind of tag (e.g. DIVs with a class of imageloading, by default hidden), and after the load() success to analyze these tags and convert them to IMGs attaching an onload to them. When all those onloads have fired, you know that it's OK to launch the gallery setup. While longer to describe (and code), this last method is actually much faster than the naive "quick fix: wait a bit and fire setup" one.
Related
I want to show loading icon until pdf is loaded into the webpage.I have pasted what I have tried but loading icon keeps on displaying even the pdf is loaded fully. So, I concluded $iFrame.load(function() doesn't trigger anything. Got this code from JSFiddle. But in JSFiddle it is working.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
iframe {
width: 100%;
height: 100%;
border: 5px solid green;
}
</style>
<script>
$(function(){
var $iFrame = $('iframe');
$iFrame.load(function(){
$('h3').html('PDF Loaded!');
});
$('h3').html('Loading PDF...');
$iFrame.attr('src', 'http://listic.ru/jQuery_Cookbook.pdf');
});
</script>
</head>
<body>
<h3></h3>
<iframe></iframe>
</body>
</html>
I need to do an additional check for caches files (who fired the event, just before added an event handler listening for it). I tried the following jquery and it worked fine.
$iFrame.on('load', function() {
$('h3').html('PDF loaded...');
}).each(function() {
if(this.complete) $(this).load();
});
How to change the alert box size?
I use the following coding.
In Firefox the alert box resize automatically but it not change in chrome?
Kindly give a solution.
window.alert("You answered all questions. Press OK to continue.");
You can't change the size/formatting/title (default settings) of the Javascript Alert Box. Instead you should check out JQuery Alert Box.
The Resizable JQuery Alert Box
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
To clarify: When you use window.alert() you are using resources of your browser, not of your web page. It's the browser then who is responsible for creating the alert box, and thus you cannot influence its properties (like size etc.)
I placed a single space in a new line at the end of my string which increased the length to a standard Windows message box.
Alert ("Hello World\n ");
I have a simple php if statement that checks for an error return on a form submit basically.
<?php if ($this->session->flashdata('error')): ?>
×
<div class="alert alert-error" id="error"><?php echo $this->session->flashdata('error'); ?></div>
<?php endif ?>
And I have this script that I want to put into this php so when the php is true the login box or account-container will shake.
$("#account-container").addClass("animated shake");
I tried echoing the script inside the php but all that was give me echo ; displayed on the page when the if was true.
Maybe you can use this script, I'm not at ease with jquery and you would have to adapt the code:
$(function(){
if ($("#error").length !== 0) {
$("#account-container").addClass("animated shake");
}
});
Place it in the header as javascript source or embedded in a script tag
The $().load hook the containing handler to the onload event in the page*
The function simply check if there is an element in the page with id error and
add the class to the #account-container element if is the case.
I won't use $().ready() as the dom can still be partially rendered
References:
http://api.jquery.com/ready/ Says to use .load() function for onload event and
alert that a <body onload="something"> tag is not compatible with the jquery event management
http://api.jquery.com/load/ Can be useful
I think that you are using Jquery for the javascript shake, you should call the javascript routine when the page is ready to load
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shake demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to shake the box.</p>
<div id="toggle">This is rendered by PHP</div>
<script>
$( document ).ready(function() {
$( "#toggle" ).effect( "shake" );
});
</script>
</body>
</html>
Note that the whole page is rendered by PHP, and the script will work when the document render is ready.
I'm actually working on a PHP project using MVC structure, including DOCTYPE & HEAD tag via a single file during an output buffering using ob°start().
The problem comes when i wanna declare a min-height property for may page container, in order to stick the footer at the bottem of the page. ob_start() -- ob_get_clean() use seems to forbid browsers to access these properties in time so they can't evaluate height value.
This is my index.php file:
<?php
include_once('global/init.php');
ob_start();
if(isset($_GET['module'])){
$module = dirname(__FILE__).'/modules/'.htmlspecialchars($_GET['module']).'/';
$action = (isset($_GET['action'])) ? htmlspecialchars($_GET['action']).'.php' : 'index.php';
if(!file_exists($module.$action)){
include('global/home.php');
}else{
include($module.$action);
}
}else{
include('global/home.php');
}
$content = ob_get_clean();
include_once('global/header.php');
echo $content;
include_once('global/footer.php');
the header.php file contains the doctype, and the first basics of html:
<html>
<head>
<meta charset='UTF-8' />
<title><?php echo "LiveSession".' '.DOMAIN_INFOS;?></title>
<meta name='description' content='<?php echo $_SESSION['currentDesc'];?>' />
<meta name='keywords' content='<?php echo $_SESSION['currentKWds'];?>' />
<link rel='stylesheet' media='screen and (max-width:480px)' href='css/smartphones.css' />
<!-- TABLETS -->
<script type='text/javascript' src='scripts/jquery.1.7.js'></script>
<script type='text/javascript' src='scripts/poll_edit.js'></script>
<script type='text/javascript' src='scripts/smartphones.js'></script>
</head>
<body>
<div id='page'>
<div id='header'>
<h1><a href='index.php'>InteractivePollSession</a></h1>
<?php
if(is_connected_user()){
echo "<span id='disconnector'><a href='index.php?module=members&action=dscnx' title='disconnect'>Disconnect</a></span>";
}
?>
</div>
<div id='contentWrap'>
the footer:
</div>
<div id='footer'>
<span id='central-footer'>© <a href='http://www.jsteitgen.com'>JSTeitgen</a></span>
</div>
</div>
</body>
And a basic css exemple:
body{height:100%;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
Does any one know how to fix this using ob_start() ?
Of course, every other CSS rules work fine except this ...
Thank's
JS
The ob_start() is not the problem. The problem is only a html/css problem. You can only use a height in percentage if the parent of the element has a fixed height.
In your case, #page parent is body and the body's height is 100%, so you can't use a height in percentage for #page. But you can try this for example :
body{height: 1000px;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}
I think the problem is with the css; you are setting the body element's height to 100% of its parent, the html element, which does not necessarily have a height of 100%.
You should be able to solve your problem using:
html, body {
height: 100%;
}
I have an AJAX application which has used CSS divs to create panels on the screen, which are loaded separately and in succession, depending on what was loaded before it. The bottom "panel" is a table showing a list or records from a database. At the top of the database is the name of the table, and I would like a way to have it be always above the list of records. I am unsure of how to do this, if it is with Javascript, or PHP, or css and html.
edit: I tried wrapping the table header in a div and setting the css for this purpose, but the table header does not seem to be in its own header and does not stay on screen separate from the records.
.tableheader {
position: absolute;
}
and
$table = 'AUCTIONS';
$rows = getRowsByArticleSearch($query, $table);
echo '<div id="tableheader" class="tableheader">';
echo "<h1>{$query} Auctions</h1>" . "\n";
echo "</div>";
Have I missed something fundamental here?
I assume you mean to be able to scroll the table without moving the header?
I think your easiest option is the CSS overflow property.
<style type="text/css">
div#dblist {
overflow: scroll;
height: 400px;
}
</style>
<!-- ... -->
<div>Database Title</div>
<div id="dblist">
<table>
<!-- ... -->
</table>
</div>
#Joshxtothe4: It sounds like you've got scrolling set to the wrong element:
<div> <!-- sounds like you have it set here -->
<div><h1>Query Archive</h1></div>
<div> <!-- and want it set here -->
<table>
<!-- ... -->
</table>
</div>
</div>
You shouldn't need absolute positioning for this.
Do you want the table name to be inside the panel with the table? If so, I think it should be pretty straightforward, but maybe I am missing something.
If you want the table name to be positioned outside the panel it comes from, perhaps you could use the CSS property position: absolute (along with a top and left property) to put it at the top of the page.
Alternatively, you may want to use javascript to re-parent the div. For example, if you create an empty div at the top of the page, where you want the title to go, and give it an id titleParent and put the title in a div with id parent, the following javascript snippet should move the title div from the bottom panel to the top div:
var title = document.getElementById('title');
document.getElementById('titleParent').appendChild(title);
Just put that snippet in a <script> block after the bottom panel.
You will want to use tbody (table body) to contain your data, and set overflow:scroll on that element to get the effect you are looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
table {
margin:0;
padding:0px;
}
tbody {
height:80px;
overflow-x:hidden;
overflow-y:scroll;
margin:0;
padding:0;
}
table td, table th{ padding:2px;}
</style>
</head>
<body>
<table>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>