Jump to content
Sign in to follow this  
SpeedCrazy

Jquery UI problems

Recommended Posts

Hey guys,

I am experimenting with jquery ui before implementing it into my site designs. But im having problems.

Oh and the reason this code is so long is that i am also trying out html 5 boilerplate.

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    	<html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>		<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
 <meta charset="utf-8">

 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
      Remove this if you use the .htaccess -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

 <title>new_file.html</title>
 <meta name="description" content="">
 <meta name="author" content="">

 <!-- Mobile viewport optimized: j.mp/bplateviewport -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">


 <!-- CSS: implied media="all" -->
 <link type="text/css" rel="stylesheet" media="screen" href="css/style.css">

 <!-- Uncomment if you are specifically targeting less enabled mobile browsers
 <link type="text/css" rel="stylesheet" media="handheld" href="css/handheld.css">  -->

 <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
 <script type="text/javascript" src="js/libs/modernizr-1.7.min.js"></script>

<script type="text/javascript">
	$(init);
	function init(){
		$("#drag").dragable();
	}
</script>
<script type="text/css">
	h1{font-size: 350%;}h2{font-size:300%;}h3{font-size:250%;}h4{font-size:200%;}h5{font-size:150%;}h6{font-size:125%;}

	body{
		font-family:"Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
		font-size:12px;
	}

	#drag{
		width: 300px;
		height: 100px;
		border: 1px solid green;
		text-align: center;
	}

</script>
</head>

<body>

 <div id="container">
<header>
	<h1>MySite</h1>
</header>

   <div id="main" role="main">

   	<div id="drag">
   		<h1>I am draggable!</h1>
   		<p>Drag me, PLEASE!!!!!!</p>
   	</div>
   </div><!--end of #main-->

<footer>
	<a href="#">© 2011, ****** **************</a>
   </footer>
 </div> <!--! end of #container -->


 <!-- JavaScript at the bottom for fast page loading -->

 <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
 <script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.1.min.js'>\x3C/script>")</script>

 <!-- jQuery UI -->
 <script type="text/javascript" src="js/libs/jquery-ui-1.8.13.custom.min.js"></script>


 <!-- scripts concatenated and minified via ant build script-->
 <script type="text/javascript" src="js/plugins.js"></script>
 <script type="text/javascript" src="js/script.js"></script>
 <!-- end scripts-->


 <!--[if lt IE 7 ]>
   <script src="js/libs/dd_belatedpng.js"></script>
   <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
 <![endif]-->

</body>
</html>

All of the referenced files are correctly linked, the paths are correct. What am i doing wrong?

Share this post


Link to post
Share on other sites

With a quick glance over the code, I'd say the use of a script tag instead of the style tag for CSS may cause some problems. Though I cannot say I have ever tried that to find out if it'll work or not. :D

 

Also... Is there a particular reason you have the JQuery and JQuery UI JS loading at the end of the page? Usually this is in the head tags. And you are trying to grab the JQuery 1.5.2 from Google, and reverting to the local JQuery 1.6.1 ... just use the local version. It is quicker to get it from your server than to make a call from another site (even Google).

 

Anyway... try replacing your $(init); section with this...

 

<script>
$(function() {
$( "#dragg" ).draggable();
});
</script>

Share this post


Link to post
Share on other sites

:pfp: Odd, the css was working......

 

As for the js at the bottom, like i said i am experimenting with boiler plate, they claim it loads faster at the bottom, we shall see. I forgot to check which version it was pulling from google, but i have to agree it loads quite slow so i shall get rid of that and see if it loads faster from my server.

I will try what you suggested for the init.

Edited by SpeedCrazy

Share this post


Link to post
Share on other sites

:pfp::mfp::pfp::fp:

lol, i was trying to load the script before the library.......

That'll teach me to work so late at night.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...