Jquery height() issue

Hello experts,

on this site goo.gl/BS8tU1 please look at the reference section [with android device] and try to click to different reference [ what happens is the current slider's destroyed and new one is initiated] => before click -> ".references" has a height of something, after slider is destroyed, the height is 0 and then with new slider there's that same height something (all the images have the same height)

This thing cause a scroll jump {over 200px} on android [4.3] so my Q is how to solve that issue?

I've already tried to get height of the ".references" wrapper after its load and then assign the value via .css(). You can look at console => it logs on page load and then after current slider is destroyed and then after it is initiated...Now the height of .references remains the same but the jumps on adroid are larger than before...

I don't get it, when the height is same though whole process of changing sliders it should not "jump" because there's no overall height difference...but it's obvious that I'm missing something
LVL 1
Fajer39Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Randy DownsOWNERCommented:
I am seeing the page scroll to the References section on my Android phone. Likewise on Desktop Firefox it seems to work OK.
0
Fajer39Author Commented:
Randy the problem is not with scrolling to the reference section...but with changing the reference sliders
0
Randy DownsOWNERCommented:
Interesting, I see the slide goes off the screen for Android phone but works fine on desktop. Have you considered another slider like blslider? They have a thumbnail slider similar to what you are using.

It's easy to implement just include their code after jquery, assign the class to your ul & call the script.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Open in new window


$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Fajer39Author Commented:
Randy please see the code before you write something. It's the second time now - If you did you would see that it's already bxSlider...
0
Randy DownsOWNERCommented:
I looked at your source but could not determine what you were using. The source is all on one line when I look at it via Firefox. I have never had any issues running bxslider.
0
Fajer39Author Commented:
Randy that's because it's minified obviously...if you didn't know you can actually unminify it in chromeDev tools with a one click...I've never had any issue neither but now I do...so I'm asking for help.
0
Randy DownsOWNERCommented:
Thanks for the tip on Google pretty print. It doesn't look like you are using bxslider but rather bx-wrapper. I don't see the call to the js. Am i missing something?
0
Fajer39Author Commented:
Yes, on line 54 you'll se an initiation. But I didn't realize that the minify build changed the variable names too...I've just uploaded dev version of the web on beta subdomain so please look there, you'll see the comments too.
0
Randy DownsOWNERCommented:
I don't see line numbers in Chrome. Have you tried the unminified version to see if that helps? I am not seeing any difference in the code at your beta site. I am going on a service call so may be out for a hour or two. I will look at your code when I get back.
0
Fajer39Author Commented:
You have to delete your cache...and then you'll see the dev version of the script...it's the same
0
Randy DownsOWNERCommented:
Your beta subdomain slides work fine on my Android phone.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Randy DownsOWNERCommented:
I translated it if that makes a difference.
0
Fajer39Author Commented:
You're right Randy, I forgot I have to delete cache on my phone too...So I'm gonna minify only, no shortened variables...but It's strange, I tested it on iphone, ipad, blackberry...everywhere it works but android...anyway I'm so reliefed that it's finally solved. I was so frustrated because I tried so many things and none worked.

Thanks for your patience Randy.

Best regards,

Mark.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.