asked on

Update to an answered EE Question - Javascript to scroll down to a specific class

Hello

This is an update to an earlier EE question.

Please go to this page: Designer page

This page had a nice effect working. And now only part of the effect is working. I guess I (or my client) did something that caused it to stop working.

When you click on one of the letters in the Alphabetical List on the top of the page, all if the images banners below fade out, except for a banner that has a class that matches the letter in the alphabet.

For example, if you click on the letter "A" all the banners fade out except for the banner named "AUDEN".

That is still working fine.

But in the previous solution the page would automatically scroll down to the the banner with the appropriate class. For example if you clicked on the letter "R" the page would scroll down to the "Rihanna" banner.

For some reason that stopped working. The page is not scrolling down to that banner with the "R" class. (Or to any letter "class" for that matter... :) )

There is some Jquery involved but I am pretty sure no one touched that script. And there is some css and I think no one touched that. That is, it looks the same as in the EE solution. I think the HTML is the same.

So perhaps there is a jquery conflict going on? I'm not sure.

Here's a link to the previously answered EE question: Previously answered EE question

Can you take a look?

Thanks,

Rowby

Ioannis Paraskevopoulos

Hi,

When the page loads you do get an error in the browser console. The error is:

SyntaxError: invalid regular expression flag b

/^.*/blogs/.*$/.test(window.location.href)

Open in new window

I am not a RegEx expert by far. But i will try to help. It seems that the expression must be between '/' Whatever is in between is the expression you are testing against. In the above code i see 4 '/'. I will do a lucky guess and say that you are trying to match anything like '*/blogs/*' so the two middle '/' are part of the pattern you are looking for. You need to escape these with '\'. Try the following syntax:

/^.*\/blogs\/.*$/.test(window.location.href)

Open in new window

This is not failing, but again, i am not sure it is the pattern you are after....

Having said that, your issue is that at the moment the js fails, it stops executing the rest. So your code that would handle the scrolling is about to execute after the failed execution, but the execution stopped at the failure. Fixing the failure will make the scroll work again as the code will be able to be executed. There is probably nothing wrong with the scroll code.

Hope I helped,
Giannis

Rowby Goren

ASKER

Hi Giannis

Thanks for your response. Now I at least can see where the issue is.

I probably won't be able to test this until later today or tomorrow.

So stay tuned...

Best,
Rowby

Rowby Goren

ASKER

Hi Ioannis,

Can you go back to the page and let me know if you still see that error?

Thanks!

Rowby

SOLUTION

Ioannis Paraskevopoulos

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Thanks Giannis!

I appreciate your expert help on this. I have to be gone for a few hours and will test it later today.

Again, thanks!

Rowby

Rowby Goren

ASKER

Hi Giannis,

Getting back to this either later today or Tuesday.

Rowby

Ioannis Paraskevopoulos

Anytime....

Rowby Goren

ASKER

Hi

Sorry for the delay. I will finish this up today or tomorrow (Saturday the latest!)

Rowby

Rowby Goren

ASKER

Hi Hi Giannis,

Your latest code seems to work fine. Thanks! How can I modify the code so the fade is more noticeable?

I assume it is in this section. Not sure what the parameters do...
fadeTo(1000, 0.2);
and
$('div[class$=designer]').stop().fadeTo(1000, 1);
I can tweak the above myself -- when you tell me the function of each of these...

Also, as a secondary tweak -- is it possible to slow down the Jump to the jpg. Right now the jump is instantaneous. It would be nice (but not essential) if you could see the page move down to the new position. Thanks

THANKS!
Rowby

 <script>$(window).on('load resize', function(){
	  imagesHeight = Math.round($(this).height() - ($('header div.row').height() + $('#logo').height() + $('nav.stuckMenu').height() + $('#product-images').position().top));
	  $('#product-images').css('height', (imagesHeight - 100) + 'px');
  });
  $(document).ready(function(){
	$('#AlphaTable td').hover(function(){
		var letter = $(this).attr('class');
		letter = letter.substr(letter.length - 1);
		$(window).scrollTop(0);
		var selectedTop = Math.round($('div[class=' + letter + '_designer]').eq(0).position().top);
		$(window).scrollTop(selectedTop);
		$('div[class$=designer]:not([class^=' + letter + '])').stop().fadeTo(1000, 0.2);  
	},function(){
		$('div[class$=designer]').stop().fadeTo(1000, 1);
	});
});</script>

Open in new window

Rowby Goren

ASKER

