0

我是 Javascript 的初学者,我使用了一个模板,它使用 jquery 来调整列的高度。javascript 代码在简单的 index.html 页面中运行良好,但是当我在 joomla 3 中使用它时,jQuery 函数不会执行。所以我补充说:

  • 'jQuery.noConflict();'
  • 将所有 $ 替换为 jQuery

并且高度仍然不调整大小。

代码下方:

    jQuery.noConflict();
// JavaScript Document
jQuery(window).load(function () {



    var winWidth = jQuery(window).width()

            if (winWidth > 767){

                // To ensure that the sidebar sticks to the bottom of the page
                // we calculate the height of the tallest object and match the
                // sidebar to it.

                var height1 = jQuery('.eightcol').height()
                var height2 = jQuery('html').height()
                var height3 = jQuery("#sidebar-container").height()
                var height4 = jQuery(window).height()

                /*  Tab Shortcode Fix
                    Because all tabbed content loads stacked this throws off
                    the height of the .eightcol and html elements so we need to subtract 
                    the extra height added by the stacked tabbed content. Once we have that
                    we can reset the hight values of html and .eightcol correctly. We will
                    need to figure out the tallest of all the tabbed content elements
                    and add that back into the total height of .eightcol and html

                    ONLY do this if we are using the tab shortcode.
                */
                if (jQuery('.tabcontent').length) {
                    var max = 0;
                    var numtotal = 0;
                    // Loop through all .tabcontent classes and get the tallest tab.
                    jQuery('.tabcontent').each(function(){
                        var num = jQuery(this).height()
                        // Track total height of all tabs so we can subtract later
                        numtotal = numtotal + num;
                        if(num > max)
                        {
                           max = num;
                        }
                    });

                    // Substract the total height of all .tabcontent from .eightcol and html
                    // then add in only the lattest .tabcontent.
                    height1 = height1 - numtotal;
                    height1 = height1 + max;

                    height2 = height2 - numtotal;
                    height2 = height2 + max;

                };



                // Function to get the Max value in Array
                Array.max = function( array ){
                return Math.max.apply( Math, array );
                };

                var maxheight = Array.max([height1,height2,height3,height4])


                if (height3 < maxheight) {
                    //jQuery("#sidebar").height(maxheight)
                    jQuery("#sidebar").css('height', maxheight + 'px');
                }

            }else{
                jQuery("#sidebar").css("height","auto")
            }   

    jQuery(window).resize(function() {

            var winWidth = jQuery(window).width()

            if (winWidth > 767){

                var height1 = jQuery('.eightcol').height()
                var height2 = jQuery('html').height()
                var height3 = jQuery("#sidebar-container").height()
                var height4 = jQuery(window).height()




                // Function to get the Max value in Array
                Array.max = function( array ){
                return Math.max.apply( Math, array );
                };

                var maxheight = Array.max([height1,height2,height3,height4])

                //console&&console.log('maxheight ' + maxheight);

                if (height3 < maxheight) {
                    jQuery("#sidebar").css('height', maxheight + 'px');
                }
            }else{
                    jQuery("#sidebar").css("height","auto")
            }

       });

}); 

jQuery(document).ready(function(){
            var height3 = jQuery("#sidebar-container").height()
        });

我做得对吗?你知道为什么它不起作用吗?

谢谢

4

1 回答 1

0

你到底想达到什么目的?我会说我被带有 Twitter Bootstrap 实现的 Protostar 模板宠坏了。我强烈建议您从那里开始,仔细查看 index.php 页面并查看它的图形模板。最后进行动态测试并缩小浏览器窗口,看看 div 落在哪里。在几个不同的智能手机上查看您的网站。等等......再次,您将在哪里进行该项目?

注意:有一些免费的 Joomla 3 动态模板,内置了疯狂的不必要的复杂性。我相信他们这样做是为了抓住毫无戒心的人,唯一的出路是聘请模板开发人员来拯救你。没有提到名字。它类似于 got ya 的鱼钩概念上的倒钩!这就是他们的商业模式。

建议:从 Protostar 开始,重新设计 div,学习如何使用 .less 创建您的样式表,然后将其移动...

于 2013-08-14T08:09:08.877 回答