CSS – Sibeesh Passion https://www.sibeeshpassion.com My passion towards life Tue, 10 Jul 2018 11:49:20 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png CSS – Sibeesh Passion https://www.sibeeshpassion.com 32 32 Custom Pager Using prev and next In jQuery https://www.sibeeshpassion.com/custom-pager-using-prev-and-next-in-jquery/ https://www.sibeeshpassion.com/custom-pager-using-prev-and-next-in-jquery/#disqus_thread Wed, 21 Oct 2015 10:44:24 +0000 http://sibeecst_passion.com/?p=10829 In this post we will create a custom pager using prev and next functions in jQuery. You can treat this post as a simple demo of using prev and next functions. We will be using some html UI elements and we will apply the paging functionality by using native jQuery codes. In this way you can get the information about on which page is requested by the user, once you get it, you can create an jQuery ajax call and fetch the data from the database and show. You need to know the basic of jQuery and CSS before going further. I hope you will like this.

Background

We can find so many pager in on-line. Here in this post I am just trying to populate my own pager. Please be noted that this is just a demo, so that you can not find more functionalities here.

Using the code

First thing you need to do is create a page.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Prev Next In jQuery – Sibeesh Passion</title>
</head>
<body>
<div id="container">
<div id="outer">
<div>-6</div>
<div>-5</div>
<div>-4</div>
<div>-3</div>
<div>-2</div>
<div>-1</div>
<div class="first">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div>
<table>
<tr>
<td class="prev" title="Previous"><<<</td>
<td class="next" title="Next">>>></td>
</tr>
</table>
</div>
</div>
</body>
</html>
[/html]

Then we will apply some CSS, so that it will look nice.

[css]
<style>
#outer div {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
font-style: oblique;
text-align: center;
float: left;
background: green;
}

#outer .first {
background: blue;
}

.prev, .next {
font-weight: bold;
font-size:30px;
padding:10px;
cursor:pointer;
}

#container {
text-align: center;
width: 50%;
margin-left: 25%;
}
</style>
[/css]

Now add jQuery reference.

[js]
<script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>
[/js]

Run your page and make sure that our custom pager design is fine.

Custom Pager Using prev and next In jQuery

Custom Pager Using prev and next In jQuery

Now it is time to add our scripts.

