1

嗨，家伙仍然有问题..所以虽然重新写了这个问题。将我的外部页面放入我的索引页面上的一个 div 中.. 很棒.. 但似乎无法让 java 脚本工作.. 我可以让它们工作一次使用它..

     <script>
        $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
          var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 
        }
    });
</script>

但是当我转到不同的页面并返回时它不起作用......我把我的脚本放在主索引页面的底部

<script>
    $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
            $('#st-accordion').accordion();
        };
    });

</script>

<script>
       $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
            $('#st-accordion2').accordion();
        }
    });

</script>


<script>
    $(function () {
        $.scrollUp();
    });
</script>

<!-- Fade Top Panel  -->
<script>
        $.ajax({
        url: "pages/index.php",
        dataType: "html",
        success: function(html) {
          var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 
        }
    });
</script>

<script> 

    $ajax({
        url: "pages/index.php"
        dataType: "html",
        success: function(html) {
             $('#submit').click(function(){
            $.post("send.php", $("#mycontactform").serialize(),  function(data) {   });
                 $('#success').html('Message sent!');
                 $('#success').hide(2000);


                    $('#name1').val('');
                    $('#telephone').val('');
                    $('#email').val('');
                    $('#message').val('');

            });
        }


    });




</script>

<!-- Viberating Icons -->


<script>

    $(function() {
        var interval = 10;
        var duration= 1000;
        var shake= 3;
        var selector = $('.viberate'); /* Your own container ID*/
        $(selector).each(function(){
            var elem = this;
            var vibrateIndex;
            var timeoutIndex;
            $(this).hover( /* The button ID */
                function(){ 
                    vibrateIndex = setInterval(function(){
                      vibrate(elem); 
                    }, interval, 0);
                    timeoutIndex = setTimeout(function() 
                   {clearInterval(vibrateIndex)},1000);
                },
                function(){
                clearInterval(vibrateIndex);
                clearTimeout(timeoutIndex); 
                }
            );
        })

            var vibrate = function(elem){
                $(elem).stop(true,false)
                .css({position: 'relative', 
                left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
            });
                        }
                    });

</script>
4

1 回答 1

0

Better to load JS/CSS at first and then load only information that dynamic.

In this case you will have cached JS/CSS and small response. It means better performance.

And of course DO NOT load <html><head>...</head> part. Every page has only one <html> tag and yours already has one. If you load it you need to strip it. It means you'll do unnecessary work and ajax will work slower.

If you using AJAX you need to load only data you need. Less garbage - faster response.

UPDATE

Try this:

<script>



    function init(){

        // Accodion 1 & 2 -->
        $('#st-accordion').accordion();

       $('#st-accordion2').accordion();


        //Scroll Up -->

        $.scrollUp();


        // Fade Top Panel  -->

    var target = $('.fademe');
        var targetHeight = target.outerHeight();
        $(document).scroll(function(e){
            var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
            if(scrollPercent >= 0){
                target.css('opacity', scrollPercent);
            }
        }); 


      // Contact Form Send -->

      $('#submit').click(function(){
            $.post("send.php", $("#mycontactform").serialize(),  function(data) {   });
                 $('#success').html('Message sent!');
                 $('#success').hide(2000);


                    $('#name1').val('');
                    $('#telephone').val('');
                    $('#email').val('');
                    $('#message').val('');

            });


// Viberating Icons -->

      var interval = 10;
        var duration= 1000;
        var shake= 3;
        var selector = $('.viberate'); /* Your own container ID*/
        $(selector).each(function(){
            var elem = this;
            var vibrateIndex;
            var timeoutIndex;
            $(this).hover( /* The button ID */
                function(){ 
                    vibrateIndex = setInterval(function(){
                      vibrate(elem); 
                    }, interval, 0);
                    timeoutIndex = setTimeout(function(){clearInterval(vibrateIndex)},1000);
                },
                function(){
                clearInterval(vibrateIndex);
                clearTimeout(timeoutIndex); 
                }
            );
        })

            var vibrate = function(elem){
                $(elem).stop(true,false)
                .css({position: 'relative', 
                left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', 
                top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
            });
         }


    $("#posts").masonry({
        itemSelector: '.post',
        isAnimated: true,
        columnWidth: function(containerWidth) {

        var width = $(window).width();
        var col = 300;


        if (width < 1200 && width >= 980) {
            col = 240;
            } else if (width < 980 && width >= 768) {
                col = 186;
            }

            return col;
            }
            });

    }

</script>

I put all JS in one init() function. Now after your ajax is loaded call that function.

And check syntax I maybe lost some brackets.

于 2013-04-04T12:10:53.533 回答