CODEWITHSUNDEEP
javascriptjqueryloops
Gleb Umarov
Gleb Umarov

Reputation: 35

How to make the code shorter?

Sorry for my English. I am trying to make a website, where you click on a picture of a president and jQuery changes background of the website. My code is really big and clumsy. Is there a way to use loops or something to shorten it? Thanks in advance.

 $(document).ready(function(){
  $('#truman').click(function(){
    $('body').css('background', 'url(img/bg/trumanBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#kennedy').click(function(){
    $('body').css('background', 'url(img/bg/kennedyBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#eisenhower').click(function(){
    $('body').css('background', 'url(img/bg/eisenhowerBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#johnson').click(function(){
    $('body').css('background', 'url(img/bg/johnsonBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#nixon').click(function(){
    $('body').css('background', 'url(img/bg/nixonBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
  $('#ford').click(function(){
    $('body').css('background', 'url(img/bg/fordBg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover');
    $('body').css('-moz-background-size',    'cover');
    $('body').css('-o-background-size',      'cover');
    $('body').css('background-size',         'cover');
  });
});

Upvotes: 1

Views: 102

Answers (3)

Nagaraju
Nagaraju

Reputation: 1875

I had wrapped your common thing in a function. You can do more stuff when you want to add more styles.

This will be most helpful when you are not having same class.

$(document).ready(function(){
      $('#truman').click(function(){
       applyStyles("truman");
      });
      $('#kennedy').click(function(){
       applyStyles("kennedy");
      });
      $('#eisenhower').click(function(){
        applyStyles("eisenhower");
      });
      $('#johnson').click(function(){
        applyStyles("johnson");
      });
      $('#nixon').click(function(){
        applyStyles("nixon");
      });
      $('#ford').click(function(){
        applyStyles("ford");
      });
    });

function applyStyles(name) {
        var url = 'url(img/bg/'+name+'Bg.jpg) no-repeat center center fixed';
        $('body').css('background', url);
        $('body').css('-webkit-background-size', 'cover');
        $('body').css('-moz-background-size',    'cover');
        $('body').css('-o-background-size',      'cover');
        $('body').css('background-size',         'cover');

}

Upvotes: 1

mplungjan
mplungjan

Reputation: 177955

Give them all the same class - here "president" and do 

$(function(){
  $('.president').click(function(){
    $('body').css('background', 'url(img/bg/'+this.id+'Bg.jpg) no-repeat center center fixed');
    $('body').css('-webkit-background-size', 'cover'); 
    .....

The alternative is to change the image - 

$(function(){
  $('.president').click(function(){
    $("body").css('background-image','url(img/bg/'+this.id+'Bg.jpg)'); 
  });  
});

Another alternative is to just change the class but watch it if you have more than one class on the body tag

Upvotes: 4

Alex Szabo
Alex Szabo

Reputation: 3276

Posting my comment as an answer, I'd go this way:

In the HTML, i'd wrap the presidents in a div, and use the same class name in CSS as the DIV id, so it'd be shorter to write in JS.

function clearPreviousPresidentClass() {
  $('body').removeClass('nixon truman kennedy');
}

$('document').ready(function() {
  $('#presidents').click(function(event) {
    clearPreviousPresidentClass();
    $('body').addClass(event.target.id);
  });
});
body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.truman {
  background-color: red;
}

.nixon {
  background-color: blue;
}

.kennedy {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="presidents">
    <div id="nixon">Nixon</div>
    <div id="truman">Truman</div>
    <div id="kennedy">Kennedy</div>
  </div>
</body>

Upvotes: 1

Related Questions