Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

Background css color change based on active class


I want to change background colors like this: http://inspectelement.com/tutorials/changing-the-background-color-of-a-page-using-jquery/

However I don't want to use buttons to change background colors. I want to tie the color change to an active class.

So say I have a slideshow that pulls the following...

<a href=""><img class="one" src="images/slide1.jpg" width="1200" height="690" alt="" rel="images/slide1_thumb.jpg"/></a>
           
<a href=""><img class="two" src="images/slide2.jpg" width="1200" height="690" alt="" rel="images/slide2_thumb.jpg"/></a>



class=one would be active and trigger appropriate color than class=two would be active and trigger that appropriate color.

I am looking for ideas, not quit sure how to do this. Thanks!
0
pixelscape
Asked:
pixelscape
  • 7
  • 6
  • 2
  • +2
1 Solution
 
OmniUnlimitedCommented:
First off, you need to set up jQuery.

To activate jQuery for your site:

1. Go to http://jquery.com/ and download the latest version.
2. Upload the jquery file to your server and put a link to it in your <head> section of your web page:
 
<script type='text/javascript' src='http://yoursite.com/js/jquery/jquery.js?ver=1.6.1'></script>

Open in new window

3. Place a link to your own javascript file for all the cool jQuery code below the link to jQuery:
 
<script type='text/javascript' src='http://yoursite.com/js/cooljs.js'></script>

Open in new window

4. Place the following code in your cooljs.js file and you are all set!
 
var $ = jQuery.noConflict();

$(document).ready(function() {
    
}

Open in new window


Now, we just need to place some cool jQuery code into the $(document).ready function and you will be good to go.

First question: How do you propose on designating an active class?  Will you use a javascript variable to do this?  What code is being used in your slideshow?
0
 
BardobraveCommented:
On your css associate a different color for each css class.

To get control of different classes use jQuery's addClass and removeClass.

<a href=""><img id="image1" class="one" src="images/slide1.jpg" width="1200" height="690" alt="" rel="images/slide1_thumb.jpg"/></a>
           
<a href=""><img id="image2" class="two" src="images/slide2.jpg" width="1200" height="690" alt="" rel="images/slide2_thumb.jpg"/></a>


$("#image1).removeClass("one");
$("#image1).addClass("two");

$("#image2).removeClass("two");
$("#image2).addClass("one");
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
pixelscapeAuthor Commented:
Thanks for the input guys. So I need to trigger this color switch after each new slide comes in. The slider I am using is jquery based and has a

afterChange: function(){ },

option I can configure. How would I write in a function to call the active class and thus the right color?
0
 
OmniUnlimitedCommented:
So you want to get the class of the current image?  I would need to see how your slider is changing the images because odds are you would need to link coding into the area where the image is actually being swapped out.
0
 
pixelscapeAuthor Commented:
This is where the slides are defined:

<div id="slider">
                   
<a href=""><img src="images/slide1.jpg" width="1200" height="690" alt="" rel="images/slide1_thumb.jpg"/></a>
           
 <a href=""><img src="images/slide2.jpg" width="1200" height="690" alt="" rel="images/slide2_thumb.jpg"/></a>
                  
 <a href=""><img src="images/slide1.jpg" width="1200" height="690" alt="" rel="images/slide1_thumb.jpg"/></a>
           
<a href=""><img src="images/slide2.jpg" width="1200" height="690" alt="" rel="images/slide2_thumb.jpg"/></a>
                        
</div>
0
 
OmniUnlimitedCommented:
Um, thanks, but this is not the javascript that is rotating the images.  I need to see the javascript coding, not the HTML.
0
 
hieloCommented:
try:
<style type="text/css">
.active{background-color:yellow;}
</style>

<!-- link to your jquery here; adjust the path to your copy of jquery -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('#slider a').bind('click',function(e){
		e.preventDefault();
		$('#slider a').removeClass('active');

		$(this).addClass('active');
	return false;
	});
});
</script>

Open in new window

0
 
pixelscapeAuthor Commented:
Here's what I am trying...

 <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown,random'
        slices:30,
        animSpeed:500, //Slide transition speed
        pauseTime:8000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next and Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:true, //Use thumbnails for Control Nav
      	controlNavThumbsFromRel:true, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left and right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: $(function(){
	$('#slider a').bind('click',function(e){
		e.preventDefault();
		$('#slider a').removeClass('active');

		$(this).addClass('active');
	return false;
	});
});,
        slideshowEnd: function(){} //Triggers after all slides have been shown
    });
});
</script>

