Text display on homepage

Design help General
1

I want to add one of five quotations to the top of the home page, a different quotation each time the page is loaded. I’m not looking for a slider to display them all, one at a time.

Any ideas?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Jonathan,

This is possible with JavaScript, I did this with one of my websites.

  1. Make sure that all of the quotes have the same class name.
  2. Set their display to ‘none’
  3. Insert this code into your <head>
<script>
$(document).ready(function() {
var rand = Math.floor(Math.random()*NUMBER);
var visibleDiv = $('.NAME OF CLASS')[rand];
$(visibleDiv).css('display', 'block');
});
</script>
  1. Change NUMBER to the number of random quotes you have.
  2. Change NAME OF CLASS to the class name of the quote blocks.

Be aware that ‘block’ will display the class as a block so you may wish to change the display to ‘inline’ or ‘flex’ depending on your situation.

I hope this helps.

1 Like
3

James

Thanks for taking the time, I really appreciate it. I’d forgotten about display “none”, so that was a good start, but sadly the code doesn’t make things happen.
This is the code I put in the head as there are 3 quotes and the class is “Quotes”.

<script>

$(document).ready(function() {
var rand = Math.floor(Math.random()*3);
var visibleDiv = $(‘.Quotes’)[rand];
$(visibleDiv).css(‘display’, ‘block’);
});

If you have a minute to take a look, I’d appreciate it.

https://preview.webflow.com/preview/cdl?utm_medium=preview_link&utm_source=designer&utm_content=cdl&preview=1877c5a845ec58eb0be159e792457c47&mode=preview

4

It is only viewable on a LIVE site. Make sure you push to publish and then view it.

5

Good point, well made. Sadly I did that and got nothing.

6

Hello Jonathan. Here is a working example hosted at codepen.

7

@Jonathan_Holden, I actually do not see your script code anywhere on the page.

Where are you placing it?

8

I’ve put it in the Custom Code > Head code. I think that’s the right place…

9

The way you say it it seems like you’ve done it in the project settings area?

10

That’s a good spot for it.

Agreed @Jeandcc

2 Likes
11

yes… wrong place???

1 Like
12

No. Just keep in my mind that that script will run on every page of your website.

(So if you don’t have those divs on all pages, that won’t happen and it will be a useless script)

1 Like
13

If you would like to happen across multiple pages then yes. If the code is only needed on one page, then I would place the code on that page only.

14

If only it would run on the Home page!!!

15

Sounds like you are missing something @Jonathan_Holden

Could you take a screen grab of your custom code in Project Settings?

16

@QA_Brandon, here is his live website. http://cdl.webflow.io/

It seems like he didn’t import jQuery’s library. The dollar sign is not being recognized

1 Like
17

Screenshot%2029-07-2019%2021-35-33
Screenshot%2029-07-2019%2021-35-33749×481 35.8 KB

1 Like
18

@Jonathan_Holden, please, paste the following code before that script, and let us know what happens:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
19

Just done that, still not working…

20

Change on the script “.Quotes” to “.quotes”

JavaScript is case-sensitive and webflow renders your classes starting with lowercase (It doesn’t matter what you set on the designer)