jQuery Forum

i just finished my script. But can you provide me with some feedback to optimize / shorten this code...

For a demo see: http://parkdomain.nl/test2.html. And click the google maps en youtube button.

1. var mapStatus = {'gm': 0, 'yt': 0};
   var mapURLs = {'gm': '/search/gmaps/IdDaytrip/', 'yt': '/search/youtube/IdDaytrip/'};
   
   $(document).ready(function(){
       var fClick = function(){
           var ext = $(this);
           loadContent(ext, mapURLs[$(this).attr('class')] + ext.attr('value') + '.html', $(this).attr('class'));
       }
       for(x in mapURLs) $('.' + x).bind({click: fClick});
   });
   
   function loadContent(ext, url, type) {
       var content = ext.parent('div').parent('div');
       if(mapStatus[type] == 0){
           if($('#extra').length) {
               $('#extra').slideToggle(2000, function () {
                   $('#extra').remove();
                   $.get(url, function (data) {
                       $(data).insertAfter(content);
                       $('#extra').slideToggle(2000, function(){
                           for(x in mapStatus) mapStatus[x] = 0;
                           mapStatus[type] = 1;
                       });
                   });
               });
           } else {
               $.get(url, function (data) {
                   $(data).insertAfter(content);
                   $('#extra').slideToggle(2000, function(){
                       for(x in mapStatus) mapStatus[x] = 0;
                       mapStatus[type] = 1;
                   });
               });
           };
       } else {
           var open = true;
           if(type == "yt" && content.next('div').attr('id') == "extra"){
               open = false;
           }
           if(type == "gm" && content.next('div').attr('id') == "extra"){
               open = false;
           }
   
           for(x in mapStatus) mapStatus[x] = 0;
           $('#extra').slideToggle(2000, function () {
               $('#extra').remove();
               if(open){
                   loadContent(ext, url, type);
               }
           });
       }
   }
   

I'm using jQuery to load content through AJAX and display the loaded content on my page using the slideDown effect. But i need a small modification on the current script, so when the user clicks the same button again the content div slides up.

1. $(document).ready(function() {
       $(function() {
       $('.gm').bind({
           click: function() {
           var ext = $(this);
           loadContent(ext, '/search/gmaps/IdDaytrip/' + ext.attr('value') + '.html');
           }
       });
   
       $('.yt').bind({
           click: function() {
           var ext = $(this);
           loadContent(ext, '/search/youtube/IdDaytrip/' + ext.attr('value') + '.html');
           }
       });
       });
   });
   
   function loadContent(ext, url) {
       var content = ext.parent('div').parent('div').next();
       content.slideUp(content.is(':hidden') ? 0 : 2500, function() {
           $.get(url, function(data) {
               content.html(data).slideDown(2500);
           });
       });
   }
   

hi there,

i have two buttons one YouTube and a GoogleMaps. When you click the YouTube button the content is loaded into a div (class: extra) and it will be shown on the page with a slideDown effect. The same function is added for the GoogleMaps button.

So when the content div is filled with a googleMaps and you click the youTube button the extra div will slideUp, filled with a movie and then it will slideDown.

This is working fine with the code below.

But i need one extra functionallity. When you click on the samen button the content div (class: extra) has to slideUp en all his child elements has to be removed.

Can someone help editting my code?

1. <script type="text/javascript">
2. $(document).ready(function() {
3.     $(function() {
4.     $('.gm').bind({
5.         click: function() {
6.         var ext = $(this);
7.         loadContent(ext, '/search/gmaps/IdDaytrip/' + ext.attr('value') + '.html');
8.         }
9.     });
10.     $('.yt').bind({
11.         click: function() {
12.         var ext = $(this);
13.         loadContent(ext, '/search/youtube/IdDaytrip/' + ext.attr('value') + '.html');
14.         }
15.     });
16.     });
17. });
18. function loadContent(ext, url) {
19.     var content = ext.parent('div').parent('div').next();
20.     content.slideUp(content.is(':hidden') ? 0 : 2500, function() {
21.         $.get(url, function(data) {
22.             content.html(data).slideDown(2500);
23.         });
24.     });
25. }
26. </script>

using the code below it will load some content into a div and will display it with a nice toggle effect. when i click the gm button it will load a google maps into the extra div. when i hit the yt button it will load an youtube movie into the extra div.

but when a google map is displayed, and a user clicks the yt button it has to toggle (hidden) the extra div first, then load the content, and in the end it has to toggle the div again.

but now it's loading the content, toggle the div (hidden), and then toggle it again...

1. $('.gm').bind({
2.     click: function() {
3.         var ext = $(this);
4.         if (ext.parent('div').parent('div').next().css('display') == 'block') {
5.             ext.parent('div').parent('div').next().slideToggle(2500);
6.         }
7.         $.get('http://daytrip.dev/search/gmaps.html', function(data) {
8.             ext.parent('div').parent('div').next().html(data).slideToggle(2500);
9.         });
10.     }
11. });
12. $('.yt').bind({
13.     click: function() {
14.         var ext = $(this);
15.         if (ext.parent('div').parent('div').next().css('display') == 'block') {
16.             ext.parent('div').parent('div').next().slideToggle(2500);
17.         }
18.         $.get('http://daytrip.dev/search/youtube.html', function(data) {
19.             ext.parent('div').parent('div').next().html(data).slideToggle(2500);
20.         });
21.     }
22. });

adsf

i'm trying to load a youtube video through an ajax call into the page.

loading the youtube video is working fine, but the slideDown effect is verry crap (shaky) for youtube video's. When i load just text or images or a google maps it's working perfectly smooth.

is there a solution for this?

my code:

1. jQuery('#yt0').live('click',function(){
2.     jQuery.ajax({'complete':function(){
3.         $("#test").slideToggle(2500);
4.     },
5.         'url':'video.html',
6.         'cache':false,
7.         'success':function(html){
8.             jQuery("#test").html(html)
9.         }
10.     });
11.     return false;
12. });