A Pen by Gary Hyde

Thumbnail
This awesome code was written by ghyde03, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ghyde03 ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Gary Hyde</title>
  
  
  
  
  
</head>

<body>

  
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ghyde03/a-pen-by-gary-hyde-xGGpKz */
$(function(){

  console.log('Ready!')

    $( "#flip-checkbox" ).on( "change", function( ) {
         console.log('flip switch!')
      if ( $( this ).parent().hasClass('ui-flipswitch-active') ) {
        $('fieldset.ui-field-contain.hidden').show()
      }else{
        $('fieldset.ui-field-contain.hidden').hide()
      }

    } );


    $('fieldset.ui-field-contain button').on('tap', function(e){
      
            e.stopImmediatePropagation();
            e.preventDefault();
    })


    var cur_unit = '',
        cur_name_id = '',
        cur_text = '',
        cur_input_name = '',
        swap_unit = '',
        swap_name_id = '',
        swap_text = ''

    $('fieldset.ui-field-contain').on('tap', function(){



      if ( $('.ui-btn-active').length ) {

          if ( $( this ).find('button').hasClass('ui-btn-active') ) {

            $( this ).find('button').removeClass('ui-btn-active')

          }else{

            swap_unit = $( this ).find('button').attr('value')
            swap_name_id = $( this ).find('button').attr('value')
            swap_text = $( this ).find('span').text()

            $('button[value='+cur_unit+']').find('span').text(swap_text)
            $('button[value='+cur_unit+']').attr('value', swap_name_id)
            $( this ).find('span').text(cur_text)
            $( this ).find('button').attr('value', cur_name_id)
            $( this ).find('.name-id').attr('value', cur_name_id)
            cur_input_name.attr('value', swap_name_id)
            $('.ui-btn-active').removeClass('ui-btn-active');
            $( this ).addClass('selected').removeClass('hidden');
          }

      }else{

        if ( $( this ).find('button').hasClass('ui-btn-active') ) {

          $( this ).find('button').removeClass('ui-btn-active')

        }else{

          $( this ).find('button').addClass('ui-btn-active')
          cur_input_name = $( this ).find('.name-id')
          cur_unit = $( this ).find('button').attr('value')
          cur_name_id = $( this ).find('button').attr('value')
          cur_text = $( this ).find('span').text()
          $( this ).addClass('hidden').removeClass('selected')

        }

      }

    })

    $('fieldset.ui-field-contain').each( function( index, element ){
      console.log('set the classes!')
      if ( $( this ).find('span').text() == 'Not Selected' ) {
        $( this ).addClass('hidden').hide();
      }else{
        $( this ).addClass('selected')
      }
    });
    
  });

Comments