I would like to the front page of my site to have a div with rotating educational blurbs (a picture and text). There are 6 different blurbs we’d like to feature and each time a visitor appears, new content in that section of the page would be generated.
I’ve seen a few javascript tutorials but am worried how to proceed if students or teachers have their javascript disabled.
Is there a way to do this with HTML/CSS? Or any other options? My skillset is limited to HTML and CSS unless the instructions are idiot-proof.
This can be done using html and css3 more specifically css animation and transition. here is a simple tutorial on doing it with images and should be very easy to modify for any content.
Hi j – thanks very much for the response. I’m concerned that many of our students and teachers are in other countries and might not have the latest browsers installed.
Is there any way to use an earlier version of CSS to accommodate their needs?
Well according to the charts here http://caniuse.com/#feat=css-animation support in browsers besides IE8 should be supported. So its safe to say you should be good to go with the above solution. Aso you can have a javascript fallback for unsupported browsers. And if those do not work meaning they are on an old browser IE8 or older and with javascript off well then you are gonna have to look at other options maybe a flash fallback. But really you should be good to go with using css3 and a javascript fallback for the vast majority of users.
jgetner — okay, upon reading further, this is a slider that rotates the content while the user is on the page. The group managing this page actually wants us to do a random content such that each time the page is loaded a different story (with image and a paragraph of text) shows up. We already have a slider on the top section of the page and it would get a bit chaotic with two sliders rotating at the same time.
I ran across this article – do you think it’s feasible? It’s from 2004 which gives me pause. What do you think?
Or conversely, can I change the CSS3 you provided so that it doesn’t behave like a slider but only changes content when the page reloads (rather than while the user is browsing the page)?
In that case I would do it with server side scripting.
Either pick a random image from a database, or more simply an array of image names, and slot that in the src attribute.
Two followup questions – do you know any tutorials or articles including such a script? And also, when I do the image names, will I be able to add a paragraph of text description next to the image (each array must be text of an educational tip with an image accompanying it).
In php (my preferred server side language) it can be done with the array_rand function to pick a random entry from an array.
The php processing is quite simple:-
<?php
$animals = array('cat', 'horse', 'dog', 'cow', 'chicken') ; // Create an array
$pick = $animals[array_rand($animals)] ; // Pick a random entry
?>
Then in the html template display the image and include the text from a file:-
You can use a server side language sure but idk if that is the best approach for client side code. Instead it would be easier and make more sense to use javascript. Now there is many ways you can accomplish this but im gonna provide the easiest way.
var contents = ["Good!", "Great!", "Awesome!", "Super!", "Nice!"],
var randomContentItem = contents [Math.floor(Math.random() * contents .length)];
When it comes to changes that happen on page reload, I always go with server-side to ensure the client get what you intend regardless of what does or does not work at their end. I would only resort to client-side scripts for things that change dynamically without any reload.
Thanks so much, SamA74 – I will try this. There are only 6 rotating educational tips so I think this should do fine. (Will let you know if I hash it up! ).
But what you are preaching is overall bad application design. As you are coupling the client side and server side code. Sure alot of people do it but it is far from best practice. What if you want to change back-end from using php to java or asp.net? now you must re-write both your a front-end and back-end to accommodate that change.
Next you must understand that all calls to a server side language and framework are extra calls on the stack that do not need to be made. Sure as a fall back server side makes sense but only as a fallback other than that its just unneeded tool for the job. Don’t code for it to just work code for it to work anywhere anytime.
I also do not make assumptions of a server side language when it can be handled by the front-end. So really you must understand your application design and your end and future goals.
That is extremely bad design. Best practice is to use back end coding as much as possible.
Do not use the front end to handle anything that can be fully handled from the back end. It is guaranteed that a growing percentage of visitors will not run any front end code at all.
For a one off random selection of what to display there is no need for any front end code - the random entry can be selected on the back end and inserted directly into the HTML.
Your code is broken for visitors with JavaScript off whereas SamA74’s code works for all visitors. That makes SamA74’s code the better choice as your code only works for some visitors.
If its a bad design then why are frameworks such as angular growing and being used by more and more companies at a rapid pace? The reason is decoupling the front-end and back-end code. So your UI code can be interchanged with different back-end technologies. Yes your solution is the solution that will work 100% of the time i agree no argument there. But what your missing is its not about what works all the time but what is the reality of my application design to its users.
So you say javascript disabled stops my code and you are correct. But after some quick research you will see that is 1% more or less. That’s where a server side fall back makes sense, But that’s it the rest of the time you can use javascript and not have to use any server side code and this making your website easier to switch back-ends without a total re-write of your front-end.
Now in terms of development isn’t easier to write those 2 lines and randomly pick a content or load it from an ajax request? So now you saved your self time instead of having to write a templated solution on on the server side. Also you have loose coupling to the server side of things.
Next in terms of execution a request is made to apache,IIS, nginx, etc… and they handle the request and decide if it should call up the server side language and let it handle its part of the request or to pass it on to the browser which will handle the html/css rendering and also the javascript execution. There is more into it than that but that’s a rough overview. So when it comes to the request logic of this type of code does it make sense to need to call upon the server side language if you don’t need to? This will always increase the overall execution time.
Now in terms of the future from experience yes the back-end seems stable and very will is most of the time. But now lets look at some history there was a time perl was the php of today and at a time it was looking like it was going to be the main stream server side language for years to come. It was far easier than writing the back-end in c or others. But as we all know perl is still used but no where near what other languages are used on the back-end. Who is to say you want to stay with that same server side language in 5 to 10 years maybe you learn c# or nodejs or java and you want a new back-end? Do you want to have to re-write new templates with your template tags sprinkled in or would you rather just change a few ajax requests and your front-end code works no matter what back-end
Thank you all for a very helpful discussion. I decided to use php because many of our students and teachers do not have the latest browsers so I opted for something that would not depend on their browser ability to process either js or css3.
However, I am still having a problem. I ended up using a php script I found and it works … then every third or fourth reload of the page, generates an error. Any ideas?
The error I get is:
Warning: include(): Filename cannot be empty in /home/french/www/www/blurb.php on line 15
Warning: include(): Filename cannot be empty in /home/french/www/www/blurb.php on line 15
Warning: include(): Failed opening ‘’ for inclusion (include_path=‘.:/usr/local/php56/lib/php’) in /home/french/www/www/blurb.php on line 15
Here is the text I am using in blurb.php:
<?php
//Save this file as 'blurb.php'
//Declare array of files to choose from or in other words - create a list of files
$blurbs=[
'/home/french/www/www/blurb-01.php',
'/home/french/www/www/blurb-02.php',
'/home/french/www/www/blurb-03.php',
'/home/french/www/www/blurb-04.php',
'/home/french/www/www/blurb-05.php',
'/home/french/www/www/blurb-06.php'
];//Note the comma at the end of each file-name except the last one, if you include more files to this list then you must put the comma at the end of the preceding / penultimate file-name
//select a random file from the array
include $blurbs[rand(0, count($blurbs))];
?>
That is used for web applications - not for web pages. There is a huge difference between the two. A web application does everything in a single page and would not be able to function at all without client side processing. A lot of people have JavaScript turned on for the web applications they use and off for most or all web pages.
In this case we are looking at a web page and not a web application and so it has to work with JavaScript off.
Anyway there is no one percentage for people with JavaScript off as it is more and more on a site by site basis. You can probably say that for web applications 0% have JavaScript off and for web pages somewhere between 1% and 10% have it off depending on the site.
In this case since JavaScript isn’t necessary at all you might as well consider that having it not work for one person is not good enough and assume that 100% have JavaScript off (as it is not needed for this page).
