Search jQuery

jQuery Forum

Screen name:
eithed

eithed's Profile

4 Posts

6 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

:visible selector
[7Replies]
- 02-May-2012 12:10 PM
- Forum: Using jQuery
Hi!

As last question regarding :visible selector was two years ago (and frankly wasn't dealing with the problem), let me open up a new topic.

I've been working on adding my own expressions, as ":visible" takes into account only elements that consume space in the layout - fair enough. However, should an element that has position: absolute, clip: (0px 0px 0px 0px) be considered taking up the space?

A quick test:
1. <html>
        <head>
              <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        </head>
        <body>
              <div class='abc' style='position: absolute; clip: rect(0 0 0 0)'><div class='def'>#</div></div>
              <script type='text/javascript'>
                  $(document).ready(function()
                  {
                      console.log($(".def").is(":visible"), $('.abc').is(':visible'));
                  })
              </script>
  
        </body>
  </html>
outputs true for both elements.

jQuery and textNodes
[4Replies]
- 09-Sep-2011 11:18 AM
- Forum: Using jQuery
Hi there,

I've recently stumbled upon a weird issue - for a given ajax response I would create HTML element and insert it into DOM, however weirdly, my first textNode would be dropped. So I did the test on newer version of jQuery, and here's mine observation:
1. ```
<html> 
      <head> 
            <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
      </head> 
      <body> 
            <script type='text/javascript'> 
            $(document).ready(function() { 
                  console.log($("A<div>B</div>C<div>D</div>E"));
             }); 
            </script> 
      </body> 
</html>
```
Expected result:

[<TextNode textContent="A">, div, <TextNode textContent="C">, div, <TextNode textContent="E">]

Received result:

[div, <TextNode textContent="C">, div]

If jQuery would parse the data into XML compliant structure, then I'd guess that all textNodes would be dropped. If not, then why is first and last textNode dropped?

ui.resizable / ui.droppable - cloned element no longer resizable
[3Replies]
- 19-May-2011 11:07 AM
- Forum: Developing jQuery UI
Hi again,

When using resizable with draggable and clone method on drop event the this.handles retains its previous assignment to an element that's no longer part of DOM.

My scenario is as follows:
- there exist an element with resizable and draggable applied to it
- upon dropping on droppable area a $(ui.draggable).clone() method is run (without deep event cloning)
- original element is removed
- resizable and droppable is applied again on newly created element

The problem is that you cannot resize cloned element - the resize errors as $(this.handles[i]) now is a collection of two elements, where $(this.handles[i])[0] is an element no longer existing in DOM - this causes false on _mouseCapture, which prevents mouse.ui to run _mouseStart event (line #230).
You can however drag it and drop it without any problems.

My question is: is that expected behaviour, or am I not supposed to do something like that :)

ui.resizable / return false in option.resize event to prevent further resize
[1Reply]
- 19-May-2011 10:56 AM
- Forum: Developing jQuery UI
Hi there,

The scenario is as follows: I've got two elements in my document - one of them has resizable applied to it (A), the second one doesn't (B). I'm using option.resize to alter the width of the B element when A is resized, ie. shrink B. But when B's width is at 10px I don't want A to cause any more shrinking, nor I want to resize A to overlap on B. The idea is to allow resize option to return false, which would prevent further resize of A (in this instance if width of B is <= 10px and resize occurs to the left).

Code to give an example:
1. <body>
  <style>
  .box {width: 100px; height: 100px; float: left; margin: 10px}
  .a {background-color: #ff0000;}
  .b {background-color: #00ff00;}
  </style>
          <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
          <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
          <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script> <script type='text/javascript'>
  $(document).ready(function()
  {
      $('.a').resizable({
          handles: "e, w",
          ghost: true,
          start: function(event, ui){
              $('.b').data('width',$('.b').width());
          },
          resize: function(event, ui){
              if (ui.originalPosition.left != ui.position.left)
              {
                  $('.b').width($('.b').data('width') + ui.originalSize.width - ui.size.width);
              }
          },
          stop: function(event, ui){
              $(this).css('left','0px');
          }
      });
  });
  </script>
  
  <div class='box b'>B</div>
  <div class='box a'>A</div>
  </body>
The change I'm proposing would require this alteration in ui.resizable (~line 302):
1.         // plugins callbacks need to be called first
          this._propagate("resize", event);
  
          // calling the user callback at the end
          if (this._trigger('resize', event, this.ui()))
          {
              el.css({
                  top: this.position.top + "px", left: this.position.left + "px",
                  width: this.size.width + "px", height: this.size.height + "px"
              });
  
              if (!this._helper && this._proportionallyResizeElements.length)
                  this._proportionallyResize();
  
              this._updateCache(data);
          }

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend