Is there a Javascript function to fade into various content?
Moderator: General Moderators
Re: Is there a Javascript function to fade into various cont
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
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.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
Did you make this change yet?Celauran wrote:you probably want that JS running only once the DOM is ready
-
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
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
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.
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
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.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
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.
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.
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
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:
If I remove this:
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?
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();
}
}
}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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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?
-
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
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.
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.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
Do you still mean from this page?
https://jsfiddle.net/on0f3xja/1/
https://jsfiddle.net/on0f3xja/1/
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
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>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();
});-
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
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.
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.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
Add a delay parameter to the toggle function