Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

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

 
Jeffrey Ellis
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64851
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Jeffrey Ellis
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64851
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There are checkboxes, like "disable HTML", to control how your post is handled.
 
Jeffrey Ellis
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ah, thanks. Corrected.

Do you know why the code is failing?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64851
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There are no styles, only classes in the page.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64851
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Jeffrey Ellis wrote:
 
Jeffrey Ellis
Greenhorn
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64851
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64851
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, Bear--

I'm not sure what you mean by clean it up.
 
Kerry Wilson
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Kerry Wilson
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64851
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 254
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 23
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
nm. Got it.

float: left;
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic