tooltip create manually




multidirection hover effect bs css and jquery

html

Try to hover this block from different directions

Hover me!

css

/* The wrapper */
.b-block {
position: relative;

display: inline-block;
overflow: hidden;
width: 10em;
height: 10em;

vertical-align: middle;

-webkit-transform: translateZ(0);
}

/* The blocks that would be hovered */
.b-block__hoverer {
position: absolute;
z-index: 1;

width: 71%;
height: 71%;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

/* Positioning for hoverers */
.b-block__hoverer:nth-child(1) {
top: 0;
right: 0;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.b-block__hoverer:nth-child(2) {
bottom: 0;
right: 0;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.b-block__hoverer:nth-child(3) {
bottom: 0;
left: 0;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.b-block__hoverer:nth-child(4) {
top: 0;
left: 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}

/* Enlarge the hoverer to cover the whole area */
.b-block__hoverer:hover {
z-index: 9;

width: 100%;
height: 100%;

-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}

/* Styles for content block */
.b-block__content {
position: absolute;
top: 0;
left: 0;

width: 100%;
height: 100%;

text-align: center;
line-height: 10em;

background: #333;
color: #FFF;

/* Restore the antialiasing lost from translateZ */
-webkit-font-smoothing: subpixel-antialiased;

-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;

-webkit-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
-moz-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange;
}

/* Move the content block while hovering different blocks */
.b-block__hoverer:nth-child(1):hover ~ .b-block__content {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.b-block__hoverer:nth-child(2):hover ~ .b-block__content {
-webkit-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.b-block__hoverer:nth-child(3):hover ~ .b-block__content {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.b-block__hoverer:nth-child(4):hover ~ .b-block__content {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}

/* Just for aestetics */
BODY {
padding: 2em;
font: 16px/1.5 “Helvetica Neue”, Arial, sans-serif;
text-align: center;
}

Add and remove class on resize jquery

elegant design

Add and remove class on resize jquery

$(window).load(function() {

var viewportWidth = $(window).width();
if (viewportWidth < 600) { $(".view").removeClass("view view-portfolio").addClass("gallery-mobile"); } $(window).resize(function () { if (viewportWidth < 600) { $(".view").removeClass("view view-portfolio").addClass("gallery-mobile"); } }); });

$(window).load(function() {

var viewportWidth = $(window).width();
if (viewportWidth < 600) { $(".view").removeClass("view view-portfolio").addClass("gallery-mobile"); } $(window).resize(function () { if (viewportWidth < 600) { $(".view").removeClass("view view-portfolio").addClass("gallery-mobile"); } }); });

Create simple tabber using jquery

You can create a simple tab using a little bit of script.

Example:
Html:

Hi, this is the first tab.

This is the 2nd tab.

And this is the 3rd tab.

Jquery:

$(document).ready(function(){
$(‘ul.tabs’).each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it’s associated content
var $active, $content, $links = $(this).find(‘a’);
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter(‘[href=”‘+location.hash+'”]’)[0] || $links[0]);
$active.addClass(‘active’);
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on(‘click’, ‘a’, function(e){
// Make the old tab inactive.
$active.removeClass(‘active’);
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass(‘active’);
$content.show();
// Prevent the anchor’s default click action
e.preventDefault();
});
});
});

Css:

.tabs li {
list-style:none;
display:inline;
}
.tabs a {
padding:5px 10px;
display:inline-block;
background:#666;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#fff;
color:#000;
}

give width calc function through jquery

bug free code by sudhir kumar

var width= $(‘#elm’).width();

$(‘#element’).css({ ‘width’: ‘calc(100% – ‘ + width+ ‘px)’ });

I’d like to use width: calc(100% -100px); which does the job perfectly for what I need it for, the only problem is its compatibility. At the moment it only works in the latest browsers and not at all in Safari.

Visible Spectrum background in form

bug free code by sudhir kumar

Html part

Visible Spectrum Console Text Generator


Css part

body,input,button{
font: 16px/1.4 ‘Open Sans’, ‘sans-serif’;
letter-spacing:.05em;
}

body{
display:flex;
text-align:center;
height:100vh;
background:linear-gradient(-45deg, #334D5C, #45B29D, #EFC94C, #E27A3F, #DF5A49);
color:#fff;
padding:2rem;
box-sizing:border-box;
}

.page-title{
font-size:2rem;
margin-bottom:1rem;
font-weight:700;
text-transform:uppercase;
span{
display:block;
font-size:3.01rem;
line-height:1;
}
}

.form{
max-width:450px;
margin:auto;
}

.form-group{
display:flex;
align-items:center;
margin-bottom:1rem;
justify-content:space-between;
}

.content{
margin:auto;
}

#input{
border:0;
height:40px;
padding:0 .5rem;
font-size:1rem;
letter-spacing:.05rem;
border-radius:2px;
width:100%;
color:#334D5C;
}

#submit{
border:0;
background:#fff;
margin-left:1rem;
cursor:pointer;
padding:0 1rem;
height:40px;
font-size:1rem;
border-radius:2px;
background:#334D5C;
color:#fff;
letter-spacing:.05em;
&:hover, &:focus{
background:lighten(#334D5C, 5%);
}
&:active{
background:darken(#334D5C, 5%);
}
}

#bg-toggle, label{
border:0;
cursor:pointer;
}

var ColoredConsoleText = new function(){
var self = this;

self.controls = {
input: document.getElementById(‘input’),
bgToggle: document.getElementById(‘bg-toggle’),
submit: document.getElementById(‘submit’)
}

self.cssString = function(color){
var background = self.controls.bgToggle.checked ? ‘#121C21’ : ”;
return ‘background: ‘+ background +’; color: ‘ + color;
}

self.handleSubmit = function(text){
var arguments = [”];
var textArr = text.split(”);
var ratio = 360 / textArr.length;
for( var i = 0; i < textArr.length; i++){ arguments[0] = arguments[0] + '%c' + textArr[i]; var lightness = self.controls.bgToggle.checked ? '70%' : '40%'; var color = 'hsl('+ratio*i+', 100%, ' + lightness +')'; arguments.push( self.cssString(color) ); if(i === textArr.length - 1){ console.log.apply(console, arguments); } } self.controls.input.value = ''; } self.controls.submit.addEventListener('click', function(e){ e.preventDefault(); self.handleSubmit(self.controls.input.value); }); }