SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show/hide span with <a href>...

    Hello all - first off, sorry if this is in the wrong thread - mods, please move it if it is.

    I have an <a href> that encompasses a couple of <span>s so when I roll over the <a href> the <span>s cange background colour.

    Is there a way, where I can rollover the <a href> and have a span that was previously hidden appear?

    I'm wanting a span with a checkbox to appear when I rollover the <a href>.

    Does this make sense?

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How you do it depends on your html. You could do it with just html and css or you might need some javascript.

    Can you post your html and describe what elements you want to appear and when.

  3. #3
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - here goes:

    Code:
    <div class="product">
    	<a href="#" class="product-link" title="buy Product Title" rel="external">
    		<span class="add-to-scrapbook">
    			<label for="scrapbook">
    				<input name="" type="checkbox" value="" />add to my scrapbook
    			</label>
    		</span>
    		<span class="product-image">
    			<img src="../_assets/_graphics/dummy-products/09.png" alt="Product Title" border="0" />
    		</span>
    		<span class="prodname">Product Name</span>
    		<span class="price">99.99</span>
    		<span class="buyfrom">Buy from<br /> Online Shop Name</span>
    	</a>
    </div>
    The span class 'add-to-scrapbook' needs to be hidden but appear on mouseover.

    I've got it to appear/disapear using CSS when you mouseover the <a href> but as the <a href> surrounds it, when I click on the checkbox it selects the <a href>...

    ...looking at the code anew I probably don't even need a span 'add-to-scrapbook' - just style the label - but thats another issue.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I use this CSS technique on help text in my forms. But if you are clicking on these things then you have an issue.

    If you want the span to be visible on click, in all browsers, then as webdev1958 mentions you will need Javascript. Without Javascript, you can get the span to appear onscreen in everyone but Chrome and Safari on click, because when you click you leave the :focus on the anchor which shows the span along with :hover.

    <a href="#void"><span>here's some text</span></a>

    a {
    position: relative;
    }

    a span {
    position: absolute;
    margin-left: -999em;
    other styles here, like width etc;
    }

    a:focus span, a:hover span {
    margin-left: 0; /*or wherever you want it*/
    }

    That's the basics of it.

    I've got it to appear/disapear using CSS when you mouseover the <a href> but as the <a href> surrounds it, when I click on the checkbox it selects the <a href>...
    I use Javascript to hide/show parts of forms, since yeah you do not want a form control inside an anchor like that. In the link above, an entire fieldset is brought onscreen if you choose "Ja" on the "Jongere bestuurder?" question.

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bootfit View Post
    ...looking at the code anew I probably don't even need a span 'add-to-scrapbook' - just style the label - but thats another issue.
    A couple of queries

    1- Does the <a> have to be an <a>. Unless you want to navigate to somewhere when the <a> is clicked, I would just make it a <div> instead and that solves your problem when the exposed checkbox is clicked.

    2- you could probably ditch the <span> around the <label> and give the <label> the add-to-scrapbook class name.

    Then you should be right given
    I've got it to appear/disapear using CSS............

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The OP might have used an <a> so that, with CSS, it works with the keyboard too. That's the only reason I use an anchor, otherwise JS would be required to work with keyboard :(

  7. #7
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys - I actually went back and redesiged the page as the layout wasn't working for me.

    Took your advice on board though. Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •