Is there a Javascript function to fade into various content?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Couldn't really say without seeing your code. You've seen yourself that the code works, so it must be an integration problem.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

But how, if that code I pasted in here, isn't working? That's it in the raw. What you put up.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Celauran wrote:you probably want that JS running only once the DOM is ready
Did you make this change yet?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Celauran wrote:
Celauran wrote:you probably want that JS running only once the DOM is ready
Did you make this change yet?
Sorry what do you mean??
How do I implement that bit?

Everything else is ready. If all else fails I'll just do an orderby rand() from the db, but would be great for it to fade/animate on screen.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

This is the core of it at the moment.

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>";
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Don't mix everything together like that. If you insist on keeping all your concerns in the same file, at least move your JS to its own section. Then just wrap your JS in document ready, so

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();
});
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

No, that JS script is normally in a JS file, with others.
But that should not stop it working - it was there to show you the script... that isn't operating.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

I'm got it working, but only by saving your Fiddle page, and then saving the iframe and using that!!

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:

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();
        }
    }
}
If I remove this:

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();
        }
    }
}
It doesn't work.

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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

simonmlewis wrote:I'm got it working, but only by saving your Fiddle page, and then saving the iframe and using that!!
Wow, don't do that!
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:

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();
        }
    }
}
If I remove this:

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();
        }
    }
}
It doesn't work.

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?
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
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Sorry...??
What I have sent you is the code I am using. Where is it wrong and would SHOULD it be, as using exactly what you send on Fiddle, I promise you, does not work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Mismatched tags. Sorry about that. Should be clearer now.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Do you still mean from this page?
https://jsfiddle.net/on0f3xja/1/
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

simonmlewis wrote:Where is it wrong and would SHOULD it be
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:

HTML:

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>
JS

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();
});
Does that make sense?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Ok that code works.
However, it still loads the first db row and immediately fades it to the next one.. where it does it properly.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Add a delay parameter to the toggle function
Post Reply