scrolling comments in website

[idchafee]

Check out this screenshot, then look at the website below:



http://www.stemedcoalition.org/

You might have to wait 30 seconds before you see what it does. Basically, it scrolls through a preset progression of quotes.

How can I get that? Remember that I know next to nothing about coding beyond some basic HTML. Is that a flash or something? Or is it coded in HTML? Or is it like a Google gadget or something like that?

I'm asking this for my wife, who was a VB developer before she got promoted to her current "talk on the phone all day" job. So she might understand your replies better than me, although the easier, the better.

Thanks!

[DancinJack]

It's just html and JS.

Maybe looking at something like this will help?

http://wordpress.org/extend/plugins/fle ... e-rotator/

[mortifiedPenguin]

JavaScript. Specifically, an array of quotes being switched in and out on a timer using jQuery.

This is the code from their page:

Code: Select all

<script type='text/javascript'>
quoteRotator = {
i: 1,
quotes: ["'Today, more than ever before, science holds the key to our survival as a planet and our security and prosperity as a nation. It's time we once again put science at the top of our agenda and work to restore America's place as the world leader in science and technology.'<br /> <span id='quoteauthor'>-- President Barack Obama</span>",
"'America faces many challenges...but the enemy I fear most is complacency. We are about to be hit by the full force of global competition. If we continue to ignore the obvious task at hand while others beat us at our own game, our children and grandchildren will pay the price. We must now establish a sense of urgency.'<br /> <span id='quoteauthor'>--Charles Vest, President of the National Academy of Engineering, President Emeritus at Massachusetts Institute of Technology</span>",
"'If America is to maintain our high standard of living, we must continue to innovate. We are competing with nations many times our size. We don't have a single brain to waste. Math and science are the engines of innovation. With these engines we can lead the world. We must demystify math and science so that all students feel the joy that follows understanding.'<br /><br /> <span id='quoteauthor'>-- Dr. Michael Brown, former Nobel Prize winner for medicine and the Paul J. Thomas Professor of Molecular Genetics and Director of the Jonsson Center for Molecular Genetics at the University of Texas Southwestern Medical School in Dallas</span>",
"'Now that we know what works, we should ask government and corporate leaders to take action today. Every minute we wait, we fall further behind other countries.'<br /><br /> <span id='quoteauthor'>-- Tom Luce, CEO National Math and Science Initiative</span>",
"'Only by providing leading-edge human capital and knowledge capital can America continue to maintain a high standard of living - including providing national-security - for its citizens.'<br /><br /> <span id='quoteauthor'>-- Norm Augustine, chair, 'Rising Above the Gathering Storm' Committee</span>",
"'Will America lead...and reap the rewards? Or will we surrender that advantage to other countries with clearer vision?'<br /><br /> <span id='quoteauthor'>-- Susan Hockfield, President MIT</span>",
"“Science, technology, engineering and mathematics (STEM) workers drive our nation’s innovation and competitiveness by generating new ideas, new companies and new industries. However, U.S. businesses frequently voice concerns over the supply and availability of STEM workers. Over the past 10 years, growth in STEM jobs was three times as fast as growth in non-STEM jobs. STEM workers are also less likely to experience joblessness than their non-STEM counterparts. Science, technology, engineer-ing and mathematics workers play a key role in the sustained growth and stability of the U.S. economy, and are a critical component to helping the U.S. win the future.”<br /><br /> <span id='quoteauthor'>STEM: Good Jobs Now and for the Future, U.S. Department of Commerce, July 2011</span>",
"",
"“In 2010, there were 7.6 million STEM workers in the United States, representing about 1 in 18 workers. STEM occupations are projected to grow by 17.0 percent from 2008 to 2018, compared to 9.8 percent growth for non-STEM occupations. STEM workers command higher wages, earning 26 percent more than their non-STEM counterparts. More than two-thirds of STEM workers have at least a college degree, compared to less than one-third of non-STEM workers. STEM degree holders enjoy higher earnings, regardless of whether they work in STEM or non-STEM occupations.” <span id='quoteauthor'>STEM: Good Jobs Now and for the Future, U.S. Department of Commerce, July 2011</span>",
"“The greatest advancements in our society from medicine to mechanics have come from the minds of those interested in or studied in the areas of STEM. Although still relatively small in number, the STEM workforce has an outsized impact on a nation’s competitiveness, economic growth, and overall standard of living . . . STEM jobs are the jobs of the future. They are essential for developing our technological innovation and global competitiveness . . . Regardless of edu-cational attainment, entering a STEM profession is associated with higher earnings and reduced joblessness. For college graduates, there is a payoff in choosing to pursue a STEM degree, and for America’s workers, an even greater payoff in choosing a STEM career.” <span id='quoteauthor'>STEM: Good Jobs Now and for the Future, U.S. Department of Commerce, July 2011</span>",
"“This year, 45 percent of test-takers (compared to 43 percent last year) met or exceeded the ACT College Readiness Benchmark in math, while 30 percent (compared to 29 percent last year) met or exceeded the benchmark in science. In comparison 66 percent and 52 percent met or surpassed the benchmarks in English and reading, respectively, both unchanged from last year. . . . The ACT report also indicates there is substantial room for improvement in college and career readiness. Among 2011 ACT-tested graduates, a combined total of 43 percent met either none (28 percent) or only one (15 percent) of the four ACT College Readiness Benchmarks.” <span id='quoteauthor'>ACT, The Condition of College and Career Readiness: 2011</span>",
"“About 62% of districts the CEP surveys reported that they increased time for ELA and/or math in elementary schools since NCLB was enacted (2001-02). To accommodate this increased time in ELA and math, 44% of districts reported cutting time from one or more other subjects or activities. (social studies, science, art and music, physical education, lunch and/or recess) at the elementary level. The decreases reported by these districts were relatively large, adding up to a total of 145 minutes per week across all of these subjects, on average, or nearly 30 minutes per day. These decreases represent an average reduction of 32% in the total instructional time devoted to these subjects since 2001-02.” <span id='quoteauthor'>Center on Education Policy, Choices, Changes, and Challenges Curriculum and Instruction in the NCLB Era </span>",
"“To make progress in improving STEM education for all students, policy makers at the national, state, and local levels should elevate science to the same level of importance<br />as reading and mathematics. Science should be assessed with the same frequency as mathematics and literacy, using a system of assessment that supports learning and understanding.”<br /><br /> <span id='quoteauthor'>Successful K-12 STEM Education: Identifying Effective Approaches in Science,</span>",
"“National and state policy makers should invest in a coherent, focused, and sustained<br />set of supports for STEM teachers to help them teach in effective ways. Teachers in<br />STEM should have options to pursue professional learning that addresses their professional needs through a variety of mechanisms, including peer-to-peer collaboration, professional learning communities, and outreach with universities and other organizations.”<br /> <span id='quoteauthor'>Successful K-12 STEM Education: Identifying Effective Approaches in Science,</span>",
"“While only four percent of the nation’s work force is composed of scientists and engineers, this group disproportionately creates jobs for the other 96 percent.” <span id='quoteauthor'>National Science Board, Science and Engineering Indicators 2010. Arlington, VA: National Science Foundation (NSB 10-01)</span>",
"“So where does America stand relative to its position of five years ago when the Gathering Storm report was prepared . . . in spite of sometimes heroic efforts and occasional very bright spots, our overall public school system—or more accurately 14,000 systems—has shown little sign of improvement, particularly in mathematics and science.” <span id='quoteauthor'>Rising Above the Gathering Storm, Revisited: Rapidly Approaching Category 5 (2010) </span>",
"“It's well-documented that the United States needs a strong science and technology work force to maintain global leadership and competitiveness. The minds and talents of underrepresented minorities are a great, untapped resource that the nation can no longer afford to squander. Improving STEM education of our diverse citizenry will strengthen the science and engineering work force and boost the U.S. economy.' <span id='quoteauthor'>Freeman Hrabowski III, President of the University of Maryland, Baltimore County. </span>",
"“Underrepresented minority groups comprised 28.5 percent of our national population in 2006, yet just 9.1 percent of college-educated Americans in science and engineering occupations (academic and nonacademic), suggesting the proportion of underrepresented minorities in S&E would need to triple to match their share of the overall U.S. population.” <span id='quoteauthor'>National Research Council, Committee on U.S. Competitiveness: Underrepresented Groups and the Expansion of the Science and Engineering Workforce Pipeline </span>",
"“Maintaining our leadership in research and technology is crucial to America’s success. But if we want to win the future – if we want innovation to produce jobs in America and not overseas – then we also have to win the race to educate our kids.” <span id='quoteauthor'>President Barack Obama, January 2011</span>",
"“America’s long-term leadership depends on educating and producing future scientists and innovators. We will invest more in STEM education so students can learn to think critically in science, math, engineering, and technology; improve the quality of math and science teaching so American students are no longer outperformed by those in other nations; and expand STEM education and career opportunities for underrepresented groups, including women and girls. We will work with partners - from the private-sector and nonprofit organizations to universities - to promote education and careers in science and technology.” <span id='quoteauthor'>President Obama’s National Security Strategy, May 2010</span>",
],
numQuotes: 20,
fadeDuration: 3,
fadeoutDuration: 3,
delay: 15,
quotesInit:   function()
   {
      if (this.numQuotes < 1)
      {
         document.getElementById('quoterotator').innerHTML="No Quotes Found";
      }
      else
      {
         this.quoteRotate();
         setInterval('quoteRotator.quoteRotate()', (this.fadeDuration + this.fadeoutDuration + this.delay) * 1000);
      }
   },
quoteRotate: function()
   {
      jQuery('#quoterotator').hide().html(this.quotes[this.i - 1]).fadeIn(this.fadeDuration * 1000).animate({opacity: 1.0}, this.delay * 1000).fadeOut(this.fadeoutDuration * 1000);
      this.i = this.i % (this.numQuotes) + 1;
   }
}
</script>