[js]
<script>
$(document).ready(function () {
var $first = $(".first");
var i = 0;
$(".prev").click(function () {
++i;
if ($(‘#outer div’).length / 2 < i) {
i = 0;
$(‘#outer .first’).css(‘background’, ‘blue’);
$first = $(".first");
} else {
$first = $first.prev();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
$(".next").click(function () {
++i;
if ($(‘#outer div’).length / 2 < i) {
i = 0;
$(‘#outer .first’).css(‘background’, ‘blue’);
$first = $(".first");
} else {
$first = $first.next();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
});
</script>
[/js]

If you notice in the code block, you can see that we are checking $(‘#outer div’).length / 2 < i in each click. This will get true when the user clicked after the selection goes to end. We are just making the iteration to first when this occurs.

We are doing the above mentioned scenario both in prev click and next click. Now it is time for demo right?

Please see the demo here: Custom Pager

That is all. We did it.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Prev Next In jQuery – Sibeesh Passion</title>
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function () {
var $first = $(".first");
var i = 0;
$(".prev").click(function () {
++i;
if ($(‘#outer div’).length / 2 < i) {
i = 0;
$(‘#outer .first’).css(‘background’, ‘blue’);
$first = $(".first");
} else {
$first = $first.prev();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
$(".next").click(function () {
++i;
if ($(‘#outer div’).length / 2 < i) {
i = 0;
$(‘#outer .first’).css(‘background’, ‘blue’);
$first = $(".first");
} else {
$first = $first.next();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
});
</script>
<style>
#outer div {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
font-style: oblique;
text-align: center;
float: left;
background: green;
}

#outer .first {
background: blue;
}

.prev, .next {
font-weight: bold;
font-size:30px;
padding:10px;
cursor:pointer;
}

#container {
text-align: center;
width: 50%;
margin-left: 25%;
}
</style>
</head>
<body>
<div id="container">
<div id="outer">
<div>-6</div>
<div>-5</div>
<div>-4</div>
<div>-3</div>
<div>-2</div>
<div>-1</div>
<div class="first">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div>
<table>
<tr>
<td class="prev" title="Previous"><<<</td>
<td class="next" title="Next">>>></td>
</tr>
</table>
</div>
</div>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

]]> https://www.sibeeshpassion.com/custom-pager-using-prev-and-next-in-jquery/feed/ 0 Overwrite CSS Styles Using addClass In JQuery https://www.sibeeshpassion.com/overwrite-css-styles-using-addclass-in-jquery/ https://www.sibeeshpassion.com/overwrite-css-styles-using-addclass-in-jquery/#disqus_thread Wed, 21 Oct 2015 00:06:18 +0000 http://sibeecst_passion.com/?p=10811 In this post we will see how we can overwrite CSS styles using addClass method in jQuery. We have so many options to change the styles of a particular element. We can do it by editing the style sheet manually. But what if you want to do the same dynamically? If you need to change a CSS property dynamically, I suggest you to read it here: CSS Important . In this post we are applying more CSS rules to the same element. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

Recently I have got a requirement of changing a CSS property of an element which is common for element. So I wanted to change the CSS property only if my condition becomes true. In this situation I used jQuery addClass to do this requirement. Here I will show you how.

Using the code

First thing you need to do is create a page.

[html]
<!DOCTYPE html>
<html>
<head>
<title>AddClass JQuery Demo – Sibeesh Passion</title>
</head>
<body>
AddClass JQuery Demo – Sibeesh Passion
</body>
</html>
[/html]

Then you need to include the script needed.

[js]
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
[/js]

Now you need to write the scripts.

[js]
<script>
$(document).ready(function () {
setTimeout(function () {
$(‘.first’).addClass(‘second’);
}, 5000);
});
</script>
[/js]

We are adding a new CSS style second to a class first . We will add this after five seconds of document ready. So now we need to create the styles right?

[css]
<style>
.first {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
font-style: oblique;
text-align: center;
background:green;
}
.second {
width: 200px;
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
background: blue;
font-style: oblique;
text-align: center;
}
</style>
[/css]

Now please run your browser, you can see the following output.

Overwrite CSS Styles Using addClass

Overwrite CSS Styles Using addClass

Now after five seconds, the same element will look as follows.

Overwrite CSS Styles Using addClass

Overwrite CSS Styles Using addClass

If you look at your browser console, you can see both of the styles are applied to the element.

Overwrite CSS Styles Using addClass

Overwrite CSS Styles Using addClass

That’s all, now we can see the complete code here.

Here I am using setTimeout as my condition, you can use any condition according to your requirement.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>AddClass JQuery Demo – Sibeesh Passion</title>
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function () {
setTimeout(function () {
$(‘.first’).addClass(‘second’);
}, 5000);
});
</script>
<style>
.first {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
font-style: oblique;
text-align: center;
background:green;
}
.second {
width: 200px;
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
background: blue;
font-style: oblique;
text-align: center;
}
</style>
</head>
<body>
AddClass JQuery Demo – Sibeesh Passion
<div class="first"></div>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

]]> https://www.sibeeshpassion.com/overwrite-css-styles-using-addclass-in-jquery/feed/ 0 Apply CSS Important In JQuery And CSS https://www.sibeeshpassion.com/apply-css-important-in-jquery-and-css/ https://www.sibeeshpassion.com/apply-css-important-in-jquery-and-css/#disqus_thread Tue, 29 Sep 2015 00:05:33 +0000 http://sibeecst_passion.com/?p=10701 In this post we will discuss how we can apply CSS important in JQuery. We all know that we can not apply a important CSS property directly to an element. It does not work. But still there is a solution for that. Here I am going to share you that. I hope you will like this.

Background

Recently I was going through a situation that to apply a custom CSS to an element which already has some CSS styles and all. I wanted to overwrite those CSS in situation based, that is when some condition satisfies.

Using the code

First of all we will create a page and some div element.

[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Important In JQuery</title>
<script src="jquery-2.0.2.min.js"></script>
</head>
<body>
<div id="container">
<div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
<div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
<div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
</div>
</body>
</html>

[/html]

You an see that I have loaded a JQuery reference and added some in-line CSS to the elements. As you all know, even if we give a custom css as follows

[css]
<style>
#container div {
width:55px;
}
</style>
[/css]

The width will be 25px, because we have set the in-line css as

[html]
<div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
[/html]

Now if you run your page and, check your browser console you can get to know that.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

In this situation, we use !important tag in the css, So if you change your css styles as follows, you can see your new css is getting applied.

[css]
<style>
#container div {
width:55px !important;
}
</style>
[/css]

Now refresh your page and see the browser console.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

Now what if you need to change this CSS, when there is a jquery action. For example you need to change the css styles when user clicks on an element? Cool, we have a solution for that too. Now you will be thinking the solution is as follows.

[js]
<script>
$(function () {
$(‘#click’).click(function () {
$("#container div").css(‘width’, ’75px;!important’);
});
});
</script>
[/js]

Here #click is my a href.

[html]
<a href="#" id="click">Click</a>
[/html]

If you run that, you will know it didn’t work. No worries, I am going to share you a solution for this.

Now we will change our script as follows.

[js]
<script>
$(function () {
$(‘#click’).click(function () {
//$("#container div").css(‘width’, ’75px;!important’);
$("#container div").each(function () {
this.style.setProperty(‘width’, ’75px’, ‘important’);
});
});
});
</script>
[/js]

And it is tie to run our page now.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

Just click on the href, and see the output and browser console.

Important CSS Property In JQuery And CSS

Important CSS Property In JQuery And CSS

We have done it finally.

Complete Code

[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Important In JQuery</title>
<script src="jquery-2.0.2.min.js"></script>
<script>
$(function () {
$(‘#click’).click(function () {
//$("#container div").css(‘width’, ’75px;!important’);
$("#container div").each(function () {
this.style.setProperty(‘width’, ’75px’, ‘important’);
});
});
});
</script>
<style>
#container div {
width:55px !important;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
<div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
<div style="width: 25px;height: 28px;padding: 5px;background-color: green;margin: 3px;float: left;cursor: move;" ></div>
</div>
<a href="#" id="click">Click</a>
</body>
</html>

[/html]

Conclusion

Did I miss anything that you may think which is needed?Have you ever faced this issue in your programming life? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I am able to.

Kindest Regards
Sibeesh Venu

]]> https://www.sibeeshpassion.com/apply-css-important-in-jquery-and-css/feed/ 1 Make Image Fit To The Screen https://www.sibeeshpassion.com/make-image-fit-to-the-screen/ https://www.sibeeshpassion.com/make-image-fit-to-the-screen/#disqus_thread Fri, 14 Aug 2015 08:46:02 +0000 http://sibeecst_passion.com/?p=9511 In this code, we will see how we can set an image to fit the screen completely. By doing this we can make sure that there is repeating of images in the background.

Using The Code

Here I am setting the image to the body tag.

[css]
#body {
background: url("http://sibeeshpassion.com/content/images/indian%20flag%20banner.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
[/css]

Please see other code snippets here: Code-Snippets

Kindest Regards
Sibeesh Venu

]]> https://www.sibeeshpassion.com/make-image-fit-to-the-screen/feed/ 0 AngularJS Search Box Using Filter https://www.sibeeshpassion.com/angularjs-search-box-using-filter/ https://www.sibeeshpassion.com/angularjs-search-box-using-filter/#disqus_thread Tue, 16 Jun 2015 11:46:54 +0000 https://sibeeshpassion.com/?p=2801 Introduction

Hi all, I hope you are fine . If you are new to angular JS I suggest you to read the Basics of AngularJS.

Now with the belief that you have read my previous article, we are starting.

Using the code

We will explain that with a demo. Please see the below implementation.
[js]
<body ng-app ng-init="placesVisited=[‘Delhi’,’Kerala’,’Tamil Nadu’,’Banglore’,’Uttar Pradesh’,’Noida’,’Haryana’,’Thrissur’];">
<div>
<input type="text" ng-model="curPlace" class="inputText">
<ul>
<li ng-repeat="place in placesVisited | filter:curPlace">
<a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>
</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
[/js]

In this, as we discussed with the previous article, I have declared my ng-app and ng-init. In the initialization part, I have given the place names I have visited.
[js]
placesVisited=[‘Delhi’,’Kerala’,’Tamil Nadu’,’Banglore’,’Uttar Pradesh’,’Noida’,’Haryana’,’Thrissur’];
[/js]

I have declared my model with the name curPlace and after we are binding the initialized array elements to the li tag using ng-repeat directive. I have set the href as follows to make it meaningful, so that if you click a place name, it will redirect to the Google search.
[js]
<a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>
[/js]

Here the process is whenever you type any character in the model curPlace , the filter will be triggered and it will bind the appropriate result to the li. For a basic implementation you do not need to do anything than this. Angular JS makes a searching functionality much easier right ?

Include CSS if you need
[css]
<style>
.inputText {
border: 1px solid #ccc;
border-radius: 10px;
background-color: #0ff;
box-shadow: 1px 1px 1px 1px #ccc;
width: 230px;
height: 30px;
}

ul {
list-style: none;
padding: 10px;
background-color: #CAEAF5;
border-radius: 10px;
border: 1px solid #ccc;
width: 210px;
}

li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
}
</style>
[/css]

Complete HTML
[html]
<!DOCTYPE html>
<html>
<head>
<title>Angular animated search box – sibeeshpassion </title>
<style>
.inputText {
border: 1px solid #ccc;
border-radius: 10px;
background-color: #0ff;
box-shadow: 1px 1px 1px 1px #ccc;
width: 230px;
height: 30px;
}

ul {
list-style: none;
padding: 10px;
background-color: #CAEAF5;
border-radius: 10px;
border: 1px solid #ccc;
width: 210px;
}

li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
}
</style>
</head>
<body ng-app ng-init="placesVisited=[‘Delhi’,’Kerala’,’Tamil Nadu’,’Banglore’,’Uttar Pradesh’,’Noida’,’Haryana’,’Thrissur’];">
<div>
<input type="text" ng-model="curPlace" class="inputText">
<ul>
<li ng-repeat="place in placesVisited | filter:curPlace">
<a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>
</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>
[/html]

Output
Output

Conclusion

Now that is all for the day, I will come with another set of items in Angular JS soon? .I hope you liked this article. Please give your valuable suggestions.

Kindest Regards
Sibeesh Venu

]]> https://www.sibeeshpassion.com/angularjs-search-box-using-filter/feed/ 6 How to hide a DIV when the website view in Mobile https://www.sibeeshpassion.com/how-to-hide-a-div-when-the-website-view-in-mobile/ https://www.sibeeshpassion.com/how-to-hide-a-div-when-the-website-view-in-mobile/#disqus_thread Mon, 01 Jun 2015 13:20:02 +0000 http://sibeecst_passion.com/?p=4141 Introduction

Hi All, Hope you are fine. Today we will learn how we can hide a particular DIV element when the site is viewed in Mobile. I hope you will like this.

Background

For the past few days I was working in my personal website. Suddenly I found out an issue that my site’s footer is bothering when the same is viewed in mobile. So I started working on this issue and I could resolve it. So here I am going to share the fix you need to do.

Using the code

Previously whenever I view my website in mobile, I got a view as shown in the below image, Which makes my site’s reputation go down. And as you all know now a days we are seeing everything in mobile. So it is must that we make our site looks better in mobiles also. What I am doing is whenever a user view my site in mobile, I will just hide my footer div which contains social plugins.

Here I will share you the CSS you need to implement.
[css]
@media only screen and (max-width: 480px) {
body {
max-width: 480px;
}
.myfootershare {
display: none
}
}
[/css]

What we do in the above CSS is, we are checking the width of the screen by using the @media query in CSS.
[css]
@media only screen and (max-width: 480px)
[/css]

So when the scree size is below 480 px, we will just hide the element (with class name myfootershare).
Once you include this to your CSS, you can see the output as follows when you see the site in Mobile .

That is all for the day. I hope you enjoyed reading.

Conclusion

Please share me your feedback.

Kindest Regards
Sibeesh Venu

]]> https://www.sibeeshpassion.com/how-to-hide-a-div-when-the-website-view-in-mobile/feed/ 0 Find the span from the series of div and apply style to it https://www.sibeeshpassion.com/find-the-span-from-the-series-of-div-and-apply-style-to-it/ https://www.sibeeshpassion.com/find-the-span-from-the-series-of-div-and-apply-style-to-it/#disqus_thread Sun, 31 May 2015 14:44:19 +0000 https://sibeeshpassion.com/?p=3931 Find the span from the series of div and apply style to it.
[css]
#columntablejqxgrid div[role="columnheader"]:first-child span{
text-align: left!important;
}
[/css]
It will find out the div which has ID as “columntablejqxgrid” and from that it finds the inner divs whose role is “columnheader”. And once it finds the filtered divs it takes the first child and take the span.

]]> https://www.sibeeshpassion.com/find-the-span-from-the-series-of-div-and-apply-style-to-it/feed/ 0