Highlighted

Alternating testimonials?

Community Beginner ,
Dec 03, 2019

Copy link to clipboard

Copied

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.

 

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> 

 

 

 

 

 

Topics

Code, How to

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Alternating testimonials?

Community Beginner ,
Dec 03, 2019

Copy link to clipboard

Copied

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.

 

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> 

 

 

 

 

 

Topics

Code, How to

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 03, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Dec 04, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Dec 04, 2019

Copy link to clipboard

Copied

 

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> 

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Dec 04, 2019

Copy link to clipboard

Copied

You.....Are.....Amazing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Dec 05, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Dec 05, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Dec 05, 2019

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Dec 05, 2019

Copy link to clipboard

Copied

looks like its already handled before I saw any of this. Thanks for the help. What you sent is correct and finished out my project!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...