Solved

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

Posted on 2004-10-13
18
383 Views
Last Modified: 2013-12-16
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
Comment
Question by:Chris24
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 4
  • 3
  • +1
18 Comments
 
LVL 7

Expert Comment

by:mmarksbury
ID: 12298077
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
 

Expert Comment

by:nightdrive
ID: 12298083
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
 

Author Comment

by:Chris24
ID: 12298399
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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
LVL 9

Expert Comment

by:keteracel
ID: 12298518
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
 

Expert Comment

by:nightdrive
ID: 12298566
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
 

Author Comment

by:Chris24
ID: 12298624
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
 
LVL 9

Accepted Solution

by:
keteracel earned 500 total points
ID: 12298682
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
 
LVL 9

Expert Comment

by:keteracel
ID: 12298711
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
 

Author Comment

by:Chris24
ID: 12298749
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
 

Author Comment

by:Chris24
ID: 12298880
keteracel,

Where are the readCookie and createCookie functions?

Thanks,
Chris24
0
 
LVL 9

Expert Comment

by:keteracel
ID: 12298922
further up the page... I posted them first
0
 

Expert Comment

by:nightdrive
ID: 12298927
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
 

Author Comment

by:Chris24
ID: 12298965
nightdrive, can you explain how to do #3?

Sorry kereracel .. Missed that.. lol
0
 

Author Comment

by:Chris24
ID: 12298986
What about the iFrame wanting to scroll if the content is larger? Can it just increase the area it is nested in?
0
 

Author Comment

by:Chris24
ID: 12300973
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
 

Author Comment

by:Chris24
ID: 12300998
Actually, it is showing only 1 and 11.
0
 

Author Comment

by:Chris24
ID: 12301164
and 111 so it is just appending the 1 I guess...
0
 

Author Comment

by:Chris24
ID: 12302007
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question