The last section is the part you really care about, the first is just the quotes themselves. What this does is create an array of quotes and periodically switch the contents of any element with the id "quoterotator" to the next quote.

edit: cleaned up the code from the page for better readability.

[mortifiedPenguin]

I've written a somewhat simplified version with implementation comments. You mentioned that you know HTML so I didn't comment that section... not that there's much to comment there.

Copy and paste it into a blank HTML document and open it in a browser. Displays the characters a to d in the upper left corner of the browser window, fading in and out as it goes.

Code: Select all

<html>
   <head>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script>
      // declare an array of text
      text = ["a", "b", "c", "d"];
      // declare and initialize our first index to 0 ("a")
      index = 0;
      
      // declare a function that will do the text rotation
      function rotateText()
      {
         // fade out textSpan with an animation length of 500ms
         $("#textSpan").fadeOut(500);
         
         // need a timeout because the next line will execute regardless of
         // whether or not the animation has finished playing
         // here, we delay the next function by 500ms
         // set the text of textSpan to the text in the array at the index
         setTimeout(function(){$("#textSpan").html(text[index])},500);
         
         // fade in textSpan with an animation length of 500ms
         $("#textSpan").fadeIn(500);

         // increment the index so the next time this function runs, we set the text
         // to the next string in text
         index++;
         
         // if we exceed the length of the array, go back to 0 and start over
         if(index >= text.length)
         {
            index = 0;
         }
      }
      
      // tells the browser to call the rotateText function every 5000ms
      // this is where it really starts
      setInterval("rotateText()", 5000);
   </script>
   </head>
   <body>
      <div>
         <span id="textSpan"></span>
      </div>
   </body>
