jQuery的工作不改變CSS在Magento

Question

我已經my site運行下面的代碼屬性：

<style> 
#main {background-color:#000000; border-top: 0; 
padding-bottom: 20px; 
min-height: 350px;} 

.col-main {float: left; 
width: 740px; 
padding: 0 0 1px; 
color:#FFFFFF; 
background-color:#AABBCC;} 

.col-right {float: right; 
width: 200px; 
padding: 0 0 1px; 
color:#0F0F0F; 
background-color:#DDEEFF;} 

img {height:250px; width:250px;} 
h1 {color: #ddeeff;} 
</style> 

<script type="text/javascript"> 
jQuery.noConflict(); 
        if (jQuery(".col-right").height() > jQuery(".col-main").height()) 

              { 
jQuery(".col-main").height(jQuery(".col-right").height()); 
} 
else { 
jQuery(".col-right").height(jQuery(".col-main").height()); 
} 

</script> 

<div id="main"><h1>Main</h1> 
<div class="col-main"><img src="http://foryourc- store.com/media/favicon/default/FYCS_icon-01.png"/> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat fermentum nunc a eleifend. Phasellus ut est at justo porttitor gravida. Praesent ut placerat lacus. Etiam consectetur tortor vel nibh sodales semper. Praesent quam magna, pharetra non viverra et, porta a nisi. Aenean et mi ante. Duis a nunc metus, at hendrerit quam. Aenean molestie orci placerat mauris varius non cursus ipsum commodo. Donec sit amet ultrices ligula. Nam egestas ligula vitae justo scelerisque pulvinar. Nunc vestibulum fermentum ligula, vel consequat velit lobortis sed. Suspendisse et dolor lectus, sed dignissim justo. Vivamus rhoncus volutpat rutrum. Quisque pretium mi in enim bibendum in ultrices mi molestie.</div> 

<div class="col-right"><img src="http://foryourc-store.com/media/favicon/default/FYCS_icon-01.png"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat fermentum nunc a eleifend. Phasellus ut est at justo porttitor gravida. Praesent ut placerat lacus. Etiam consectetur tortor vel nibh sodales semper. Praesent quam magna, pharetra non viverra et, porta a nisi. Aenean et mi ante. Duis a nunc metus, at hendrerit quam. Aenean molestie orci placerat mauris varius non cursus ipsum commodo. Donec sit amet ultrices ligula. Nam egestas ligula vitae justo scelerisque pulvinar. Nunc vestibulum fermentum ligula, vel consequat velit lobortis sed. Suspendisse et dolor lectus, sed dignissim justo. Vivamus rhoncus volutpat rutrum. Quisque pretium mi in enim bibendum in ultrices mi molestie.<br>Integer pharetra sapien metus. Mauris bibendum eleifend luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque elementum lobortis luctus. Duis tristique leo sed velit commodo eu consequat magna eleifend. In hac habitasse platea dictumst. Vestibulum sed neque a tellus auctor viverra sit amet sit amet dui. Aliquam dui mi, iaculis sit amet sagittis et, iaculis eu lacus. Morbi viverra tellus non nisl ultrices interdum. Praesent in turpis non justo mollis elementum vel eget velit. Aliquam pulvinar hendrerit tincidunt. Quisque tortor quam, lacinia ut elementum in, lacinia at arcu. Integer porta tincidunt urna nec semper. Vivamus gravida odio id ante adipiscing eu ultricies elit eleifend. Nulla lectus quam, malesuada sed rutrum ac, placerat sed mi. Donec bibendum sagittis dapibus.</div></div> 

我運行Magento的CE 1.7.0.2。代碼在這裏工作正常：http://jsfiddle.net/scoosethemoose/YxNwm/

請幫我確定什麼是不正確工作。先謝謝你。

Answer 1

你應該像你的小提琴那樣在$(window).load()的頁面上運行代碼。

在加載事件之前，您無法確定檢索元素的最終尺寸，因爲頁面還沒有完成渲染過程。

目前您的腳本工作正常（但並不像預期的那樣），請檢查.col - 右側螢火蟲內部，您將看到高度已分配給元素，因此您的腳本正在運行else分支。

Answer 2

假設你正在使用此http://sorgalla.com/jcarousel/

你得到的錯誤jQuery的（ '＃功能'）的jCarousel（）。因爲的jCarousel插件庫似乎並沒有被列入（如果你jquery.jcarousel.min.js或查看的jCarousel源* .js文件）

您還裝載jQuery的的2個不同的副本 - 需要刪除一個

• foryourc-store.com/js/jquery/jquery-latest.js（版本1.8.2）

• 皮膚/前端/鹼/默認/ ig_lightbox2/JS/jquery的-1.6。 2.min.js

此外，你可以創建一個不同的別名，jQuery的使用

var $j = jQuery.noConflict(); 
// Do something with jQuery 
$j(".col-main").height($j(".col-right").height()); 
// instead of jQuery(".col-main").height(jQuery(".col-right").height()); 
//then use magento prototype with 
$("content").style.display = 'none'; 

Answer 3

var $j = jQuery.noConflict(); 
$j(window).load(function() { 
if ($j(".col-right").height() > $j(".col-main").height()) 

{ 
    $j(".col-main").height($j(".col-right").height()); 
} 
else { 
    $j(".col-right").height($j(".col-main").height()); 
} 
});​ 

這解決了這個問題對我來說。