Learn VBA & Macros in 1 Week!

JavaScript - Problems With Jquery Scroller Inside Another Jquery Plugin

Full Excel VBA Course - Beginner to Expert

Problems With Jquery Scroller Inside Another Jquery Plugin	View Content

Full Excel VBA Course - Beginner to Expert

Jquery History Plugin To Work With This Jquery Slide Code?

Similar Tutorials

View Content

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:

Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

Jquery Carousel Plugin And Thumbs Plugin Help.

Similar Tutorials

View Content

Hello! I am new to the boards, I am a graphic and web designer. Been designing and developing web sites since 2001. I have fun doing it and was lucky enough to have someone hire me to do it and get paid for it. The reason I signed up to the boards is so that I can search for some help since I am starting to learn jQuery I am having a little bit of trouble with a page I am working on and was hoping someone would be able to help me out!

The problem: I have a spry collapsable panel with 4 panels, in the panels I have jQuery carousel plugins with the thumbs plugin. The problem I am having is that I want the carousel in the 4 panels like I mentioned before but I can only get one of the panels to function fully. The other three loses their forward back functions. I tried copying the code for the first one and just renaming the classes and functions so it would separate the two. The thumbs plugin will still work, I just can not get the carousel function to repeat on another one. I will post the code I have left off with. If you need to see the page you can message me. Thanks for reading and if you can help it will be great!

Here is the java:

Code:

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();

});
$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), 
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        
        $wrapper.scrollLeft(singleWidth * visible);
        
        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};
//Carousel 2
  $('.infiniteCarouselTwo').infiniteCarouselTwo();

$.fn.infiniteCarouselTwo = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapperTwo = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapperTwo.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapperTwo.innerWidth() / singleWidth), 
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        
        $wrapperTwo.scrollLeft(singleWidth * visible);
        
        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapperTwo.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapperTwo.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapperTwo.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapperTwo.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

Here is the CSS:
Code:

.infiniteCarousel {
	width: 395px;
	position: relative;
}
.infiniteCarousel .wrapper {
	width: 825px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	overflow: auto;
	min-height: 10em;
	position: absolute;
	top: 0;
	margin-top: 0;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 40px;
	left: 20px;
}
.infiniteCarousel ul a img {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.infiniteCarousel .wrapper ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
.infiniteCarousel ul.thumb li {
	display:block;
	float:left;
	padding: 10px;
	height: 85px;
	width: 85px;
	-ms-interpolation-mode: bicubic;
}
.infiniteCarousel ul.thumb li a img {
	display:block;
}
.infiniteCarousel .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 25px;
	cursor: pointer;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.infiniteCarousel .forward {
	background-position: 0 0;
	right: 0;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	left: 910px;
}
.infiniteCarousel .back {
	background-position: 0 0px;
	left: 0;
	background-image: url(../images/arrow-back.png);
	background-repeat: no-repeat;
}
.infiniteCarousel .forward:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
}
.infiniteCarousel .back:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow-back.png);
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_view {
}

/* Carousel Two */
.infiniteCarouselTwo {
	width: 395px;
	position: relative;
}
.infiniteCarouselTwo .wrapperTwo {
	width: 825px; /* .infiniteCarouselTwo width - (.wrapperTwo margin-left + .wrapperTwo margin-right) */
	overflow: auto;
	min-height: 10em;
	position: absolute;
	top: 0;
	margin-top: 0;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 40px;
	left: 20px;
}
.infiniteCarouselTwo ul a img {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.infiniteCarouselTwo .wrapperTwo ul {
	width: 9999px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	top: 0;
}
.infiniteCarouselTwo ul.thumbTwo li {
	display:block;
	float:left;
	padding: 10px;
	height: 85px;
	width: 85px;
	-ms-interpolation-mode: bicubic;
}
.infiniteCarouselTwo ul.thumbTwo li a img {
	display:block;
}
.infiniteCarouselTwo .arrow {
	display: block;
	height: 36px;
	width: 37px;
	text-indent: -999px;
	position: absolute;
	top: 25px;
	cursor: pointer;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.infiniteCarouselTwo .forward {
	background-position: 0 0;
	right: 0;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
	left: 910px;
}
.infiniteCarouselTwo .back {
	background-position: 0 0px;
	left: 0;
	background-image: url(../images/arrow-back.png);
	background-repeat: no-repeat;
}
.infiniteCarouselTwo .forward:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow.png);
	background-repeat: no-repeat;
}
.infiniteCarouselTwo .back:hover {
	background-position: 0 0px;
	background-image: url(../images/arrow-back.png);
}
ul.thumbTwo li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_viewTwo {
}

