CODEWITHSUNDEEP
javascriptjqueryonclickslider
SpaceApe
SpaceApe

Reputation: 639

Responsive sliding on click

You guys already helped me out a lot, I hope you can help me with this question to.

This is my website so far: http://stilld.nl/test/

Everything is working pretty good (need to do a lot of tidying up in my code though).

Please scroll down to the portfolio part. Click an item and the details appear beneath the portfolio. PERFECT!

PROBLEM: size you browser down to mobile format. Click a portfolio item. it doesn't scroll down far enough, because my portfolio items are now displayed beneath each other. They take up much more vertical space now!

WHAT I WANT: Is there a way to make code responsive? So something like: if screen size is smaller then 600 px THEN slide down 500px on click.

This is the code I'm using right now:

$(document).ready(function(){
$(".portfolio").click(function () {
    if ($('#'+$(this).attr('target')).is(':visible')){
        $('#'+$(this).attr('target')).slideUp();        
    } else {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, 600);
    }

});
$(".close").click(function () {
    $('.description').slideUp();        
    $('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
});

});

Upvotes: 1

Views: 305

Answers (2)

Jean-Paul
Jean-Paul

Reputation: 21180

You should calculate the offset with either jQuery's .offset() or jQuery's .position().

What you could do for example is:

$(".portfolio").click(function () {    

    var offSetTarget = $('.description').position().top;
    var scrollExtra = 0;

    $('body').animate({
        scrollTop: offSetTarget + scrollExtra

    }, 600);
});

Where you can determine how much extra you want to scroll.

For example if you want to scroll just above the .portfolio, you can add: scrollExtra = -10; . Or if you want to scroll halfway, you could do: scrollExtra = $('.portfolio').height()/2;

I prepared a working example for you HERE.

To prove that it actually works, you can play with the window size here.

I hope that answers your question. Good luck!

Update

To implement it into your example, we would have to determine where to scroll to.

For illustrational purposes, I have chosen to do this with the divs #alldescriptions and #port_img1 in this example.

The jQuery for your website would then be:

$(document).ready(function() {
  $(".portfolio").click(function () {

    var offSetTarget = $('#alldescriptions').position().top;
    var scrollExtra = 0;

    if ($('#'+$(this).attr('target')).is(':visible')){
        $('#'+$(this).attr('target')).slideUp();        
    } else {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('body').animate({scrollTop: offSetTarget + scrollExtra }, 600);
    }

  });
  $(".close").click(function () {
      $('.description').slideUp();        
      $('body').animate({scrollTop: $('#port_img1').position().top }, 600);
  });
});

Again, mind you that you can alter the exact scrolling location by giving var scrollExtra a different value.

You can find an implementation of this code here and a live fullscreen example here.

Please play around with the window size again so you can see it actually works with every screensize. Good luck!

Upvotes: 1

Ant
Ant

Reputation: 42

You could detect the inner width of the screen and then set variables for the offset.

if(window.innerWidth <= 600) {
    var offSet = 500;}


  else{
        var offSet = 600;}

Then replace this in your code:

$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, offSet);

BUT.... if you want to simplify your code, you could use CSS Transitions. Then just use jQuery to add and remove a class that triggers the Transition, using media querys to change the offset. It would also have less overhead.

Upvotes: 0

Related Questions