Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 390
  • Last Modified:

Showing a different quote inside a span on every visit in order 1 through an unknown amount and restarting

I currently have about 53 html files. Each containing different quotes, different saying, some with images and some without. The amount of these could fall down to possibly 1 or increase to 200 who knows. Each is numbered 001_quote.html, 002_quote.html and so on.

I am trying to not use SSI because you cannot see the include from inside your HTML editor (GoLive) during editing of the page. It is just a request of my customer. SSI would be a lot easier to do I agree.

Anyhow, would I need to build an array comprised of each page's table and html markup? This would be a pain to maintain such as adding new ones. Is there a way to write just the HTML into the <span id="theQuotes"></span> on the main page from each of the html files? I thought that maybe the array would contain each file such as:

var theQuotes = new Array(
'001_quote.html',
'002_quote.html',
'003_quote.html',
'004_quote.html',
'005_quote.html',
'006_quote.html',
'007_quote.html',
'008_quote.html',
'009_quote.html',
'010_quote.html',
'011_quote.html',
'012_quote.html'
)

but of course all it does is write that actual text to the page.

Anyhow, however way you suggest I do it, how would I show a different one, in order from 001, 002, 003 and so on, on every visit to the page and then when it reaches the end it starts back over to 001. Since the amount of quotes can increase or decrease, can I do it without specifying how many there are? So it will look for the increments but when it does not find a next one, it restarts?

Thank you in advance.
Chris24
0
Chris24
Asked:
Chris24
  • 10
  • 4
  • 3
  • +1
1 Solution
 
mmarksburyCommented:
Not sure if you can do this with JavaScript.  I don't believe that JavaScript has the ability to read in files and output them into a page.

Why not create div tags around the includes, so there is a marker in GoLive?

Also, if you have access to PHP, ASP, or another scripting language, this should be much easier to accompolish.

Good luck!
0
 
nightdriveCommented:
I have done similar in the past with photos. The solution I opted for loaded the next picture into a hidden frame. This frame was written out using javascript, and the output html contained an onload event which could fire code in the main frame. (I found it much easier to keep all code in the same frame). The problem is knowing when to start again. I opted for storing the maximum photo number in a js array, for all areas of the site, so it was hardcoded in. Everytime I added new photos to a particular section, I had to modify my js file. You would find it easy to keep this in a javascript variable in the page, and just update it when new quotes are added.

Doing it automatically... the only thing I can think of is to test whether the hidden frame loads successfully. If it doesn't after a suitable length of time, assume you need to start at 001. Not particularly satifactory, as a network glitch could prevent the next one being displayed.


Another problem is remembering which quote a user got up to. This is impossible between browser sessions without server side code. Most servers support Perl, or ASP. If you went this route, you can easily test whether a file exists in the server side code. It would be my recommendation.
0
 
Chris24Author Commented:
I was thinking of writing the last one viewed to a cookie such as 001 or 002.

No such luck with server technology. I am trying to keep myself out of maintenance and leaving maintenance, as easy as possible, on the customer.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
keteracelCommented:
cookie functions, should be put in head:

<script type="text/javascript">
function createCookie(name,value,days)
{
      if (days)
      {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
      }
      else var expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name)
{
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++)
      {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
} //from quirksmode.org
</script>
0
 
nightdriveCommented:
Ok, no server side, but you could make it sooo easy to update if you did. You could let the client update an XML file, containing the quotes and almost no markup, then get the server side code to read it, extract the data and spit out the html. There are various ways to do this.

Cookies is a good idea, I forgot you can do cookie stuff in js.

After a rethink... the much maligned <iframe> may be the way to go if each quote needs to be in a separate html file. It is compatible with Netscape6, so isn't as bad as it used to be. You can use js to amend the 'src' of the Iframe. Same problems getting at the last quote though.

Other than that, if the quotes aren't too long, consider putting them in an array in a js file, as you originally suggested. Putting the quote text itself in there isn't difficult for someone to update, as long as they remember commas and closing brackets.
0
 
