...

View Full Version : Please Move to Frameworks Forum - JQuery Menu & Image Viewer both FAIL in IE/Chrome



aejacks8
05-25-2009, 01:05 AM
Well, like always, the site works flawlessly on Firefox, but on IE6, IE8, and Chrome, the site fails.

The site: www.justincener.com

2 JQuery Uses
1) The Menu
2) The Portfolio

The Menu works on FF and Chrome, but not on IE. It doesn't show any type of jquery "animation" and isn't in the right position in IE

The Portfolio fails on both Chrome and IE, but in different ways. It loads fine in Chrome, but the images don't show and clicking on other images doesn't do anything In IE, it just doesn't load whatsoever.

I'm sure any kind soul trying to help me will need more information, but I'm not sure what code to post, so I'll post back whatever you recommend. Please help me with this, thanks so much!

aejacks8
05-25-2009, 09:33 AM
The Portfolio is based off of the Jquery plugin Galleria. It calls a version of JQuery, jquery.galleria.pack.js, and the following script


<script type="text/javascript">

jQuery(function($) {

$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
image.css('display','none').fadeIn(1000);
}
caption.css('display','none').fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents('li');

// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');

// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents('li');

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';

// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});

</script>

aejacks8
05-25-2009, 05:00 PM
Here is the XHTML for the Photo Viewer


<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li class="active"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/customfacebook.gif" alt="New Jersey Custom Facebook Design and Marketing Campaigns" title="Custom Facebook Business Page Design and Marketing Campaigns" /></li>
<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/customtwitter.gif" alt="New Jersey Custom Twitter Layouts and Marketing Campaigns" title="Custom Twitter Business Layouts and Marketing Campaigns" /></li>
<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/matteventoffblog.gif" alt="New Jersey Custom Full Web Design and Wordpress CMS Blog Implementation" title="Full Service Custom Web Design and Wordpress Blog Implementation" /></li>
<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/princetonpublicspeaking.gif" alt="New Jersey Custom Web Site Design and Business Web Site Design and SEO" title="Full Service Custom Business Web Site Design and SEO" /></li>

<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/azmowebsite.gif" alt="New Jersey Custom Web Site Design with Custom Graphic Design and Business Web Site Design" title="Full Service Custom Business Web Site Design and Custom Graphic Design" /></li>
<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/ptpwebsite.gif" alt="New Jersey Custom Web Site Design and Business Web Site Design and SEO" title="Custom Website Solutions and SEO" /></li>
<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/logos1.gif" alt="New Jersey Custom Logo Design and Business Identity Design Promotion and Marketing" title="Professional Logo Design" /></li>
<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/logos2.gif" alt="New Jersey Custom Logo Design and Business Identity Design Promotion and Marketing" title="Professional Logo Design" /></li>
<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/portfolio/logos3.gif" alt="New Jersey Custom Logo Design and Business Identity Design Promotion and Marketing" title="Professional Logo Design" /></li>


</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>


And corresponding CSS




.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:3px;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:#ccc;}
#main_image img{margin-bottom:10px;}

.nav{padding:15px 0;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
.nav a:


.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}


ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 25%; margin-right: 25%; width: 100%; }
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

ul.gallery_demo_unstyled { float: left; list-style: none; margin: 0 auto; width: 1000px; }
ul.gallery_demo_unstyled li {
border: 1px solid #dedede;
float: left;
margin: 0 10px 10px 0;
padding: 5px;
width: 75px;
}
ul.gallery_demo_unstyled a { display: block; width: 100%; }
ul.gallery_demo_unstyled a:hover { text-decoration: none; }
ul.gallery_demo_unstyled img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }
.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0; text-align: center;}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */


This is the galleria JS


eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){4 q;q=$.23.7=5(k){6(!q.1o()){Q J}$.1p(q.1b);4 l={Z:\'.1q\',K:E,10:E,1c:5(a,b,c){},1r:5(a){}};4 m=$.11(l,k);1d(4 i 24 m){6(i){$.7[i]=m[i]}}4 n=($(m.Z).R(m.Z))?$(m.Z):3(B.12(\'1e\')).25(8);4 o=$(B.12(\'1e\')).u(\'1s\');4 p=$(B.12(\'1f\')).u(\'1g\');n.u(\'1q\').13(o).13(p);Q 8.1t(5(){$(8).u(\'7\');$(8).1u(\'L\').1t(5(i){4 b=$(8);4 c=$.26?$.11({},m,b.27()):m;c.10=$(8).R(\':28-S\')?J:c.10;4 d=$(8).T(\'a\').R(\'a\')?$(8).T(\'a\'):J;4 e=$(8).1u(\'F\').C(\'M\',\'U\');4 f=d?d.9(\'1v\'):e.9(\'1h\');4 g=d?d.9(\'14\'):e.9(\'14\');4 j=1w 1x();6(c.K&&(N.r.t&&N.r.t.V(/\\#/,\'\')==f)){b.G(\'.D\').W(\'D\');b.u(\'D\')}$(j).29(5(){$(8).9(\'1y\',e.9(\'1y\'));4 a=d?d.T(\'F\').u(\'1z 1A\').C(\'M\',\'U\'):e.2a(E).u(\'1z\').C(\'M\',\'U\');6(d){d.2b(a)}6(!a.1B(\'1A\')){4 w=1i.1C(e.v()/e.y()*b.y());4 h=1i.1C(e.y()/e.v()*b.v());6(w<h){a.C({y:\'1D\',v:b.v(),1E:-(h-b.y())/2})}s{a.C({v:\'1D\',y:b.y(),1F:-(w-b.v())/2})}}s{N.1G(5(){a.C({1F:-(a.v()-b.v())/2,1E:-(a.y()-b.y())/2})},1)}a.9(\'O\',f);a.9(\'14\',g);a.1H(5(){$.7.X(f)});a.P(5(){$(8).u(\'P\')},5(){$(8).W(\'P\')});b. P(5(){b.u(\'P\')},5(){b.W(\'P\')});b.1I(a);a.C(\'M\',\'2c\');c.1r(3(a));6(b.1B(\'D\')){$.7.X(f)}e.1J ()}).1K(5(){b.2d(\'<1f 2e="1K" 1L="2f:2g">2h 2i 2j: \'+f+\'</1f>\')}).9(\'1h\',f)})})};q.1M=5(a){Q $(a).R(\':1N-S\')?$(a).G(\':1O-S\'):$(a).1j()};q.1P=5(a){Q $(a).R(\':1O-S\')?$(a).G(\':1N-S\'):$(a).1Q()};q.1o=5(){$(\'1R\').13($(B.12(\'1e\')).9(\'1S\',\'1k\').C({v:\'1T\',y:\'1T\',M:\'U\'} ));4 a=($(\'#1k\').v()!=1)?J:E;$(\'#1k\').1J();Q a};q.1b=5(a){4 b=$(\'.1s\');4 c=$(\'.7 F[O="\'+a+\'"]\');6(a){6($.7.K){N.r=N.r.1v.V(/\\#.*/,\'\')+\'#\'+a}c.15(\'L\').G(\'.D\').W(\'D\');c.15(\'L\').u(\'D\');4 d=$(1w 1x()).9(\'1h\',a).u(\'2k\');b.1U().13(d);b.G(\'.1g\').2l(c.9(\'14\'));$.7.1c(d,b.G(\'.1g\'),c);6($.7 .10){d.C(\'2m\',\'2n\').1H(5(){$.7.1j()})}}s{b.G().2o().1U();$(\'.7 L.D\').W(\'D\')}$.7.16=a};$.11({7:{16:\'\',1c:5(){},X:5(a){6($.7.K){$.1V(a)}s{q.1b(a)}},1j:5(){4 a=$(q.1M($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)},1Q:5(){4 a=$(q.1P($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)}}})})(3);3.11({z:17,x:17,1p:5(a){3.x=a;4 b=r.t;3.z=b;6(3.H.1l){6(3.z===\'\'){3.z=\'#\'}$("1R").1I(\'<1W 1S="18" 1L="M: U;"></1W>\');4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b}s 6($.H.19){3.A=[];3.A.I=K.I;3.1a=[];3.Y=E}3.x(b.V(/^#/,\'\'));2p(3.1Z,2q)},20:5(a){3.A.21(a);3.1a.I=0;8.Y=E},1Z:5(){6(3.H.1l){4 a=$("#18")[0];4 b=a.2r||a.1m.B;4 c=b.r.t;6(c!=3.z){r.t=c;3.z=c;3.x(c.V(/^#/,\'\'))}}s 6($.H.19){6(!3.1n){4 d=K.I-3.A.I;6(d){3.Y=J;4 i;6(d<0){1d(i=0;i<1i.2s(d);i++){3.1a.2t(3.A.2u())}}s{1d(i=0;i<d;i++){3.A.21(3.1a.2v())}}4 e=3.A[3.A.I-1];6(e!==17){3.z=r.t;3.x(e)}}s 6(3.A[3.A.I-1]===17&&!3.Y){6(B.22.2w(\'#\')>=0){3.x(B.22.2x(\'#\')[1])}s{c=r.t;3.x(\'\')}3.Y=E}}}s{c=r.t;6(c!=3.z){3.z=c;3.x(c.V(/^#/,\'\'))}}},1V:5(a){4 b;6(3.H.19){b=a}s{b=\'#\'+a;r.t=b}3.z=b;6(3.H.1l){4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b;3.x(a)}s 6(3.H.19){3.1n=E;8.20(a);4 e=5(){3.1n=J};N.1G(e,2y);3.x(a);r.t=b}s{3.x(a)}}});',62,159,'|||jQuery|var|function|if|galleria|this |attr||||||||||||||||||location|else|hash|addClass|width||historyCallback|height|historyCurrentHash| historyBackStack|document|css|active|true|img|siblings|browser|length|false|history|li|display|windo w|rel|hover|return|is|child|find|none|replace|removeClass|activate|isFirst|insert|clickNext|extend|c reateElement|append|title|parents|current|undefined|jQuery_history|safari|historyForwardStack|onPage Load|onImage|for|div|span|caption|src|Math|next|css_test|msie|contentWindow|dontCheck|hasCSS|history Init|galleria_container|onThumb|galleria_wrapper|each|children|href|new|Image|alt|thumb|noscale|hasC lass|ceil|auto|marginTop|marginLeft|setTimeout|click|prepend|remove|error|style|nextSelector|last|fi rst|previousSelector|prev|body|id|1px|empty|historyLoad|iframe|open|close|historyCheck|historyAddHis tory|push|URL|fn|in|insertBefore|meta|data|only|load|clone|replaceWith|block|html|class|color|red|Er ror|loading|image|replaced|text|cursor|pointer|andSelf|setInterval|100|contentDocument|abs|unshift|p op|shift|indexOf|split|200'.split('|'),0,{}))


I have little to no experience w/ JS, so I'm completely lost. Can anyone please shed some light on this? Thanks!

Philip M
05-25-2009, 06:51 PM
You would probably do better if you posted in the correct forum, which is JavaScript Frameworks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum