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 );
});
Related
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>
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').
I put Jquery Tools's Overlay in my site to show a projects' info in several overlays. This works pretty ok, but I have been trying to 'automate' the code to read new projects and load them in overlays. What happen looks ok, but no matter which project I click, the overlays allways load the content of the first project...
I did a lot of googling around and copy-pasting to get this far, I am not (yet) much of a programmer, I hope the code doesn't scare you guys.. ;-)
Anyway, here's a link: http://www.wgwd.nl/test
If you click 'Projects' a normal div opens that loads all the projects it finds (two, for now). When you click one it opens that content in 3 overlays. As said, unfortunately it allways loads the same content independent of which project you click.
I have tried to assign the JScript a unique function name (generated with php from the project's filename) but that doesn't seem to work.
Any ideas? here's my code :
<?
//reads projectfolder and distills
//a basename out of the project description.txt
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
foreach ($textfiles as $textfile) { ?>
<div id="details"> <?
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
// the link that opens the overlays. Don't think the "id" tag is nescessary
echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?>
<!-- defines overlay, hidden by default -->
<div id="dragwindow1" class="overlay ol1">
<a class="close"></a>
<?
include ('content/projects/'.$base_name.'/content.txt');
?>
</div>
</div>
<?
// the description of each project
include ($textfile);
?>
<script>
// within the foreach open all overlays with function name $base_name
var <?=$base_name?> = function () {
$("a[rel]").each(function() {
$(this).overlay().load();
});
}
</script>
<hr />
<? } //end foreach ?>
</div>
<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work -->
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an>
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a>
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a>
<script type="text/javascript">
$(function projects() {
// positions for each overlay
var positions = [
[120, '15%'], //uppper left, #1
[70, '60%'], // lower left, #2
['60%', '40%'], // lower right, #3
];
// setup triggers
$("a[rel]").each(function(i) {
$(this).overlay({
// common configuration for each overlay
oneInstance: false,
// setup custom finish position
top: positions[i][0],
left: positions[i][1],
});
});
});
</script>
Thx in advance!
EDIT: I edited the code to omit all that's unrelated
The question remains: Javascript only returns the content of the first call in the foreach loop. Is there anyway to generate multiple instances of the javascript for each loop in the PHP?
SOLVED! With big, big, help of a friend, who redefined how multiple Overlays from Jquery Tools could work (and should have worked in the first place...)
Without getting too much into it, here's the code for future reference:
Basically the trick is:
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
The complete page is now something like this:
<script type="text/javascript">
$(function () {
// positions for each overlay
var positions = [
['60%', 540], // lower right, #3
[80, '65%'], // lower left, #2
[120, '12%'], //uppper right, #1
];
// setup triggers
$("div.overlay").each(function(i) {
$(this).overlay({
// some configuration for each overlay
// positioning the overlays
top: positions[i % 3][0],
left: positions[i % 3][1]
});
});
});
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
// close all overlays
function closeAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().close();
});
}
</script>
<div id="projectstarter">
<h2>Projects</h2>
<div class="maindetails">
<a class="close"></a> <!-- defines a close button for the overlay -->
<?
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
rsort($textfiles);
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">';
echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>';
include '$textfile'; //project description
} // end MAIN foreach ?>
</div>
</div>
<div id="projects">
<?
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']); ?>
<div id="dragwindow3" class="<?=$base_name?> overlay ol3">
<a class="close"></a>
<h2>Media</h2>
<div class="details">
// include media here
</div>
</div>
<div id="dragwindow2" class="<?=$base_name?> overlay ol2">
<a class="close"></a>
<h2>Credits</h2>
<div class="details">
// include credits here
</div>
</div>
<div id="dragwindow1" class="<?=$base_name?> overlay ol1 ">
<a class="close"></a>
<h2>Content</h2>
<div class="details">
// include content here
</div>
</div>
<? } ?>
<script>
$( "#projectstarter" ).overlay();
$( "#projectstarter" ).draggable().resizable({ghost: true});
$( ".ol1" ).draggable().resizable({ghost: true});
$( ".ol2" ).draggable().resizable({ghost: true});
$( ".ol3" ).draggable().resizable({ghost: true});
</script>
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
I'm reading up all I can on jQuery, but this week I like(need) to finish a website and I could find a solution to this problem in the last eight hours.
Setting
I'm using a ajaxed wp theme which I'm customising to my own liking.
Problem
I've wrote a simple function to change the header image and the header text when you click on the main navigation links.
The function does work in the header.php but doesn't work in a custom front page (main_navp.php) I've included in index.php.
On navp.php there's an image when onclicked should do the same changes as a click on the nav bar.
index.php
<?php get_header(); ?>
<div id="main-content"><div id="inside">
<?php get_template_part('main_navp'); ?>
<?php if// HERE IS THE WP LOOP (not used so left out) //?>
<div class="pagination">
<span class="older"><?php next_posts_link('« Older Entries') ?></span>
<span class="newer"><?php previous_posts_link('Newer Entries »') ?></span>
</div>``
<?php else : ?>
<h1>no posts...</h1>
<?php endif; ?>
</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The function is included in the header.php in the ..head>
<script type="text/javascript">
$(document).ready(function()
{
$("a[title='Gigs']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/gig_header_flip.png)");
$("a#nav_text").html("Gigs");
});
$("a[title='Bio']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/play_header.png)");
$("a#nav_text").html("Biography");
});
$("a[title='Gitaarles']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("li[id='homew']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/header_arty.png)");
$("a#nav_text").html("Home");
});
});
</script>
In the main_navp.php (included in index.php afther the header.php) the function does not work on this item. But it should be triggered by $("p[id='les_mp']").live("click", function() as seen above.
<div id="boxred_b">
<div class=head_box><a>Gitaarles</a></div>
<p class="homeles" id="les_mp">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/les_mp.jpg" />
</p>
The main jquery is caled in the header.php
<script src='<?php bloginfo('template_directory'); ?>/js/jjquery-1.5.2.min.js'></script>
In the footer.php are all of the rest of the jquery functions.
<!-- http://benalman.com/projects/jquery-urlinternal-plugin/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.ba-urlinternal.min.js'></script>
<!-- http://www.asual.com/jquery/address/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.address-1.3.2.min.js'></script>
<script>
// Original JavaScript by Chris Coyier
// Updated October 2010 by Stewart Heckenberg & Chris Coyier
$(".home li.home").removeClass("home").addClass("current_page_item");
$("#column-wrap").append("<img src='<?php bloginfo('template_directory'); ?>/images/ajax-loader.png' id='ajax-loader' />");
$("#s").focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
}
});
if ($(".widget_categories li").length%2 != 0) {
$(".widget_categories ul").append("<li><a> </a></li>");
}
if ($(".widget_tag_cloud a").length%2 != 0) {
$(".widget_tag_cloud").append("<a> </a>");
}
// The reason this JavaScript is in footer.php instead of its own file is basically the next line.
var base = '<?php bloginfo('url'); ?>',
$mainContent = $("#main-content"),
$ajaxSpinner = $("#ajax-loader"),
$searchInput = $("#s"),
$allLinks = $("a"),
$el;
$('a:urlInternal').live('click', function(e) {
$el = $(this);
if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {
var path = $(this).attr('href').replace(base, '');
$.address.value(path);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
$el.addClass("current_link").parent().addClass("current_page_item");
return false;
}
// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();
});
$('#searchform').submit(function() {
var s = $searchInput.val();
if (s) {
var query = '/?s=' + s;
$.address.value(query);
}
return false;
});
$.address.change(function(event) {
if (event.value) {
$ajaxSpinner.fadeIn();
$mainContent
.empty()
.load(base + event.value + ' #inside', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
}
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base);
location = base + '/#' + diff;
}
});
</script>
</div>
I've tried to keep things as short as possible. If you like any more information please ask.
-update
using the live function in the header doesn't seem to solve the problem.
I'm using XAMPP to run the website locally. If it helps I could make an online wp installation or could provide the webside (html/java) source.
Because you are Ajax-ing your page, the events are not subscribed to your new elements. Try using the .live() command.
Also, is this ok?
$("p[id='les_mp']").click(, function()...
Don't know for sure about that comma.
I've tried using the live function in the code like this.
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
in the
$(document).ready(function()
{ .... }
in header.php
Still it doesn't work when be onclicked in main_nav.php
When I put the code out of the main_nav in to the header.php
it works.
You may want to use the method in the link below to refactor the ajax stuff to a separate file. Not sure if it helps with the original problem, but i've seen things work after doing that http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global
basically you get your url into a variable that is being printed and your scripts have access to using wp_localize_script