Background Color Change Automatically Using Jquery

Background Color Change Automatically Using Jquery

May 4, 2016 No comments Article SEO Website Designing

Hi Friends, Today i will tell you about Background Color Change Automatically Using Jquery. I am using the jQuery load method for requesting the pages and refreshing the page content without page load. In this blog our background color is changed after some time. it is very good for your website.
You can change the background color automatically with your color code and give any kind of styling as per your requirement.
You won’t need to create any database for this, you have to write some jquery code with php and your automatically changed color background is ready.

For Know More about jquery you can read below articles

Simple Show Hide Accordion Code Using Jquery
Add Diwali Fireworks Using Jquery In Your Website
Add CKEditor in Html Form using Jquery
Jquery Me Simple Slider Kaise Bnate Hai
Learn JQUERY Code Step By Step For Beginners

Background Color Change Automatically Using Jquery Live Demo :

You can see the live demo and download the code below

SEO Website Designing Live Demo    SEO Website Designing Download

Background Color Change Automatically Using Jquery:

You have to follow some steps to change the background (bg) color automatically using jquery, php, css and html. These steps are:




Step1: Create two files with php extenstion.

index.php or backgrounds.php

Step2: Inside the index.php you have to paste the below code.

Style Your content code:

<style>
.bg-website {width:100%; max-width:940px; text-align:center; margin:0 auto; position: relative; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; min-height:300px; border-radius: 5px 0 5px 5px; padding:70px 20px;}
.bg-website:before {content: ""; position: absolute; top: 0; right: 0;border-width: 0 24px 24px 0; border-style: solid; border-color:#F0F0F0 #fff; -webkit-border-radius: 0px 0 0px 5px; -moz-border-radius: 0px 0 0px 5px; border-radius: 0px 0 0px 5px;}
#backgrounds {width:100%;color: #fff; line-height:90px;}
h1 {font-size:3em;}
h2 {font-size:2em;}
</style>

Background change functionality code using jquery:

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
setInterval(function(){
$("#backgrounds").load('background.php')
}, 1500);
});
</script>

In the above code you can change the time intervals between the colors.

setInterval(function(){
$("#backgrounds").load('background.php')
}, Your Time Interval);

Html Code to display the content:

<div id="backgrounds"></div>





Step3: Now add the below content in backgrounds.php file

<?php
$bg_color_array = array("#0000A0","#25383C","#25383C","#fccfcc","#ED9DD0","#EE9DE2","#D69DEC","#9E9CEC");
$bg = array_rand($bg_color_array,1);
?>
<div class="bg-website" style="background-color:<?php echo $bg_color_array[$bg];?>;" >
<h1>Background Color Change Automatically Using Jquery</h1>
<h2>This Background refreshes every 1.5 seconds.</h2>
</div>

In the above code array you can change the colors and text according to your requirements.

$bg_color_array = array("Your Background colors");

Step4: Enjoy Background Color Change Automatically Using Jquery.

Read About Other Interesting Things below.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

Categories: Website Design

Leave a Reply