3

My main landing page shows different images when different categories are hovered (using jQuery on my CMS page). I also want to tie into this and tell it to also change the color of the 'MENU' icon, too, depending on different image being shown (my 'menu' is a burger style created with the CSS below). How can I edit my jQuery to also call this function?

jQuery (in CMS page) for the image changing on hover:

<script type="text/javascript">// <![CDATA[
(function(){
        var backgroundImages = [
            src="{{media url="landing.jpg"}}", // default background image link
            src="{{media url="/e-store.jpg"}}", // background image for category A
            src="{{media url="/e-store.jpg"}}", // background image for category B
            src="{{media url="/home-page.jpg"}}", // background image for category C
            src="{{media url="/press.jpg"}}", // background image for category D
            src="{{media url="/contact.jpg"}}", // background image for Contact
            src="{{media url="/etc.jpg"}}", // background image for Et Cetera
        ];

                function updateBg(position){
        jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')');    
 jQuery('.skip-link.skip-nav span').css({ 
'color': '#3bcccc'  
 });  
    }

        jQuery(document).ready(function(){
            jQuery('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
            jQuery('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
            jQuery('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
            jQuery('.nav-3').hover(function(){updateBg(4)},function(){updateBg(0)});
            jQuery('.nav-4').hover(function(){updateBg(5)},function(){updateBg(0)});
            jQuery('.nav-5').hover(function(){updateBg(6)},function(){updateBg(0)});
        });        
    })();
// ]]></script>

HTML for the 'MENU':

<div class="skip-links">
            <a href="#header-nav" class="skip-link skip-nav">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
                <span class="icon"></span>
                <span class="label">MENU</span>
            </a>
</div>
</div

CSS for the 'MENU':

.skip-link.skip-nav span {
  display: block;
  position: absolute;
  height: 2px;
  width: 70%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out; 
  transition: .25s ease-in-out;
}

.skip-link.skip-nav span:nth-child(1) {
  top: 0px;
  background: #b0b0b0;
}

.skip-link.skip-nav span:nth-child(2),.skip-link.skip-nav span:nth-child(3) {
  top: 8px;
  background: #b0b0b0;
}


.skip-link.skip-nav span:nth-child(4) {
  top: 17px;
  background: #b0b0b0;
}

.skip-link.skip-nav.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #000;
    height: 2px;
}

.skip-link.skip-nav.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #000;
height: 2px; 
}

.skip-link.skip-nav.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #000;
  height: 2px;
}

.skip-link.skip-nav.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #000;
  height: 2px;
}  

.skip-link.skip-nav .label {
    margin-top: -10px;
    color: #b0b0b0;
    margin-left: -50px;
    font-weight: bold;
}


.skip-link.skip-nav.open .label {
    display: none;
}

UPDATE:

I have updated my jQuery above which is working, but how do I change it so that bg1 is white, bg2 is black, etc? I tried listing the color options, but it didn't seem to work.

UPDATE 2:

Here is my latest jQuery:

<script type="text/javascript">// <![CDATA[
(function($){
        var backgroundImages = [
            src='{{media url="landing.jpg"}}',
            src='{{media url="/e-store.jpg"}}',
            src='{{media url="/e-store.jpg"}}',
            src='{{media url="/home-page.jpg"}}',
            src='{{media url="/press.jpg"}}',
            src='{{media url="/contact.jpg"}}',
            src='{{media url="/etc.jpg"}}',
        ];

        function updateBg(position){
            $('.main-container').css('background-image','url('+backgroundImages[position]+')');
            if (position = 1) { var color = '#3bcccc' }
            else if (position = 0) { var color = '#333333' }
            else if (position = 2) { var color = '#0dd67e' }
            else if (position = 3) { var color = '#ff852b' }
            else { var color = '#030303' } // set a default color  
                $('.skip-link.skip-nav span').css({ 
                color: color
            });  
         }

        $(document).ready(function(){
            $('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
            $('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
            $('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
            $('.nav-3').hover(function(){updateBg(4)},function(){updateBg(0)});
            $('.nav-4').hover(function(){updateBg(5)},function(){updateBg(0)});
            $('.nav-5').hover(function(){updateBg(6)},function(){updateBg(0)});
        });        
})(jQuery);
// ]]></script>
2

You can use your current function updateBg to add more CSS selectors like this:

jQuery('.main-container').css({ 
    'background-image': 'url(+backgroundImages[position]+)',
    'color': 'red'    
});

Alternatively, you could add to your existing function after the code above:

jQuery('.skip-link').css({ 
    'color': 'red'    
});

Or, create a new function and add it to your hover event listener:

jQuery('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)},function(){updateColor(1)});

function updateColor(position){
    jQuery('.skip-link').css({ 
        'color': 'red'    
    });
}

UPDATE: Okay, so you have the following code which I believe is working for you, except you want to use different colors for different "positions":

function updateBg(position){
    jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')');    
    jQuery('.skip-link.skip-nav span').css({ 'color': '#3bcccc' });  
}

So, the easiest way (although maybe the longest) would be like this:

function updateBg(position){
    jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')');
    if (position === 1) { var color = '#3bcccc' }
    if (position === 0) { var color = '#333333' }
        else { var color = '#030303' } // set a default color   
    jQuery('.skip-link.skip-nav span').css({ 'color': color });  
}

UPDATE:

Your full code with syntax errors corrected:

<script type="text/javascript">// <![CDATA[
(function($){
        var backgroundImages = [
            src='{{media url="landing.jpg"}}',
            src='{{media url="/e-store.jpg"}}',
            src='{{media url="/e-store.jpg"}}',
            src='{{media url="/home-page.jpg"}}',
            src='{{media url="/press.jpg"}}',
            src='{{media url="/contact.jpg"}}',
            src='{{media url="/etc.jpg"}}',
        ];

        function updateBg(position){
            $('.main-container').css('background-image','url('+backgroundImages[position]+')');
            if (position === 1) { var color = '#3bcccc' }
            else if (position === 0) { var color = '#333333' }
            else { var color = '#030303' } // set a default color  
                $('.skip-link.skip-nav span').css({ 
                color: color
            });  
         }

        $(document).ready(function(){
            $('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
            $('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
            $('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
            $('.nav-3').hover(function(){updateBg(4)},function(){updateBg(0)});
            $('.nav-4').hover(function(){updateBg(5)},function(){updateBg(0)});
            $('.nav-5').hover(function(){updateBg(6)},function(){updateBg(0)});
        });        
})(jQuery);
// ]]></script>
  • firstly, thank you!! I have been struggling with this for almost a week now and this is by far the closest i've got!! Completely appreciate your help. The middle option seemed to work for me, however how do I give other color options? I.e. Bg1 is black, bg2 is white? I will update my code above... – itsk2015 Jun 1 '15 at 6:52
  • also, it might be worth noting that i tried to list the color options similar to the image options, but this didn't work. I'm so close yet can't figure this little bit out... :) – itsk2015 Jun 1 '15 at 23:16
  • any help you can give is extremely appreciated - sorry to bombard, I have a deadline and need to get this finished tonight. I just don't know where to go from here. – itsk2015 Jun 2 '15 at 1:19
  • Just put those in your functions. I'll update my answer with an example. – Tim Hallman Jun 2 '15 at 1:20
  • Thank you! I copied the function exactly as you had it above but it just seems to pick up the default color... – itsk2015 Jun 2 '15 at 1:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.