8 Replies - 33472 Views - Last Post: 06 November 2013 - 06:01 PM

#1 insik   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 31-January 12

JQuery not working in Chrome

Posted 05 November 2013 - 07:39 PM

I have a simple JQuery script which is slideToggle and it works fine in IE and Firefox but not in
Google Chrome. I don't know if the root of this problem comes from Chrome or from my script.

Can anyone help me with this?

This is my code:
<html>
  <head>
   <title></title>
   <style type="text/css">
#checkout, #panel
{
float:right;
width:80px;
height:20px;
text-align:center;
background:#554917;
}
#checkout{
	position:absolute;
	top:5px;
	left:5px;
	background:none;
}
 #checkout a{
 width:80px;
	padding:10px;
	background:yellow;
 }
#panel
{
width:174px;
height:65px;
display:none;
position:absolute;
top:35px;left:5px;
border-radius:2px;
box-shadow:2px 1px #261a19;
}

   </style>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script> 
$(document).ready(function(){
  $("#checkout").click(function(){
    $("#panel").slideToggle("fast");
  });
});
</script>
  </head>
  <body>
    <div id='checkout'><a href="#" style='line-height:20px;'>Click Me</a></div>
				
	<div id="panel">
	</div>
	
  </body>
</html>


This post has been edited by insik: 05 November 2013 - 07:40 PM


Is This A Good Question/Topic? 0
  • +

Replies To: JQuery not working in Chrome

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4246
  • View blog
  • Posts: 13,461
  • Joined: 08-June 10

Re: JQuery not working in Chrome

Posted 05 November 2013 - 11:21 PM

if itís a problem with the script, it will be mentioned in the Error Console.

but tbh, your current code has no content to toggle.

and another problem, you define a click handler on the <div> and place a link inside? that link has absolutely no purpose there, you can remove it.
Was This Post Helpful? 0
  • +
  • -

#3 insik   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 31-January 12

Re: JQuery not working in Chrome

Posted 06 November 2013 - 12:02 AM

The purpose of that link inside is changing the arrow pointer to pointing finger and people will obviously know that
it's a link. :rolleyes:
I did not put content to toggle because I just want to see the #panel sliding for testing purpose only and it works fine
in other browsers except chrome.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4246
  • View blog
  • Posts: 13,461
  • Joined: 08-June 10

Re: JQuery not working in Chrome

Posted 06 November 2013 - 12:07 AM

View Postinsik, on 06 November 2013 - 08:02 AM, said:

The purpose of that link inside is changing the arrow pointer to pointing finger and people will obviously know that
it's a link. :rolleyes:

why donít you use CSS for that? :rolleyes:
Was This Post Helpful? 0
  • +
  • -

#5 insik   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 31-January 12

Re: JQuery not working in Chrome

Posted 06 November 2013 - 12:14 AM

Never mind the pointer. What I want to know is why my jquery code is not working in chrome. Is it possible that there's chrome setting that prevent jquery script in running?
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6831
  • View blog
  • Posts: 28,338
  • Joined: 12-December 12

Re: JQuery not working in Chrome

Posted 06 November 2013 - 02:58 AM

Did you check the console for errors as Dormilich suggested?

When testing from Google Chrome I have to add "http:" in front of the link to the jQuery library.
Was This Post Helpful? 1
  • +
  • -

#7 laytonsdad   User is offline

  • Let it rip!
  • member icon

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

Re: JQuery not working in Chrome

Posted 06 November 2013 - 11:22 AM

When using jQuery from a CDN and testing outside of a server using file:// you need to use the protocol http:// so that the browser knows to request it from a separate server.

This post has been edited by laytonsdad: 06 November 2013 - 11:23 AM

Was This Post Helpful? 1
  • +
  • -

#8 insik   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 31-January 12

Re: JQuery not working in Chrome

Posted 06 November 2013 - 05:52 PM

This is the error in error console Uncaught ReferenceError: $ is not defined .
Was This Post Helpful? 0
  • +
  • -

#9 insik   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 74
  • Joined: 31-January 12

Re: JQuery not working in Chrome

Posted 06 November 2013 - 06:01 PM

Changing this line:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

to

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

works.

thank you guys. :xmas:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1