View Full Version : Best way to do this?

09-28-2006, 06:54 PM
So this isn't really a coding question, but for my online portfolio, I'm going to have a TV where the buttons are the links to my stuff. I need the images and text to appear on the screen.

I have the sliced images ready, and they're all set up on the page. What would you guys use to send what I need over to the text? I was thinking a new frame, but that'd be a hassle, and I don't know how to do javascript between 2 html files. I was also thinking a div but is there a way to have a bunch of div tags on call? For example, depending on what number they click, the appropriate div would be displayed. I'm sure there's a way to do that, and it seems like the best way.

What are your ideas?


09-28-2006, 07:22 PM
No need to use frames of any sort. Have the whole TV on each page.

09-29-2006, 02:32 AM
but the whole reloading thing is what gets me. I want the user to be able to click a button and have something load only in the screen. I also want a rollover image on the screen for each button (which i can do with javascript just changing the image slice). So, since i'm pretty set on having only the screen load, what would be the best approach?

ugh, but twey, you're always right, so i'll probably just do a whole page refresh... =\

09-29-2006, 02:47 AM
AJAX(with a regular link backup, of course)

09-29-2006, 05:17 AM
Actually, I disagree with Twey on this one. I think reloading the page would be a really bad idea.
For one, it would require using the same layout on each page, which would then need to be modified on each page, causing problems if you needed to change even one small detail.

But he is right that frames would be annoying.
If the issue is simply frames vs reloading the page, I'd choose reloading.

Here are some other ideas---

First option here is to use php (or asp, etc.) to include a layout page into each page. You could either do it with an include statement or just create one page and use get vars, like ?channel=17, to set the "station" or show, or even volume... whatever.

That would solve the problem of editing.

However, you still have the problem of reloading the page. It *would* work, but you would still have:
1. Flashes when you reload, if not pauses/white screens for dialup users.
2. The images would reload which could be slow for some users.

This doesn't mean there is an easy way to code it into a single, non-refreshing page, though.

Of what you said, the div idea is the best, though maybe not exactly that. Depending on the content of the "TV", you could do someting quite easily with javascript. For example, if it's an image, just change the src of that image depending on the link clicked. Even a movie, though that might be a bit harder, but still possible. However, if it is complex, that might be near impossible to code.

AJAX sounds great, but it would be hard to code, then even more of a mess once you started trying to make it work in a majority of the browsers, some of which just won't support it no matter what you do.
It may be the right solution if, and only if, you need a particular thing which can't be accomplished in another way.
The only way that AJAX really makes sense is when you need to fake server side interaction in realtime. The simplest example is a chatroom where the messages are stored in a database.
AJAX is when you NEED both server and client side coding, not just 'cause it might work. With that, you could do the same thing in the script itself, it would just be a long .js file if there are lots of things to including.
For that matter, you could use several JS files and include the right one based on what you want to show. Each just file would simply be a definition of the variable "content" and that would then be displayed on the "TV".
(At least, I think this is possible... sounds good, anyway.)

Now, the other option here, if you need a lot of interaction and would like sounds, moving graphics, layers and so fourth, would be to use flash. I'd highly recommend this if you get to where you feel like you're reaching the max of what html, etc. can handle. There is only a certain amount of graphical functions that can be done in websites. Anything beyond that simply can't be done and are the times (only times) when flash, or another plugin format, such as java, should be used on the page.

Also, if you need to place images on top of the content, you can give divs a z-index (as part of the style= attribute, or the css), and that will make them higher or lower so you can layer things. It's fairly compatible, but not completely, so again, only use them when you need to.

