Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Change the Color of a Design Using jQuery

In this article we will see all the steps to change dynamically the color of an HTML page design using only jQuery.

Design and appearance proves to have a very important place, especially when it comes to web development and design. A well laid out website that appears catchy easily stands out amongst the crowd, and will, without any doubt whatsoever, generate more traffic in many ways. Thus, keeping in tab with such website design trends, it is largely important to implement and make available several design features that keep website visitors content and happy.

One of the very simple features that many of the social networking sites may offer is the color customization option. For example, the first of such sites, among many, that come to mind is Twitter. You may have seen how Twitter makes a change design color option available under its settings feature. This allows you to select a color of your choice. This is primarily what we shall take a look at. Changing colors and CSS dynamics is easily possible with the help jQuery, and comes across as a very useful feature that can be very easily implemented using few simple steps.

jQuery – What does it offer?

If you have been a developer working with JavaScript, there is no doubt as to the level of benefit you might have received from using the likes of jQuery. Basically, the jQuery library is JavaScript library that is compatible and works well across all platforms. Mainly used for client-side scripting purposes, this JavaScript library also happens to be the most popular one that is in use till date. The use of jQuery can simplify a whole lot of work that can go behind the implementation of features.

Advantages of jQuery –

  • This biggest advantage offered by jQuery is that it simplifies a great deal of things. When you compare that to the work required with JavaScript standard libraries, the latter requires a lot of work.
  • A large library that offers numerous features can be a boon for development work. Also, it is largely supported by developers over the world.
  • It can be extended by making use of various plug-ins that are available.
  • It can be used for the creation of powerful web pages and applications that are very dynamic in nature. Animation, effects, themes and widgets can be easily developed using jQuery.

Changing CSS dynamics

Before we go and take a look at how to change the color of a certain design using jQuery, we will go through the basic, and yet very simple understanding of the many CSS tricks that are involved. This is simply so because you must be well aware that any design feature in web development is basically implemented with the help of CSS.

Changing a CSS element

If you are using jQuery and looking to change any design aspects, the use of the .css() function makes things really simple. Given below is the format of the function that you can implement in your development work.

$('jQuery selector').css({"name of the CSS property ":"value of the CSS property"});

A number of further examples have been demonstrated below to help you understand the function and its usage.

//changing a paragraph text color to blue 
$('p').css({"color":"blue"});
//float all divs with class .center
$('div.center').css('float');
//changing all elements with class .bg-green to have a green background
$('.bg-green').css({"background-color":"green"});

Nesting of CSS commands in jQuery

One thing that is good for you to know is that multiple word formatting for both, CSS and DOM, can be easily handled by jQuery. Thus, nesting your CSS commands will not only save you a whole lot of time, but also looks like a better approach.

So,

newimge.css({'background-image': 'url('+newimgesrc+')'});
newimge.css({'position': 'absolute'});
newimge.css({'height': '85px'});
newimge.css({'width': '250px'});
newimge.css({'top': '70px'});
newimge.css({'right': '5px'});

Can also be shorted, or rather nested to –

newimge.css({'background-image': 'url('+newimgesrc+')', 'position': 'absolute', 'height': '85px', 'width': '250px', 'top': '70px', 'right': '5px'});

Removal of CSS styles

CSS style can be removed in two different ways, although there isn’t a lot of difference between the two.

The first process involves the removal of the class that is basically associated with the element or the page in question.

//removing of a text color from a div
$('#mydiv').removeClass('colors');

The second method undertakes the task directly and removes the CSS styles.

//removing of a text color from a div using the direct method
$('#mydiv').css('color', '');

Besides this, you can also implement another very subtle trick that makes it possible to add after removing a class in the very same statement.

//changing a text color from green to blue (classes have been specified in the stylesheet)
$('#div').removeClass('green').addClass('blue');

Extension of already existing style values

If you wish to extend on an existing style with relevance to its presently defines value, it is possible to do so. Like say, if you already have an element whose padding-right was defined at 8px, the code given below can change that with the result standing at 20px.

