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
<div class="crux">
<div class="cover">Click to show name</div>
<div class="label"> </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
.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;
}