4 Replies - 8312 Views - Last Post: 12 June 2012 - 02:57 PM

#1 beagrie07  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 15-March 11

jQuery Not Working in IE, FF or Chrome

Posted 11 June 2012 - 01:24 PM

Hi, I'm trying to use SmoothDivScroll to display some pictures for a website I'm making. I was testing this out and using the code provided from the website but it still doesn't work and I can't figure out why. Any clues as to why it's not working?

<!DOCTYPE html>
<html>
<head>
	<!-- the CSS for Smooth Div Scroll -->
	<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
	
	<!-- Styles for my specific scrolling content -->
	<style type="text/css">
		#makeMeScrollable
		{
			width:100%;
			height: 330px;
			position: relative;
		}
		
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
	</style>

</head>

<body>

	<div id="makeMeScrollable">
		<img src="images/demo/field.jpg" alt="Demo image" id="field" />
		<img src="images/demo/gnome.jpg" alt="Demo image" id="gnome" />
		<img src="images/demo/pencils.jpg" alt="Demo image" id="pencils" />
		<img src="images/demo/golf.jpg" alt="Demo image" id="golf" />
		<img src="images/demo/river.jpg" alt="Demo image" id="river" />
		<img src="images/demo/train.jpg" alt="Demo image" id="train" />
		<img src="images/demo/leaf.jpg" alt="Demo image" id="leaf" />
		<img src="images/demo/dog.jpg" alt="Demo image" id="dog" />
	</div>

	<!-- LOAD Javascript LATE - JUST BEFORE THE BODY TAG 
	     That way the browser will have loaded the images
		 and will know the width of the images. No need to
		 specify the width in the CSS or inline. -->

	<!-- jQuery library - Please load it from Google API's -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

	<!-- jQuery UI Widget and Effects Core (custom download)
	     You can make your own at: http://jqueryui.com/download -->
	<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
	
	<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
	     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
	<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

	<!-- Smooth Div Scroll 1.2 minified-->
	<script src="js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>

	<!-- If you want to look at the uncompressed version you find it at
	     js/jquery.smoothDivScroll-1.2.js -->


	<!-- Plugin initialization -->
	<script type="text/javascript">
		// Initialize the plugin with no custom options
		$(document).ready(function () {
			// None of the options are set
			$("div#makeMeScrollable").smoothDivScroll({});
		});
	</script>

</body>
</html>



Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery Not Working in IE, FF or Chrome

#2 Todilo  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 85
  • Joined: 13-November 07

Re: jQuery Not Working in IE, FF or Chrome

Posted 11 June 2012 - 11:21 PM

Firstly, do you use any type of debugger? Firebug for firefox perhaps? Or the built in one in Chrome (ctr+j+k)? They will usually give you a great firs way to start. In this case I would suspect is has troubles loading some of the scripts. I would suspect that you do not get the jquery library with the ajax call.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
perhaps? instead of 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>


Was This Post Helpful? 1
  • +
  • -

#3 beagrie07  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 15-March 11

Re: jQuery Not Working in IE, FF or Chrome

Posted 12 June 2012 - 07:03 AM

That worked! Something that simple stops its working but I'm glad its sorted, I need to resize these images now, they need to fit on the slideshow, I've tried html but its done made it worse. Is there an auto fit feature I can use to fit a large picture into the space?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#apDiv4 {
	position:absolute;
	width:1024px;
	height:768px;
	z-index:1;
	left: 379px;
	top: 1px;
}
.banner {
	font-family: MS Serif, New York, serif;
}
#apDiv1 table tr td div h2 strong {
	font-family: MS Serif, New York, serif;
}
#apDiv1 table tr td div p {
	font-family: MS Serif, New York, serif;
}
#apDiv2 {
	position:absolute;
	width:714px;
	height:103px;
	z-index:1;
	left: 303px;
	top: 127px;
	font-size: 36px;
}
#apDiv1 #apDiv2 h1 {
	font-family: MS Serif, New York, serif;
}

#apDiv4 table tr td div .EL .EL {
	font-family: "existence Light";
	font-size: 18px;
}
.EL {
	font-family: "existence Light";
	font-size: 36px;
}
.WS {
	font-family: windsong;
	font-size: 36px;
}
EL {
	font-family: windsong;
	font-size: 36px;
}
.EL1 {
	font-family: "existence Light";
	font-size: 36px;
}
</style>
<link href="file:///C|/Users/James Beagrie/Documents/College Work/Hereford/Foundation Degree Year 2/Bob/204 - Project/Website/container.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv3 {
	position:absolute;
	width:837px;
	height:353px;
	z-index:2;
	left: 196px;
	top: 430px;
}
.EL {
	font-family: existence Light;
}
#apDiv4 #apDiv2 h1 {
	font-family: existence Light;
}
.EL {
	font-family: existence Light;
}
#apDiv4 table tr td div h2 strong {
	font-family: existence Light;
}
#apDiv4 table tr td div p {
	font-family: windsong;
}
#apDiv4 table tr td div h1 {
	font-family: windsong;
	font-size: 36px;
}
.EL {
	font-family: existence Light;
	font-size: 72px;
}
#apDiv4 table tr td div .EL {
	font-family: existence Light;
	font-size: 24px;
}
#apDiv4 #apDiv2 .EL .EL .EL {
	font-size: larger;
}
#apDiv4 #apDiv2 {
	font-family: existence Light;
}
#apDiv4 table tr td div div {
	font-family: existence Light;
	font-size: 24px;
}
#apDiv4 table tr td div strong {
	font-family: existence Light;
}
EL {
	font-family: "existence Light";
}
.grey {
	color: #bfbfbf;
	font-size: 36px;
}
#apDiv5 {
	position:absolute;
	width:717px;
	height:425px;
	z-index:2;
	left: 303px;
	top: 232px;
}
#apDiv6 {
	position:absolute;
	width:566px;
	height:1363px;
	z-index:2;
	left: 197px;
	top: 116px;
}
</style>
<script src="Templates/Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="apDiv4"><!-- TemplateBeginEditable name="EditRegion1" -->
  <div align="center" class="EL"> <strong>ChloŽ Bonfield</strong></div>
<!-- TemplateEndEditable -->
  <table width="301" height="396" border="0">
    <tr>
      <td height="392"><!-- TemplateBeginEditable name="EditRegion2" -->
        <p class="EL"><span class="EL1">Lastest Blog Post</span></p>
        <p class="EL"><span class="WS"><span class="grey">Date: 7th March 2012</span></span></p>
        <p class="EL"><span class="grey">This is an example post.</span></p>
        <p>&nbsp;</p>
      <!-- TemplateEndEditable --></td>
    </tr>
  </table>
  <div id="apDiv6">
	<!-- the CSS for Smooth Div Scroll -->
	<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
	
	<!-- Styles for my specific scrolling content -->
	<style type="text/css">
		#makeMeScrollable
		{
			width:100%;
			height: 330px;
			position: relative;
		}
		
		#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
	</style>

</head>

<body>

	<div id="makeMeScrollable">
    <script src="js/jquery.imagefit.js" type="text/javascript"></script>
		<img src="images/america.JPG" alt="Demo image" id="america" title="America" />
		<img src="images/car.JPG" alt="Demo image" id="car" title="Car Trip" />
		<img src="images/harvest.JPG" alt="Demo image" id="harvest" title="Harvesting the Heart" />
		<img src="images/hollister.JPG" alt="Demo image" id="hollister" title="Hollister" />
		<img src="images/world.JPG" alt="Demo image" id="world" title="The World" />
	</div>

	<!-- LOAD Javascript LATE - JUST BEFORE THE BODY TAG 
	     That way the browser will have loaded the images
		 and will know the width of the images. No need to
		 specify the width in the CSS or inline. -->

	<!-- jQuery library - Please load it from Google API's -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

	<!-- jQuery UI Widget and Effects Core (custom download)
	     You can make your own at: http://jqueryui.com/download -->
	<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
	
	<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
	     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
	<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

	<!-- Smooth Div Scroll 1.2 minified-->
	<script src="js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>

	<!-- If you want to look at the uncompressed version you find it at
	     js/jquery.smoothDivScroll-1.2.js -->


	<!-- Plugin initialization -->
	<script type="text/javascript">
		// Initialize the plugin with no custom options
		$(document).ready(function () {
			// None of the options are set
			$("div#makeMeScrollable").smoothDivScroll({});
		});
	</script>
  </div>
  <div id="apDiv2">
    <div align="center"><!-- TemplateBeginEditable name="EditRegion3" -->This is the gallery where you can view various images made by ChloŽ.<!-- TemplateEndEditable --></div>
  </div>
</div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="768" id="FlashID" title="test">
  <param name="movie" value="file:///C|/Users/James Beagrie/Documents/College Work/Hereford/Foundation Degree Year 2/Bob/204 - Project/Website/test flash.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="6.0.65.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
  <param name="expressinstall" value="Templates/Scripts/expressInstall.swf" />
  <param name="LOOP" value="false" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="file:///C|/Users/James Beagrie/Documents/College Work/Hereford/Foundation Degree Year 2/Bob/204 - Project/Website/test flash.swf" width="1024" height="768">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="Templates/Scripts/expressInstall.swf" />
    <param name="LOOP" value="false" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>



Thanks
Was This Post Helpful? 0
  • +
  • -

#4 beagrie07  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 15-March 11

Re: jQuery Not Working in IE, FF or Chrome

Posted 12 June 2012 - 08:11 AM

Ah doesn't matter, I'm going to resize the pictures anyway, saves on coding and bandwidth.
Was This Post Helpful? 0
  • +
  • -

#5 Todilo  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 85
  • Joined: 13-November 07

Re: jQuery Not Working in IE, FF or Chrome

Posted 12 June 2012 - 02:57 PM

View Postbeagrie07, on 12 June 2012 - 09:11 AM, said:

Ah doesn't matter, I'm going to resize the pictures anyway, saves on coding and bandwidth.

Without reading through you code on how you chose to present images you can always set width, height with the img tag. If you use background image on for instance a div, the div decides the size(and it can be manipulated). Normally though you would use the img tag for full-size images like an image library.

But also as you stated yourself, saving bandwith is good so resizing images/cropping first is a good way.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1