Open in new window

0
 
hieloCommented:
since you are trying this on the "afterChange", try it without the $():


...
        afterChange: function(){
			$('#slider a').bind('click',function(e){
				e.preventDefault();
				$('#slider a').removeClass('active');

				$(this).addClass('active');
			return false;
			});
		};
...

Open in new window

0
 
OmniUnlimitedCommented:
Now I'm confused.  You stated:

I need to trigger this color switch after each new slide comes in

Now are you trying to switch the color after you click on it?  The tutorial you directed us to was about changing the color of the page background.  If this is the effect you want, you could do it simply do it based on the slide number, not the class.

Just like the tutorial, you would set up your CSS something like this:
 
.bg1 { background-color: #6c0000; }
.bg2 { background-color: #5A2A00; }
.bg3 { background-color: #00345B; }
etc...

Open in new window


Then you would modify your code to look something like this:
 
<script type="text/javascript">
$(window).load(function() {
    var current_slide_no = 1;
    $('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown,random'
        slices:30,
        animSpeed:500, //Slide transition speed
        pauseTime:8000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next and Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:true, //Use thumbnails for Control Nav
      	controlNavThumbsFromRel:true, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left and right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: $(function(){
              current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;
              current_slide_no++; // necessary because index starts at 0
              switch (current_slide_no) {
                   case 1:
                         $("body").removeClass('bg2 , bg3').addClass("bg1");
                         break;
                   case 2:
                         $("body").removeClass("bg1 , bg3").addClass("bg2");
                         break;
                   case 3:
                         $("body").removeClass("bg1 , bg2").addClass("bg3");
                         break;
              }
	});
});,
        slideshowEnd: function(){} //Triggers after all slides have been shown
    });
});
</script>

Open in new window

0
 
pixelscapeAuthor Commented:
Sorry, guess I haven't been clear. I want to change the background color like the tutorial but not with a click, I want it to change with each slide change. The slider I am using has this afterChange... which initiates whatever function after each slide comes in. Which looks like what you are trying to do above... I think we are on the same page now.

So two questions regarding the code above...
- The slideshow does not run as is... I did this and now it runs. Will this be okay?
afterChange: function(){
              current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;
              current_slide_no++; // necessary because index starts at 0
              switch (current_slide_no) {
                   case 1:
                         $("body").removeClass('bg2 , bg3').addClass("bg1");
                         break;
                   case 2:
                         $("body").removeClass("bg1 , bg3").addClass("bg2");
                         break;
                   case 3:
                         $("body").removeClass("bg1 , bg2").addClass("bg3");
                         break;
              }
		},

Open in new window


- Color change does not happen. I have bg1, bg2 and bg3 css classes setup in my stylesheet.
0
 
OmniUnlimitedCommented:
OK, that's what I thought, that's why I proposed my code.

The code is probably not working because you were supposed to change the #nivo-slider to the selector of your slideshow.
0
 
pixelscapeAuthor Commented:
Perfect works great, how do I get it to check first time the slideshow is loaded as well?
0
 
pixelscapeAuthor Commented:
You know what, I can just define that in my body tag. So it's not necessary. Thanks for your help!
0
 
OmniUnlimitedCommented:
You already have it loading off of $(window).load(), what do you want to do when the slideshow is loaded?
0
 
OmniUnlimitedCommented:
OK, fair enough.  Best of luck to you on your project!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 6
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now