JavaScript - How To Detect Plugin In Ie Browser

Hi I am trying to trigger an event once the user clicks the browsers back/forward buttons, I have built a system just like facebook where if the user has javascript turned on they get the full feature of the site which includes fast switching for example if someone goes to this page "example.com/index.php" and click a link to contact.php it would change the url to "example.com/index.php#!/contact.php" but what I need to know is if there is any way to change the pages content when the user goes back and forth through the fast switch pages? something like "history.back !== -1" or something like that.

If anyone can help please reply, thank you.

Hi Guys,
I need to amend the below so that if any version of IE is detected it calls window.resizeTo(300,400); otherwise no event or a window.moveTo(0,0); event (either one). Firefox is having problems with resizeto
THANKS!

<SCRIPT LANGUAGE="JavaScript">
if "any version of internet explorer"
window.resizeTo(300,400);
else
window.moveTo(0,0);
</SCRIPT>

OR

<SCRIPT LANGUAGE="JavaScript">
if "any version of internet explorer"
window.resizeTo(300,400);
else
"do nothing"
</SCRIPT>

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.

Another thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me.

I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them.

Is there a single method using JS that works for all browsers?

Thre is probably a very simple answer and I am just missing it somehow.

http://www.hellowallet.com

The blue tabbed navigation that fills the page. Is that a jquery plugin or..?

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/

Hello,

I posted this at another site, but am still at a loss so I hope I can get some help here

I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like:

http://www.bqcreative.com/gcc2/menu.html

That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs.

Image of what each food section should look like:


Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help

HTML (with irrelevant code removed):
Code:

<div class="menunav">
   <ul>
    <li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
    <li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
    <li><a href="#">Salads</a></li>
    <li><a href="#">Sandwiches</a></li>
    <li><a href="#">Wraps & Pitas</a></li>
    <li><a href="#">Dinners</a></li>
    <li><a href="#">Desserts</a></li>
   </ul>
<br /><br /><br />
<hr />
  </div>
  <div class="menuwrap">
   <div id="appetizers">
    <div class="itemleft">
<p>Appetizer foods on the left</p>
    </div>
    <div class="itemright">
<p>Appetizer foods on the right</p>
    </div>
   </div>
   <div id="skinnygreek">
    <div class="itemleft">
<p>Skinny Greek foods on the left</p>
    </div>
    <div class="itemright">
<p>Skinny Greek foods on the right</p>
    </div>
   </div>
  </div>

CSS:
Code:

.menunav {
	width: 90%;
	margin-top:35px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	}

.menunav ul {
	list-style:none;
	}

.menunav li {
	display:block;
	text-align:center;
	float:left;
	padding: 0 10px;
	}

.menunav li a {
	color: #2e6ab1;
	text-decoration: none;
	float:left;
	font-family: 'DominicanRegular', sans-serif;
	font-size:1.5em;
	}

.menuwrap {
	width: 721px;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	overflow-y:auto;
	overflow-x:hidden;
	position:relative;
	}

#appetizers {
	width: 721px;
	float:left;
	position:relative;
	top:0px;
	left:0px;
	}

#skinnygreek {
	width: 721px;
	clear:left;
	float:left;
	position:relative;
	top:0px;
	left:800px;
	}

.itemleft {
	width:50%;
	float:left;
	}

.itemright {
	width:50%;
	float:right;
	}

Javascript (in header section):
Code:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
		//borrowed from jQuery easing plugin
		//http://gsgd.co.uk/sandbox/jquery.easing.php
		$.scrollTo.defaults.axis = 'xy'; 
		$.easing.elasout = function(x, t, b, c, d) {
			var s=1.70158;var p=0;var a=c;
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
		};
		});
// -->
</script>

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.

Hello,

I'm modifying a wordpress plugin to include a product manager module where administrators can input data into the fields and the shortcode will style it. Surprisingly enough, I have that part complete and working!

The part I'm scratching my head over is how to get the "Add One More Item" link to work. It functions to the extent of adding a new set of fields but when I fill out the fields and submit, only the first set posts.

It's all javascript and that is not my where my strengths lie. If any of you javascript ninjas would be willing to drop some knowledge, I would be greatly appreciative.

I've attached the entire php file that the script is contained in and also a picture of the product manager module window with a label of the problem I'm having (for clarification). If you decide to try and help and have further questions, I am at your disposal.

Thank you so much in advance!

Hi can Javascript talk to the flash plugin to access the microphone functionality?

if so how can i do this?

Is there any type of script or plugin out that has a secure, DropBox-like interface? I wanted clients to have a username and password, and that username and password to be tied to a mysql db of sorts that allows them access to their specific FTP space without them knowing the actual server info.

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);
		    });

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>

I have managed to get a model to load and to load multiple models, however i cannot seem to work out how to get these models to move. I have seen it done so i know there is a way in which it can be done, any help would be much appreciated.

Also if anyone knows how to create and load custom terrain and stuff thats something i'd like to klnow how to do.