aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes How to hide a cell w/ background image until a function call Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to hide a cell w/ background image until a function call" Watch "How to hide a cell w/ background image until a function call" New topic
Author

How to hide a cell w/ background image until a function call

Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Here's my page:

http://charlesnewmanpubl.com/catalog_test.html

I'm trying not to show an image which is the background of a cell of a table, until an onclick event calls a function filling that cell. But, it shows when the page first loads.

Here's my script:



And here's the table:



The cell that's showing is



This is the css that gives it it's background:



I know this is a little verbose to describe such a simple issue, I just don't know which part of this went wrong.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61420
    
  67

First of all, your styles are all over the place! I never put style info in the HTML markup. It's just a mess.

I'd do this very simply by adding a new style class, that specifies the background image, to the element at the point that you want the background to appear.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
That sounds good.

I created the class




Then applied it. Sure enough... it isn't showing on page load.





But it also isn't showing at all, even with text there, when the script is run.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61420
    
  67

There are checkboxes, like "disable HTML", to control how your post is handled.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Ah, thanks. Corrected.

Do you know why the code is failing?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61420
    
  67

First. move all styles out of the HTML. They block any applied by class.

Rule #1: No styles, no script, in HTML.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
There are no styles, only classes in the page.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61420
    
  67

Jeffrey Ellis wrote:
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Wait -- you mean within the html itself?

Ok, before I go through all that work, do you truly believe this will solve the issue in that one cell?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61420
    
  67

I have no idea. But as long as you have styles all over the place like this, they're going to compete with each other. I'm recommending cleaning things up so that you can see what's actually going on.

Best practices are established because they they've been found to work. Mixing style and behavior in with the structural markup is not one of those.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
You have a point.

Ok, all style references have been replaced by classes.

Things seem to have gotten a bit worse, because the text, which hadn't been appearing until the function was called, is now appearing. Aside from that -- and the text isn't meant to be there anyway -- granted, the image still isn't showing with the function call.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61420
    
  67

Now that everything's in one place, go through and clean it up. It should much easier to tell what's being applied.

P.S. The FireBug plugin to FireFox is useful for inspecting style applications.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Hi, Bear--

I'm not sure what you mean by clean it up.
Kerry Wilson
Ranch Hand

Joined: Oct 29, 2003
Posts: 254
I am not exactly sure what you are trying to do but you need to remove the '.' from the beginning of your class name in the html (not the css). If I were you I would take a look at the jquery javascript library (http://jquery.com/). Google hosts it so you do not have to download anything.

just insert:



Once you do this you can setup a class with the background image.



Then it's as simple as.



Hope that helps.


http://www.goodercode.com
SCJP 1.4
Kerry Wilson
Ranch Hand

Joined: Oct 29, 2003
Posts: 254
Jeffrey Ellis wrote:Hi, Bear--

I'm not sure what you mean by clean it up.


Remove all the inline css from your html.

Also, use divs instead of tables. Tables clutter your code and tend to exhibit wonky behaviour when manipulated through javascript / css.

It is unclear (at least to me) what exactly you are trying to accomplish.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Hi, Kerry--

Here's what I'd like to do. I have a skin for the mp3 player on the page. In order to make the player larger than it actually is, I decided to construct the player image from three pieces, a left piece, just an image of the left side of the player, the center piece, which is actually the skin for the player, and a right piece, again, just an image of the right side of the player.

This particular player doesn't have one feature I need -- a track timer. So I made a graphic which would be big enough for me to create my own in js. However, to have the text for that js update properly, I need to place the image itself as the background of the cell next to the skin -- so it looks like one image, but the text can update over it.

With that in mind, I went through and did check for any class in the html with a "." . I didn't see any. If I missed one, please let me know.

As far as the rest, I'm not sure what you're trying to do with the script, etc. Could you talk me through it?

EDITED: BTW, I did install and check the page with Firebug. It reported no errors.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61420
    
  67

I'm not talking about errors. I'm talking about inspecting the styles applied to each element so you can find out why they're not acting like you expect.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Hi, Bear--

Heh... this makes me feel really stupid, but I have no idea what you think I should be doing. Can you give me an example in the code of what I'm looking for?
Kerry Wilson
Ranch Hand

Joined: Oct 29, 2003
Posts: 254
This is the one I am talking about.

Jeffrey Ellis wrote:



As far as the layout, here is how I would lay it out in HTML / CSS. The auto margin on the skin will ensure it is centered. You may have to do a little hacking to insure it renders properly in ie 6. Namely, adding 'text-align: center' to #player.



once you have that, you can slide open the timer when it is clicked using jquery (you will have to add the ui extensions, http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js). I am assuming that is the behaviour you are wanting.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Kerry Wilson wrote:This is the one I am talking about.

Jeffrey Ellis wrote:




Hm... not here. I had that as the first version, but corrected it as soon as I saw it. That was several hours ago... maybe it's your cache?

This is what I have:




This looks really cool. I'm not sure I understand the jquery stuff, but I will google it.

Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Hi, Kerry--

Well, I think I've tried everything. I can't get the damn background image to appear, nor any text at all there.

Here's what I've done:




Then the css



(I wasn't sure what image was supposed to go in #player, so I left it as is.)


Then added this line in the function



All to no avail. I can't even get the player to center, despite the text-align: center;.
Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
Ok. I saw that there were a couple of small errors that were just due to sloppy copying and pasting. So now, the background image is showing, so is the text over it.

But, I still can't center it, and the download button is appearing below the player rather than just to it's side.

Here's the code as it is now:




Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
A bit farther along.

I decided to go back to the table structure, as I couldn't get the damn thing to center any other way. So now I'm having this problem:



timer is the part that's out of whack.

Here's my code. Please excuse the table...:





Jeffrey Ellis
Greenhorn

Joined: Jul 26, 2009
Posts: 23
nm. Got it.

float: left;
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to hide a cell w/ background image until a function call