Here is the HTML:

Code:

   <div id="around" class="CollapsiblePanel">
      <div class="CollapsiblePanelTabBlue" tabindex="1">Around town</div>
      <div class="CollapsiblePanelContent">
     <div id="main_viewTwo"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
       <!-- Start Carousel -->
        <div class="infiniteCarouselTwo">
          <div class="wrapperTwo">
            <ul class="thumbTwo">
              <li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
              <li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
              <li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
              <li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
              <li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
              <li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
              <li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
              <li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
              <li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
              <li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
              <li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
              <li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
              <li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
              <li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
              <li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
              <li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
            </ul>
          </div>
        </div>
        <!--End Carousel-->
      </div>
    </div>
    <div id="campus" class="CollapsiblePanel">
      <div class="CollapsiblePanelTabGreen" tabindex="1">Campus life</div>
      <div class="CollapsiblePanelContent">
        <div id="main_view"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
       <!-- Start Carousel -->
        <div class="infiniteCarousel">
          <div class="wrapper">
            <ul class="thumb">
              <li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
              <li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
              <li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
              <li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
              <li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
              <li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
              <li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
              <li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
              <li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
              <li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
              <li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
              <li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
              <li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
              <li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
              <li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
              <li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
            </ul>
          </div>
        </div>
        <!--End Carousel-->
      </div>
    </div>

Ask me if you need any more information from me. Like I said if you need to see the page message me! It is not a site I want to make too public at the moment for some reasons of who I work for.

Jquery Vertical Scroller

Similar Tutorials

View Content

Hi All,

I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll.

Would someone be willing to take a quick look and see if they can spot anything?

None of this code has been altered!

Code:

<script type="text/javascript">
$(document).ready(function(){
	$(".newsticker-jcarousellite").jCarouselLite({
		vertical: true,
		hoverPause:true,
		visible:10,
		auto:500,
		speed:1000
	});
});
</script>

This is the HTML and PHP part:

Code:

<div id="newsticker-demo"> 
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&amp;src=employers/logo/big/<?=$aqm[image]?>&amp;maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>

Jquery Carousel/scroller

Similar Tutorials

View Content

Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...

Looking For Jquery Fullscreen Scroller

Similar Tutorials

View Content

Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.

Problem With Pre Built Jquery Scroller

Similar Tutorials

View Content

Hi all,

I was following this tutorial for a jquery based scroller but I am having some problems:

http://www.webdesignbooth.com/create...carousel-lite/

When it loads the block starts out as I want it then suddenly squeezes down and chops the text?

The area in question is 'Featured Employers'

http://www.beta.educationvacancies.com/index.php

Can anyone advise?

many thanks,

greens85

Jquery Easing Plugin

Similar Tutorials

View Content

I'm using a horizontal coda slider for nav and an image viewer (ceebox)....all jquery. I am trying to incorporate a lava lamp (also jquery) effect on the navigation. I can either get the viewer/slider to work (but lavaLamp doesn't) or the reverse......can't get them all. I've tried everything and have the issue narrowed down to the "easing" jquery plugin. With it lava lamp works but the rest doesn't and w/o it lava doesn't. Has anyone had this issue....anyone know how to resolve it?

http://seeyatom.com/

