www.webdeveloper.com
Results 1 to 6 of 6

Thread: I now it's something simple, but I am missing it...Completely.

  1. #1
    Join Date
    Aug 2011
    Posts
    37

    Red face I now it's something simple, but I am missing it...Completely.

    Hey all, I'm designing a header for a page that contains 2 jQuery plugins - Extruder and iSlider. I am able to incorporate the Extruder fine (alone) and I am also able to incorporate the iSlider fine (alone), but the minute I bring both components into the page the iSlider is not working. I am sure it's probably so simple, but I can't catch anything.

    It seems to me that the either the Extruder and iSlider javascript files or css files are confliting with one another. Everything is linked fine, and images appear in preview, but stacked one on top of the other, instead of the slider container.

    Can someone please shed some light in this dark, dark tunnel... :-)

    Much appreciated for any help. Code below \/

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <link rel="stylesheet" href="css/style.css" />

    <style type="text/css">
    body {
    background-image: url(images/Contact_Bg.jpg);
    background-position:50% 0;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    }
    </style>
    <link rel="stylesheet" media="all" href="Slider/css/Slider_reset.css" />
    <link rel="stylesheet" media="all" href="Slider/css/Slider_style.css" />
    <link rel="stylesheet" media="all" href="Slider/js/islider/i.slider.css" />
    <link href="extruder/css/mbExtruder.css" media="all" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="Slider/js/islider/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="Slider/js/islider/jquery.i.slider-1.0.min.js"></script>
    <script type="text/javascript" src="Slider/js/islider/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="Slider/js/script.js"></script>
    <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
    <script type="text/javascript" src="extruder/inc/jquery.hoverIntent.min.js"></script>
    <script type="text/javascript" src="extruder/inc/jquery.metadata.js"></script>
    <script type="text/javascript" src="extruder/inc/jquery.mb.flipText.js"></script>
    <script type="text/javascript" src="extruder/inc/mbExtruder.js"></script>
    <script type="text/javascript">

    $(function(){
    if (self.location.href == top.location.href){
    $("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
    var logo=$().css({position:"absolute"});//
    $("body").prepend(logo);
    $("#logo").fadeIn();
    }

    $("#extruderTop").buildMbExtruder({
    positionFixed:false,
    width:191,
    extruderOpacity:5,
    autoCloseTime:1000,
    closeOnExternalClick:true,
    // hidePanelsOnClose:false,
    onExtOpen:function(){},
    onExtContentLoad:function(){},
    onExtClose:function(){}
    });
    });

    </script>
    </head>
    <body>
    <div class="main" id="main">
    <div class="header" id="header">
    <div id="extruderTop" class="{url:'extruder/parts/extruderTop.html'}"></div>
    <div id="example">
    <div class="i-slider-section"><img src="images/examples/adorepaper.jpg" /></div>
    <div class="i-slider-section"><img src="images/examples/bed.jpg" />
    <div class="i-slider-captions bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes.</div>
    </div>
    <div class="i-slider-section"><img src="images/examples/cactus.jpg" /></div>
    <div class="i-slider-section"><img src="images/examples/chair.jpg" /></div>
    <div class="i-slider-section"><iframe title="YouTube video player" width="800" height="267" src="http://www.youtube.com/embed/ZN5PoW7_kdA" frameborder="0" allowfullscreen></iframe></div>
    </div>
    </div>
    </body>
    </html>
    Last edited by Sribeiro; 09-19-2011 at 11:36 PM.

  2. #2
    Join Date
    Sep 2011
    Location
    India
    Posts
    3

    Closing tag

    Closing tag of the following div is missing

    <div class="main" id="main">

    Close it and try.

  3. #3
    Join Date
    Aug 2011
    Posts
    37
    Great catch, I tried but still is not working. And I just noticed that the page spans super wide...it scrolls extremely wide horizontally.

    I posted it live to show you what it looks like. Http://www.creativodesign.net/test/main.html

    Thank you for the help!

    Serge

  4. #4
    Join Date
    Sep 2011
    Location
    India
    Posts
    3
    It is totally confusing.Also there is no need to use so much js fles for simple feature.
    You implement either Extruder or islider and give me the link. It would be better if u implement both individually in different pages and give the link so that I can combine those two in one file.

  5. #5
    Join Date
    Aug 2011
    Posts
    37
    I just basically copied the head and body pieces from the individual components and pasted them into a new page. I thought that everything there was needed in order to make them work.

    Here are the links for the individual pages -
    http://www.marcusgroup.com/test/misc/iSlider.html
    http://www.marcusgroup.com/test/misc/extruder.html

    Thank you so, so much for your help on this...

    Serge

  6. #6
    Join Date
    Sep 2011
    Location
    India
    Posts
    3

    Try this - Don't forget to add all your script files

    <div style="float:left; width:1000px; margin:0 auto">
    <div class="main" id="main">

    <div class="header" id="header">

    <div id="extruderTop" class="{url:'extruder/parts/extruderTop.html'}"></div>

    </div>

    </div>
    </div>

    <div style="float:left; width:1000px; margin:0 auto">
    <div class="main" id="main">

    <div class="header" id="header">

    <div id="example">

    <div class="i-slider-section"><img src="images/examples/adorepaper.jpg" /></div>

    <div class="i-slider-section"><img src="images/examples/bed.jpg" />

    <div class="i-slider-captions bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes.</div>

    </div>

    <div class="i-slider-section"><img src="images/examples/cactus.jpg" /></div>

    <div class="i-slider-section"><img src="images/examples/chair.jpg" /></div>

    <div class="i-slider-section"><iframe title="YouTube video player" width="800" height="267" src="http://www.youtube.com/embed/ZN5PoW7_kdA" frameborder="0" allowfullscreen></iframe></div>

    </div>

    </div>

    </div>

    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles