Re: Is there a Javascript function to fade into various cont
Posted: Fri Apr 08, 2016 10:24 am
Couldn't really say without seeing your code. You've seen yourself that the code works, so it must be an integration problem.
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
Did you make this change yet?Celauran wrote:you probably want that JS running only once the DOM is ready
Sorry what do you mean??Celauran wrote:Did you make this change yet?Celauran wrote:you probably want that JS running only once the DOM is ready
Code: Select all
<style>
.home-welcometext2
{
display: none;
float: left;
width: 696px;
margin-top: 0px;
margin-bottom: 10px;
font-size: 1.1em;
}
.home-welcometext2:first-of-type {
display: block;
}
.home-welcometext2 img
{
width: 216px;
float: left;
}
.home-welcometext2-content
{
float: right;
width: 460px;
}
.home-welcometext2 h2
{
font-weight: normal;
margin: 0px;
font-size: 24px;
color: #00689B;
}
</style>";
echo "<div id='home-blogrow'>";
$result = mysql_query ("SELECT * FROM static WHERE section = 'welcometext2'");
echo "<script>
var elements = $('#home-blogrow').children();
var currentIndex = 0;
function fadeToggle() {
var nextIndex = currentIndex + 1;
if (nextIndex >= elements.length) { nextIndex = 0; }
$(elements[currentIndex]).fadeOut(400);
setTimeout(function() {
$(elements[nextIndex]).fadeIn();
}, 400);
currentIndex = nextIndex;
setTimeout(fadeToggle, 3000);
}
fadeToggle();
</script>";
while ($row = mysql_fetch_object($result))
{
echo "<div class='home-welcometext2'><a href='$row->url'><img src='/images/home/$row->image' alt='$row->alttag'/><div class='home-welcometext2-content'>$row->content</div><div style='clear: both' ></div></a></div>";
}
echo "</div>";
Code: Select all
$(document).ready(function() {
// other stuff here.
var elements = $('#home-blogrow').children();
var currentIndex = 0;
function fadeToggle() {
var nextIndex = currentIndex + 1;
if (nextIndex >= elements.length) { nextIndex = 0; }
$(elements[currentIndex]).fadeOut(400);
setTimeout(function() {
$(elements[nextIndex]).fadeIn();
}, 400);
currentIndex = nextIndex;
setTimeout(fadeToggle, 3000);
}
fadeToggle();
});Code: Select all
var VanillaRunOnDomReady = function() {
var elements = $('#home-blogrowinner').children();
var currentIndex = 0;
function fadeToggle() {
var nextIndex = currentIndex + 1;
if (nextIndex >= elements.length) { nextIndex = 0; }
$(elements[currentIndex]).fadeOut(400);
setTimeout(function() {
$(elements[nextIndex]).fadeIn();
}, 400);
currentIndex = nextIndex;
setTimeout(fadeToggle, 6000);
}
fadeToggle();
}
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}Code: Select all
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}Wow, don't do that!simonmlewis wrote:I'm got it working, but only by saving your Fiddle page, and then saving the iframe and using that!!
Looking at it quickly, it appears you've concocted your own $(document).ready() which absolutely should not be necessary. Is jQuery loading? Do you have the toggle inside a document.ready() block?simonmlewis wrote:This code in the <Script> is not exactly what you put in the fiddle screen, so not sure why it works only with BOTH sets of the code:
If I remove this:Code: Select all
var VanillaRunOnDomReady = function() { var elements = $('#home-blogrowinner').children(); var currentIndex = 0; function fadeToggle() { var nextIndex = currentIndex + 1; if (nextIndex >= elements.length) { nextIndex = 0; } $(elements[currentIndex]).fadeOut(400); setTimeout(function() { $(elements[nextIndex]).fadeIn(); }, 400); currentIndex = nextIndex; setTimeout(fadeToggle, 6000); } fadeToggle(); } var alreadyrunflag = 0; if (document.addEventListener) document.addEventListener("DOMContentLoaded", function(){ alreadyrunflag=1; VanillaRunOnDomReady(); }, false); else if (document.all && !window.opera) { document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>'); var contentloadtag = document.getElementById("contentloadtag") contentloadtag.onreadystatechange=function(){ if (this.readyState=="complete"){ alreadyrunflag=1; VanillaRunOnDomReady(); } } }
It doesn't work.Code: Select all
var alreadyrunflag = 0; if (document.addEventListener) document.addEventListener("DOMContentLoaded", function(){ alreadyrunflag=1; VanillaRunOnDomReady(); }, false); else if (document.all && !window.opera) { document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>'); var contentloadtag = document.getElementById("contentloadtag") contentloadtag.onreadystatechange=function(){ if (this.readyState=="complete"){ alreadyrunflag=1; VanillaRunOnDomReady(); } } }
But if I leave it in it does work, BUT... it fades out of the first entry immediately, and then loads the second and it's fine after that. So why would:
a) it work only when both sets of code are there, and;
b) fade out the first row immediately?
Hard to say exactly as that snippet of code you posted above does not exist in a vaccuum. You mentioned the JavaScript is tucked away inside its own file, which is a good thing. Is your site using jQuery? Is the code from the fiddle waiting for the DOM to be ready? Shortest way I can describe it is like so:simonmlewis wrote:Where is it wrong and would SHOULD it be
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<!-- // Stuff here -->
<script src="/path/to/jquery.js"></script>
<script src="/path/to/your.js"></script>
</body>
</html>Code: Select all
$(document).ready(function() {
var elements = $('#home-blogrowinner').children();
var currentIndex = 0;
function fadeToggle() {
var nextIndex = currentIndex + 1;
if (nextIndex >= elements.length) { nextIndex = 0; }
$(elements[currentIndex]).fadeOut(400);
setTimeout(function() {
$(elements[nextIndex]).fadeIn();
}, 400);
currentIndex = nextIndex;
setTimeout(fadeToggle, 6000);
}
fadeToggle();
});