Website Scroller/slider Conflicting With Jquery Navigation Script D: !!! ? :)

Similar Tutorials

View Content

Hey there! I'm having a bit of a problem with this site I'm workin' on... I am trying to incorporate a website slider (http://tympanus.net/codrops/2010/06/...g-with-jquery/), so when you click the links in my naviagtion, it slides right (horizontally) to a new page, however, with the slider/scroller script in there, the navigation stops working! Here is the link to this page and my code:

http://goatsy.me/motoring/

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Website Horizontal Scrolling with jQuery" />
        <meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>






	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>High Style Motoring - Scooters, Pit Bikes, Atv's, Mopeds, Parts and more!</title>
	<link rel="stylesheet" href="example/css/website.css" type="text/css" media="screen"/>

	<!--[if lte IE 6]>
		<style type="text/css">
		/* Internet Explorer 6 PNG transparency fix */
		#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
		#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
		</style>
	<![endif]-->
	
	<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
		});
	</script>










        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Awesome Bubble Navigation with jQuery" />
        <meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family: "Trebuchet MS", sans-serif;
                background:#fff url(images/bg_scoot1.png) no-repeat top left;
padding:20px;
            }
            .title{
                width:548px;
                height:169px;
                position:absolute;
                top:300px;
                left:300px;
                background:transparent url(title.png) no-repeat top left;
            }
            a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                bottom:0px;
                left:0px;
            }
            #content{
                margin:0 auto;
            }


        </style>
    </head>

    <body>

<div id="wrap">





	<div id="rotatescroll">
		<div class="viewport">
			<ul class="overview">
				<li><a href="#"><img src="example/images/scoot_gray.png" /></a></li>
				<li><a href="#"><img src="example/images/scoot_red.png" /></a></li>
				<li><a href="#"><img src="example/images/scoot_green.png" /></a></li>
				<li><a href="#"><img src="example/images/scoot_atv.png" /></a></li>
				<li><a href="#"><img src="example/images/scoot_pit.png" /></a></li>															
			</ul>
		</div>
		
		<div class="dot"></div>
		<div class="overlay"></div>
		<div class="thumb"></div>
	</div>

















        <div id="content">
            <a class="back" href="#"></a>
            <div class="title"></div>

            <div class="navigation" id="nav">
                <div class="item user">
                    <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Home</h2>
            <ul class="nav">
                        <li><a href="#section1">About Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="item home">
                    <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Bikes</h2>
                    <ul>
                        <li><a href="#scooter">Scooter</a></li>
                        <li><a href="#moped">Moped</a></li>
                        <li><a href="#atv">ATV / Pit</a></li>
                    </ul>
                </div>
                <div class="item shop">
                    <img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Shop</h2>
                    <ul>
                        <li><a href="#">Catalog</a></li>
                        <li><a href="#">Offers</a></li>
                        <li><a href="#">Order Now</a></li>
                    </ul>
                </div>
                <div class="item camera">
                    <img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Photos</h2>
                    <ul>
                        <li><a href="#">Bikes</a></li>
                        <li><a href="#">Helmets</a></li>
                        <li><a href="#">Acc.</a></li>
                    </ul>
                </div>
                <div class="item fav">
                    <img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>Extra</h2>
                    <ul>
                        <li><a href="#">Dream Bike</a></li>
                        <li><a href="#">FAQ / Info</a></li>
                        <li><a href="#">Comments</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- The JavaScript -->

        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#nav > div').hover(
                function () {
                    var $this = $(this);
                    $this.find('img').stop().animate({
                        'width'     :'199px',
                        'height'    :'199px',
                        'top'       :'-25px',
                        'left'      :'-25px',
                        'opacity'   :'1.0'
                    },500,'easeOutBack',function(){
                        $(this).parent().find('ul').fadeIn(700);
                    });

                    $this.find('a:first,h2').addClass('active');
                },
                function () {
                    var $this = $(this);
                    $this.find('ul').fadeOut(500);
                    $this.find('img').stop().animate({
                        'width'     :'52px',
                        'height'    :'52px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.1'
                    },5000,'easeOutBack');

                    $this.find('a:first,h2').removeClass('active');
                }
            );
            });
        </script>



        <div class="section black" id="section1">
  

