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

**Sribeiro** · 09-19-2011 11:33 PM

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>

**Sowmya S** · 09-20-2011 06:24 AM

Closing tag of the following div is missing

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

Close it and try.

**Sribeiro** · 09-20-2011 08:18 AM

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

**Sowmya S** · 09-20-2011 08:36 AM

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.

**Sribeiro** · 09-20-2011 10:11 AM

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

**Sowmya S** · 09-24-2011 12:26 AM

<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: I now it's something simple, but I am missing it...Completely.

Thread Tools

Display

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

Closing tag

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions