Transfer inline hard-coded jQuery function to variables

Question

I have the following code:

      <!-- work item 1 -->
      <li id="portfolio-1" class="col-12  col-sm-6  col-md-6  col-lg-4">
        <figure class="box  box--sm  text-center">
            <h4 class="brand--font-standard">Project Title</h4>
              <div class="row">
              <div class="col-xs-offset-2  col-xs-8  col-sm-offset-1  col-sm-10  col-md-offset-2  col-md-8  col-lg-offset-3  col-lg-6">
                  <img src="img/globe.jpg" class="img-responsive" alt="globe">
                </div>
              </div>
            <figcaption>
              <p>Project comment</p>
              <a href="#" class="pull-right  brand--font" onclick="$('.work--detail').addClass('work--detail_show'); $('#work-2, #work-3, #work-4, #work-5, #work-6').hide(); $('#work-1').slideDown(); $('html, body').animate({scrollTop: $('.hidden-content-top').offset().top - 110 }, 1000); return false;">View</a>
            </figcaption>
        </figure>
      </li><!-- /work item 1 -->

I'm wanting to rewrite the js on the anchor tag so that it is not hard-coded, instead having variables for the items that need to open/have .hide added to them. There are currently 6 li's with ID's of #portfolio-(number) with corresponding hidden content for each with ID's of #work-(number).

The reason i'm wanting to do this is firstly to tidy the code up and make it a little more reusable. But also, as the site is responsive I need to adjust the offset value based on the window width.

The corresponding hidden content would also need to work from variables as oppose to being hard-coded. An example of this is:

<a href="#" class="btn  btn--small  btn--grey  brand--font" onclick="$('#work-1').slideUp(); $('html, body').animate({scrollTop: $('#portfolio-1').offset().top - 140 }, 1000); $('.work--detail').removeClass('work--detail_show'); return false;">close</a>

Which I currently have the following function for (to get the window width):

var _getInnerWidth = function () {
return typeof window.innerWidth !== 'undefined' ? window.innerWidth : document.documentElement.clientWidth;

Any help is appreciated!

Demo is here

PS - I can deal with the second part (adding the offset values based on the window width etc)

PPS - I'm a novice with js, so please be gentle :)

Guillermo · Accepted Answer · 2013-09-30 22:24:48Z

1

If I were you I would add a little bit of clarity to the code:

var _getInnerWidth = function () {

    if(typeof window.innerWidth !== 'undefined'){
      innerWidth = window.innerWidth;
    } else {
      innerWidth = document.documentElement.clientWidth;
    }

    return innerWidth;
}

Your code should work as is. I tried it and returned to me 1704.

I´m attaching a plunker here, with an example of something that I built based on the description of what you´re doing. Hope it helps

http://plnkr.co/edit/KXNGL089UIvfNlRmO2cC

edited Sep 30, 2013 at 22:24

answered Sep 25, 2013 at 14:45

Guillermo

1,5334 gold badges18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Guillermo Over a year ago

You would be also interested on read this post: stackoverflow.com/questions/9563627/…

Guillermo Over a year ago

Also consider in having your function as a function declaration: function _getInnerWidth () { // } In this way you can be sure that you can call the function before is defined, if you try to call your function and it's a function expression: var _getInnerWidth = function () { // } and you call it before it´s defined it wont work. Read this post too: Function Declarations vs Function Expressions: javascriptweblog.wordpress.com/2010/07/06/…

designbydarren Over a year ago

Hi @Guillermo, appreciate your help with that. But it's more the first part of the question I'm concerned about.

Guillermo Over a year ago

inside your function $(this).attr('id') will return the clicked li id, then you should apply some transform to the id -replace will work fine- and the with the original id apply the .hide, and with the new one aplly .show, let me know if it works for you.

Guillermo Over a year ago

Try this inside your function: var receivedId = $(this).attr('id'), newId = receivedId.replace('portfolio','work'); There you have the new and the "old" id, remember that if you are going to use them inside selectors, you should append the "#" to make it work.

|

Collectives™ on Stack Overflow

Transfer inline hard-coded jQuery function to variables

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related