<h2>ABOUT US</h2>
<p>

HIGH STYLE MOTORING A constant commitment to quality, service, and customer satisfaction.

We are a family owned and operated dealership doing business at our present location since 1987. It is important to note that we are a fully licensed and bonded California new motorcycle dealership (Dealer # 11080) and operating a full service brick and mortar establishment dedicated to serving the needs of the most discriminating customer. 

This is important as it sets us far apart from most of the "on-line" businesses that really don't have the proper knowledge or understanding of the products they sell. Here at HIGH STYLE MOTORING  we are dedicated to not just the sale, but have a full service repair facility as well as one of the most extensive parts inventories available. 

Over the last 23 years we have helped literally thousands of customers find the Scooter, Pit Bike, ATV or vehicle that best fit their style and budget. We will be more than happy to help you as well! 

YIPPEE! Huge selection in stock and ready to take home. NATIONWIDE delivery is also available on each unit that we sell and you can rest assured knowing that your new vehicle will be delivered promptly right to your door ANYWHERE in the USA!

It's for these reasons that we sell absolutely more Scooters, Pit Bikes, ATV's and other vehicles than ANYONE in the entire area! 

Check us out - we're here all day long saving you big $$$on the product that fits your style. 

Retro's, Cruisers, Freeway Scoots, ATV's and the complete line-up of SSR Pit Bikes are all in stock and ready for delivery - RIGHT NOW!

We can also hand deliver your products anywhere in the Orange County or Los Angeles areas. Please give us a call at (562) 945-8361. 

We also accept most major credit cards.

Stop by and say 'Hi' and let us help you to start saving money TODAY!
</p>




        </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
        </script>
</body>

</html>

And whenever I take out this part of the code, the navigation starts working again, but the slider totally doesn't work... it turns into a simple/regular page anchor again! D: (The slider doesn't seem to be working either way):

Code:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

So, any ideas or info would be suuuuper appreciated b/c I've been trying to figure this out and I reallllllly want it to work! I can't seem to figure out what the problem is hurr! :\

Jquery Validation Plugin Problem

Similar Tutorials

View Content

Hello guys,

I have implemented the jquery validation in one of my projects.

I have a <div> which has all the billing details
& another <div> below it which has the shipping details.
There is a checkbox in between these <div>'s which says "Same as Billing Address". It is used to populate all the shipping fields from the billing fields.

Well, on this particular form there are some fields which are mandatory & which I have validated by jquery validation.

I have used the $("#form_id").validate().form(); statement to check validation on the click event of the checkbox.
The actual problem is that after page loads, I directly click on the checkbox & submit the page,
the page gets submitted & validation does not execute.
If I click the submit button with the checkbox unchecked then the validation runs properly.

Why is my form not being validated if I checked the checkbox?
Please guys, help me out.

Thanks in advance.

Bhavik.

Opacity On Jquery Color Plugin?

Similar Tutorials

View Content

on my site he http://www.jbiddulph.com/niche/ I would like to apply an opacity on my navigation roll over, can someone help me here?!

here is the code for my Home link:

Code:

$('#nav ul li.home').hover(
		    function() {
		        $(this).stop().animate({backgroundColor:'#ff8300'}, 1300);
		        }, function () {
		        $(this).stop().animate({backgroundColor:'#666666'}, 100);
		    });

Jquery Plugin: Validation Not Working In Ie7. Please Help.

Similar Tutorials

View Content

It does not work in ie7! Here is my code and my link... I have been trying to fix for 2 hours now! Please help. I tried using jquery 1.6.1, 1.5.2, min.validation, regular validation, i changed the buttons to input type="submit" and did everything else I could find but nothing works.

