Solved

Background css color change based on active class

Posted on 2011-09-07
17
247 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
Comment Utility
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
Comment Utility
0
 
LVL 19

Expert Comment

by:Bardobrave
Comment Utility
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
 

Author Comment

by:pixelscape
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:pixelscape
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Perfect works great, how do I get it to check first time the slideshow is loaded as well?
0
 

Author Comment

by:pixelscape
Comment Utility
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
Comment Utility
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
Comment Utility
OK, fair enough.  Best of luck to you on your project!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now