CSS3 – Sibeesh Passion https://mail.sibeeshpassion.com My passion towards life Tue, 29 Sep 2015 09:01:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png CSS3 – Sibeesh Passion https://mail.sibeeshpassion.com 32 32 Apply CSS Important In JQuery And CSS https://mail.sibeeshpassion.com/apply-css-important-in-jquery-and-css/ https://mail.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://mail.sibeeshpassion.com/apply-css-important-in-jquery-and-css/feed/ 1 Make Image Fit To The Screen https://mail.sibeeshpassion.com/make-image-fit-to-the-screen/ https://mail.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://mail.sibeeshpassion.com/make-image-fit-to-the-screen/feed/ 0 How to hide a DIV when the website view in Mobile https://mail.sibeeshpassion.com/how-to-hide-a-div-when-the-website-view-in-mobile/ https://mail.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://mail.sibeeshpassion.com/how-to-hide-a-div-when-the-website-view-in-mobile/feed/ 0 Align DIV horizontally using CSS https://mail.sibeeshpassion.com/align-div-horizontally-using-css/ https://mail.sibeeshpassion.com/align-div-horizontally-using-css/#disqus_thread Mon, 01 Jun 2015 10:34:57 +0000 http://sibeecst_passion.com/?p=4111 Introduction

Hi All, How are you today? Today we will learn how we can align out HTML DIV element horizontally using normal CSS styles. I hope you will like this small demo.

Background

In our daily programming life, we all are familiar with DIV element, Which is used in most of the client side coded web applications . So it is important that we style them well. In this article we will see how we can align those DIV element in horizontal direction.

Using the code

Create UI element
[html]
<div id="parent">
<div id="div1" class="div">Number 1</div>
<div id="div2" class="div">Number 2</div>
<div id="div3" class="div">Number 3</div>
</div>
[/html]

Style them
[css]
.div
{
background-color:red;
color:white;
border: 1px solid;
}
#parent
{
border:1px solid #ccc;
text-align: center;
height:150px;
width:400px;
}
[/css]

Then you can see an output as shown here.

Now we will align those div horizontally using pure css.
[css]
#div2
{
display: inline;
}
#div3
{
float:right;
}
#div1
{
float:left;
}
[/css]

Now shall we see the output?

You can see JSFiddle demo here: http://jsfiddle.net/sibeeshvenu/s8n9q1dm/1/ .Please go ahead and try your experience now.

That is all for now. I will see you soon with another article.

Kindest Regards
Sibeesh Venu

]]> https://mail.sibeeshpassion.com/align-div-horizontally-using-css/feed/ 0 Find the span from the series of div and apply style to it https://mail.sibeeshpassion.com/find-the-span-from-the-series-of-div-and-apply-style-to-it/ https://mail.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://mail.sibeeshpassion.com/find-the-span-from-the-series-of-div-and-apply-style-to-it/feed/ 0