jQuery Forum

Hello, I know in JavaScript you are able to write functions that you can just call at a later time. I'm working on a jQuery UI slider, and I wrote a function for the animation that happens when you start sliding. I would also like this same function to fire for the "change" event, but I can't seem to get it to work.

Here is the shortened code sample:

1. $(function(){
2.       var posterO = $(".poster-slider")
3.       .slider({
4.             slide: function(event, ui){      //This is the function I would like to reuse at "change", below
   
5.                   poster.css(...);
6.                   posterLi.css( ... );
7.                   ptCopy.css( ... );
8.                   sliderValue = ui.value;
9.             },
10.             //change:,
    
11.             animate:true
12.       });
13.       //When "#abundant-trees" link is clicked, the slider handle changes, firing the "change" event, but the "slide" function is not called.
    
14.       $("#poster-switcher a[href=#abundant-trees]").click(function(link){
15.             posterO.slider("value", 100);
16.             link.preventDefault();    //Stop browser from following the link that was clicked on.
17.       })
18. });

I would like to apply the "slide" function to the "change" event without having to duplicate all the code.

I am having a problem with a function I am trying to write. I can't change the CSS on the second list item because it's telling me that "css is not a function."

I am trying to make it so that when you hover over one of the list item points, it will show the copy related to that item in a separate box.

Here is a sample code:

HTML

1. <ol class="poster-list" id="poster-list">
2.       <li class="pt-1">1</li>
3.       <li class="pt-2">2</li>
4.       <li class="pt-3">3</li>
5. </ol>
6. <ol class="pt-copy" id="pt-copy">
7.       <li class="pt-copy-1"><b>Treeless Parking Lots</b></li>
8.       <li class="pt-copy-2"><b>Treeless Streets</b></li>
9.       <li class="pt-copy-3"><b>Asphalt Playgrounds</b></li>
10. </ol>

JavaScript/jQuery

1. $(function(){
2.       $("#poster-list li").hover(function(){
3.             var ptX = $(".poster-list li").index($(this));      //Find the index of this list item.
4.             $(".pt-copy").css("display","block");      //Shows the containing UL
5.             var ptCopyX = $("#pt-copy li")[ptX];      //Uses index to find matching list item in second list.
6.             alert(ptCopyX);      //Results in "[object HTMLLIElement]"; innerHTML shows the element matches.
7.             ptCopyX.css("display","block");      //Error: "ptCopyX.css is not a function."
8.       });
9. });

I feel like the solution will be really obvious, but I'm stuck.

Hello, I'm building my first jQuery Mobile website and I wanted to know what the advantages and disadvantages of the two page methods were.

As far as I can tell, it comes down to page weight vs. server requests.

• A single page is going to be super-heavy as it has to load all site content at one time, but would potentially be more responsive after that initial hit.
• Multiple pages will be more lightweight initially, but will then cause several additional hits to the server as the AJAX preloads potential pages the user may click. It may also be less responsive if the next page has yet to load.

Are there any other considerations?