There is a code given below
header("refresh: 5; url=title.php");
we all know that easy code. but i need a code that will include a page after 5 second.
<?php include 'title.php':?>
this code will how after 5 second and the before link will be hide
You are trying to do something in the client-side, but you're trying to do it with server-side code. It would fit better with Javascript & jquery instead of PHP. You can get what you want with the following:
$(document).ready(function() {
setTimeout(function() {
$("#whereToIncludeDiv").load("include.php");
$("#link").addClass("hide");
}, 5000);
});
Edit:
Here is the full code:
index.php
<p>Some text</p>
<div id="includeDiv"></div>
<p>More text</p>
<script>
$(document).ready(function() {
(function() {
$("#includeDiv").load("includethis.php");
$("#link").addClass("hide");
}, 5000);
});
includethis.php
<p>This is included text</p>
Edit 2:
Here is the full code as it is used on here
index.php (ofcourse, because of the .load, the snippet doesn't work if you click run snippet, but since I couldn't get it all in a codeblock for some weird reason, so this was the easiest solution)
<html>
<head>
<title>Including PHP after x seconds</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<p>Some text</p>
<div id="includeDiv"></div>
<p>More text</p>
<script>
$(document).ready(function() {
(function() {
$("#includeDiv").load("includethis.php");
$("#link").addClass("hide");
}, 5000);
});
</script>
</body>
</html>
includethis.php
<p>This is included text</p>
Edit 3:
To hide one of the paragraphes, use the following:
<p id="hideme">Some text</p>
<div id="includeDiv"></div>
<p>More text</p>
<script>
$(document).ready(function() {
setTimeout(function() {
$("#includeDiv").load("includethis.php");
$("#hideme").css("display", "none");
}, 5000);
});
</script>
Don't "include the content after 5 seconds". Adding delays in server-side code will only delay the rendering of the entire page, which probably isn't what you want. Instead, include it right away, but style it to be hidden. Something as simple as:
<div id="pageTitle" style="display:none">
<?php include 'title.php'; ?>
</div>
Then in client-side code, wait 5 seconds and update the styling. Maybe something like this:
setTimeout(function () {
document.getElementById('pageTitle').style.display = 'block';
}, 5000);
Include in the page invisible, then show it 5 seconds later.
<div id="show-later" class="hidden">
<?php include 'title.php':?>
</div>
<script>
setTimeout(function() {
document.querySelector('#show-later').classList.remove('hidden');
}, 5000);
</script>
Related
I'm trying to refresh this part of the page
<div class="refresh">
<?php
include("message.php");
?>
</div>
with this code :
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#refresh').empty();
$('#refresh').load('message.php');
}, 500);
</script>
Could you help me?
change this
<div class="refresh">
To
<div id="refresh">
because you are using id selector in jquery to load the content.
if you are using $('#refresh') then "#" represents the id, so change this
<div class="refresh">
to
<div id="refresh">
or change this
$('#refresh')
to
$('.refresh').
Well, I've created a code to include a PHP page in a box and not only the normal include ('');
This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$(function() {
var count = 1;
$('#append').click(function() {
if (count < 2) {
$('#parent').append('<div id="first' + count + '">text</div>');
$('#first1').load('../image/index.php');
count++;
}
});
});
</script>
<a id="append">Add DIV 1</a>
<div id="parent">
</div>
</body>
</html>
Now, I've noticed I could "load" a page in html, but all the php and javascript code is "out".
How do I do to have the "real" page inside another.
The PHP code is not returned since it is executed on the server before you get the HTML back from it.
In order to just retrieve it as plain text you will need to change the file you are trying to retrieve.
As far as how to load a page inside another page, you can use iframes for that.
Try this:
<script>
$(function(){
var count = 1;
$('#append').click(function(){
if (count <2){
$('#parent').append('<div id="first'+count+'">text</div>');
$.get('http://test.com/image/index.php',function(data){
$('#first1').html(data);
});
count++;
}
});
});
</script>
I'm having a problem with a simple jquery slide-show (English is not my first language so I'll try to explain it). I have my index.php in which I place the slideshow.html by using jquery. Here's the code for the index.php, the jquery and the slideshow0.html
index.php
<body>
<div class="main">
<div class="contenedorHeader">
<?php include("header.html"); ?>
</div>
<div class="central">
<div class="fondoDescription">
<div id="contenedorDescription"></div>
</div>
<div id="slideshowHolder"></div>
</div>
<div class="footer"></div>
</div>
</body>
jquery code:
$(document).ready(function()
{
$("#slideshowHolder").load("slideshow0.html");
});
slideshow0.html:
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshowContent IMG.active');
if ( $active.length == 0 ) $active = $('#slideshowContent IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshowContent IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
</head>
<body>
<div id="slideshowContent">
<img src="images/slideshows/home/image1.png" alt="Slideshow Image 1" class="active"/>
<img src="images/slideshows/home/image2.png" alt="Slideshow Image 2" />
<img src="images/slideshows/home/image3.png" alt="Slideshow Image 3" />
</div>
</body>
</html>
As you can see, the slideshow0.html is loaded into "slideshowHolder". There's no problem here, but when I click an item in the menu I need to replace "slideshow0.html with another slide-show which is exactly like this one except for the images, and the problem is that the looping interval doesn't works properly, it's like a function is executing twice, or something like that. I've tested the slide-show outside the PHP and they works fine, so I'm guessing is a problem with the PHP or the method to load/replace the HTML.
You can see the project here: http://www.spamtv.com.ar/coya/index.php The first slide-show is slideshow0.html, click in "web" to load the next slide-show (which doesn't works)
When you load/replace the slideshow, the old interval defined by setInterval( "slideSwitch()", 5000 ); is still set and running. Each time you load a new slideshow, a new interval will be defined but the old ones won't be deleted.
You have to manually stop them:
$(document).ready(function()
{
if (slideshowInterval) {
clearInterval(slideshowInterval);
}
$("#slideshowHolder").load("slideshow0.html");
});
And when defining it:
$(function() {
slideshowInterval = setInterval( "slideSwitch()", 5000 );
});
I'm trying to slide one div closed, and another open at the same time using a button. here is my div code:
<div class='toggle_parent'>
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='toggled_content' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
And then the jQuery is as follows:
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none')
$('.toggled_conent').slideDown().css('display', '')
});
});
I've tried so much that my brain doesn't function anymore and I know the answer will be "so easy I should have figured it out", but I'm stuck. I want the toggled content to appear and the toggleHolder to go away when you press the toggler.
Thanks in advance!
Hide your hidden content via javascript instead of the style, and get rid of the .css calls:
$(document).ready(function(){
$('.toggled_content').hide();
$('.toggler').click(function() {
$('.toggleHolder').slideUp();
$('.toggled_content').slideDown();
});
});
Also you had a typo in your .toggled_content selector.
Here's a working JSFiddle.
Have you tried this?
$('.toggler').click(function() {
$('.toggleHolder').slideUp().hide();
$('.toggled_conent').slideDown().show();
});
Please change class name = "toggled_content" to something else in div and jquery so this looks like
jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none');
$('.haveOther').slideDown();
});
});
</script>
HTML
<div class='toggle_parent' style="background-color:#999;">
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='haveOther' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
This will work for you.
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here