When you click submit, it does not validate. It goes straight to my thank you page and I get a blank form in return.

I do not know much jquery, just enough to know what I copy and paste and make some minimal changes. Thanks!

http://www.denver-website-designer.com/quote.html

<script type="text/javascript">
$().ready(function() {
var erroralert = $("#quoteForm").bind("invalid-form.validate", function() {
$("#erroralert");
});
});

$.metadata.setType("attr", "validate");

$.validator.addMethod("ninja", function(value) {
return value == "ninja";
}, 'Can a robot spell "ninja"');

$().ready(function() {
$("#quoteForm").validate({
errorContainer: $("#erroralert"),
rules: {
fullname: {
required:true,
minlength:2,
},
email: {
required:true,
email:true,
},
phone: {
required:true,
minlength:10,
maxlength:15,
},
pages: {
required:true,
minlength:1,
maxlength:10,
number:true
},
whyrate: {
required:true,
minlength:10,
},
ninja: "ninja",
},
messages: {
email: "Please enter a valid email address",
pages: "Numeric values only",
}
});
});
</script>

Changing The Jquery Countdown Plugin

Similar Tutorials

View Content

I did have this in another category but i think it was the wrong one, so i am now posting it here

i found this script which ran great for the new year.

I have been trying to change it so it counted down from todays date to a new date in the future instead of from a date picked to the new year.

I have the code here, how would i go about doing this.

jquery script

Code:

(function($){
	
	// Number of seconds in every time division
	var days	= 24*60*60,
		hours	= 60*60,
		minutes	= 60;
	
	// Creating the plugin
	$.fn.countdown = function(prop){
		
		var options = $.extend({
			callback	: function(){},
			timestamp	: 0
		},prop);
		
		var left, d, h, m, s, positions;

		// Initialize the plugin
		init(this, options);
		
		positions = this.find('.position');
		
		(function tick(){
			
			// Time left
			left = Math.floor((options.timestamp - (new Date())) / 1000);
			
			if(left < 0){
				left = 0;
			}
			
			// Number of days left
			d = Math.floor(left / days);
			updateDuo(0, 1, d);
			left -= d*days;
			
			// Number of hours left
			h = Math.floor(left / hours);
			updateDuo(2, 3, h);
			left -= h*hours;
			
			// Number of minutes left
			m = Math.floor(left / minutes);
			updateDuo(4, 5, m);
			left -= m*minutes;
			
			// Number of seconds left
			s = left;
			updateDuo(6, 7, s);
			
			// Calling an optional user supplied callback
			options.callback(d, h, m, s);
			
			// Scheduling another call of this function in 1s
			setTimeout(tick, 1000);
		})();
		
		// This function updates two digit positions at once
		function updateDuo(minor,major,value){
			switchDigit(positions.eq(minor),Math.floor(value/10)%10);
			switchDigit(positions.eq(major),value%10);
		}
		
		return this;
	};


	function init(elem, options){
		elem.addClass('countdownHolder');

		// Creating the markup inside the container
		$.each(['Days','Hours','Minutes','Seconds'],function(i){
			$('<span class="count'+this+'">').html(
				'<span class="position">\
					<span class="digit static">0</span>\
				</span>\
				<span class="position">\
					<span class="digit static">0</span>\
				</span>'
			).appendTo(elem);
			
			if(this!="Seconds"){
				elem.append('<span class="countDiv countDiv'+i+'"></span>');
			}
		});

	}

	// Creates an animated transition between the two numbers
	function switchDigit(position,number){
		
		var digit = position.find('.digit')
		
		if(digit.is(':animated')){
			return false;
		}
		
		if(position.data('digit') == number){
			// We are already showing this number
			return false;
		}
		
		position.data('digit', number);
		
		var replacement = $('<span>',{
			'class':'digit',
			css:{
				top:'-2.1em',
				opacity:0
			},
			html:number
		});
		
		// The .static class is added when the animation
		// completes. This makes it run smoother.
		
		digit
			.before(replacement)
			.removeClass('static')
			.animate({top:'2.5em',opacity:0},'fast',function(){
				digit.remove();
			})

		replacement
			.delay(100)
			.animate({top:0,opacity:1},'fast',function(){
				replacement.addClass('static');
			});
	}
})(jQuery);

