webdevelopment: 2017

Tuesday, 31 October 2017

Text align left, right & center in single line

HTML
<div class="col-md-12 all-results-info">
            <span class="text-alignleft">87 results found</span>
            <span class="text-aligncenter">87 results found</span>
            <span class="text-alignright">Filter Results <i class="fa fa-filter" aria-hidden="true"></i>
</span>
         </div>

CSS

.text-alignleft {
    float: left;
    text-align:left;
    width:33.33333%;
}
.text-aligncenter {
    float: left;
    text-align:center;
    width:33.33333%;
}
.text-alignright {
    float: left;
    text-align:right;
    width:33.33333%;
}

Thursday, 9 March 2017

CSS

How many CSS styles is there?

CSS Styles are 3 types

Inline styles : We can write styles inside of tag like this
<div style = “color:blue; font-size:14px”> content here</div>

Internal styles : We can write styles in head tag, between style tag, and we will use same class in like multi areas like below

Creating in between head and style tags

<head>

</head>

Using in body area

<div class=”class1”>content</div>

· External styles : we will write css styles in external style sheet, and we will add that style sheet in head or bottom,

Style like this inside of styles.css file we will write like: .class1{ color:blue; font-size:14px ;}

We will add that style sheet in header like this:
<head>
<link rel=”stylesheet” href=”styles.css” />
</head>

Use CSS class like below:
<div class=”class1”>content</div>

Monday, 6 March 2017

Don't close drop down menus/Onclick body only close dropdown menus/ Drop downs dont close on click anchor

Don't close drop down menus
Onclick body only close dropdown menus
Drop downs dont close on click anchor

Onhover div display icons or other data in div using jquery,

Onhover div display icons or other data in div using jquery,
you can display div on div using jquery
you can add any icon on hover mouse to div
Attached screenshot also

<div class='classnamehere'>
description will goes here..
</div>

<script>
$( ".classnamehere" ).hover(
function() {
$( this ).append( $( "<div class='message-hovers'><span><a href='https://google.com'><i class='fa fa-commenting-o' aria-hidden='true'></i></a><a href='https://google.com'><i class='fa fa-flag' aria-hidden='true'></i></a><a href='https://google.com'><i class='fa fa-clock-o' aria-hidden='true'></i></a> </span></div>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);

</script>

Pages