Saturday 30 June 2018

Make a beautiful Light-box for images in HTML5, CSS and JavaScript

Most of the users get irritated when the click on a photo to view bigger on a website and land straight on the image URL. Then, to read existing post, they have to click the previous button to come back.

For the solution, of course, should use a Light-box and Today-we're looking into that. Let's start to make a beautiful Light-box in HTML5, CSS and JavaScript!

MARKUP

Assuming that when the user will click on the image, and the light box will open, we just have to set an on-click event to a small image thumbnail. The simple HTML markup is crated below.

<img src='image.png' onclick="document.getElementById('box').style.display='block';
             document.getElementById('bg').style.display='block';
             document.getElementById('pic').src=this.src">

Where, we have a image and for light box and background, below is the markup.

<div id="box" class="box">
    <a href='#' onclick="document.getElementById('box').style.display='none';
                document.getElementById('bg').style.display='none'">X</a>
                <br>
    <img id='pic' src=''>
</div>
<div id="bg" class="bg"></div>

CSS
After this, we will stylize it little using CSS.
.bg {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.box {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 3px;
  border: 8px solid #435;
  background-color:white;
  z-index: 1002;
  overflow: auto;
}
.close{
    font-size: 20px;
    text-decoration: wavy;
    position:static;
}

Done!
As we have already embedded the JavaScript in markup above, when user will click on any image, link or element, the light box will popup.It will show the same image as we have clicked because of document.getElementById('pic').src=this.src.

But the problem you will see is that the image remain at the original size of its URL.So we can fix it by CSS.
#pic{
  width: 500px;
  height:auto;
}

This is a very simple and lightweight light-box for one or two pictures only.Fore more than that, or many, you can't manually set the functions in its on-click attribute.
There we will need some more shortcut.You can start with writing the script for that as CSS-magz will make that as well and post soon.To get updates, do like our Facebook page.
MAKE A LIGHTBOX

DEMO TIME!
Click on image below to see it in light-box.


X

see the better version here.

Saturday 23 June 2018

How to Make popup for liking Facebook page on Blogger using Sweet Alert2?

So we want something that pops up when the user is about to leave or to enter the email when subscription box opens on our blog? So we are making that with a Javascript framework called Sweet Alert. Sweet Alert is a better way to display output to the user rather than to use the usual JavaScript alert();.
How to Make popup for liking Facebook page on Blogger using Sweet Alert2?


So for that, first we need to add the SweetAlert's JavaScript file into our document. So we use their CDN to get the file. Add the below script into the head section of the document.

<script src="https://unpkg.com/sweetalert2@7.22.2/dist/sweetalert2.all.min.js"></script>

Now, its time to get in our HTML. For example, if you want to make the Facebook page linking handle to be popped up, go to Facebook Developer's social plugin, and then paste the URL of your Facebook page and click on get the code. If you prefer the iframe, the code will look something like below(Excluding page URL).

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssmagz&tabs=timeline&width=1200&height=70&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="1200" height="70" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Copy the code. Now its time to set up the alert!

Applying the SweetAlert

Now, add the following code on your main page.
swal({
  title: "<i>Like Or Facebook Page!</i>", 
  html: '',  
  confirmButtonText: "Liked!", 
});
You can modify this by changing the heading and button text.
Now we will add the above Facebook iframe script.You can also add some other stuff like twitter follow etc.So the final script will look something like this.
swal({
  title: "<i>Like Or Facebook Page!</i>", 
  html: '<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssmagz&tabs=timeline&width=1200&height=70&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="inherit" height="inherit" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>',  
  confirmButtonText: "Liked!", 
});

But you may face a problem with this and that is that facebook's iframe takes a ittle time more to load.For that we can use a preload in HTML.So we are going to use it like below.
<link rel="preload" href="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssmagz" as="document"">

So with that you can add simple alert box to your blog or website!Do experiment with it and with that, don't forget to like our Facebook page.

Have a Look at Demo once!

Wednesday 13 June 2018

Change cursor styles using CSS

Well we sometime bore using the same same and same cursor or the theme of cursors on every website.Want to try some or make some new sets of cursor for your website or blog? Here's how to do it using CSS.

So we start From CSS. CSS has cursor property in which you can specify the cursor styles.At the date of writing this post, cursor has 36 types of cursors you can use.They can be further extended by using our own cursors in image files or .cur(cursor file type).

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize

Syntax for cursor

