Skip to main content
jaredhank92
jaredhank92
Participating Frequently
December 4, 2019
Answered

Alternating testimonials?

  • December 4, 2019
  • 2 replies
  • 1742 views

So I have some boxed in testimonials on a website I am building. I am trying to only show three at a time, and have them automatically alternate or rotate on the screen. I've played with different carousel setups, or even setting it up like a slideshow, but I already have a slideshow on the page, and that seems to throw everything off. Any suggestions, ideas, etc. would be greatly appreciated.

 

If there is already a post on this, which I am sure there is, I missed it and would welcome a link to said conversation.

This topic has been closed for replies.
Correct answer osgood_

 

Below is some code for loading quotes from a javascript array of objects every 5 seconds:

 

 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quotes every 5 seconds</title>
<style>
.quote {
width: 30%;
margin: 0 auto;
border: 1px solid #000;
padding: 20px;
}
.quote blockquote {
margin: 0;
padding: 0;
font-size: 30px;
text-align: center;
}
.quote blockquote span {
margin: 0;
padding: 0;
font-size: 18px;
}
</style>
</head>

<body>
<div class="quote">
<blockquote>
The quick red fox<br>
<span>Author 1</span>
</blockquote>
</div>
<!-- end quote -->

<script>
const quote = document.querySelector('.quote');
const quotations = [
{quotation: 'The quick red fox', author: 'Author 1'},
{quotation: 'The lazy brown dog', author: 'Author 2'},
{quotation: 'The cat in the hat', author: 'Author 3'},
{quotation: 'The night watchman', author: 'Author 4'},
{quotation: 'A funny thing happened on the way to the forum', author: 'Author 5'},
];

let count = 0;
setInterval(function(){ 
count++;
if(count === quotations.length) {
count = 0;
}
quote.innerHTML = `
<blockquote>
${quotations[count].quotation}
<br>
<span>${quotations[count].author}</span>
</blockquote>
`;
 }, 
5000);
</script>
</body>
</html>

 

 

 

 

 

2 replies

O
osgood_
Legend
December 5, 2019

Who is marking these responses as correct? The one marked as correct is wrong.

 

The OP wanted a solution that 'revolved' the quotation every 5 seconds not one that randomly loaded a quotation on each page re-load.

 

The code provided is out-dated, using old javascript syntax, very poor.

 

I know you ACP boys and girls like to award points amongst yourselves but seriously even for wrong answers? This forum has reached the gutter and beyond. Its hilariously funny.

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
December 5, 2019

My apologies, I misread the post. I have now rectified the mistake. Normally I have a tendency to give marks to narcisits before favouring my fellow ACP's. Stuffed up big here.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
December 5, 2019

I'm not requesting you to mark my answer as correct - I dont really care who gets the points or is awarded the correct answer, its all meaningless, just dont mark answers which arent correct as being correct, that is mis-leading. Just leave the thread as is if you are unsure as to what is correct, others can make up their own minds as to which response suits them best.

 

As for being a narcissist - I'm more thorough than most, as you know. If you mark me down for being so then its most likely a personality fault that lies with you, not me. I just attempt to provide the best professional responses I can. Sadly 90% of  cretins  in this world don't give a shite, I unfortuanately have to deal with them on a daily basis.

 

Still no worries I'm a forgiver, so have a pleasant day. 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 4, 2019

Keep it simple.   This will load a random quote from a JavaScript array on page reload.  You can add more than one quote to each array if desired.

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Random quotes on page reload</title>
</head>

<body>
<!--quotes-->
<div class="quote">
<script>
var Quotation=new Array() // do not change this!
Quotation[0] = "\<blockquote>The quick red fox<br>--Ann Ominous</blockquote>"
;
Quotation[1] = "\<blockquote>The lazy brown dog <br>--Ann Ominous</blockquote>";
Quotation[2] = "\<blockquote>The cat in the hat fox<br>--Ann Ominous</blockquote>";
Quotation[3] = "\<blockquote>The night watchman<br>--Ann Ominous</blockquote>";
Quotation[4] = "\<blockquote>A funny thing happened on the way to the forum. <br>--Ann Ominous</blockquote>"
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>
</div>
</body>
</html>

 

 

 

 

Nancy O'Shea— Product User & Community Expert
    jaredhank92
    jaredhank92Author
    Participating Frequently
    December 4, 2019

    Hi Nancy, This is great! I can totally work with this. Do you know how I could have these arrays constantly change without reloading the page? for example:

     

    The quick red fox - by: Ann Ominous (shows for 5 seconds, then alternates to...)

    The lazy brown dog - by: Ann Ominous (shows for 5 seconds, then alternates to...)

    The cat in the hat - by: Ann Ominous (shows for 5 seconds, then alternates to...)

     

    I like the random aspect you put in the Javascript, I didn't even think to go that direction, just need these to alternate constantly.

    O
    osgood_Correct answer
    Legend
    December 4, 2019

     

    Below is some code for loading quotes from a javascript array of objects every 5 seconds:

     

     

     

     

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quotes every 5 seconds</title>
<style>
.quote {
width: 30%;
margin: 0 auto;
border: 1px solid #000;
padding: 20px;
}
.quote blockquote {
margin: 0;
padding: 0;
font-size: 30px;
text-align: center;
}
.quote blockquote span {
margin: 0;
padding: 0;
font-size: 18px;
}
</style>
</head>

<body>
<div class="quote">
<blockquote>
The quick red fox<br>
<span>Author 1</span>
</blockquote>
</div>
<!-- end quote -->

<script>
const quote = document.querySelector('.quote');
const quotations = [
{quotation: 'The quick red fox', author: 'Author 1'},
{quotation: 'The lazy brown dog', author: 'Author 2'},
{quotation: 'The cat in the hat', author: 'Author 3'},
{quotation: 'The night watchman', author: 'Author 4'},
{quotation: 'A funny thing happened on the way to the forum', author: 'Author 5'},
];

let count = 0;
setInterval(function(){ 
count++;
if(count === quotations.length) {
count = 0;
}
quote.innerHTML = `
<blockquote>
${quotations[count].quotation}
<br>
<span>${quotations[count].author}</span>
</blockquote>
`;
 }, 
5000);
</script>
</body>
</html>

     

     

     

     

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices