Solved

Background css color change based on active class

Posted on 2011-09-07
17
250 Views
Last Modified: 2012-05-12

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
Comment
Question by:pixelscape
  • 7
  • 6
  • 2
  • +2
17 Comments
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36494597
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36494603
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 36494913
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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

Author Comment

by:pixelscape
ID: 36494997
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
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36495045
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
 

Author Comment

by:pixelscape
ID: 36495253
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
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36495452
Um, thanks, but this is not the javascript that is rotating the images.  I need to see the javascript coding, not the HTML.
0
 
LVL 82

Expert Comment

by:hielo
ID: 36495849
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
 

Author Comment

by:pixelscape
ID: 36500019
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
 
LVL 82

Expert Comment

by:hielo
ID: 36500187
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
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 500 total points
ID: 36500902
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
 

Author Comment

by:pixelscape
ID: 36503795
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
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36503864
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
 

Author Comment

by:pixelscape
ID: 36503878
Perfect works great, how do I get it to check first time the slideshow is loaded as well?
0
 

Author Comment

by:pixelscape
ID: 36503939
You know what, I can just define that in my body tag. So it's not necessary. Thanks for your help!
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36503942
You already have it loading off of $(window).load(), what do you want to do when the slideshow is loaded?
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36503954
OK, fair enough.  Best of luck to you on your project!
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question