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
378 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
  • 10
  • 4
  • 3
  • +1
18 Comments
 
LVL 7

Expert Comment

by:mmarksbury
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 9

Expert Comment

by:keteracel
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:Chris24
Comment Utility
keteracel,

Where are the readCookie and createCookie functions?

Thanks,
Chris24
0
 
LVL 9

Expert Comment

by:keteracel
Comment Utility
further up the page... I posted them first
0
 

Expert Comment

by:nightdrive
Comment Utility
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
Comment Utility
nightdrive, can you explain how to do #3?

Sorry kereracel .. Missed that.. lol
0
 

Author Comment

by:Chris24
Comment Utility
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
Comment Utility
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
Comment Utility
Actually, it is showing only 1 and 11.
0
 

Author Comment

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

Author Comment

by:Chris24
Comment Utility
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now