Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Activate jQuery img and text manipulation on page load

Tags:

javascript

html

jquery

css

image

I have build a small bootstrap 3 thumbnails text and img manipulation, now I have a question on how to make this active when page load, to be specific I would like that #anime1 be active when page loads.

Check out this manipulation example. You will see that I have a bunch of thumbnails just displaying there, but when you interact with manipulation it will display everything you need to see for selected navbar title.

So how can I make this active on page load?

$(function(){
    $('#anime1').click(function(){

        $('.column').each(function(){
            $( this ).hide( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );

        $('#col1 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col1 h3').text('Grouting!');
        $('#col1 p:first').text('Grouting retention text will be displayed here!');

        $('#col2 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col2 h3').text('Grouting!');
        $('#col2 p:first').text('Grouting retention text will be displayed here!');

        $('#col3 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col3 h3').text('Grouting!');
        $('#col3 p:first').text('Grouting retention text will be displayed here!');

        $('#col4 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Grouting!');
        $('#col4 p:first').text('Grouting retention text will be displayed here!');

        $('#col5 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col5 h3').text('Grouting!');
        $('#col5 p:first').text('Grouting retention text will be displayed here!');

        $('#col6 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)');
        $('#col6 h3').text('Grouting!');
        $('#col6 p:first').text('Grouting retention text will be displayed here!');
        });
    });

    $('#anime2').click(function(){
        $('.columns').hide( 500 );
        $('.column').hide( 500 );
    });
    $('#anime2').click(function(){
        $('.col4').show( 500 );

        $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Ground Improvements!');
        $('#col4 p:first').text('Ground Improvements text will be displayed here!');
    });

    $('#anime3').click(function(){
        $('.column').each(function(){
            $( this ).show( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );
        });
        $('#col1 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col1 h3').text('Earth Retention!');
        $('#col1 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col2 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col2 h3').text('Earth Retention!');
        $('#col2 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col3 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col3 h3').text('Earth Retention!');
        $('#col3 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col4 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Earth Retention!');
        $('#col4 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col5 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col5 h3').text('Earth Retention!');
        $('#col5 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col6 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col6 h3').text('Earth Retention!');
        $('#col6 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col7 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col7 h3').text('Earth Retention!');
        $('#col7 p:first').text('Earth Retention retention text will be displayed here!');

        $('#col8').hide( 500 );
    });

    $('#anime4').click(function(){
        $('.column').each(function(){
            $( this ).show( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );
        });
        $('#col1 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col1 h3').text('Structural Support!');
        $('#col1 p:first').text('Structural Support text will be displayed here!');

        $('#col2 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col2 h3').text('Structural Support!');
        $('#col2 p:first').text('Structural Support text will be displayed here!');

        $('#col3 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col3 h3').text('Structural Support!');
        $('#col3 p:first').text('Structural Support text will be displayed here!');

        $('#col4 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Structural Support!');
        $('#col4 p:first').text('Structural Support text will be displayed here!');

        $('#col5 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col5 h3').text('Structural Support!');
        $('#col5 p:first').text('Structural Support text will be displayed here!');

        $('#col6 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col6 h3').text('Structural Support!');
        $('#col6 p:first').text('Structural Support text will be displayed here!');

        $('#col7 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col7 h3').text('Structural Support!');
        $('#col7 p:first').text('Structural Support text will be displayed here!');

        $('#col8 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col8 h3').text('Structural Support!');
        $('#col8 p:first').text('Structural Support text will be displayed here!');

    });

    $('#anime5').click(function(){
        $('.column').hide( 500 );
        $('.columns').hide( 500 );
    });
    $('#anime5').click(function(){
        $('.col4').show( 500 );

        $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)');
        $('#col4 h3').text('Additional Technologies!');
        $('#col4 p:first').text('Additional Technologies text will be displayed here!');
    });

});

Thumbnail:

  <div class="row">
     <div class=" col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-12">
            <ul class="nav nav-pills">
              <li role="presentation"><a id="anime1" href="#">Grouting</a></li>
              <li role="presentation"><a id="anime2" href="#">Ground Improvements</a></li>
              <li role="presentation"><a id="anime3" href="#">Earth Retention</a></li>
              <li role="presentation"><a id="anime4" href="#">Structural Support</a></li>
              <li role="presentation"><a id="anime5" href="#">Additional Technologies</a></li>
            </ul>
     </div>
 </div>

     <div class="row">
         <p style="padding: 10px;"></p>
     </div>

        <div class="row">
           <div id="col1" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col2" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end-->
            </div>

            <div id="col3" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col4" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 animate_col4">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">Ovo ce da se animira za Additionl technologies.</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col5" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">Ovaj ce da se animira za Ground Impovements!</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col6" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col7" class="column col-xs-2 col-sm-2 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>

            <div id="col8" class="column col-xs-2 col-sm-2 col-md-2 col-lg-2">
               <div class="thumbnail">
                  <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                  <div class="caption">
                    <h3 class="text-center">Text title, label, etc</h3>  
                    <p class="text-center">descritpion here</p>
                    <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                  </div><!--/ caption-end -->
               </div><!--/ thumbnail-end -->
            </div>
        </div><!--/ end thumbnai row -->
