jQuery Forum

I have a jQuery accordion on my site which is loaded into a div by AJAX after the main page has loaded.

In the following code block the variable 'side' is not being translated in the line beginning 'margin-side...'

Can anyone see what I'm doing wrong please?

1. function centerElement(divid,side)
       {
           divid = "#"+divid;
           jQuery(divid).css({
               top:'50%',
               side: (((jQuery(window).width() - 940)/2)/2) + 'px',
               margin-top:'-' + ( jQuery(divid).height() / 2 )+'px',
               margin-side:'-' + ( jQuery(divid).width() / 2 )+'px'
               });
       }
      
   jQuery(document).ready(function($) {
       centerElement('lhs_adsense','left');
       centerElement('rhs_adsense','right');
   });
   

Many thanks.


Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I thought this was going to be trivial!!

I have a div, which I want to change colour when it is clicked.

The html:

1.     <div id="goContBtn">
           <div>
               GO!
           </div>
       </div>
   

The css:

1. #goContBtn {
       float:left;
       margin:80px 0 0 150px;
       width:100px;
       height:100px;
       cursor: pointer;
   }
   
   #goContBtn .neutral {   
       background-color: green;
   }
   
   #goContBtn .failedValidation {   
       background-color: red;
   }
   

JavaScript:

1.     jQuery(document).find(function() {
           $('#goContBtn').click(function() {
               $('#goContBtn').addClass('failedValidation');
           });
       });
   
       $(function() {
           // format the go button with default formatting
           $('#goContBtn').addClass('neutral');
       });
   

The javascript is between script tags below the html. The page already has a jQuery accordion and tooltips working on it. I'm just wondering whether I have misunderstood the impact of changing a class after page rendering?

The code above is test code and won't actually just directly change the colour of the div, it will be dependant on validation.

Thanks for your help.


Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I've got a script which produces a slide down notification at the top of the screen, which is called using showMessage('warn', 'This is a warning message').

It used to use showMessage('warn'); which would be enough for it to show the normally hidden div. The thing is that I've converted the script to accept a dynamic message, passed as a parameter. That works, but not perfectly.

It's complicated by the animation which runs to slide the message on and off the screen. This involves calculating the height of the div, which could be done before, when the div contained static HTML, but now the div is actually empty and is only populated with a message when called, the calculation fails. I think this is because outerHeight() can't detect the presence of the dynamic HTML.

I've got a fiddle here http://jsfiddle.net/KHkW7/30/

Any suggestions would be greatly appreciated! Thanks.

Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I have a jQuery function which when run wrapped in a click handler, works nicely. It causes a notification div at the top of the screen, to gracefully slide up out of the view port.

