Page 1 of 1

jQuery

Posted: Mon Jan 29, 2007 9:44 am
by impulse()
I've have been strongly recommended to try jQuery which I am now in the process of doing. But it all seems a little strange to me and I can't quite graps the layout for it. I've looked through the tutorials but none give an overall code example and other tutorials seem to randomly put examples within examples which makes it hard to understand which is the example I want to be looking at. It may be best if I just paste a code example I have and see if you can correct my mistake:
This was modified from the jQuery.com website:

Code: Select all

<html>
  <head>
    <script type='text/javascript' src='jq.js'></script>
    <script type='text/javascript'>
      $("p").focus();
    </script>
  </head>

  <body>
    <a href='http://jquery.com/'> jQuery </a>
    <p> Hello, test here </p>
  </body>
</html>
I expect that to create a popup box saying "Hello, test here" because on jQuerys website it says the equvilent Javascript code for what I posted above would be "alert('Hello, test here');

Regards,

Posted: Mon Jan 29, 2007 11:22 am
by Kieran Huggins
if you want to create and alert() use alert()... if you want one alert per p element, and the alert to alert the inside of the p element, use:

Code: Select all

$('p').each(function(){
   alert($(this).html());
})
If you want to run it as soon as the page has loaded:

Code: Select all

$(function(){
   $('p').each(function(){
      alert($(this).html());
   });
});
I've found http://www.visualjquery.com/new.html to be very useful

Posted: Mon Jan 29, 2007 1:56 pm
by nickvd
jQuery's selectors are very useful, but different than what you'd expect...

As i'm sure you know, it uses css selectors to determine which element(s) are being selected to be manipulated. As a result, a single call can result in many, many elements being selected and available to be poked and prodded...

I'll try to outline a few different examples:

Code: Select all

$('p').hide(); // hide EVERY SINGLE paragraph found on a page

$('#nav a').hide(); //hide all anchors (links) within the element with an id of 'nav'

$('#nav ul ul').hide(); //hide all nested UL's within the element with an id of 'nav' (useful for drop down menus)

// a favourite of mine, this will add a class name of 'active' to each anchor (link) element found within the element with the id of 'menu', but only the one(s) that have the current page name (this page would be 'posting.php') at the end it's href element. (used to highlight the current page)
$('#menu a[@href$=' + location.pathname.substring(1) + ']').addClass('active'); 

$('#menu a').click(function(){this.blur();}); //this is a workaround for a small firefox annoyance, where the outline around the link you just clicked stays there until you click elsewhere.
jQuery can be a real pain in the arse, but stick with it, read their docs and mailing list, post here, and most importantly, PLAY! It's much easier to learn how it works when you take a normal page, with lots of different elements, and just take your time determining how to select the element or elements you want to work with.

Hope this helped a little :)

Posted: Mon Jan 29, 2007 2:42 pm
by Kieran Huggins
nickvd wrote:

Code: Select all

$('#menu a[@href$=' + location.pathname.substring(1) + ']').addClass('active');
Nice one! I'll have to remember that... :-)

Posted: Mon Jan 29, 2007 2:44 pm
by Luke
I'm going to download this right now. I've been meaning to start with it, so I guess now is as good a time as any.

Posted: Mon Jan 29, 2007 3:13 pm
by impulse()
Sorry to have to be a pain.

I've consulted jQuerys documentation but I don't see it as being clear enough to explain what a typical HTML/PHP file should look like that's using jQuery functions. At the moment, as a test, I've wrote a PHP file that has 2 paragraphs and then jQuery should come along and hide those paragraphs. But it's as if jQuery isn't doing anything. This is what my PHP file looks like:

Code: Select all

<html>
  <head>
    <title> Hello </title>
  </head>

  <body>

    <p> Hello, Stephen here </p>
    <p> How do you do? </p>

    <script type='text/javascript' src'jquery.js'>
      if($.browser.msie) { $( function() { alert("this is IE!"); } ); }
      $("p").hide()
    </script>

  </body>
</html>
I know there's no PHP in that file but PHP files are what I'll be using if I can get jQuery to work correctly. jquery.js is located in the same directory as the file above. Any ideas on where I'm going wrong?

Regards,

Posted: Mon Jan 29, 2007 3:15 pm
by nickvd
Kieran Huggins wrote:
nickvd wrote:

Code: Select all

$('#menu a[@href$=' + location.pathname.substring(1) + ']').addClass('active');
Nice one! I'll have to remember that... :-)
It's so damn handy :)

You'd be wise to add some checks and balances in there, a default filename, etc...

Code: Select all

var path = location.pathname.substring(1) ;
path = (path) ? path : 'index.php';
$('#menu a[@href$=' + path + ']').addClass('active');

Posted: Mon Jan 29, 2007 3:25 pm
by nickvd
impulse() wrote:Sorry to have to be a pain.

I've consulted jQuerys documentation but I don't see it as being clear enough to explain what a typical HTML/PHP file should look like that's using jQuery functions. At the moment, as a test, I've wrote a PHP file that has 2 paragraphs and then jQuery should come along and hide those paragraphs. But it's as if jQuery isn't doing anything. This is what my PHP file looks like:

Code: Select all

<html>
  <head>
    <title> Hello </title>
  </head>

  <body>

    <p> Hello, Stephen here </p>
    <p> How do you do? </p>

    <script type='text/javascript' src'jquery.js'>
      if($.browser.msie) { $( function() { alert("this is IE!"); } ); }
      $("p").hide()
    </script>

  </body>
</html>
I know there's no PHP in that file but PHP files are what I'll be using if I can get jQuery to work correctly. jquery.js is located in the same directory as the file above. Any ideas on where I'm going wrong?

Regards,
Give this a try. I havent tested it, but it should work.

Code: Select all

<html>
  <head>
    <title> Hello </title>
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript'>
       $(document).ready(function(){
         if($.browser.msie) { 
            alert("this is IE!"); 
         }
         $("p").hide();
       });
    </script>
 
 </head>

  <body>

    <p> Hello, Stephen here </p>
    <p> How do you do? </p>

  </body>
</html>

Posted: Mon Jan 29, 2007 3:32 pm
by impulse()
I just see:

" Hello, Stephen here

How do you do? "

I had this a couple of weeks ago where jQuery didn't work and I gave up on jQuery but I have to use its functionality now so I can't give up. I tried specifying the full directory in the src = 'x' but that doesn't make any different. Do you have any ideas what might be causing this?

Posted: Mon Jan 29, 2007 3:42 pm
by nickvd
What does

Code: Select all

alert(jQuery.fn.jquery);
show you?

I just tested the code I posted, and it works fine for me...

Posted: Mon Jan 29, 2007 3:49 pm
by impulse()
It shows the same as before.

I think it's best I speak to the jQuery team regarding this. Strange thing is though, I couldn't get jQuery working at work earlier which runs on freeBSD and it wont work at home using Linux.

Posted: Mon Jan 29, 2007 3:54 pm
by nickvd
no no no, what i mean is, add alert(jQuery.fn.jquery); to your code, and refresh the page, it should pop up an alert box with the version of jquery you're running... (or download the current version [1.1.1]).

I'd bet that you don't have the path to jquery right..

Posted: Mon Jan 29, 2007 3:56 pm
by impulse()
Now that was strange. I renamed the file to a .HTML file and changed single quotes to double quotes and it started working.

Posted: Mon Jan 29, 2007 3:57 pm
by Kieran Huggins
You can't embed code in script tags that have a src... instead use:

Code: Select all

<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'>
$(function(){
	if($.browser.msie) { 
	   alert("this is IE!"); 
	}
	$("p").hide();
}
</script>