Develop Reference

Custom card component not responsive when text and icon aligned on the same line

I have made my own custom card component to learn CSS and HTML from scratch.
This is my code for HTML:
<div class="col-12">
<div>
<div class="search-event-block">
<div class="search-event-icon-left">
<i class="icon-horse search-event-icon-left-size"></i>
</div>
<div class="search-event-block-inner">
<div class="search-event-block-title">
<label class="search-event-block-padding ">Title</label>
</div>
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle<i class="icon-basket search-event-icon-right-size"></i></label>
</div>
<div class="search-event-block-links ">
<label class="search-event-block-padding">Go block | Delete block</label>
</div>
</div>
</div>
</div>
</div>
And this is my code for css styling for the card component:
.search-event-block {
height: 87px;
margin-top: 10px;
background-color: #fff;
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-inner {
position: relative;
top: -87px;
left: 74px;
width: calc(100% - 74px);
}
.search-event-block-title {
font-size: 1.1rem;
font-weight: bold;
margin-top: 11px;
}
.search-event-block-subtitle {
font-size: 0.8rem;
}
.search-event-block-links {
color: #2E85DE;
cursor: pointer;
padding-top: 6px;
font-size: 0.8rem;
}
.search-event-icon-left {
background-color: #F2F3F7;
height: 87px;
width: 74px;
padding-top: 18px;
padding-left: 13px;
}
.search-event-icon-right {
font-size: 18px;
display: inline-block;
padding-top: 30px;
padding-right: 5px;
overflow: hidden;
}
.search-event-icon-left-size {
font-size: 33px;
color: #214A96;
}
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
padding-left: 84px;
}
.search-event-block-padding {
padding-left: 20px;
margin-bottom: 0px;
}
The problem is in the class: search-event-block-subtitle. I want the subtitle and the icon on the same line. The icon must align to the end of the card. This is working fine, but when I resize the window the icon goes under the subtitle. When the screen goes smaller I want that the icon still remains on the same line as the subtitle.
I used bootstrap only for the cols and rows. I have tried to something like this:
<div class="row">
//col6
label
//col6
icon
</div>
This didn't work for me
How can I align the subtitle and icon on the same line when the screen goes smaller?
I also have problems with the height it doesn't auto scale. How can I fix this problem?
I have made a jsfiddle:
https://jsfiddle.net/ptyagcdq/1/

First step is to update your subtitle layer to this:
<div class="search-event-block-subtitle">
<label class="search-event-block-padding">Subtitle</label>
<i class="icon-basket search-event-icon-right-size"></i>
</div>
This will keep the subtitle text separate from the icon and will give you better control over it. Then in your css add this class:
.search-event-block-subtitle label {
width: calc(100% - 84px);
display: inline-block;
}
And update the "search-event-icon-right-size" class to:
.search-event-icon-right-size {
font-size: 21px;
color: #1B4593;
width: 60px;
display: inline-block;
vertical-align: top;
}
The width calculation in your search-event-block-subtitle label is 100% - 84px because you should subtract the icon's width and the search-event-block-subtitle label padding. You should adjust these numbers to the actual size of the icon you are going to use.
I hope this helps.

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

How would I make it so this box can be minimized and maximized?

