All geek questions in one place

Trigger selection box to pop up when another item is clicked

I am trying to “replace” a button on selected inputs. I looked at the selected replacement plugins in jquery, but they are all a bit bloated IMO. What I would like to achieve is a simple range located above the drop-down button of the selection window, and when it is clicked, make a selection of options.

Here is what I have:

$(document).ready(function(){

 $('select').after('<span class="cta arrow-down"></span>');
 $('input[type="submit"]').after('<span class="cta arrow-right"></span>');

 $('span.cta').each(function(){
  var $this = $(this);
  var $prev = $this.prev();
  var $dim = $prev.position();
  $this.css({'top':$dim.top, 'right':0, 'height':$prev.outerHeight(), 'width':$prev.outerHeight()});
  $this.click(function(){
   $prev.trigger('click');
  });
 });

});

I tried mousedown as well as click and mousedown with triggerHandler calling the corresponding function, but to no avail ...

Is this even possible?

+3
source share
2 answers

- , - , IE . IE <select> - , Windows Forms ( z-index ), /... IE .

, , <select>, ... , IE , .

+1

, OP , , , .

: Facebook.

( , ) , , .

"spoofing" , div s, . , . .

, div, IE8 windows 7:

http://users.on.net/mbywaters/fb.jpg

HTML .

, , CSS. . IE, div, , IE:

http://users.on.net/mbywaters/fb2.jpg

, , , .

, - JavaScript-, select, . Facebook JavaScript, , .

EDIT:

, .

, IE8, IE7 , , :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE8 , . Facebook .

IE7 - , . , , IE7, IE8, Chrome Firefox 3.6.15 (, ).

:

http://users.on.net/mbywaters/arrow.png

:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.10.custom.min.js"></script>
    <style type="text/css">
      .hidden{
        padding:5px;
        display:inline;
        border:1px solid #888888;
        font-family:Verdana;
        font-size:10pt;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.hidden').focus(function(){
          $(this).css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).css('border', '1px solid #888888');
        });
      });
    </script>
    <!--[if IE 7]>
    <style type="text/css">

      .regselectdiv{
        position:relative;
        display:inline;
        padding:5px;
        padding-left:6px;
        border:0px;
        border:1px solid #888888;
        float:left;
        margin-right:7px;
      }

      .selectwrap{
        position:relative;
        border:0px;
        overflow:hidden;
      }

      .arrow{
        position:absolute;
        width:15px;
        height:16px;
        background:url('arrow.png');
        margin-left:-17px;
        border:1px solid #707070;
      }

      .border{
        display:none;
        position:absolute;
        width:15px;
        height:16px;
        border:1px solid #3c7fb1;
        background:none;
        margin-left:-17px;
      }

      .selectwrap:hover .arrow{
        visibility:hidden;
      }

      .selectwrap:hover .border{
        display:inline;
      }

      .hidden{
        margin-top:-2px;
        margin-left:-2px;
        line-height:5px;
        padding:0px;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {

        $('.hidden').wrap('<div class="regselectdiv"><div class="selectwrap">');

        $('.border, .selectwrap').live('mouseleave', function(){
          $('.arrow').show();
        });

        $('.hidden').focus(function(){
          $(this).parent().parent().css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).parent().parent().css('border', '1px solid #888888');
        });

        $('.selectwrap').each(function() {
          wrapper($(this));
        });

        function wrapper(x) {
          var arrow = "<div class='border'></div><div class='arrow'></div>";
          x.append(arrow);
          var height = x.find('select').height();
          var width = x.find('select').width();
          x.width(width+2);
          x.height(height);
        }
      });
    </script>
    <![endif]-->

  </head>
  <body>
    <select class='hidden'>
      <option>Month:</option>
      <option>Jan</option>
    </select>
    <select class='hidden'>
      <option>Day:</option>
      <option>1</option>
    </select>
    <select class='hidden'>
      <option>Year:</option>
      <option>2011</option>
    </select>
  </body>
</html>
+1

Source: https://habr.com/ru/post/1754564/

More articles:


All Articles