Chris24Author Commented:
I tried iFrame but it ruins the formatting of the page. The quotes are just text and the area I am writing to has a bggraphic. The iFrame covers this up and writes a white area. Sure I can fix it by adding the same bg graphic to the quote html but there again, it requires the customer to do more.

Ok, lets say I do an array. Can someone help me with the looping of the array, saving the last one viewed and showing each in order until the end of the array is reached?

Thanks,
Chris
0
 
keteracelCommented:
In the body we need an iframe:

<iframe id="changeMe" style="" src="loadingpage.html">Sorry, your browser does not support iframe's, please download a useful browser!</iframe>

Then we have a function for changing the src:

<script type="text/javascript">

var theQuotes = new Array(
'001_quote.html',
'002_quote.html',
'003_quote.html',
'004_quote.html',
'005_quote.html',
'006_quote.html',
'007_quote.html',
'008_quote.html',
'009_quote.html',
'010_quote.html',
'011_quote.html',
'012_quote.html'
)

function updateIframe() {
    if (readCookie("pageid") == null) {
        createCookie("pageid", 0, 365);
    }

    var current = readCookie("pageid");

    if (theQuotes[current] != null) {
        document.getElementById("changeMe").src = theQuotes[current];
    } else {
        document.getElementById("changeMe").src - theQuotes[0];
        current = 0;
    }
    createCookie("pageid", current+1, 365);
}

</script>

then in the body tag:

<body onload="updateIframe();">
0
 
keteracelCommented:
well, instead of using a html page with the different quotes, why not just put them in the array?

var theQuotes = new Array(
'this is a quote',
'this is another');

and then just insert these using the method shown above...
0
 
Chris24Author Commented:
Right, however, I was trying not too. The reason is that each quote may be formatted differently. Different type a table, image or no image etc. They are not just quotes. It can be anything ie. news, outage information, quotes, sale items, etc...

Thank you
0
 
Chris24Author Commented:
keteracel,

Where are the readCookie and createCookie functions?

Thanks,
Chris24
0
 
keteracelCommented:
further up the page... I posted them first
0
 
nightdriveCommented:
Something's gotta give. Given the diversity of your source material, it's either:
1) iframe, and ditch the background graphic. All client side
2) server side code to read the file, strip out the unwanted header and footer html, and insert the content inline in your page where-ever you want it.

Just thought of another variation:
3) use one of the iframe methods described above, but load the page into a hidden frame, extract the html, modify it using search and replace or regular expressions in js to get everything between the body opening and closing tags, then write it to your span using innerHtml.
0
 
Chris24Author Commented:
nightdrive, can you explain how to do #3?

Sorry kereracel .. Missed that.. lol
0
 
Chris24Author Commented:
What about the iFrame wanting to scroll if the content is larger? Can it just increase the area it is nested in?
0
 
Chris24Author Commented:
Got it working using iFrame but the script to increment from 001 to 002 to 003 and so on is not working correctly. It repeats some when refreshing.. It has never gone through the list of 30 yet. It seems to only display the first 3 or 4 in the array.

kereracel??

Thanks,
Chris
0
 
Chris24Author Commented:
Actually, it is showing only 1 and 11.
0
 
Chris24Author Commented:
and 111 so it is just appending the 1 I guess...
0
 
Chris24Author Commented:
Ah hah .. Fixed it. Instead of using current+1, use current++ So:

function updateIframe() {
    if (readCookie("pageid") == null) {
        createCookie("pageid", 0, 365);
    }

    var current = readCookie("pageid");

    if (theQuotes[current] != null) {
        document.getElementById("changeMe").src = theQuotes[current++];
    } else {
        document.getElementById("changeMe").src = theQuotes[0];
        current = 0;
    }
    createCookie("pageid", current++, 365);
}

Thanks,
Chris
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 10
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now