SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Click to show (PHP or CSS)

    Hey guys,
    I'm trying to create something similar to the example picture below. Basically when clicked the cover will remove and the name below will be shown.



    I've managed to get everything to look like the picture. But I can't get the reveal or remove cover part to work when it's clicked. Below is my unaltered code - I'm not sure if it's the DIV/CSS or PHP portion that need the tweaking. I hope someone here can help me out.

    The Div
    HTML Code:
    <div class="crux">
    <div class="cover">Click to show name</div>
    <div class="label">&nbsp;</div>
    <strong id="person_name_<?php echo $name["NameID"] ?>"><?php echo $name["Name"] ?></strong>
    
    <script language="javascript">
    set_copy_command ( "<?php echo $name["Name"] ?>" , "person_name_<?php echo $name["NameID"] ?>" , <?php echo $name["NameID"] ?> ) ;
    </script>
    </div>
    The CSS
    HTML Code:
    .crux {
        background: none repeat scroll 0 0 #FFFDD9;
        border: 1px solid #CCCCCC;
        border-radius: 6px 6px 6px 6px;
        clear: both;
        color: #000000;
        float: left;
        font-size: 16px;
        height: 19px;
        margin: 0 0 8px;
        overflow: hidden;
        padding: 2px 5px;
        position: relative;
        width: 148px;
    }
    .crux .label {
        color: #CCCCCC;
        display: none;
        text-transform: uppercase;
    }
    .codelabel {
        display: none;
    }
    .crux:hover .cover, .crux.hover .cover, .crux .cover.hover {
        padding-right: 0;
    }
    
    .revealed {
        float: left;
        width: auto;
    }
    .revealed .cover {
        display: none;
    }
    .revealed .label {
        color: #666666;
        display: inline;
        margin-right: 6px;
    }
    .revealed .code {
        display: inline;
        position: relative;
    }
    .cover {
        background: -moz-linear-gradient(center top , #16A7D2, #0492BD) repeat scroll 0 0 transparent;
        border-bottom: 1px solid #026886;
        border-radius: 6px 0 0 6px;
        color: #FFFFFF;
        font-size: 14px;
        left: 0;
        line-height: 16px;
        padding: 4px 6px 3px;
        position: absolute;
        text-align: center;
        top: 0;
        z-index: 20;
    }
    a.cover {
        text-decoration: none;
    }
    a.cover:visited {
        color: #FFFFFF;
    }
    .cover:after {
        background: url("sprite.png") no-repeat scroll 1px -476px transparent;
        content: "";
        cursor: pointer;
        height: 26px;
        position: absolute;
        right: -22px;
        top: -1px;
        width: 23px;
    }
    .code
    {
    	font-weight:700;
    	height:19px;
    	overflow:hidden;
    	position:absolute;
    	right:5px;
    	text-align:right;
    	z-index:10;
    }
    Attached Images Attached Images

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Any type of user interaction like clicks should be done with javascript.
    It's best practice to keep all javascript completely separate to the HTML(in it's own .js file) and far from the server-side PHP.

    But, in this case because it's such a simple action you might be able to get away with a small bit of inline script.

    Code html5:
    <div class="crux">
    <div class="cover" onclick="this.style.display='none';">Click to show name</div>
    <div class="label">&nbsp;</div>
    <strong id="person_name_<?php echo $name["NameID"] ?>"><?php echo $name["Name"] ?></strong>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post

    But, in this case because it's such a simple action you might be able to get away with a small bit of inline script.

    Code html5:
    <div class="crux">
    <div class="cover" onclick="this.style.display='none';">Click to show name</div>
    <div class="label">*</div>
    <strong id="person_name_<?php echo $name["NameID"] ?>"><?php echo $name["Name"] ?></strong>
    Hi Mark,
    Thanks for stopping by, for some reason the onclick trick did not work. I had a look at another site with a similar 'Click to show' ribbon in place. The CSS there looks like this;

    HTML Code:
    Normal state
    
    <div class="crux attachFlash">
    <div class="cover">Click to show name</div>
    <div class="label">&nbsp;</div>
    <div class="code">John Doe</div>
    </div>
    
    
    
    When clicked
    
    <div class="crux revealed">
    <div class="cover">Click to show name</div>
    <div class="label">&nbsp;</div>
    <div class="name">John Doe</div>
    </div>  
    I how can I have the revealed css class in the same class as the crux when it is clicked?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hmm, I'm surprised that the onclick didn't work, it should hide the element when you click on it.
    Can you post the link to a page or post the entire html / css of the page? It must be something else going on.

    Yes, often that sort of toggling visibility is done by toggling a class on a wrapper element, it just requires more code than what I gave you.
    Code html5:
    <div class="crux">
      <div class="cover">Click to show name</div>
      <div class="label">&nbsp;</div>
      <div class="name">John Doe</div>
    </div>
    Code css:
    .crux .cover { display: block }
    .crux.revealed .cover { display: none }
    Using jQuery here's a simple script that should toggle the revealed class on the wrapper.
    Code javascript:
    $('.crux .cover').click(function() {
      $(this).closest('.crux').addClass('revealed');
    })
    That listens for click events on the .cover element and then finds the closest parent with class="crux" and adds the class.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Can you post the link to a page or post the entire html / css of the page? It must be something else going on.
    Hi Mark, I've sent you a PM with a link to the site.


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
  •