In short, all of the options described could work. You clearly have a fairly complex idea of what you need. I suggest making a list of exactly what you need (that won't be too flexible later, if you decide you want a more advanced function than you planned for), then comparing that to the various languages/strategies available to you. Also consider your audience. Will they have flash? New enough browsers that JS/AJAX will work flawlessly? Etc.

As a guideline, just answer these basic questions--
1. Plain HTML Could you live with the basic approach Twey suggested of using plain html and multiple pages, considering this might not be smooth transitioning between pages?
Yes, then that's all you need.
2. Javascript Would changing contents based in the script work for you? Mainly-- would the contents be simple enough to store in a script without too much trouble?
Yes, try a Javascript approach.
3. PHP Will you need to edit the TV, or is there any possiblity you would need to.
Yes, then you should consider php. It will save a LOT of work editing.
4. AJAX Do you need the page transitions to be fluid and do you php, AND are you willing to sacrifice some compatibility?
Yes, consider AJAX.
5. Flash Does this all sound like it won't work, and you need user interaction with the TV, as well as lots of graphical options, and you're willing to require a plugin?
Yes, use Flash.

My instinct on this would be to go for the PHP one-page approach, using GET variables. I have done this with a few pages myself, like the one I'm working on right now. It works well. Create the layout as html that is output at the end of your script. Then insert a variable as the contents of the TV, or the div you are displaying anything in, etc., then you have your page once output by PHP.
This is a good approach. After that, try to limit filesizes of images and look for ways to encourage browsers to cache the images so they don't need to reload. Simply having them on the same URL will help, I believe.

If that isn't good enough, which it won't be if your plans are more complex, I'd lean toward using flash for this type of content. It is, after all, what all of the pros use to create movie players and such, and would certainly easily suppot everything you are planning.

Last note, on compatibility:
For each issue, there are two types of users on the internet (or browsers): those who can support a certain feature and those who can't.
In this case, it seems that many of the issues would be roughly the same.
What I mean is that it's likely the same users would have a computer that would flash when reloading a plain html page and would not have the flash plugin.
Remember not to choose not to use an option and choose another that is also just as incompatible.
Example: choosing not to use Flash for compatiblity, and using AJAX instead. Most* people with AJAX would also likely have Flash. (*Note "most".)

EDIT: Can we see a link to your page?

09-29-2006, 08:59 AM
blm126 is right: AJAX would be best. However, without server-side scripting you're going to have to store the content in two places: the full page with a copy of the layout, and the "stripped-down" page with only the content, for loading via AJAX. Of course, you could always download the full page with AJAX and strip out the content, but that would be inefficient. Server-side scripting is a definite bonus here.

09-29-2006, 10:59 AM
well I was thinking javascript with div tags because there will be actual html in on the screen, instead of just a changing image. And i need it scrollable. It'll contain text, images, a couple videos, etc. divs seem easiest to me.

I'll put a link up this afternoon. It's really not complex. There's no animations or complex things. Pretty basic.

09-29-2006, 11:18 AM
AJAX can load text and stuff, too. However if it is just a small amount of data then load it all at once and hide some of it with javascript.

09-29-2006, 11:48 AM
yeah, i have no idea how to use AJAX, so I'm thinking about saving the html and then calling it when needed. I guess that's the best option for me. Thanks guys

09-29-2006, 10:13 PM
I don't understand why you guys are pushing AJAX. It's complex, not particularly compatible, and, most of all, not really needed for this.
I'm sure there's another way to do it, especially if you're just wanting to change the content inside an element.

Put the test page up, and I'll take a look and see if anything comes to mind.

AJAX would work, and seems like the right answer, but I think it would be harder and not compatible enough to be worth it.

EDIT: spelling

10-27-2006, 08:23 AM
Which browsers won't work with Ajax?

10-27-2006, 09:25 AM
Define "Ajax."

10-27-2006, 12:26 PM
Which browsers won't work with Ajax?

Does it really matter? The XMLHttpRequest object can be disabled in MSIE, and browsers without script support (and where disabled) also remove the possibility of even primitive forms of client-to-server, scripted activity. On the latter subject, changing the src attribute of img elements can also be disabled in some browsers.