Rectangle 27 86

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle('slow');
      return false;
  }).next().hide();
});

"I may be an idiot" - You're not an idiot if you don't read the documentation, but if you're having problems, it usually speeds up finding a solution.

"I may be an idiot" - You're not an idiot if you don't read the documentation

This solution doesn't do any of the accordion styling.

Furthermore, this is no solution to the question at all. The accordion docu and list of options, events, etc. is just poor. And instead of telling the user "if we dont have the options for you - dont use it!" they should say "sorry that there is no option for that yet, but we welcome any contributors that add functionality to our great plugin"

I couldn't find that quote in the documentation.......?

"it takes a lot of effort to do that" ... no, it doesn't. It's a matter of a few lines of code.

javascript - jQuery UI accordion that keeps multiple sections open? - ...

javascript jquery html jquery-ui
Rectangle 27 3

When the page first loads the tab contents loads without jquery styling (as a long linear list)

First lets solve that loading problem...

A simple workaround to load your tabs a little nicer is to set display: none; on the tab's parent and then use .show() to make them appear once everything is nice and loaded like so:

#tabs {
    display:none;
}

 $(function () {
     $("#tabs").show().tabs();
 });

Now on to the main issue... Surprisingly this can be solved easily by adding a negative top margin and some padding to the tab's content

.ui-tabs .ui-tabs-panel {
    padding-top: 65px;
    margin-top: -50px;
}

Basically you're pulling the panel up with the negative margin and then pushing the content in the panel back down with the padding. This brings the top of the panels to the top of the tab widget and gives the pleasant side effect of letting the tab links rest comfortably in view when navigating to the page with a tab specified.

When I did this. The background of the tab over runs the header of the page (above the tabs that are located on top)

@David__ try playing around with the padding-top value, try and increase it to 70, 80...200px etc.

Linking to Jquery UI tab from external page scrolls to bottom of page ...

jquery jquery-ui tabs jquery-ui-tabs
Rectangle 27 1

Not quite sure what you are doing, but when you add a DefaultButton attribute to an asp:Panel then it adds something like this to the rendered div:

onkeypress="javascript:return WebForm_FireDefaultButton(event, 'Button1')"

You can remove that attribute using jQuery by doing something like:

$("#Panel1").removeAttr("onkeypress");

(Assuming the ClientID of your Panel is Panel1). Hope that is of some help!

I already solved the problem before I looked up this solution, through some alternate way, but this is the exact answer of my question. Therefore +1 and accepted as answer.

jquery - How can I disable the DefaultButton of an asp:Panel at Client...

jquery asp.net javascript-events panel preventdefault
Rectangle 27 1

