Solved

ASP.NET - Change Background Images of an HTML Table With an Auto Interval

Posted on 2013-12-03
10
605 Views
Last Modified: 2014-01-09
Hi There,

I have an HTML table in an ASPX page.

I want to have the background image of this table to automatically change with an assigned interval.

What is the best way?

Thank you,
0
Comment
Question by:feesu
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 167 total points
ID: 39691987
Check this page :
http://devfiles.myopera.com/articles/621/elementclassnames.html
https://developer.mozilla.org/fr/docs/DOM/window.setInterval
https://developer.mozilla.org/fr/docs/DOM/window.onload

So :
1 - Create a class for each background
2 - using setInterval change the class using a counter
3 - if the counter if greater than the max number of class, reset it to 0

Javascript :
var cnt = 0;
var max = 10; // 10 class 0 to 9
window.onload = function() {
  setInterval(function() {
       var element = document.getElementById('tableID');
       element.className = "backgroundImage" + cnt;
       cnt++;
       if(cnt>=max) cnt = 0;
  }, 1000);
}

Open in new window

CSS :
backgroundImage0 {
    background-image: url(/path/to/image100.JPG);
}
backgroundImage1 {
    background-image: url(/path/to/image114.JPG);
}
...
backgroundImage9 {
    background-image: url(/path/to/image424.JPG);
}

Open in new window

0
 

Author Comment

by:feesu
ID: 39692022
Tell me please, why do I need to create the CSS for each?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39692049
this is the CSS part of my previous answer. I only show three...
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:feesu
ID: 39692142
I understood that. But I am asking why do we need to create a CSS, why not embed variables directly into the javascript function?

Another question, what is the best way to do this in terms of objects, a div, a table td etc..?
0
 
LVL 4

Assisted Solution

by:ItWorked
ItWorked earned 333 total points
ID: 39692296
Well My knowledge and working with dynamic content says that Answer given by leakim971 is the good way rather then directly assigning Image paths from JavaScript.

What it makes difference?
Okay, As the images are part of css all images will be fetched at once and while changing class name through JavaScript won't require loading time of image from server.
Where as in case of directly assigning values, It will load the image at the time when you will assign the path.

Always best practices depends on your requirement.
1) If you are not going to have change in your design you would like to take it as string (which is as HTML)

2) if may have often change for design from client and you don't want to do change in HTML(which as string) in such case you will like to create one template for that and load it dynamically.
0
 

Author Comment

by:feesu
ID: 39693644
Thanks for the elaboration. But what is the difference between loading the picture in an HTML table or a div? or maybe some other element? How do I make what is the best choice?
0
 
LVL 4

Assisted Solution

by:ItWorked
ItWorked earned 333 total points
ID: 39694591
Well, working with div instead of Table ( for structured layout) is bit of difficult ASFA developer's are concerned.

But if you are looking for performance, Div is faster then table while DOM is rendering.

Even for data transmission div structure will have less amount of characters required for creating element then in case of table.

My experience says people in India are used to with Table structure because of productivity whereas people from European, USA and other countries are used with Div structure.
0
 

Author Comment

by:feesu
ID: 39694845
Thank you for writing back.

I have done that, and it works fine, except for the fact that I need the images to fade in/out so that they look a bit better! Any tips?
0
 
LVL 43

Expert Comment

by:Rob
ID: 39767762
I've requested that this question be closed as follows:

Accepted answer: 250 points for leakim971's comment #a39691987
Assisted answer: 250 points for ItWorked's comment #a39692296

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

840 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