Question

having problem with one of the scripts below, which stops working right after the pretty photo script is executed.

Any idea why this is happening and how to fix it?

thanks in advance

<script type="text/javascript">
$(function(){  
        $(window).scroll(function(){  
            if ($(window).scrollTop() > 90) {  
                $("nav").addClass("sticky");
                $(".menu_logo").css("display", "block");
                $(".menu_logo").html('<a href="/" title="Home"><img src="/images/_logo_sm.png" alt="" width="108" height="25" /></a>');
                $("#menu-bar").css("display", "block");
                $("#menu-bar").html('<div id="menu-bar-icon" ></div>');
                $("#menu-bar-icon").click(function() { 
                    $('#menu').toggle();return false;
                });
                $("#menu").css("display", "none");
                $('#search_in_bar').html($('#search').html());
            } else {  
                $("nav").removeClass("sticky");
                $(".menu_logo").css("display", "none");
                $("#menu").css("display", "block");
                $('#search_in_bar').empty().html();
                $("#menu-bar").css("display", "none");
            }  
        });  
    });
</script>
Was it helpful?

Solution

I took a look at your code. There were a few things that needed modification but I won't name them all.

  1. The <img> tag for the screen shot wasn't closed: <a href="..." rel="..."><img src"..." /></a>
  2. The 'hook' was being used improperly: rel="prettyPhoto[]" is used for multiple images. rel="prettyPhoto" is for just one image.
  3. Some of the CSS is redundant. Classes and IDs not being used (I won't go into that.)
  4. $('#search_in_bar').empty().html(); Makes no sense; emptying the contents of the <div> then asking for it's content.
  5. Not linking the prettyPhoto CSS file--which is used for the popup. Basic Style
  6. Due to a lack of permissions, pps.jswas not being loaded but was met with a 403 (Forbidden) error.
  7. And most importantly, prettyPhoto was not being initialized.
<script>
 $(function() {
   $("a[rel^='prettyPhoto']").prettyPhoto();
   $(window).scroll(function (){
   ...
   });
 });
</script>

Oh, side note:

<a href="large_here.png" rel="prettyPhoto">
<img src="smaller_here.png" /></a>

Working jsFiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top