19 replies [Last post]
travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Howdy,

I've broken the HTML validation in this example to show the effect I've been trying to accomplish.

I've wrapped an anchor tag around the outside of heading element, enabling a cursor hover of the calendar images to change the :hover color of my heading. (check the attached screenshot for clarification).

Any idea on how I can keep this functionality and get back to a properly validated page? I'd love to be able to either click on the heading or the graphic for the hyperlink, and still see the color change to the heading.

Thanks for the brain power!

//craig

AttachmentSize
mouse-over-to-change-h2.png17.9 KB
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I'm pretty sure you are

I'm pretty sure you are going to need to look into javascript to accomplish something like that.

$(".postdate").hover(
      function () {
        $("#travelogue-posts h2).addClass("selected");
      }, 
      function () {
        $(#travelogue-posts h2).removeClass("selected");
      }
    );

I think it's something like that with jQuery - Hugo is better at this stuff then I am... if he reads this post maybe he can correct me if I am wrong.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Interesting

Ahh -- I see the direction you're headed in & found [url="http://docs.jquery.com/Attributes/addClass"]this simple reference[/url] to give me a basic idea of what this scripting does (I'm afraid jquery isn't in my skillset).

Yes, it'd be great to get Hugo's take on what to do here, as I'm not sure how to go about scripting the hover/action.

Great suggestion.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Always use valid markup.

Always use valid markup. For example:

  <ul>
    <li>
      <h2><a href="#"><img src="calendarpage.gif"
           alt="" />The Financial Impact of CouchSurfing</a></h2>
 
      <p class="location"><img alt=""
           src=
           "http://travelogue.travelvice.com/wp-content/themes/travelogue-2008/flags/flag_co.gif"
           style="margin-bottom: -1px;" /> Wherever, Romania <img class=
           "commentcount"
           alt=""
           src=
           "http://travelvice.com/images/global/home_comment-icon.gif"
           style="margin-bottom: -1px;" /> 4</p>
    </li>
  </ul>
================
a {
    color: orange;
    text-decoration: none;
    }
 
a:hover {
    color: blue;
    }
 
a img {
    border: none;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Complicating...

Howdy Gary, thanks for your thoughts.

You're right, tossing the pair of images that make up the calendar graphic inside the tag does indeed give the effect I'm seeking, though really seems to complicate the matter (regarding the positioning and spacing of the graphics and text within each list item).

Since I'll already be having a jquery library loaded on the page for use with another script, I'm left wondering if it's better to spend the time trying to retool something that's working across the board, enhancing with jquery, or mucking about with the positioning yet again.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

You're ignoring the

You're ignoring the simplification afforded by the cascade. Consider the following additions to my example:

ul {
    list-style: none;
    }
 
li h2 {
    margin-bottom: 0;
    }
 
li h2 img {
    float: left;
    }
 
li p {
    margin: 0 0 0 68px;
    }
That is certainly simpler and more robust than a javascript solution.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you describe the anchor

If you describe the anchor first followed by the h2, probably floating the anchor left? and you want a basic scripted solution then this would work (Duece was almost there but would select all the h2 elements)

$(document).ready(function(){
  $("a.postdate").hover(//class postdate moved to anchor
      function () {
       $(this).next("h2").addClass("selected");
      }, 
      function () {
       $(this).next("h2").removeClass("selected");
      }
  );
});

This could use .prev to target the element before if the h2 preceded the anchor in flow; there are a number of approaches one could take to this.

I would ask though why - if the images are simply visual cues and if the asumption is made that the h2 would be a link to a post? - one doesn't simply place the images within the anchor, span and float them, then one hovers the anchor/span image as normal and changes the text color.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Hugo wrote:Duece was almost

Hugo wrote:

Duece was almost there

A) Everyone always misspells my name Sad
2) I never tested the code, just took a semi-educated guess as to how to accomplish the task, thanks for coming in and setting us both straight. :thumbsup:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yeah I knew the moment I

Yeah I knew the moment I typed it that I'd once again misspelt it, I was just too lazy and forgetful to correct it Smile

Your script snippet worked but as there were more than one set of these groups it would end up targeting all h2 elements, thus 'this' also the anchor was the better element to actually work on rather than the span so moved the class, the .next was only that it was the simplest route to the required outcome, but could have used .parent or .get and .find to traverse the elements up and back to the h2.

I do think though that this isn't really a case for a scripted solution but rather one of finding the best markup to facilitate plain CSS styling

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Bandwagon

OK -- I'll jump on the script-free bandwagon.

But! Moving the floated image inside the element means the location would eventually float under the image if the title were long enough (see the attached image).

Thoughts on how I can resolve this? Perhaps wrapping both the header text and the location text inside a

to keep them grouped?

AttachmentSize
keep-location-from-floating-left.png 10.29 KB
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 day ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Option 1. Both images need

Option 1.

Both images need to come before the heading text. Make the first image inline. Put position:relative on the H2. Use AP on the second image to shift it into position below the first.

Option 2.

Images can be placed anywhere in the heading element. Give the H2 padding-left and position:relative. Use AP on both images to shift them into the padding space.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 35 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Not to hijack this thread or

Not to hijack this thread or anything, but what a crazy life you lead Craig. Part of me, and I'm sure you hear this a lot, is pretty envious. Very interesting site, I ended up reading a lot of your blog posts. It's pretty cool what you do, and how you document it. Good luck in all your travels!

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Corrected.

Well all, I think we can mark this one solved! :thumbsup:

I went with option two, as I still needed the images inside the h2 element to make use of the anchor tag's hover effect on the header text.

Hats off to the brains in here! I'm sure I'll be back though Wink, as I'm trying to build this on the road & this only marks the 1/3 page completion point.

Thanks for the well wishes downtap!

//craig, traveling in bulgaria

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Spoke Too Soon

Ugh, but perhaps I spoke too soon.

Any idea why IE 7 doesn't seem to understand that the calendar images should be clickable (the intended hover effect certainly works, but the hyperlink's a no-go)? Naturally, FF3 gets the idea.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I still see invalid markup

I still see invalid markup :? this must be corrected!

BTW it is a great blog, very envious of four years on the road Smile

And the snapshots are wonderful, I'd hesitate from calling them snapshots though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Cheers, Hugo

Thanks Hugo Smile

Strange though -- W3C says things are kosher (XHTML, CSS)

What snippet are you looking at?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Apologies; I was looking at

Apologies; I was looking at the original link, but perhaps I needed to do a forced refresh. It is indeed valid, transitional though Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

Strange about that MSIE

Strange about that MSIE thing though - :?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The links are not actually

The links are not actually clickable are they? are they intended to be? if the problem is that IE doesn't respond with a hover then try adding cursor:pointer; to kick it into life.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

travelvice
travelvice's picture
Offline
Regular
Formerly of the U.S.
Last seen: 9 years 16 weeks ago
Formerly of the U.S.
Timezone: GMT-5
Joined: 2008-04-13
Posts: 26
Points: 13

mhmmm -- they should be

mhmmm -- they should be clickable (though are dummy destinations). The date images are inside an anchor tag and works fine FF, though MSIE seems to barf at the idea (even though it picks up on the :hover). I'm confused. :?