Follow us on Twitter!
I'd prefer to die standing, than to live on my knees - Che Guevara
Thursday, April 24, 2014
Navigation
Home
HellBoundHackers Main:
HellBoundHackers Find:
HellBoundHackers Information:
Learn
Communicate
Submit
Shop
Challenges
HellBoundHackers Exploit:
HellBoundHackers Programming:
HellBoundHackers Think:
HellBoundHackers Track:
HellBoundHackers Patch:
HellBoundHackers Other:
HellBoundHackers Need Help?
Other
Members Online
Total Online: 32
Guests Online: 26
Members Online: 6

Registered Members: 82903
Newest Member: Piriformis
Latest Articles
View Thread

HellBound Hackers | Computer General | Programming

Author

Problem in JQuery code

goluhaque
Member



Posts: 197
Location: India
Joined: 17.02.10
Rank:
Apprentice
Warn Level: 30
Posted on 09-05-10 08:00
I have got a problem in this JQuery code. It is not working on any browser(have JS enabled).
Code
<html>
<head>
<title>Select a paragraph</title>
   <script src="D:\JSQuery\jsquery.js"></script>
   
   <script type=”text/javascript”>
      function stripe( ) {
      $(‘#third’).toggleClass(‘striped’);;
   }
   </script>
   <style>
      p.striped {
      background-color: red;
      }
   </style>
</head>
<body>
   <h1>Select a paragraph</h1>
   <div>
      <p>This is paragraph 1.</p>
      <p>This is paragraph 2.</p>
      <div id=”third”>This is paragraph 3.</div>
      <p>This is paragraph 4.</p>
   </div>
   <form>
      <input type = 'Submit' value=Stripe onclick='stripe( )' />
   </form>
</body>
</html>





That applause I receive from y'all on posting this post would have gotten me drunk on power if I hadn't already been high on life.
Author

RE: Problem in JQuery code


Member

Your avatar

Posts:
Location:
Joined: 01.01.70
Rank:
Guest
Posted on 12-05-10 04:46
goluhaque wrote:
I have got a problem in this JQuery code. It is not working on any browser(have JS enabled).
Code
<html>
<head>
<title>Select a paragraph</title>
   <script src="D:\JSQuery\jsquery.js"></script>
   
   <script type=”text/javascript”>
      function stripe( ) {
      $(‘#third’).toggleClass(‘striped’);;
   }
   </script>
   <style>
      p.striped {
      background-color: red;
      }
   </style>
</head>
<body>
   <h1>Select a paragraph</h1>
   <div>
      <p>This is paragraph 1.</p>
      <p>This is paragraph 2.</p>
      <div id=”third”>This is paragraph 3.</div>
      <p>This is paragraph 4.</p>
   </div>
   <form>
      <input type = 'Submit' value=Stripe onclick='stripe( )' />
   </form>
</body>
</html>



Here's a list of things to do:

1. Instead of just <html>, use a defined DOCTYPE. That will fix a load of things across various versions of IE.
2. Instead of just <style>, use <style type="text/css">.
3. You have two semi-colons after .toggleClass('whatever').
4. The button that triggers your function is a submit element in a form. That will submit the form. Make it a type="button".
5. The div with id "third" is not a <p> (see your CSS).
6. Use error console, alerts, and Firebug + console.log to figure out where your code fails... then, you're more likely to figure out the issues and learn from them.


Author

RE: Problem in JQuery code

goluhaque
Member



Posts: 197
Location: India
Joined: 17.02.10
Rank:
Apprentice
Warn Level: 30
Posted on 12-05-10 05:02
Thanks guys, fixed the problem. There were many errors. It was my 2nd JQuery code btw. Here's the new code.
Code

<html>
<head>
<title>Select a paragraph</title>
   <script src="D:\JSQuery\jsquery.js"></script>
   
   <script type='text/javascript'>
      function stripe( ) {
      $('#third').toggleClass('striped');;
   }
   </script>
   <style>
      .striped {
      background-color: white;
      }
   </style>
</head>
<body bgcolor="black">
   <font color="white">Wanna see something? Press the Stripe button.</font>
   <div>
      <p>This is paragraph 1.</p>
      <p>This is paragraph 2.</p>
      <p id='third'>LOLWOOt</p>
      <p>This is paragraph 4.</p>
   </div>
   <form>
      <input type = 'Button' value=Stripe onclick='stripe( )' />
   </form>
</body>
</html>







That applause I receive from y'all on posting this post would have gotten me drunk on power if I hadn't already been high on life.
Author

RE: Problem in JQuery code


Member

Your avatar

Posts:
Location:
Joined: 01.01.70
Rank:
Guest
Posted on 12-05-10 12:57
MoshBat wrote:
Putting CSS in a separate file has it's merits, too.

For organization and caching, yes. For delivery, it's slower to use an external css file than it is to have it in the coded page. Same with external JS. Of course, with PHP and gzip compression/regex minifying/output buffering/includes, we can just let the page pretend the files were always there.

If you don't specify the type="text/css" in the style tag, the browser will try to interpret an external CSS file as text/html. No idea what effect it has on internal CSS, but coding correctly generally prevents most issues.

Same with the DOCTYPE... IE is heavily dependent on that so, if you're coding cross-browser, you need one. Most likely, the HTML 4.01 Transitional one, since most dabblers probably can't adhere to XHTML 1.0 Strict.

goluhaque wrote:
There were many errors. It was my 2nd JQuery code btw.

Glad you got it fixed. In order to use jQuery effectively, you need to have a good grasp of HTML and CSS. It couldn't hurt to practice with those a bit more to become more fluent in them. jQuery is a powerful tool, but you have to be telling it the right things or it won't work.

Also, the <font> tag is deprecated. Use the CSS color attribute on a span or something. ... and use hex colors instead of the words for the colors. Black is # 000 (or the longer # 000000) and white is #fff (or the longer #ffffff). Ignore the spaces between the # and 0's in the black color codes; just that pesky filter again.




Edited by on 12-05-10 13:04