The section that inilialises it:

Code:

$(function(){
	
	var note = $('#note'),
		ts = new Date(2012, 0, 1),
		newYear = true;
	
	if((new Date()) > ts){
		// The new year is here! Count towards something else.
		// Notice the *1000 at the end - time must be in milliseconds
		ts = (new Date()).getTime() + 10*24*60*60*1000;
		newYear = false;
	}
		
	$('#countdown').countdown({
		timestamp	: ts,
		callback	: function(days, hours, minutes, seconds){
			
			var message = "";
			
			message += days + " day" + ( days==1 ? '':'s' ) + ", ";
			message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
			message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
			message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
			
			if(newYear){
				message += "left until the new year!";
			}
			else {
				message += "left to 10 days from now!";
			}
			
			note.html(message);
		}
	});
	
});

ive tried making the ts = new Date(2012, 0, 1) like ts = new Date() so it reads today's date and i also tried making timestamp : 0 a date in the future as that is basically what i thought was happening. I have tried a load more stuff but i seam to be making a mess of the code and it does not work after that.

Could someone point me in the right direction on where to start and which variables are important within this script.

Jquery Image Gallery/slider Plugin

Similar Tutorials

View Content

does anyone know if there is a jquery image gallery/slider plugin that can be used multiple time on one page?

Need Help Updating A Jquery Mod/plugin Found Online

Similar Tutorials

View Content

Hello!

