Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts

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

    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!
    Last edited by aejacks8; 05-25-2009 at 10:34 PM.

  • #2
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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>

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    79
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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{cursorointer}
    .galleria li.active div img,.galleria li.active div{display:block}
    .galleria li img.thumb{cursorointer;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!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You would probably do better if you posted in the correct forum, which is JavaScript Frameworks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •