Animation not working (javascript)

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 5161 Views - Last Post: 11 October 2013 - 08:12 AM

#1 rekha_kj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 14-September 11

Animation not working (javascript)

Posted 13 September 2013 - 02:46 AM

Hi all,
Below is the code i am using to create a web site like usatoday.com. But the animation is not working. Please help me to find out what is the mistake i have done.

<!DOCTYPE html >
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	
	<title>Prime Source Technologies</title>
	
	<meta name="description" content="primesource for chassis,powersupplies"/>
	<meta name="keywords" content="computer chassis, computer powersupplies,computer accessories,computer networkcards,computer storagesolutions,primesource" />
	<meta name="author" content="Thiago S.F. - http://thiagosf.net" />
	
	<link href="menu.css" rel="stylesheet" type="text/css">
	<link href="maincss.css" rel="stylesheet" type="text/css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script src="./js/jquery.touchSwipe.min.js"></script>
<script src="./js/jquery.liquid-slider.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/<cfoutput>#css_style#</cfoutput>/jquery-ui.css" type="text/css" media="all" />
	<!--<script language= type="text/javascript">
	jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
        'height' : 320,
        'width' : 620,
        'responsive' : true
    });
});
</script>-->
<style type="text/css">
#cont1
{
position:relative;
background:#33FFFF;
width:90%;
height:1000px;
overflow:hidden
}
#cont2
{
position:relative;
background:#CCFF00;
width:90%;
height:1000px;
overflow:hidden;
}
#cont3
{
position:relative;
background:#FF6666;
width:90%;
height:1000px;
overflow:hidden;
}