like image 657
copser Avatar asked Apr 26 '16 19:04

copser

1 Answers

Append a trigger to the handler selector

 $('#anime1').click(function(){
    //... all the code you have
 });

revised:

 $('#anime1').click(function(){
    //... all the code you have
 }).trigger('click');

EDIT: Modified code per comment. A review of the code

Note that some of this is preference and some might be overkill, I will put my reasoning on each change:

  • The code is functional but likely to be a pain to maintain due to the hard coded id's that need to be the same in markup as in code.
  • You COULD simply use 8 columns all with the SAME markup with no id, using classes to enable code targeting of the elements. One benefit here is that the actual number of links could vary as well as the text, images etc. This could either be pushed into the document as an abject or use ajax to get more.
  • For simplicity of my review, I will assume that there are only 5 "groups" as you have indicated. Additional links could be added to the array of those either from code client side or from the server, up to you.
  • Rather than have hard coded contents in the thumbnails you are injecting that from script, hard coding those values in the script. This is going to be hard to maintain.

Column markup example based on yours: NOTE No id's in here.

 <div class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <div class="thumbnail">
      <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
      <div class="caption">
        <h3 class="thumbnail-head text-center">Text title, label, etc</h3>
        <p class="thumbnail-desc text-center">descritpion here</p>
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>

Links, added a couple of things: a class to the 'a' tag and data-thing=' with a name of each. We will use this thing to target a JavaScript object array by name (look them up).

<ul class="nav nav-pills">
  <li role="presentation"><a id="anime1" class="mylinks" data-thing="grout" href="#">Grouting</a></li>
  <li role="presentation"><a id="anime2" class="mylinks" data-thing="ground" href="#">Ground Improvements</a></li>
  <li role="presentation"><a id="anime3" class="mylinks" data-thing="earth" href="#">Earth Retention</a></li>
  <li role="presentation"><a id="anime4" class="mylinks" data-thing="struct" href="#">Structural Support</a></li>
  <li role="presentation"><a id="anime5" class="mylinks" data-thing="tech" href="#">Additional Technologies</a></li>
</ul>

Note these COULD be injected from the object as well.

Here is the object. I name spaced it with "myApp". In this object you can see data as well as some functions I use. See the in-line comments throughout.

// create my namespace, use any preexisting namespace by that name.
var myApp = myApp || {};

Add data to our namespace

// This is the actual data object, it has some defaults that I use
myApp.loadObject = {
  defaultActiveLink: "grout",
  animateHideDelay: 500,
  animateShowDelay: 500,
  defaultColumnCount: 8,
  // array of "things" that we process (by name)
  things: [{
    name: "grout",// used to lookup
    linkText: "Grouting",// link text (if we wanted to inject it)
    // array of links in THIS thing - we use these
    columnData: [{
      "src": 'http://lorempixel.com/140/100/city',
      "alt": "City",
      "background": 'url(http://lorempixel.com/140/100/city)',
      "headtext": 'Grouting0!',
      "paragraphtext": 'Grouting 0 retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/city',
      "alt": "City",
      "background": 'url(http://lorempixel.com/140/100/city)',
      "headtext": 'Grouting 1!',
      "paragraphtext": 'Grouting1 retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/city',
      "alt": "City",
      "background": 'url(http://lorempixel.com/140/100/city)',
      "headtext": 'Grouting2!',
      "paragraphtext": 'Grouting2 retention text will be displayed here!'
    }]
  }, {
    name: "ground",
    linkText: "Ground Improvements",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/nature',
      "alt": "Nature",
      "background": 'url(http://lorempixel.com/140/100/nature)',
      "headtext": 'Ground Improvements!',
      "paragraphtext": 'Ground 1 retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/nature',
      "alt": "Nature",
      "background": 'url(http://lorempixel.com/140/100/nature)',
      "headtext": 'Ground Improvements2!',
      "paragraphtext": 'Improvements 2  retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/nature',
      "alt": "Nature",
      "background": 'url(http://lorempixel.com/140/100/nature)',
      "headtext": 'Ground Improvements3!',
      "paragraphtext": 'Ground 3 Improvements retention text will be displayed here!'
    }]
  }, {
    name: "earth",
    linkText: "Earth Retention",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/abstract',
      "alt": "Abstract",
      "background": 'url(http://lorempixel.com/140/100/abstract)',
      "headtext": 'Earth1!',
      "paragraphtext": 'Earth text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/abstract',
      "alt": "Abstract",
      "background": 'url(http://lorempixel.com/140/100/abstract)',
      "headtext": 'Mother Earth!',
      "paragraphtext": 'Mother Earth  text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/abstract',
      "alt": "Abstract",
      "background": 'url(http://lorempixel.com/140/100/abstract)',
      "headtext": 'Earthy!',
      "paragraphtext": 'Earthy retention text will be displayed here!'
    }]
  }, {
    name: "struct",
    linkText: "Structural Support",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/cats',
      "alt": "Cats",
      "background": 'url(http://lorempixel.com/140/100/cats)',
      "headtext": 'Stuctural!',
      "paragraphtext": 'Structural retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/cats',
      "alt": "Cats",
      "background": 'url(http://lorempixel.com/140/100/cats)',
      "headtext": 'Struct!',
      "paragraphtext": 'Struct retention text will be displayed here!'
    }, {
      "src": 'http://lorempixel.com/140/100/cats',
      "alt": "Cats",
      "background": 'url(http://lorempixel.com/140/100/cats)',
      "headtext": 'Struct Last!',
      "paragraphtext": 'My Struct Last retention text will be displayed here!'
    }]
  }, {
    name: "tech",
    linkText: "Additional Technologies",
    columnData: [{
      "src": 'http://lorempixel.com/140/100/food',
      "alt": "Foody",
      "background": 'url(http://lorempixel.com/140/100/food)',
      "headtext": 'Tech!',
      "paragraphtext": 'Tech Tech Tech  text will be displayed here!'
    }]
  }]
};

Add some generic functions to our namespace:

// some generic functions to process my "object" not all these are used so you could clip it down a bit
myApp.arrayObj = {
  indexOf: function(myArray, searchTerm, property) {
    for (var i = 0; i < myArray.length; i++) {
      if (myArray[i][property] === searchTerm) return i;
    }
    return -1;
  },
  indexAllOf: function(myArray, searchTerm, property) {
    var ai = [];
    for (var i = 0; i < myArray.length; i++) {
      if (myArray[i][property] === searchTerm) ai.push(i);
    }
    return ai;
  },
  lookup: function(myArray, searchTerm, property, firstOnly) {
    var found = [];
    var i = myArray.length;
    while (i--) {
      if (myArray[i][property] === searchTerm) {
        found.push(myArray[i]);
        if (firstOnly) break; //if only the first 
      }
    }
    return found;
  },
  lookupAll: function(myArray, searchTerm, property) {
    return this.lookup(myArray, searchTerm, property, false);
  },
  remove: function(myArray, searchTerm, property, firstOnly) {
    for (var i = myArray.length - 1; i >= 0; i--) {
      if (myArray[i][property] === searchTerm) {
        myArray.splice(i, 1);
        if (firstOnly) break; //if only the first term has to be removed
      }
    }
  }
};

Add some custom functions to our namespace (well only one...)

// custom functions
myApp.func = {
  /* activate the default specified by name */
  setDefault: function() {
    var activeDefault = myApp.loadObject.defaultActiveLink;
    var defaultIndex = myApp.arrayObj.indexOf(myApp.loadObject.things, activeDefault, "name");
    defaultIndex = !!activeDefault ? defaultIndex : 0;
    $('.nav-pills').find('.mylinks').eq(defaultIndex).trigger('click');
  }
};

Standard jQuery stuff, this COULD be a custom function we call as well. This basically does what all your code did:

// process on click, injecting the appropriate text
$('.nav-pills').on('click', '.mylinks', function() {
  // hide using the default hide delay in the object
  $('.columns').hide(myApp.loadObject.animateHideDelay);
  var thingtype = $(this).data('thing');// added to the link
  var thing = myApp.arrayObj.lookup(myApp.loadObject.things, thingtype, "name", true);//lookup by name
  var columns = $('.columns');// all the columns
  // process the links,showing them 
  $.each(thing[0].columnData, function(index, item) {
    // cache to not do multiple DOM searches
    var tn = columns.eq(index).find('.thumbnail');
    var cap = tn.find('.caption');
    tn.find('img.img-thumbnail').attr('src', item.src).attr('alt', item.alt).prepend('background-image', item.background);
    cap.find('h3.thumbnail-head').text(item.headtext);
    cap.find('p.thumbnail-desc').text(item.paragraphtext);
    // show this one
    $('.columns').eq(index).show(myApp.loadObject.animateShowDelay);
  });
});

$(function() {
  // activate the default specified by name
  myApp.func.setDefault();
});
like image 200
Mark Schultheiss Avatar answered Sep 25 '22 23:09

Mark Schultheiss
Sign in to Comment

Related questions

CORS fetch from Firefox to Beego server stops after pre-flight
Optimizing: Get specific Value(and not more) from IndexedDB
Javascript regex: Find all URLs optimization
Sorting and grouping nested subdocument in Mongoose
animated scrolling script prevents local anchor positions to be accessed from external links
Load 404 state with AngularJS Router
Cucumber JS timeout won't work
Simplifying D3js' SVG path generated string
Non-recursive method to iterate over Promise iterator
Debugging node js in Webstorm when running from gulp
Edit POST parameters prior to forwarding to a proxy target and sending response back to client
ReactJS - prevent re-render children
Searching through JSON Object with ng-class (AngularJS)
Change Element Height as compared to Width in HTML/CSS
Google oauth 400 response: No 'Access-Control-Allow-Origin' header is present on the requested resource
Play a binary string with the HTML audio tag
Grouped stack chart with D3.js
Flexslider not working properly when using ng-repeat
Get data from mixin Vue.js
Three.js - How to get camera position with respect to origin

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!