So I came across this Featured Content Slider mod (http://css-tricks.com/creating-a-sli...ontent-slider/) which is based on the Coda Slider (http://www.ndoherty.biz/demos-index/) which uses jQuery. However, you'll notice that the Coda Slider has since received an update (2.0). What I'm trying to do is update the mod for the Coda Slider update, which I'll then use to create a WordPress plugin for my site.

Thing is, I don't really know JavaScript (only enough to logic my way through simply stuff). A lot of things seemed to have changed in the Coda update, but I can't seem to get things to work properly in the FCS, specifically being able to click a thumbnail and make the slider switch to that one. I'm pretty sure I've ruled out CSS being an issue, leaving the JavaScipt. If anyone's willing to take a look, I've uploaded what I currently have to http://www.thetanooki.com/coda.zip

It's a bit rough at the moment, since I'm pretty much using trial and error to figure things out... and don't mind the seemingly useless PHP code at the top of the .js.php file - that's just an example I'm hoping to use for when I eventually make a WordPress plugin out of it. Anyway, index2.html is the one I'm working on, I'm only using index.html (original) as a guide, and the original FCS as well as old version of Coda can be found at the other links above.

Thanks in advance; any light that can be shed on this would be a tremendous help! If I've screwed something else up, let me know - I may have overlooked conflicting class names or something like that since the originals aren't my own code and I'm still familiarizing myself.

Javascript Plugin Built For The Jquery Element

Similar Tutorials

View Content

Hi all,

I am looking for a script that I can only describe. Often, in facebook, when a new window opens there is only the first few lines of text visible followed by a few dots with an invitation to "read more". Once clicked the additional text expands and becomes visible.

I don't even know what this behavior is called so it's hard to get started.

Any help or pointers in the right direction will be much appreciated.

Anita.
Cape Town.

Note Working Target Blank Properly When Using Biggerlink Jquery Plugin V 1.0

Similar Tutorials

View Content

hi Pals,
I have a problem regarding the "target" attribute of "a" tag. in my code I use biggerlink jQuery script to give link to p element without come HTML validation problem. I pass the "target" value from PHP to smarty template , but it's not working , When I remove "biggerlink " it works but the link in <p> tag not working . My Tpl file is :

Code:

{if not empty($campaign)}
<div class="securti-adv biggerlink">
	{if not empty ($campaign.media)}
		<a href="{$campaign.url}" {if n($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} class="thumb">
			<img src="{$campaign.image}" title="{$campaign.title1 + $campaign.title2}" alt="{$campaign.title1 + $campaign.title2}" />	</a>
	{/if}
	<div class="details">
		{if not empty ($campaign.title1) || not empty ($campaign.sub_title)}
			<a href="{$campaign.url}" {if not empty($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} title="{$campaign.title1 + $campaign.title2}">
				 {text2image styleSlug=$campaign.titleStyle1 text=$campaign.title1}
				 {text2image styleSlug=$campaign.titleStyle2 text=$campaign.title2}
				 <span><img src="{$imagesDir}/btn-campaign-meet-security-advisor.png" alt="" title="" /></span>
			</a>
			<p> {text2image styleSlug=$campaign.subtitleStyle text=$campaign.subTitle}</p>
		{/if}
	</div>
</div>

<script type="text/javascript" language="javascript">
{literal}
$(document).ready(function(){
	$('.biggerlink').biggerlink();
});
{/literal}
</script>
{/if}

My plugin code is :

Code:

(function($) {
	$.fn.biggerlink = function(options) {

		// Default settings
		var settings = {
			hoverclass:'hover', // class added to parent element on hover
			clickableclass:'hot', // class added to parent element with behaviour
			follow: true	// follow link? Set to false for js popups
			
		};
		if(options) {
			$.extend(settings, options);
		}
		$(this).filter(function(){
			 return $('a',this).length > 0;

		}).addClass(settings.clickableclass).each(function(i){

			// Add title of first link with title to parent
			$(this).attr('title', $('a[title]:first',this).attr('title'));

			// hover and trigger contained anchor event on click
			$(this)
			.mouseover(function(){
				window.status = $('a:first',this).attr('href');
				$(this).addClass(settings.hoverclass);
			})
			.mouseout(function(){
				window.status = '';
				$(this).removeClass(settings.hoverclass);
			})
			.bind('click',function(){
				$(this).find('a:first').trigger('click');
			})

			// triggerable events on anchor itself

			.find('a').bind('focus',function(){
				$(this).parents('.'+ settings.clickableclass).addClass(settings.hoverclass);
			}).bind('blur',function(){
				$(this).parents('.'+ settings.clickableclass).removeClass(settings.hoverclass);
			}).end()

			.find('a:first').bind('click',function(e){
				if(settings.follow == true)
				{
					window.location = this.href;
				}
				e.stopPropagation(); // stop event bubbling to parent
			}).end()

			.find('a',this).not(':first').bind('click',function(){
				$(this).parents('.'+ settings.clickableclass).find('a:first').trigger('click');
				return false;
			});
		});
		return this;
	};
})(jQuery);

the value of "target" , "_blank" is not work .... I highlight the code part regarding this, please check and give me a solution ASAP. You can mail me at : anes.pa@gmail.com

Thanks,
Anes

Jquery Slideout Help Not Working With Newer Versions Of Jquery....

Similar Tutorials

View Content

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');

    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;

        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);

        ow = newEl.outerWidth();

        if( i == 0 ) ra = ow;
        else r = ow;

        h = newEl.css({'top':h , 'right': -ow }).height() + h;

        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;

        newEl.click(function(){
            var el = this.jq;

            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }

            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });

            tabs.eq( this.i ).show().siblings('.tab').hide();

            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();

    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
});

and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

Jquery Ie7 Problems

Similar Tutorials

View Content

Hi everyone..

I am using the script below to run a rating plugin... it works on all browsers except ie6 and 7.. any help would be greatly appreciated.. thanks in advance..

