I have some data displayed on screen
php:
echo'
<script>
$(document).ready(function(){
window.print();
});
</script>';
$sql="SOME QUERY";
$result=$conn->query($sql);
if($result->num_rows>0)
{
while($row=$result->fetch_assoc())
{
echo'<div id="one">
....content....
</div>';
echo'<div id="two">
....content....
</div>';
}
}
now when the page loads the whole page displayed gets printed ( as the function suggest in jquery), but is it possible to print #one on page 1 , and #two on next page (no matter how much content is in these division)
Create a page class for your elements, and add a page-break after them using CSS, so each will be printed to a new page
#media print {
.page{page-break-after: always;}
}
And change the php code to:
while($row=$result->fetch_assoc())
{
echo'<div id="one" class="page">
....content....
</div>';
echo'<div id="two" class="page">
....content....
</div>';
}
Related
I have this problem: I can't find out how to hide a div that appears just when session begins. So I a have a X button for closing, and when the page is refreshed, the div appears again! But I don't want to stop the session.
My code:
<div id="got-points" style="display:<?php echo (isset($customer) && !empty($customer) && isset($customer['customer']) && !empty($customer['customer'])) ? 'block' : 'none'; ?>"> // Checks if session is active
<div class="got-points-bg" style="display: visible;">
<div class="got-points-box">
<img class="got-points-close" src="<?php echo base_url();?>static/images/i8.png" /> //Close Button
My text here
</div>
</div>
</div>
And js
<script>
$(document).ready(
function() {
$(".got-points-close").click(function() {
$(".got-points-bg").hide("fast");
});
});
</script>
If it is on refresh then it is easy; just do it in the PHP session; like this:
HTML:
<div id="got-points" style="display:<?php echo (isset($customer) && !empty($customer) && isset($customer['customer']) && !empty($customer['customer']) && empty($_SESSION['first_load'])) ? 'block' : 'none'; ?>"> // Checks if session is active
<div class="got-points-bg" style="display: visible;">
<div class="got-points-box">
<img class="got-points-close" src="<?php echo base_url();?>static/images/i8.png" /> //Close Button
My text here
</div>
</div>
</div>
and in your PHP before then (like on login/session start) - this will obviously need significant editing since you haven't included your PHP I can't guess it very well, but this should provide a starting point:
<?php
//load user check pseudo code
if !empty($_SESSION[user]) and whatever other checks... {
$_SESSION['first_load'] = False; //important line number 2
}
//login pseudo code to demonstrate placement within your code
if user & pass = valid {
$_SESSION['first_load'] = True; //important line number one
}
That is assuming you want th div output but not displayed on subsequent loads.
Interesting question, how about something like this?
<?php
if(isset($_SESSION['variable'])){
sleep(3); /* Duration(in seconds) div is displayed for */
echo
"<script>
$( document ).ready(function() {
$(".got-points-bg").hide("fast");
});
</script>";
}
?>
try this
<?php error_reporting(0); session_start(); if(empty($_SESSION['user'])) echo "<div id='togglediv'> My text here </div>"; ?>
hope it will work
I have a page which consists of three tabs each with labels. Clicking the label opens up each tab (by showing/hiding the divs). Each tab contains MySQL data, with arrows at the bottom of each tab to go the next 'page' of data.
My Problem, when you click the arrow, the page does indeed go to the next page of data, BUT the default tab (tab1) is made visible and the other two hidden, so if you're on tab two, hit the next arrow, you're taken back to tab1 and have to hit tab3 to see the data.
Link to site here
The script to change visibility of the tabs is here:
<script type="text/javascript">
$(document).ready(function () {
$("div.tab-headers>a").click(function () {
// Grab the href of the header
var _href = $(this).attr("href");
// Remove the first character (i.e. the "#")
_href = _href.substring(1);
// show this tab
tabify(_href);
});
tabify();
});
function tabify(_tab) {
// Hide all the tabs
$(".tab").hide();
// If valid show tab, otherwise show the first one
if (_tab) {
$(".tab a[name=" + _tab + "]").parent().show();
} else {
$(".tab").first().show();
}
}
// On page load...
$(document).ready(function () {
// Show our "default" tab.
// You may wish to grab the current hash value from the URL and display the appropriate one
tabify();
});
</script>
and tab2's code is:
<div class="tab">
<a name="tab2"></a>
<img src="images/glossary_shiptype.png" width="1643" height="952" />
<div class="glossary_body">
<table width="740" border="0">
<?php do { ?>
<tr>
<td><?php echo $row_ship_type['term']; ?>:</td>
<td><?php echo $row_ship_type['definition']; ?></td>
</tr>
<?php } while ($row_ship_type = mysql_fetch_assoc($ship_type)); ?>
</table>
</div>
<div class="glossary_arrow_back">
<?php if ($pageNum_ship_type > 0) { // Show if not first page ?>
<img src="images/arrow_left.png" />
<?php } // Show if not first page ?>
</div>
<div class="glossary_arrow_forward">
<?php if ($pageNum_ship_type < $totalPages_ship_type) { // Show if not last page ?>
<img src="images/arrow_right.png" />
<?php } // Show if not last page ?>
</div>
</div>
hi you have to pass tab id in paramater #tab1 or #tab2 or #tab3 and if you get #tab2 in query string and moving to #tab3 you have to remove #tab2
I am trying to make a div where I include PHP web pages into it, however when I click any link inside the div, it loads in new window.
Does anyone know how to solve this problem?
I also tried using an iframe instead of a div but it caused other problems.
HTML code:
<div id="cover5">
<div id="warning">
<?php include 'SignIn.php'; ?>
<p align="center">
Home
</p>
</div>
</div>
JS code:
function cover5() {
var cover = document.getElementById('cover5');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
You have to make a distinction bitween the client-side and the server-side of a Web application.
<?php include 'SignIn.php'; ?> is a server-side command, because of the <?php ?>, which means that the user will never see that line exactly.
If your SignIn.php file contains for example my link, the user will only get the ouput of that inclusion, i.e.
<div id="warning">
<a href="go-there.php">my link</a
</div>
When the user clicks on the link, his browser will load it as if this <a /> would have been hard written within your HTML code directly, and then open it in a new window.
I don't no how to do it using native JS, but with jQuery, you can try something like this:
$(function() {
$("#warning a").each(function() {
$("#warning").load($(this).attr("href"));
});
});
To render html from a specific link within an element on the page you need to run an ajax GET call, and load the html. Then insert the response in your div.
using jQuery:
$("a").click(function(){ //calls function when anchor is clicked
var link = $(this).prop("src"); //finds the link from the anchor
$.get(link,function(data, status, xhr){ //makes an ajax call to the page
$("#myDiv").html(data); //replaces the html of #myDiv with the returned page
});
});
Hope that helps
HTML CODE :
<div id="cover5">
<div id="links">
<p align="center">
Home
</p>
</div>
<div id="warning">
<?php include 'SignIn.php'; ?>
</div>
</div>
and JS code:
function cover5() {
var cover = document.getElementById('warning');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
Whenever an user click on the link in "links" div it will call JS function "cover5()"
You can use jQuery or ajax to pop-up "warning" div
In your code you added the links to the worning div so as when in second time ti will hide all the links form there.
I am having a hard time getting the javascript to execute after the div #mcs4_container has been populated, it instead fires before any content has been loaded. This is a piece of a processing page from a .post(), so unfortunately I cannot put it on (window).load because the window is already loaded. mCustomScrollbar is a jquery plugin that adds a scrollbar to the content included in mcs4_container. Below is the relevant php:
echo
'<div id="reserveAPickupAppointmentForm6">';
if (mysql_num_rows($result) == 0) {
echo
'There are currently no appointments available online for this date. Please call or email the office to set up a custom time.';
}
else {
echo
'<div id="mcs4_container">
<div class="customScrollBox">
<div class="container">
<div class="content">';
while($row = mysql_fetch_array($result)) {
echo
'<div class = "hoverLive2 reserveAPickupAppointmentDateText reserveAPickupAppointmentButtonText">'
.$row["date"].
'</div>';
}
echo
'</div>
</div>
<div class="dragger_container"><div class="dragger"></div></div>
</div>
</div>';
echo
'</div>';
echo
'<script>
$("#mcs4_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"fixed","yes","yes",10);
</script>';
}
$.post('/whatev', function() {//this is your callback});
If you're using jQuery, the above should give you a callback that fires when your post request is filled.
Not 100% sure if that's what you want.
I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.
here is the HTML/PHP
<div class="couplistMeta">
<a class='view' rel="viewinfo" href="#">View Coupon</a>
<a class="print" href="#">Print</a>
</div>
<div class="info">
<p><?php echo $rec2[4]." -- Phone: ".$rec2['phone']; ?></p><p><?php echo $rec2['address']." -- ".$rec2['city'].", ".$rec2['state']." ".$rec2['zip']; ?></p>
</div>
Here is the Javascript
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$('div.info').slideToggle(400);
return false;
});
});
I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?
Try this:
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$(this).parent().next('.info').slideToggle(400);
return false;
});
});
The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.