The problem is that when I run the same function inside a timeout (so that if the user doesn't click the message to remove it, it will remove itself after 8 seconds), it doesn't slide but is just removed suddenly after 8 seconds.

This is the function in the timeout that isn't working correctly:

1. setTimeout(function(){
       $(this).animate({top: -$(this).outerHeight()}, 500);
       hideAllMessages();
2. },8000);
   

and this one is the same function in a click handler, which works fine.

1. $('.message').click(function(){
        $(this).animate({top: -$(this).outerHeight()}, 500);
        hideAllMessages();
2. });
   

Can anyone explain why this might be happening please?

Many thanks.

Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I'm using a tooltip plugin which is working perfectly on the first page I implemented it on, but on another page, they only seem to work if the page is loaded via the main CSS menu which uses ajax to pull the page into a content div (same as with the first page).

That's working fine, but the trouble is, that some of the pages, such as the second page are accessible via links appearing outside of the main menu and when called using those links, (which use a different ajax loader) the tooltips don't work.

The main menu uses a Jquery ajax loader and the other links use a home made ajax loader (which works in all other respects).

The pages with tooltips in them (actually, they're not pages but content pulled in via ajax), have the following code at the top to initiate the tooltips:

1. <script type='text/javascript'>
       //<![CDATA[
       jQuery(document).ready(function($) {
           Tipped.create(".warn-tt", {
               skin: 'warn-skin'
           });
           Tipped.create(".info-tt", {
               skin: 'info-skin'
           });
           Tipped.create(".instruct-tt", {
               skin: 'instruct-skin'
           });
       });
       //]]>
   </script>
   

Would I be correct in assuming that Jquery is doing something 'special' to activate the above code, that my ajax loader just doesn't do?

Very confused! Please help!

Thanks.


Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

Hi, and thanks for your previous help.

I have a function which is triggered when users click on a menu item in the main menu. It check whether the href attribute for the menu item is set (if not it will return true) and if it is, will make an ajax request. The returned data will be checked for the string, "session-timeout" and if present, the user is redirected to the index page. If not present, the old content will be faded out and the new faded in.

At least that's how it's supposed to work in theory. In practice, I can't get the "session-timeout" to trigger the redirection because I can't get the if statement to work properly.

Here's the code:

1.     $('#nav li a').click(function(e) {
               // Figure out which method to use, this one or the original?
               $('#nav li').children('ul').stop().slideUp(300);
               var h = $(this).attr('href');
               if (h.length > 1){
                       e.preventDefault();
                       $.get( h, function(data) {
                           if (data.indexOf('session-timeout')) {
                               // timeout received, so redirect to login.
                               window.location="index.php";
                               exit;
                           } else {
                               $('#contentMAIN').fadeOut(500,function() {
                                   $(this).html(data).fadeIn(500);
                               });
                           }
                       });
                   //    var thisURL = location.href;
                   //    if( thisURL.indexOf('<search-page-url.html>') ) { myQuote.hide(); }
                   // Prevent the hyperlink from activating in the traditional way
                   return false ;
               } else {
                   // Return and allow other actions to be activated
                   return true;
               }
           });
       });
   

Perhaps someone would be kind enough to tell me where I'm going wrong please?

Kind regards,



Peter
A Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I adapted Jakes code from this thread to try to make my original content fade out, pending the fading in of replacement content, the product of an ajax call.

This is my code:

1. $(function() {
       $('#nav li a').click(function(e) {
           // Figure out which method to use, this one or the original?
           // If the href attribute is set, then it's been converted to use this method.'
           var hr = $(this).attr('href');
           if (hr.length > 1){
               e.preventDefault();
               $.get( $(this).attr('href'), function(data) {
                       $('#contentMAIN').fadeOut(500,function() {
                           ($('#contentMAIN').html(data),function() {
                               $('#contentMAIN').fadeIn(500)
                           })
                       })
                   })
                  // Prevent the hyperlink from activating in the traditional way
                  return false ;           
           } else {
               // Return and allow other actions to be activated
               return true;
           }
       });
   });
   

What happens is that the div with id "#ContentMAIN" is successfully fading out, but the new content is not appearing.

I'm hoping that someone could show me what I'm doing wrong please?

Many, many thanks!


Peter
Linux Admin

Willing to help maintain Linux servers remotely for a tiny consideration into my Paypal account :-)

I wish to have a navigation bar containing a bunch of links, which when clicked, fetches the relevant file from the server and displays it in a div.

The problem is that I've been searching for the past three hours for a way to pass the url to the jQuery script for the load function. All of the dozens of ajax tutorials I found, assumed that I would be happy to hard code the url of the file I want to load, directly into the javascript rather than passing it with the event.

Obviously if I do it their way, I'll end up with a dedicated function for every link. So how should I pass the url that I want to load?

Thanks.

I'm building a PHP web application which makes extensive use of JavaScript, most of which I'm hoping to convert to using Jquery.

The application essentially consists of two div containers, one for the header/navigation area and another for the content to be displayed in. The navigation area loads the content into the content div using ajax.

My problem is that the elements in the content are complete ignored by JQuery and appear to be invisible to it. I guess because the JQuery initialization thing ran when the page was first loaded rather than each time new content is loaded.

The effect of this is that cool things like JQuery tool tips don't work in the content area.

By the way, at the moment, the ajax code used to load the page is not the JQuery method but a custom one. I won't easily be able to convert that.

What would be the correct way to overcome this please?

Thanks.

(please be gentle with me - this is my first application to use JQuery on!)

Pete