Not to sound like a salesman, but I recently picked up a copy of Ajax Security (http://www.amazon.com/Ajax-Security-Billy-Hoffman/dp/0321491939/ref=sr_1_1?ie=UTF8&s=books&qid=1278874728&sr=8-1) and it had a good one chapter explanation and comparison of various Ajax libraries and frameworks in terms of not only security but also speed. If you don't find your answer, I would recommend that book.

I personally would use jQuery because you have a finer control over what is actually loaded. The Update Panel, as I understand, updates all of its contents. You can't pick and choose what is updated inside it, whereas with jQuery, you have absolute control.

As for degrading gracefully: The only reason I can think of why the Update Panel or jQuery AJAX wouldn't work (assuming the server is configured correctly and there are no errors in the JS) is that the browser doesn't support Ajax. If this is the case, neither methods will work. So, I wouldn't worry about the differences between the two in that regard.

ASP.NET Update Panel vs. jQuery AJAX - Stack Overflow

ajax asp.net-ajax jquery updatepanel
Rectangle 27 4

An accordion doesn't allow more than one content panel to be open at the same time, and it > takes a lot of effort to do that. If you are looking for a widget that allows more than one > content panel to be open, don't use this. Usually it can be written with a few lines of > jQuery instead, something like this:

can you give any alternate idea? I need @Klaus Byskov Hoffmann,

jquery - jQueryUI accordion - Keep sections open - Stack Overflow

jquery accordion
Rectangle 27 2

Update Panel always replaces your Jquery with its inbuilt Scriptmanager's scripts after every load. Its better if you use pageRequestManager's instance methods like this...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

javascript - jQuery $(document).ready and UpdatePanels? - Stack Overfl...

javascript jquery asp.net javascript-events asp.net-ajax
Rectangle 27 2

Update Panel always replaces your Jquery with its inbuilt Scriptmanager's scripts after every load. Its better if you use pageRequestManager's instance methods like this...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

javascript - jQuery $(document).ready and UpdatePanels? - Stack Overfl...

javascript jquery asp.net javascript-events asp.net-ajax
Rectangle 27 2

Update Panel always replaces your Jquery with its inbuilt Scriptmanager's scripts after every load. Its better if you use pageRequestManager's instance methods like this...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

An old post, but one which helped me out. One thing which I would like to add to this: the location of the add_endRequest code has to be inside the UpdatePanel, as the Sys.WebForms.PageRequestManager is only available at that point. However, the actual function does not need to be in that location. So, in my case, I have a script.js file which contains the code I want bound, contained within a function. In that script.js file, I have a document.ready call, which invokes the above function. Then, in my UpdatePanel, I have the add_endRequest code, which also invokes the above function.

javascript - jQuery $(document).ready and UpdatePanels? - Stack Overfl...

javascript jquery asp.net javascript-events asp.net-ajax
Rectangle 27 2

Yes, it applies to many wizard plugins but not to jQuery Steps. jQuery Steps is a very powerful and feature-rich wizard plugin. There are plenty of CSS classes you can use to customize the control like you want. Each step consists of one step button, a step title (which is hidden by default) and a step panel for the content. In your case you have to override just two CSS classes (see the following CSS snippet).

/* First hide all steps from the begining on */
.wizard > .steps li
{
    display: none;
}

/* Then just re-show only the current step */
.wizard > .steps li.current
{
    display: block;
}

javascript - Basic jquery Steps Wizard - Stack Overflow

javascript jquery html css jquery-steps
Rectangle 27 1

Update Panel always replaces your Jquery with its inbuilt Scriptmanager's scripts after every load. Its better if you use pageRequestManager's instance methods like this...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

javascript - jQuery $(document).ready and UpdatePanels? - Stack Overfl...

javascript jquery asp.net javascript-events asp.net-ajax
Rectangle 27 1

Setting the Panel to disabled would work for asp Controls like CheckBox but not for an input with runat=server. This checkbox is disabled because the panel has Enabled=false:

<asp:Panel ID="Panel1" runat="server" Enabled="false" >
    <asp:CheckBox ID="CheckBox1" runat="server" /> 
</asp:Panel>

You could also easily fix this with jquery (client side):

$('#mypanelClientID input[type=checkbox]').attr('disabled', true);

asp.net - How to enable/disable many controls together? - Stack Overfl...

asp.net panel
Rectangle 27 1

jQuery(".panel").bind("mousedown", onDragStart);

Yeah, thats its, so easy...too many hours of work, thanks !!

jquery - Can't drag div if have total height of containment - Stack Ov...

jquery jquery-ui resize draggable containment
Rectangle 27 1

Avaoid writing server side code for it. In Jquery there are function for this like Show() and Hide().

You can refer those function over here>>

thanks bro, this way is better, but i used ".toggle". anyway thank you for your help :x

c# - Why my update panel does not work? - Stack Overflow

c# asp.net ajax updatepanel
Rectangle 27 3

If you don't want smooth scrolling, you can cheat and stop the smooth scrolling animation pretty much as soon as you start it... like so:

$(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

I've no idea whether it's recommended/allowed, but it works :)

When would you use this? I'm not sure, but perhaps when you want to use one click to animate one thing with Jquery, but do another without animation? ie open a slide-in admin login panel at the top of the page, and instantly jump to the top to see it.

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

If you don't want smooth scrolling, you can cheat and stop the smooth scrolling animation pretty much as soon as you start it... like so:

$(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

I've no idea whether it's recommended/allowed, but it works :)

When would you use this? I'm not sure, but perhaps when you want to use one click to animate one thing with Jquery, but do another without animation? ie open a slide-in admin login panel at the top of the page, and instantly jump to the top to see it.

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

If you don't want smooth scrolling, you can cheat and stop the smooth scrolling animation pretty much as soon as you start it... like so:

$(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

I've no idea whether it's recommended/allowed, but it works :)

When would you use this? I'm not sure, but perhaps when you want to use one click to animate one thing with Jquery, but do another without animation? ie open a slide-in admin login panel at the top of the page, and instantly jump to the top to see it.

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

If you don't want smooth scrolling, you can cheat and stop the smooth scrolling animation pretty much as soon as you start it... like so:

$(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

I've no idea whether it's recommended/allowed, but it works :)

When would you use this? I'm not sure, but perhaps when you want to use one click to animate one thing with Jquery, but do another without animation? ie open a slide-in admin login panel at the top of the page, and instantly jump to the top to see it.

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

If you don't want smooth scrolling, you can cheat and stop the smooth scrolling animation pretty much as soon as you start it... like so:

$(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

I've no idea whether it's recommended/allowed, but it works :)

When would you use this? I'm not sure, but perhaps when you want to use one click to animate one thing with Jquery, but do another without animation? ie open a slide-in admin login panel at the top of the page, and instantly jump to the top to see it.

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 3

If you don't want smooth scrolling, you can cheat and stop the smooth scrolling animation pretty much as soon as you start it... like so:

$(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

I've no idea whether it's recommended/allowed, but it works :)

When would you use this? I'm not sure, but perhaps when you want to use one click to animate one thing with Jquery, but do another without animation? ie open a slide-in admin login panel at the top of the page, and instantly jump to the top to see it.

Scroll to the top of the page using JavaScript/jQuery? - Stack Overflo...

javascript jquery scroll
Rectangle 27 13

This won't show custom events like those your script might create if it's a jquery plugin. for example :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-one"

javascript - How do I view events fired on an element in Chrome DevToo...

javascript google-chrome-devtools