I think I got the opacity working the way I want it. (At least for A, B, and C....) Here's my current settings:

  
 <script>$(window).on('load resize', function(){
	  imagesHeight = Math.round($(this).height() - ($('header div.row').height() + $('#logo').height() + $('nav.stuckMenu').height() + $('#product-images').position().top));
	  $('#product-images').css('height', (imagesHeight - 100) + 'px');
  });
  $(document).ready(function(){
	$('#AlphaTable td').hover(function(){
		var letter = $(this).attr('class');
		letter = letter.substr(letter.length - 1);
		$(window).scrollTop(0);
		var selectedTop = Math.round($('div[class=' + letter + '_designer]').eq(0).position().top);
		$(window).scrollTop(selectedTop);
		$('div[class$=designer]:not([class^=' + letter + '])').stop().fadeTo(1000, 0.1); 
	},function(){
		$('div[class$=designer]').stop().fadeTo(1000, 1);
	});
});</script>

Open in new window

I can see it working when hovering over the A, B and C. However when I try to click on D or G (for example) -- it jumps to the D or G images but it does not fade the others around it -- the way it does with "A, B, and C"

In fact before I even reach the "D" or "G" (for example) it instantly jumps down -- to the images. It won't let me easily select any letter other than A, B, and C.

Link to page

It's almost as if it jumps down before the image transition opacity is able to take effect. At least that's the visual impression I get......

Also it would be sexier if the jump wasn't so "instant" -- you could see it scrolling down gracefully to the image(s)....

I assume the "100O" is speed it takes for the image to change to its new opacity setting. That speed looks fine.

Getting there! Thanks!

BTW I have your code right before the </body> tag. I assume that's the best place to put it?

Rowby

Rowby Goren

ASKER

I did a test and zoomed out on my browser. It appears that after letter "C", the effect stops.

I'm looking at my html to make sure I'm not doing anything on my end....

Rob

Hi!

I've tweaked your code slightly and made your product-images div scroll:

$('div#product-images').css('overflow','scroll');

$('#AlphaTable td').hover(function(){
    var letter = $(this).attr('class');
    if (!letter)
        return;
    letter = letter.substr(letter.length - 1);
    var selectedTop = $('div[class=' + letter + '_designer]').eq(0).position().top;
    var curpos = $('div#product-images').scrollTop();
    selectedTop += curpos;
    $('div[class$=designer]:not([class^=' + letter + '])').stop().fadeTo(1000, 0.1); 
    $('div#product-images').animate({
        scrollTop: selectedTop
    }, 1000);

},function(){
    $('div#product-images').clearQueue();
    $('div[class$=designer]').stop().fadeTo(1000, 1);
});

Open in new window

Rowby Goren

ASKER

Hi Rob

Thanks for jumping in and helping.

I put the new code in where the old code was -- the body area but it doesn't seem to be working.
Click on letter and the page is supposed to scroll to the "designer".
Please take a look when you have a chance. (Maybe I should put it in the header?)

Perhaps there's something in my HTML code I need to tweak?

Rowby

Rob

Did you wrap my code with the jQuery init? .

$(function() {
....
}

Rowby Goren

ASKER

Hi Rob,

Here is a snippet from the html. Did do it correctly? :)

  {% include 'currencies' %}   



  
 $(function() { 
  
$('div#product-images').css('overflow','scroll');

$('#AlphaTable td').hover(function(){
    var letter = $(this).attr('class');
    if (!letter)
        return;
    letter = letter.substr(letter.length - 1);
    var selectedTop = $('div[class=' + letter + '_designer]').eq(0).position().top;
    var curpos = $('div#product-images').scrollTop();
    selectedTop += curpos;
    $('div[class$=designer]:not([class^=' + letter + '])').stop().fadeTo(1000, 0.1); 
    $('div#product-images').animate({
        scrollTop: selectedTop
    }, 1000);

},function(){
    $('div#product-images').clearQueue();
    $('div[class$=designer]').stop().fadeTo(1000, 1);
});
   
  }
  
{% include 'iwish' with 'iwishfooter' %} 

<input type="hidden" name="_pc_params" value="{{ shop.permanent_domain }}:{{ customer.id }}" />
</body>

Open in new window

Rob

Yep. So it must be something else on your page. I'll take a look and get back to you soon.
Fyi, all I did was run my code over the top of yours in the browser developer tools

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Hi Rob,

Very interesting! I'm going to contact Shopify support (that's the CMS I'm using) to find out what is adding those quotes -- seen in the source code but not in the original html.

Here's a link to Shopify's documentaion regarding scripts. Apparently they prefer scripts to be external files. But I will get the full info when I call Shopify support.

Shopify scripts
Rowby

Rowby Goren

ASKER

Hi

Shopify support says I needed to bracket your code with <script> </script>

So I did that. That didn't help, but perhaps you can look once more and see how it looks via the source code. Did I do everything correctly?

At least I think the " " are gone now, right?
the page in question
Thanks

Rowby

Rowby Goren

ASKER

Thanks. It's working!

Sorry for the delay in awarding the points.

Best
Rowby