</style>
<script language="javascript1.5" type="text/javascript">
function f1()
{
alert("inside script")

var sliderPos = ["0px","-900px","-1800px"];
alert("inside script")
$("ul").live("click","li",function {
    var index = $(this).index();
    //alert(index);
	alert("inside script")
    $("#slider").animate({
        'marginleft':sliderPos['index'],500
});
}
</script>
<!--<script language="javascript" type="text/javascript">
$(document).ready(function()
		
		{
		
		//Attach a handler to the click event
		
		//of the link on the page:
		
		$('a').click(function()
		
		{
		
		//Target the div with id of result
		
		//and load the content from the specified url
		
		//and the specified div element into it:
		
		$('#content').load('content.htm #content');
		
		
		});
		$('a1').click(function()
		
		{
		
		//Target the div with id of result
		
		//and load the content from the specified url
		
		//and the specified div element into it:
		
		$('#content').load('content.htm #content');
		
		});		
		});
		
		
</script>	-->	
<style type="text/css">
#body {
   /* margin:0px auto;*/
    width:100%;
	background-color:#000000;
	text-align:center;
	
 /*   height:466px;*/ 
    
   
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
+
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

</style>

<!--js slider -->
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery.mobile.pagination.js>

<!-- Include the plugin *after* the jQuery library -->
<!--<script src="bjqs.min.js"></script>

<!-- Include the basic styles -->
<!--<link type="text/css" rel="Stylesheet" href="bjqs.css" />
<!--end of js slider-->

</head>



<body>
<div id="container">
  <div id="leftarrow"> <a href="#"> <img src="leftarrow.jpg"></a> </div>
  <div id="rightarrow" ></div>
  <div id="menucontainer">
    <div id="navMenu"  style="clear:both" align="center">
      <ul>
        <li id ="style1"><a  href="#cont1" class="red" onclick="f1()">Home</a></li>
        <li id="style2"> <a href="#cont2" class="blue" onclick="f1()"> Services </a></li>
        <li id="style3"> <a href="#cont3" onclick="f1()"> Products </a>
            <ul>
              <li><a href="#">Wet Suit</a></li>
              <li><a href="#">Vacuum Cleaner</a></li>
              <li><a href="#">Pill Box</a></li>
              <li><a href="#">Knee Socks</a></li>
              <li><a href="#">Pirate Hat</a></li>
              <li><a href="#">Kilt</a></li>
            </ul>
          <!-- end inner UL -->
        </li>
        <!-- end main LI -->
        <li id="style4"><a href="" class="orange">Contact us</a></li>
      </ul>
      <!-- end main UL -->
    </div>
    <!-- end navMenu -->
  </div>
  <div id="content" >
    <div id="slider">
      <div id="cont1">Container 1 
	  
	  </div>
      <div id="cont2">Container 2</div>
      <div id="cont3">Container 3</div>
    </div>                       
  </div>
</div>
</div>
</div>
</body>
</html>


Thanks
Rekha

Is This A Good Question/Topic? 0
  • +

Replies To: Animation not working (javascript)

#2 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: Animation not working (javascript)

Posted 13 September 2013 - 02:08 PM

As Dormilich said in another post of yours, why are you including jQuery 3 times? That will definitely cause you issues. Also, line 68 should be this:
'marginleft':sliderPos[index],500


There may be other errors in your code, which will be easy to track down in the Error Console.
Was This Post Helpful? 0
  • +
  • -

#3 rekha_kj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 14-September 11

Re: Animation not working (javascript)

Posted 17 September 2013 - 02:43 AM

Hi,
Sorry. Still the animation is not working. The index value of li is not changing when i click the menu item. And also i have given the code below. Please let me know whether i need to give <a href>for my li items. If i didnt give the container is not changing. Please let me know what is the mistake i have done.


<script language="javascript" type="text/javascript">


var sliderPos = ["0px","-900px","-1800px"];
alert("inside animation");

  $("ul").live("click","li",function(){
    var index = $(this).index(this);
    alert(index);
    $("#slider").animate({
        marginLeft:sliderPos[index]
    },900);
	

});

</script>


//This is the html
<div id="menucontainer">
    <div id="navMenu"  style="clear:both" align="center">
      <ul>
       
	  
        <li id ="style1" ><a  href="#cont1" class="red" >Home</a></li>
        <li id="style2"> <a href="#cont2" class="blue" >Services </a></li>
        <li id="style3"> <a href="#cont3" > Products </a>
            <ul>
              <li><a href="#">Wet Suit</a></li>
              <li><a href="#">Vacuum Cleaner</a></li>
              <li><a href="#">Pill Box</a></li>
              <li><a href="#">Knee Socks</a></li>
              <li><a href="#">Pirate Hat</a></li>
              <li><a href="#">Kilt</a></li>
            </ul>
          <!-- end inner UL -->
        </li>
        <!-- end main LI -->
        <li id="style4"><a href="" class="orange">Contact us</a></li>
      </ul>
      <!-- end main UL -->
    </div>
    <!-- end navMenu -->
  </div>
  <div id="content" >
    <div id="slider">
      <div id="cont1">Container 1 </div>
      <div id="cont2">Container 2</div>
      <div id="cont3">Container 3</div>
    </div>
  </div>
</div>
</div>
</div>
</body>
</html>


Thanks to all
Rekha

And also please let me know whether all the container has to be in the same page.

Thanks
Rekha
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Animation not working (javascript)

Posted 17 September 2013 - 10:06 AM

Change
var index = $(this).index(this);
to
var index = $(this).index();
to get the index you are looking for. if you put the keyword this in there it will always be 0.
Was This Post Helpful? 0
  • +
  • -

#5 rekha_kj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 14-September 11

Re: Animation not working (javascript)

Posted 23 September 2013 - 12:29 AM

Hi,
I tried this previously (without using this) but still it is not working. Please let me know if you find any other mistakes

Thanks
Rekha
Was This Post Helpful? 0
  • +
  • -

#6 rekha_kj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 14-September 11

Re: Animation not working (javascript)

Posted 03 October 2013 - 02:42 AM

Hi,
The animation is working in jsfiddle but not in browser. Can you please let me know what is the mistake iam doing whether in downloading jquery?

Thanks
Rekha
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,315
  • Joined: 12-December 12

Re: Animation not working (javascript)

Posted 03 October 2013 - 04:37 AM

Post your full code as it is now.

You can remove language="javascript" from script tags as it is obsolete, as are the comments <!-- --> around the script.

You also seem to have removed your code from the document.ready event. To do this you would need to place your code at the bottom of the page, just before the closing body-tag.

Also check your browser's console for any errors.

This post has been edited by andrewsw: 03 October 2013 - 04:38 AM

Was This Post Helpful? 0
  • +
  • -

#8 rekha_kj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 14-September 11

Re: Animation not working (javascript)

Posted 10 October 2013 - 02:20 AM

Hi,
Below is my full coding.



<!DOCTYPE html >
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	
	<title>Prime Source Technologies</title>
	
	<meta name="description" content="primesource for chassis,powersupplies"/>
	<meta name="keywords" content="computer chassis, computer powersupplies,computer accessories,computer networkcards,computer storagesolutions,primesource" />
	<meta name="author" content="Thiago S.F. - http://thiagosf.net" />
	
	<link href="menu.css" rel="stylesheet" type="text/css">
	<link href="maincss.css" rel="stylesheet" type="text/css">
<link type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/jquery-1.9.1.js"><!-- First jQuery -->
<!--<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/jquery-ui.js"></script>   <!-- THEN jQuery UI -->
	
<style type="text/css">
#cont1
{
top:-100px;
position:relative;
background:#33FFFF;
width:90%;
height:1000px;
overflow:hidden
}
#cont2
{top:-100px;
position:relative;
background:#CCFF00;
width:90%;
height:1000px;
overflow:hidden;
}
#cont3
{top:-100px;
position:relative;
background:#FF6666;
width:90%;
height:1000px;
overflow:hidden;
}

</style>
<script type="text/javascript">

var sliderPos = ["0px","-500px","-1000px"];

$("ul").on("click","li",function(){
    var index = $(this).index();
    alert(index);
    $("#slider").animate({
        marginLeft:sliderPos[index]},500);
});

</script>

<style type="text/css">
#body {
   /* margin:0px auto;*/
    width:100%;
	background-color:#000000;
	text-align:center;
	
 /*   height:466px;*/ 
    
   
}


</style>


</head>



<body>
<div id="container">
  <div id="leftarrow"> <a href="#"> <img src="leftarrow.jpg"></a> </div>
  <div id="rightarrow" ></div>
  <div id="menucontainer">
    <div id="navMenu"  style="clear:both" align="center">
      <ul>
        <li id="style1"><a href="" class="red">Home</a></li>
        <li id="style2"><a href="" class="blue">Services </a></li>
        <li id="style3"><a href="" class="green"> Products </a>
            <ul>
              <li><a href="#">Wet Suit</a></li>
              <li><a href="#">Vacuum Cleaner</a></li>
              <li><a href="#">Pill Box</a></li>
              <li><a href="#">Knee Socks</a></li>
              <li><a href="#">Pirate Hat</a></li>
              <li><a href="#">Kilt</a></li>
            </ul>
          <!-- end inner UL -->
        </li>
        <!-- end main LI -->
        <li id="style4"><a href="" class="orange">Contact us</a></li>
      </ul>
      <!-- end main UL -->
    </div>
    <!-- end navMenu -->
  </div>
  <div id="content" >
    <div id="slider">
      <div id="cont1">Container 1</div>
      <div id="cont2">Container 2</div>
      <div id="cont3">Container 3</div>
    </div>
  </div>

</div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,315
  • Joined: 12-December 12

Re: Animation not working (javascript)

Posted 10 October 2013 - 02:52 AM

The tag is named script, not link.

Also, as I mentioned, you are not waiting for the page to load before attempting to run your script. The page-elements will not be available for your script to refer to.

Either use the document-ready event or move your script to the bottom of your page, before the closing body-tag.
Was This Post Helpful? 0
  • +
  • -

#10 amit.soni   User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Animation not working (javascript)

Posted 10 October 2013 - 03:12 AM

remove line number 13
you are using invalid tag as well as invalid google jquery api src
replace with this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>



and put your code from line number 46 to 53 with in
$(document).ready(function(){});
OR
$(function(){});

like this

$(document).ready(function(){
   var sliderPos = ["0px","-500px","-1000px"];

   $("ul").on("click","li",function(){

       var index = $(this).index();

       //alert(index);

       $("#slider").animate({

           marginLeft:sliderPos[index]},500);

   });

});

This post has been edited by amit.soni: 10 October 2013 - 03:13 AM

Was This Post Helpful? 1
  • +
  • -

#11 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,315
  • Joined: 12-December 12

Re: Animation not working (javascript)

Posted 10 October 2013 - 03:23 AM

Yes, I never bothered to check this link:

src="//ajax.googleapis.com/ajax/libs/jquery/jquery-1.9.1.js">

because I assume it has been directly copied and pasted from somewhere, so shouldn't be wrong.

So: Always copy and paste these address(es), there should never be a reason to have to re-type them. Even if you do re-type it, you need to double and triple-check it. But, of course, the easiest way is just to enter the address in the address-bar.
Was This Post Helpful? 1
  • +
  • -

#12 rekha_kj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 14-September 11

Re: Animation not working (javascript)

Posted 10 October 2013 - 03:30 AM

Hi,
sorry for disturbing you again. Now i am able to get the index value correctly. But still the animation is not working.

Thanks
Rekha
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,315
  • Joined: 12-December 12

Re: Animation not working (javascript)

Posted 10 October 2013 - 03:33 AM

You could post your up-to-date code but you should also check your browser's console for error messages. There are links to the various consoles in my signature. You will find it difficult to work with Javascript without an understanding of the console.
Was This Post Helpful? 0
  • +
  • -

#14 amit.soni   User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Animation not working (javascript)

Posted 10 October 2013 - 03:58 AM

give a proper width to your #slider div for e.g.

#slider
{
  width:2500px;
}

now based on #slider width , give width to div(#cont1 , #cont2 , #cont3) within your #slider div
for e.g.

#cont1 , #cont2 , #cont3
{
    width:800px;
    display:inline-block;
}



now based on this give a proper slider position in your javascript(jQuery) code
for e.g.

var sliderPos = ["0px","-800px","-1600px"];



check this Fiddle

This post has been edited by amit.soni: 10 October 2013 - 04:05 AM

Was This Post Helpful? 0
  • +
  • -

#15 rekha_kj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 14-September 11

Re: Animation not working (javascript)

Posted 11 October 2013 - 12:51 AM

Hi all,
At last it is working. Thanks to all for your timely help.

Thanks
REkha

This post has been edited by andrewsw: 11 October 2013 - 01:01 AM
Reason for edit:: Removed quote

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2