0

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 :)

designbydarren
  • 25
  • 6

1 Answers1

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

Guillermo
  • 1,493
  • 3
  • 16
  • 35
  • You would be also interested on read this post: http://stackoverflow.com/questions/9563627/window-innerwidth-cant-work-on-ie7-how-to-fix-via-js-and-jquery – Guillermo Sep 25 '13 at 14:45
  • 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: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ – Guillermo Sep 25 '13 at 14:47
  • Hi @Guillermo, appreciate your help with that. But it's more the first part of the question I'm concerned about. – designbydarren Sep 25 '13 at 14:53
  • 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 Sep 25 '13 at 15:01
  • 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. – Guillermo Sep 25 '13 at 15:12
  • Hi @Guillermo, sorry i'm confused (i'm only just learning js). which part of the inline code would this replace? – designbydarren Sep 25 '13 at 16:36
  • Hey sorry for the delay. First thing you have to do to eliminate the obtrusive js (js inside the html) is to create a function, and then through a selector refer to that function. for instance: `function myFunc() { //Your code here..... }` Then refer to that function when your a is clicked. `$("#portfolio-1 a.pull-right").on("click", function (e) { e.preventDefault(); //This will prevent the link of its default behavior. //Then add all your "onclick" code here it should work. }` – Guillermo Sep 26 '13 at 13:08
  • Try that and tell me if you can get it working, if any error comes up, let me know. Once you have that it working we´ll do some adjustments to make that function work for every a, without hardcoding ids in the code. But as Jack said, let´s go by pieces. – Guillermo Sep 26 '13 at 13:08
  • Ok :) Not sure if this is right but this is what i've got so far: $("#portfolio-1 a.portfolio-toggle").click(function() { $('.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; }); – designbydarren Sep 27 '13 at 11:59
  • You'll see that i've added .portfolio-toggle to the anchor tag – designbydarren Sep 27 '13 at 12:03
  • Sorry for the delay, I've added a plunker to the answer with your function but refactored to be reusable. You will notice that just that function works for all your links, and your onClicks have disappeared. – Guillermo Sep 30 '13 at 22:25
  • That's fantatsic. Is it also possible to perform the same code refactoring for the close sections of the code? I'm guessing it would be something similar. This is how it is at the moment: close – designbydarren Oct 01 '13 at 08:17
  • Hi @Guillermo. Any thoughts on how to do the same for the close button? Many thanks! – designbydarren Oct 02 '13 at 19:56
  • Hey! Sorry for the delay. Plunk updated. I put the code in the js. Take a look, you may catch the idea from there. I added some comments. If have questions feel free to ask. – Guillermo Oct 04 '13 at 21:00
  • Thanks!! There was a small typo on one of the ID's. It was down as $(workId).slideUp(); ...so i found it and changed it! (I'm learning!!) – designbydarren Oct 05 '13 at 09:33