Page 2 of 4

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

Posted: Fri Apr 08, 2016 10:24 am
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.

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

Posted: Fri Apr 08, 2016 10:34 am
by simonmlewis
But how, if that code I pasted in here, isn't working? That's it in the raw. What you put up.

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

Posted: Fri Apr 08, 2016 10:38 am
by Celauran
Celauran wrote:you probably want that JS running only once the DOM is ready
Did you make this change yet?

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

Posted: Mon Apr 11, 2016 4:53 am
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.

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

Posted: Mon Apr 11, 2016 5:24 am
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>";

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

Posted: Mon Apr 11, 2016 6:25 am
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();
});

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

Posted: Mon Apr 11, 2016 6:29 am
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.

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

Posted: Mon Apr 11, 2016 9:15 am
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?

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

Posted: Mon Apr 11, 2016 10:29 am
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?

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

Posted: Mon Apr 11, 2016 10:33 am
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.

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

Posted: Mon Apr 11, 2016 10:52 am
by Celauran
Mismatched tags. Sorry about that. Should be clearer now.

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

Posted: Mon Apr 11, 2016 10:56 am
by simonmlewis
Do you still mean from this page?
https://jsfiddle.net/on0f3xja/1/

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

Posted: Mon Apr 11, 2016 11:00 am
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?

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

Posted: Mon Apr 11, 2016 11:26 am
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.

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

Posted: Mon Apr 11, 2016 11:28 am
by Celauran
Add a delay parameter to the toggle function