Social Networks

This post about “how to change website theme design(colors) without refreshing page with jQuery”. Have you tried twitter settings Change design colors, you can customize the design colors. It’s very useful just some lines of code, use it and add more features to your web projects.

Click on below Image to view online Demo for how to change website theme design(colors) without refreshing page with jQuery.

jquery-colors

Click on Below image to download demo –

live-demo-tech-blog

 

Javascript Code

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

$(".theme").keyup(function() 
{
var sidebar = $("#sidebar").val();
var text = $("#text").val();
var border = $("#border").val();
var links = $("#links").val();
var background = $("#background").val();

$("#sidebar_main").css("background-color", sidebar);
$("#container").css("color", text);
$("#container a").css("color", links);
$("#sidebar_main").css("border-color", border);
$("#main").css("border-color", border);
$("#full").css("background-color", background);
});

});
</script>

 

HTML Code 
Contains HTML Code..

<form method="post" action="">
Sidebar: <input type="text" class="theme" id="sidebar"/>
Border: <input type="text" class="theme" id="border"/>
Background:<input type="text" class="theme" id="background"/>
Links: <input type="text" class="theme" id="links"/>
Text: <input type="text" class="theme" id="text"/>
<input type="submit" value=" Submit " class="submit"/>
</form>

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>