</html>

[idchafee]

She's made some headway with the responses here, so thanks for that. Now she has two more questions

1. how do I display initial text on the page load. There is a delay before the first set of text is displayed
2. How do I change the font size for the text that is displayed

[mortifiedPenguin]

1. how do I display initial text on the page load. There is a delay before the first set of text is displayed

One way to do it is to modify the last piece of JS to look like so:

Code: Select all

   $(document).ready(function()
   {
      $("#textSpan").html(text[index]);
      setInterval("rotateText()", 5000);
   });

You'll see that I wrapped the original setInterval function inside another function "$(document).ready(function(){....});". What this does is tells the browser to wait until everything is done loading then execute the code inside. I moved the setInterval function inside and also added a line that sets the text of textSpan to the string at the default index.

2. How do I change the font size for the text that is displayed

You can accomplish this with CSS. As a quick example, paste the following code somewhere inside the head tag. What it does is change the style for anything with the ID of "textSpan" to have a font-size of x-large.

Code: Select all

<style>
    #textSpan
    {
        font-size:x-large;
    }
</style>

Or you could use CSS classes and modify the span to look like so:

Code: Select all

<span id="textSpan" class="big"></span>

and use this CSS instead:

Code: Select all

<style>
    .big
    {
        font-size:x-large;
    }
</style>

I should also point out that you often want the CSS and JS to be in their own dedicated .css and .js files for caching but that's a topic for another day.

[idchafee]

She got it to work like she wanted, so thanks to all!