You can apply the above cursors to your body tag or any particular HTML element.The syntax vaild in all the browsers is given below.
element{
    cursor: value;
}
In the value field, all the cursors you tried by hovering above can be applied.For example,
element{
    cursor:cell;
}
The cursor is supported in all the desktop browsers(of-course, they will not come in mobile or touch screens).cursor: none; is not supported until Firefox 3, Safari 5, and Chrome 5 and not at all supported in Internet Explorer or Opera.not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize are not supported in Internet Explorer and Opera.
For more browser compatibility info, visit Mozilla.
Inherit and initial are also supported in cursor's value field.

Cursor using URL

You can define or design your own cursor for your website like below or download form websites which provides free cursors.
cursors with different styles
Now the question is- How to implement custom cursors to the websites?
For that you need to use css cursor property.
.element{
  cursor: url(images/cursor.png), auto;
}
where you need to add the image cursor file URL or .cur file, and auto is fallback here.Any other can also be used depending on situation.Image URL cursors not at all supported in Opera till now.

To apply to the whole HTML page, use this in body instead-
body{
  cursor: url(images/cursor.png), auto;
}

Live Demo



This can be very useful especially in web apps of a special theme-sort.Thanks for reading do follow CSS-Magz.

Saturday 9 June 2018

Make A Calculator In JavaScript

Making a calculator in JavaScript is not have been taught so far.As it supports mathematical calculations.Now, we will make a simple calculator using HTML5, CSS and JavaScript.

For making it,  as always we need a markup.We will make a div element and inside that, a display and buttons.Our structure will be as below.

Calculator.

The HTML

<div class='calc'>
<div id='disp'>
</div>
<button id='1'>1</button>
<button id='2'>2</button>
<button id='3'>3</button>
<button id='add'>+</button>
<button id='4'>4</button>
<button id='5'>5</button>
<button id='6'>6</button>
<button id='subtr'>-</button>
<button id='7'>7</button>
<button id='8'>8</button>
<button id='9'>9</button>
<button id='mult'>x</button>
<button id='clear'>CE</button>
<button id='0'>0</button>
<button id='dec'>.</button>
<button id='division'>/</button>
<button id='ans'>=</button>
</div>
Okay, so we have made the main division 'calc' and then added another <div> for display and then added buttons for all the numbers and functions.

CSS for calculator

.calc{
  position:absolute;
  background-color:red;
  width:300px;
  height:350px;
}
#disp{
  display:block;
  height:52px;
  background-color:blue;
  margin:8px;
}
.calc button{
  height:45px;
  width:50px;
  background-color:yellow;
  margin:5px 5px 5px 15px;
}
#ans{
  width:270px;
}
And for display, we are going to add the properties.You can add that 7 segment led display font too, will look realistic!
#disp{
  font-size:45px;
  text-align:right;
  overflow:auto;
}
And here comes our main function- JavaScript.

var disp = document.getElementById("disp");
function ud(n){ 
disp.innerHTML += n ;
}
function ans(){
c=eval(disp.innerHTML);
disp.innerHTML=c;
}
function clc(){
disp.innerHTML='';
}

document.getElementById("1").addEventListener("click",function(){ ud(1); });
document.getElementById("2").addEventListener("click",function(){ ud(2); });
document.getElementById("3").addEventListener("click",function(){ ud(3); });
document.getElementById("4").addEventListener("click",function(){ ud(4); });
document.getElementById("5").addEventListener("click",function(){ ud(5); });
document.getElementById("6").addEventListener("click",function(){ ud(6); });
document.getElementById("7").addEventListener("click",function(){ ud(7); });
document.getElementById("8").addEventListener("click",function(){ ud(8); });
document.getElementById("9").addEventListener("click",function(){ ud(9); });
document.getElementById("0").addEventListener("click",function(){ ud(0); });
document.getElementById("dec").addEventListener("click",function(){ ud('.'); });

document.getElementById("add").addEventListener("click",function(){ ud('+'); });
document.getElementById("subtr").addEventListener("click",function(){ ud('-'); });
document.getElementById("mult").addEventListener("click",function(){ ud('*'); });
document.getElementById("division").addEventListener("click",function(){ ud('/'); });

document.getElementById("clear").addEventListener("click",function(){clc(); });
document.getElementById("ans").addEventListener("click",function(){ ans(); });
First we add all the buttons event listener click.Than we add function ud() to update user display and ans() to eval the mathematical expression and to show the answer.
Function clc() is to clear the display.

Live Demo

Below you can see the live demo of the calculator.You can try using it.Although this was very simple calculator.Before leaving, do remaimber to follow and like our Facebook page.
.