$.fn.rater = function(options) {
var opts = $.extend({}, $.fn.rater.defaults, options);
return this.each(function() {
var $this = $(this);
var $on = $this.find('.ui-rater-starsOn');
var $off = $this.find('.ui-rater-starsOff');
opts.size = $on.height();
if (opts.rating == undefined) opts.rating = $on.width() / opts.size;
if (opts.id == undefined) opts.id = $this.attr('id');

$off.mousemove(function(e) {
var left = e.clientX - $off.offset().left;
var width = $off.width() - ($off.width() - left);
width = Math.ceil(width / (opts.size / opts.step)) * opts.size / opts.step;
$on.width(width);
}).hover(function(e) { $on.addClass('ui-rater-starsHover'); }, function(e) {
$on.removeClass('ui-rater-starsHover'); $on.width(opts.rating * opts.size);
}).click(function(e) {
var r = Math.round($on.width() / $off.width() * (opts.units * opts.step)) / opts.step;
$off.unbind('click').unbind('mousemove').unbind('mouseenter').unbind('mouseleave');
$off.css('cursor', 'default'); $on.css('cursor', 'default');
$.fn.rater.rate($this, opts, r);
}).css('cursor', 'pointer'); $on.css('cursor', 'pointer');
});
};

$.fn.rater.defaults = {
postHref: location.href,
guid: 0,
units: 5,
step: 1,
};

$.fn.rater.rate = function($this, opts, rating) {
var $on = $this.find('.ui-rater-starsOn');
var $off = $this.find('.ui-rater-starsOff');
$off.fadeTo(600, 0.4, function() {
$.ajax({
url: opts.postHref,
type: "POST",
data: 'id=' + opts.id + '&guid=' + opts.guid + '&rating=' + rating,
complete: function(req) {
if (req.status == 200) { //success
opts.rating = parseFloat(req.responseText);
$off.fadeTo(600, 0.1, function() {
$on.removeClass('ui-rater-starsHover').width(opts.rating * opts.size);
var $count = $this.find('.ui-rater-rateCount');
$count.text(parseInt($count.text()) + 1);
$this.find('.ui-rater-rating').text(opts.rating.toFixed(1));
$off.fadeTo(600, 1);
$this.attr('title', 'Your rating: ' + rating.toFixed(1));
});
} else { //failure
alert(req.responseText);
$on.removeClass('ui-rater-starsHover').width(opts.rating * opts.size);
$this.rater(opts);
$off.fadeTo(2200, 1);
}
}
});
});
};

-Carlos

Get Http://code.jquery.com/jquery.min.map Net::err_too_many_redirects

Similar Tutorials

View Content

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

Jquery Galleryview Problems With Ie

Similar Tutorials

View Content

Hi guys,

been running into some problems with all IE browsers and my jQuery Gallery from Galleryview.

Background: I am using Java to do an image search and build up some HTML including the calls to run the galleryview scripts and return this back to the page using document.write()

When I use the simple structure of placing the scripts and parameters into a sample page:

Code:

<body>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#photos').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 100,
			frame_height: 100
		});
	});
</script>

It works fine.

When I try and pull all the scripts out of the page and inject them back in using document.write() I get an error on IE:

Code:

sb.append("(function(){ document.write('" +
"  <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-1.3.2.min.js\"></script>   " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery.easing.1.3.js\"></script>   " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js\"></script>   " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js\"></script>  " +
"  <script type=\"text/javascript\">   " +
" 				 	$(document).ready(function(){   " +
" 				 		$(\"#photos\").galleryView({   " +
" 				 			panel_width: 800,   " +
" 				 			panel_height: 300,   " +
" 				 			frame_width: 100,   " +
" 				 			frame_height: 100   " +
" 				 		});   " +
" 				 	});   " +
" 				 </script>   " +............+
"')})()");

The variable sb is a StringBuffer and is formatted and returned:
Code:

nextPage.setValue(sb.toString());
nextPage.setEscapeHTML(false);
return nextPage;

This particular error in this case in IE(8) is: Object expected which I think is referring to the jQuery as the resulting images are displayed just not in Galleryview style.

This is really wracking my brains and any and all help is appreciated.

D.