.css( "padding-right", "+=12" )

The inclusion of .css() function property in jQuery

Many of you jQuery developers may be aware of the inclusion of an important feature from the 1.4 version. Basically, it allows the passing of a function as property value for the .css() and this feature can be very helpful when the returning of the present CSS values are required, in order to determine changes.

$('div.example').css('length', function(indexing) {
  return indexing * 40;
});
Some background CSS changes implemented
$('#myDiv').css('background_image', 'myimage.jpg'); // or
$('#myDiv').css('background', 'path/---/image1.jpg'); // or
$('#myDiv').css("background-image", "url(/myimage1.jpg)");

An Example featuring entire code - Setting Div Background Image

This shows a complete example of jQuery code that has been used to set a background image into a div dynamically as and when the page is loaded.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $(".theme").keyup(function() {
            var side_bar = $("#side_bar").val();
            var text = $("#text").val();
            var borders = $("#borders").val();
            var linkurl = $("#linkurl").val();
            var back_ground = $("#back_ground").val();

            $("#sidebar_main").css("background_color", side_bar);
            $("#container").css("color", text);
            $("#container a").css("color", linkurl);
            $("#sidebar_main").css("border_color", borders);
            $("#main").css("border_color", borders);
            $("#full").css("background_color", back_ground);
        });

    });
</script>

The above given code snippet basically looks at implementing certain background CSS changes as an example. Going through it can give you a collective idea of how a number of changes may be implemented on a certain design or page.

Changing of design colors with jQuery

Now that we have actually learnt the basics that are involved in the accomplishment of various CSS tricks, we can go on to see a demonstration of how changes in color design can be brought about with jQuery.

If you look at the code, you will notice how colors, background colors, border colors and the color of links are the elements that have been targeted on which changes are implemented. You can fill those up with the names of colors that you seek to implement.

Listing 1: JavaScript code that implements the feature

<script type='text/javascript'>
    $(document).ready(function() {
        //preload image (add timestamp to prevent cache)
        var newimgesrc = 'http://d3n3e0roqdrhcc.cloudfront.net/assets/home-try-ee2e7cffe01dac6b8aff0d279e99c083.png' + (new Date().getTime());
        var new_img = $('#header');
        //replace the image
        $('#header').css("background-image", "url(" + newimgesrc + ")");
        New_img.css({
            'background-image': 'url(' + newimgesrc + ')',
            'position': 'absolute',
            'height': '85px',
            'width': '250px',
            'top': '70px',
            'right': '5px'
        });
        New_img.show();
    });
</script>

Following is the HTML code for rendering the page

Listing 2: Includes the HTML code

<form method="post" action="">
  Sidebar: <input type="text" class="theme" id="side_bar" /> 
  Border: <input type="text" class="theme" id="borders" /> 
  Background: <input type="text" class="theme" id="back_ground" /> 
  Links: <input type="text" class="theme" id="linkurl" /> 
  Text: <input type="text" class="theme" id="text" />
  <input type="submit" value=" Submit " class="submit" />
</form>

Figure 1 – Displaying colour changes

Conclusion

Basically, in today’s world of website development, it certainly pays to have any website that is good in terms of looks. Therefore, the implementation of many elements, such as themes, colors, designs, and more, can play a great role in creating a website that really stands out among its peers. Many of the websites, especially the social media websites, allow users to implement many different themes, both in terms of designs and colors. Although there are certainly many different methods that are prevalent and also used by developers in implementing such customization options, the above-mentioned process surely stands out for its simplicity in the overall approach.

The above lesson just shows how you can go about implement many different changes with CSS and jQuery, as far as the styling of web pages is concerned. We have gone on to show from the basic statement to implement CSS tricks to a full blown example with the entire of JavaScript and HTML code that is involved. Besides these, there are certainly many other options and effects that you can always look to implement with a little more knowledge and understanding.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login