Friday 8 June 2018

How to detect if the user is in Incognito mode using Javascript?

How to detect if the user is in Incognito mode using Javascript?
Sometime before, we had talked about the incognito mode in Google chrome browser. Today, we are going to see how we can detect it using simple lightweight Javascript.

Before moving further, let we see what happens in Incognito mode or how incognito mode is different from normal browses?
Incognito mode or private browsing is the same normal browser but with deducted and controlled functions. Functions like saving history and cookies are disabled. through the websites can store cookies, they are deleted once the browser or incognito session closed.

Google, on its help page says that in Incognito mode-

  1. Chrome wont save our history.
  2. Downloaded files and bookmarks will b kept.
  3. Your activity isn't hidden from ISP or school or college employee.
But still, we can find that user is in Incognito mode or not.

How to Detect if the user is in Incognito mode?

For that, From a answer on stackoverflow, I came to know that window.RequestFileSystem function returns in error.So by using try catch, we can find if the user is in incognito mode.
var fs = window.RequestFileSystem || window.webkitRequestFileSystem;

fs(window.TEMPORARY, 100, function(fs) {}, function(e) {

    alert("You are in Incognito Mode.")
});
So this way you can detect in Google chrome if the user is in incognito mode.

Live Demo

Everything Seems Fine


What others are saying

Since you can detect that user is in incognito mod or not, many says that this is the threat to their privacy and anonymity.Since Google chrome and other browsers may define temporary storage in feature that will clear immediately after the session closes. Then it will be more difficult for us to detect the incognito mode.

Add this one line code(after minifying) in your HTML's <head> section and in place of JavaScript alert, us your own function.

Sunday 3 June 2018

Image SEO : The important things you should know

Images are the most important component of the blog or the piece of content that you are writing.Without images, the post looks like a tree without leaves.

Images worth a thousand words.So bloggers always add images to their blog post to make it more enlighten and attractive.This is  a very good thing but the most people fails here - in Image SEO.

Image SEO is the most important thing we will discuss today as you can gain lot of traffic right from the 'image' section of any search engine.People are searching for images and now a days Google had removed direct download button, forcing users to go on their sites.So, from here only, we can get the traffic.

So lets have a look at the important things we need to know about Image SEO.
Image optimization for SEO.

Add the Images from right source

Most of the Bloggers still searching on Google for images and directly add them in their blog posts.This is completely wrong and you may have to go through some legal disputes for that.As the images shown by Google are subjected to copyright, the owner has full right over his images.
Image may subject to copyright in duckduckgo.com
So the question arrives-So from where we should gather the images?Shall we have to make or click our own?
And the answer is yes!You can of course click the images.but someone living on mars cannot click the image of Eiffel tower in Paris as he have to come there.
That's why we have the stock websites.

Stock websites are the websites which stores the images, vectors, illustrations and video footage which user uploads from the different part around globe.Then anyone can download it by paying some royalty fee.That's how the stock photography works.But everyone can't afford to buy these images from these sites.So we have the free image stock websites.

Free stock image websites like Pixabay, provides free images to users and can be downloaded without paying a single penny.There are many more stock image websites from which you can download the images such as-

  1. StockSnap.io
  2. Pexels
  3. Unsplash
  4. Shotstash
  5. SuperFamous
It is very safe to use any of the image from the above site.You are free to mention more sites in comment box below of you know any.

The another way to grab images from Google or Bing search engine is that filter it.Filter the images based on their license.

In Google Images, click on 'tools' button.Some options will pan down. Click on 'Usage Rights'.Chose the option labeled with modification or labeled for reuse.
google images usage rights.
As shown in the above image, you can use the images labeled for reuse by directly copying from Google.
In Bing, Go in Images tab, click on 'Filter' button on extreme right.Again, as Google, some options will come down.Select License.Chose any one of the options marked red in below image.
But as experienced, not very good and on to point images are not found.But still you can use this as an method for getting images.

Compress the images

Images takes lot of time to download.Sometimes, more than 70% of page load time is used for getting images.This is all because the size of image is huge as compared to main html or CSS and JavaScript files.
images take more time to load

So, you need to compress the images.Compressing images not only saves space, but also makes the page to load fast.
Some of the online image compressors are given below.

  1. CompressorJPEG
  2. CompressImage
  3. Image Compressor
These are some tools which will help you to compress down your images.there are many such image compressors online.Some of them supports bulk images compression, while some not.