#you {
background-color: rgba(65,64,61,0.5);
position: absolute;
top: 0px;
right: 200px;
padding: 7px;
border-radius: 0px 0px 3px 3px;
width: 165px;
border: 2px solid #41403d;
}
#exitb {
background: url(http://playneko.co.uk/exit.png);
height: 19px;
width: 19px;
border-radius: 3px;
}
#exitb:hover {
background: url(http://playneko.co.uk/exit_hover.png);
}
Thats my css code andd this is the box I have
<div id="you">
<div style="height: 110px; width: 57px; float: left; overflow: hidden;">
<img src="http://www.habbo.nl/habbo-imaging/avatarimage?figure='.$user['look'].'&direction=3&head_direction=3&action=wav,crr=667&size=m" alt="avatar" class="rotate" align="left">
</div>
<div style="position: absolute; z-index:1">'.$aanwezag.'</div>
<br/>
</td>
<div style="cursor:pointer;position:absolute;top:10px;left:65px;font-size:18px;font-family: Times;">%habboName%</div>
<div style="cursor:pointer;position:absolute;top:30px;left:65px;font-size:18px;font-family: Times;">' . $users->getRankName($user['rank']) . '</div>
<div style="cursor:pointer;position:absolute;top:50px;left:65px;font-size:18px;font-family: Times;"><font color="#FF0040">'. $user['age'] .' Years Old</font></div>
<div style="cursor:pointer;position:absolute;top:70px;left:65px;font-size:18px;font-family: Times;"><font color="#088A4B">'. $user2['AchievementScore'] .' Score</font></div>
<div style="cursor:pointer;position:absolute;top:90px;left:65px;font-size:18px;font-family: Times;"><font color="#01A9DB">'. $user2['Respect'] .' Respects</font></div>
<div style="cursor:pointer;position:absolute;top:81px;left:5px;font-size:20px;font-family: Times;"><img src="%www%/flags/'. $user['country'] .'.png"></div>
</div>
How would I add the exit image on the right of the box to be able to minimize and maximise the box? if you can help it would be greatly appreciated.

For example, you have to wrap a content which should toggle into a separate div and toggle this div instead of whole #you element
<div id="you">
<div id="exitb">-</div>
<div id=content>
...
</div>
</div>
$("#content").slideToggle();
https://jsfiddle.net/Qy6Sj/1602/

I'm not quite sure if this is what you wanted or not. I have moved the #exitb id out of the #you wrapper and positioned it as absolute as well in order to move it into the image. Moreover, I simplified the code a little bit to use just a text, + and -, instead of image icons.
HTML:
<div id="exitb">-</div>
<div id="you">
...
</div>
Javascript:
$("#exitb").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#you").slideToggle();
});
CSS:
#exitb {
text-align: center;
color: #fff;
background-color: red;
height:19px;
width:19px;
border-radius:3px;
cursor: point;
position:absolute;
top:0px;
right:200px;
z-index: 10;
cursor: pointer;
}
JsFiddle.

Jquery : how to use tooltip with JQuery?

I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.

JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.

tinyScroll not enabled

i am trying to use the tinyscrollbar plugin http://baijs.nl/tinyscrollbar/
like this:
$('#nvl2 .content').html( '<div class="scrollbar">'+
'<div class="track">'+
'<div class="thumb"><div class="end"></div></div>'+
'</div>'+
'</div>'+
'<div class="viewport">'+
'<div class="overview">' +$('#nvl2 .content').html()+'</div>'+
'</div></div>' ).attr('id','sc2');
$('#sc2').tinyscrollbar();
this is called right before of a ajax call that loads new content in #nvl2 but the tinyscroll is not enabled and firebug does not jump any errors
css:
/**************/
/* Tiny Scrollbar */
#nvl1 { }
#nvl1 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl1 .disable { display: none; }
/**************/
/* Tiny Scrollbar */
#nvl2{ }
#nvl2 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl2 .disable { display: none; }
and this is the sample of the content once the ajax call is done
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
And before the ajax call and tinyscrollbar init exectuted:
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
and can be tested here: http://toniweb.us/gm any idea what am i missing?

What did you mean by
...).attr('sc2');
in you code?
Function .attr() with one parameter is getter for attribute value. Did you want to set id for element? If this was your idea then better way is to insert this id to this html code:
<div id="sc2" class="scrollbar">
On your page when execution comes to line with tinyScrollbar initialization:
$('#sc2').tinyscrollbar();
There is no element with id 'sc2' and this is why scrollbar is not showing up and in firebug there are no errors.

Try using tinyscrollbar_update() method. I was facing issue while i have to change content on a ajax request. and it works for me fine. Full documentation at http://baijs.nl/tinyscrollbar/