this is very irritating work of compressing images, then adding.There is no shortcut for it?Yes!There is! If you are using WordPress, then you can use plugin for it.There are many plugins which will compress images for you!

But if you are using Google Blogger, you don't have to worry even a single bit.It is because after uploading image, it directly compress it into small, medium, large and Extra Large.And still you can use original image if you want.
Image Compression.
options available in Google Blogger for different image sizes.
There is no very much advantage using ful quality image on web.Consider, if you used 1080x540px image,it may load 200x100 or 500x250px on mobile phones.So we are just slowing down our website in unnecessary images.

Using ALT text

Alt tag is one of the most important text.Many bloggers make mistake here.They do not at all use these texts.
These text get used for two reasons. First is is anyone using their browser in 'text-only' mode, then he cannot see the images but he can know the place of the image.In that place  you might have notice some time, that a text is shown.This text is alt text.In second case, if the image on the server got deleted, it returns with 404 error.Then , in that image a text is is shown and that is alt tell that you input here.
alt text for images

In both the cases, the main purpose is to get the idea of what the image is to the user if he or she is unable to view the image.

What is Alt text?Alt means alternate text.It is a simple and short text for an image that describes the whole image.So, remember to use alt from now on wards, if you weren't.

Use the right keywords while naming the images

The right keywords always do well in Image SEO. So, you need to use the right keywords while naming the image.
You can name the image like below.For example-
small-tomato-plan.png
Rather than-
smalltomatoplant.png
If you want to find right keywords, go on NeilPatel's website and do a keyword research.

So that's were the tips about image SEO which can rank images from your bog so high that you can get more traffic through images rather than web search.

Friday 1 June 2018

How to make a CSS framework

We always need simplicity in working with CSS and JavaScript and that's why the developers out there made different frameworks and libraries and API's depending on their needs. CSS and JavaScript frameworks makes its easier and saves lot of time writing the same lines again and again and do a task in few lines of code.

Today, we are going to create a simple library which of course, you can extend based on your needs.There is no strong need at the time of writing this, as there are already lots of  libraries available on web.Any one of them can be super-handy to be pick out.But still, we are going to make one as we can stylize t as per our needs and you can use it on your whole website or blog.

Making a CSS library is not a great thing as compared to making a JavaScript library.Since the simple steps are-

  1. Define your own classes in a CSS file.
  2. Use your own starting name to avoid misconception with other libraries.
  3. Minify the library and import it into a document.
With this, we can  make a simple CSS3 framework.

Making a CSS file

Lets call our framework 'Cmagz'.So the file name Cmagz.css is made.
-📁Cmagz.css

First we will add the simple properties to html, body,*(all) , * before and after etc.
:
/*-CMagz.css-*/
html{
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    overflow-x: hidden;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body{
margin:0px;
}
So what done is above is we have sized the html in border-box so we can add height and width.To make a ll field compatible, we have hidden the x- scroll bar.

Now we are going to select the element and make them display as block because some or most of the browsers shows them not as block.For example, section.

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
}

progress {
    vertical-align: baseline;
}
So now we gonna starting with some of the tags and their default values.For example, if you want to add border to <img> tag, then you can add it here below.

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
    outline-width: 0;
}

figure {
    margin: 1em 40px;
}

img {
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

button,
input,
select,
textarea {
    font: inherit;
    margin: 0;
}

optgroup {
    font-weight: bold;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

textarea {
    overflow: auto;
}

[type=checkbox],
[type=radio] {
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
Stylize the h1-h6 tags.:
h1 {
    font-size: 38px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}
After that,
.cmagz-image {
    max-width: 100%;
    height: auto;
}
.cmagz-input {
    padding: 5px;
    display: block;
    border: none;
    width: 100%;
}
.cmagz-check,
.cmagz-radio {
    width: 24px;
    height: 24px;
    position: relative;
    top: 6px;
}
Then there you can add some CSS animations.So for that, first we need to make @keyframes like below.
.cmagz-animation-fade {
    animation: fade 2s infinite;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
For making this framework more enlightening, we can add much more animations like fade, hide , show, pop-up , disappear, blink etc.Design your own div box, put all CSS code into a file and give a class name like cmagz-divbox.
There are many CSS frameworks available in the market, you can make your own or mix two of them to add same functionality into one!Minify the CSS file to save up the space and import it into document.
<link rel="stylesheet" href="https://cdn.site.com/cmagz/varsioncode/cmagz.css">
Okay, so with that, you can design your own CSS3 framework like this.Any queries?Ask in comments.