Javascript Archives - Page 7 of 7

I had an earlier post about cross browser safe select replacements. This is a function which replaces the gravity forms plugin select drop downs with those cross browser safe drop downs.

//REPLACE GRAVITY SELECT DROPDOWNS
function replaceGravitySelects(){
	var optionValues = [];
	var optionHTML = [];
	var selected = [];
	var selectedHTML = [];
	var selectParent = [];
	var inputName = [];
	var tabIndex = [];
	var numSelects = 0;
	
	//get options
	jQuery('.gfield_select').each(function() {
		optionValues[numSelects] = [];
		optionHTML[numSelects] = [];
		jQuery('option', this).each(function() {
		    optionValues[numSelects].push(jQuery(this).val());
		    optionHTML[numSelects].push(jQuery(this).html());
		    
		    if(jQuery(this).is(':selected')){
		    	selected[numSelects] = jQuery(this).val();
		    	selectedHTML[numSelects] = jQuery(this).html();
		    }
		});
		
		selectParent[numSelects] = jQuery(this).parent();
		inputName[numSelects] = jQuery(this).attr('name');
		tabIndex[numSelects++] = jQuery(this).attr('tabindex');
	});
	
	for(var j = 0; j < numSelects; j++){
		var buildSelect = '<div class="dropdown subject" tabindex="'+tabIndex[j]+'"><span id="search-text">'+selectedHTML[j]+'</span>'+
							'<input id="'+inputName[j]+'" type="hidden" value="'+selected[j]+'" name="'+inputName[j]+'"></input><ul style="">';
		
		var isSelected = '';
		for (var i in optionValues[j]) {
			if(optionValues[j][i] == selected){
				isSelected = 'selected';
			}else{
				isSelected = '';
			}
			buildSelect += '<li id="'+optionValues[j][i]+'" class="'+isSelected+'">'+optionHTML[j][i]+'</li>';
		}
		
		buildSelect += '</ul></div>';
		
		// remove the old and set the new select in place
		selectParent[j].html(buildSelect);
	}
	
	// SET UP FUNCTIONALITY
	
	//MOBILE CHECK
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
		binding = 'touchstart';	
		
		//close the menu if it is open and the user clicks / touches ANYWHERE but the menu  
		$(document).bind(binding, function(e){
			var container = $(".dropdown.open");
		    if (! container.is(e.target) && ! container.children('ul').is(e.target) && ! container.children('ul').children('li').is(e.target) )
		    {
		      	container.children('ul').hide();
				container.removeClass('open');
		    }
		});
	}else{
		binding = 'click';	
	}
	
	//dropdown controller
	$('.dropdown').bind(binding, function(e) {
        //dropdownOpenClose(this);
        if( $(this).children('ul').is( ":hidden" )){
        	
			$(this).children('ul').show();
			$(this).addClass('open');
		}
    });
	
	$('.dropdown').mouseleave(function(e){
		if($(this).children('ul').is( ":visible" )){
			$(this).children('ul').hide();
			$(this).removeClass('open');
		}
	});
	
	$('.dropdown ul li').click( function(e) {
		e.stopPropagation();
        var thisLI = $(this);
        var sitem = thisLI.html();
        
        var sid = thisLI.attr('data-id');
 		var parentUL =  thisLI.parent('ul');
 		
        parentUL.siblings('span.display-text').html(sitem); //add text to display area
        parentUL.siblings('input').val(sid); //add to hidden field
        parentUL.hide(); //add to hidden field
        
        //wait just a little longer than the slide up time to put in the new text. Looks weird otherwise.
        setTimeout(function(){ thisLI.addClass('selected'); thisLI.siblings('li').removeClass('selected');  }, 100);
        
    });
}

100

101

102

103

//REPLACE GRAVITY SELECT DROPDOWNS

function replaceGravitySelects(){

var optionValues = [];

var optionHTML = [];

var selected = [];

var selectedHTML = [];

var selectParent = [];

var inputName = [];

var tabIndex = [];

var numSelects = 0;

//get options

jQuery('.gfield_select').each(function() {

optionValues[numSelects] = [];

optionHTML[numSelects] = [];

jQuery('option', this).each(function() {

optionValues[numSelects].push(jQuery(this).val());

optionHTML[numSelects].push(jQuery(this).html());

if(jQuery(this).is(':selected')){

selected[numSelects] = jQuery(this).val();

selectedHTML[numSelects] = jQuery(this).html();

}

});

selectParent[numSelects] = jQuery(this).parent();

inputName[numSelects] = jQuery(this).attr('name');

tabIndex[numSelects++] = jQuery(this).attr('tabindex');

});

for(var j = 0; j < numSelects; j++){

var buildSelect = '<div class="dropdown subject" tabindex="'+tabIndex[j]+'"><span id="search-text">'+selectedHTML[j]+'</span>'+

'<input id="'+inputName[j]+'" type="hidden" value="'+selected[j]+'" name="'+inputName[j]+'"></input><ul style="">';

var isSelected = '';

for (var i in optionValues[j]) {

if(optionValues[j][i] == selected){

isSelected = 'selected';

}else{

isSelected = '';

}

buildSelect += '<li id="'+optionValues[j][i]+'" class="'+isSelected+'">'+optionHTML[j][i]+'</li>';

}

buildSelect += '</ul></div>';

// remove the old and set the new select in place

selectParent[j].html(buildSelect);

}

// SET UP FUNCTIONALITY

//MOBILE CHECK

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

binding = 'touchstart';

//close the menu if it is open and the user clicks / touches ANYWHERE but the menu

$(document).bind(binding, function(e){

var container = $(".dropdown.open");

if (! container.is(e.target) && ! container.children('ul').is(e.target) && ! container.children('ul').children('li').is(e.target) )

{

container.children('ul').hide();

container.removeClass('open');

}

});

}else{

binding = 'click';

}

//dropdown controller

$('.dropdown').bind(binding, function(e) {

//dropdownOpenClose(this);

if( $(this).children('ul').is( ":hidden" )){

$(this).children('ul').show();

$(this).addClass('open');

}

});

$('.dropdown').mouseleave(function(e){

if($(this).children('ul').is( ":visible" )){

$(this).children('ul').hide();

$(this).removeClass('open');

}

});

$('.dropdown ul li').click( function(e) {

e.stopPropagation();

var thisLI = $(this);

var sitem = thisLI.html();

var sid = thisLI.attr('data-id');

var parentUL = thisLI.parent('ul');

parentUL.siblings('span.display-text').html(sitem); //add text to display area

parentUL.siblings('input').val(sid); //add to hidden field

parentUL.hide(); //add to hidden field

//wait just a little longer than the slide up time to put in the new text. Looks weird otherwise.

setTimeout(function(){ thisLI.addClass('selected'); thisLI.siblings('li').removeClass('selected'); }, 100);

});

}

CSS styles. You will need to edit to fit your needs.

// select dropdown is not easy to style cross browser so replace with custom replacement
.dropdown               { display: inline-block; border: 1px solid @medium-grey; padding: 8px 15px; color: @light-grey-text; background-color: @white; background-image: image('asc.png'); background-position: 95% center; background-repeat: no-repeat; cursor: pointer; position: relative; width: 100%; border-radius: 4px;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;  
  ul                    { border: 1px solid @light-grey-text; list-style: none; padding: 0; margin: 0; position: absolute; top: 34px; left: 0px; z-index: 5; border: 1px solid @light-grey-text; width: 100%; color: @light-grey-text; background-color: @white; display: none; 
    li                  { list-style: none; padding: 0; margin: 0; padding: 2px 15px !important; 
      &.selected        { display: none; }
      &:hover           { background-color: @powder-blue; color: @white; }
    }
  }
  &.open, &:focus       { border-color: #66AFE9; outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6); }
}

// select dropdown is not easy to style cross browser so replace with custom replacement

.dropdown { display: inline-block; border: 1px solid @medium-grey; padding: 8px 15px; color: @light-grey-text; background-color: @white; background-image: image('asc.png'); background-position: 95% center; background-repeat: no-repeat; cursor: pointer; position: relative; width: 100%; border-radius: 4px;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;

ul { border: 1px solid @light-grey-text; list-style: none; padding: 0; margin: 0; position: absolute; top: 34px; left: 0px; z-index: 5; border: 1px solid @light-grey-text; width: 100%; color: @light-grey-text; background-color: @white; display: none;

li { list-style: none; padding: 0; margin: 0; padding: 2px 15px !important;

&.selected { display: none; }

&:hover { background-color: @powder-blue; color: @white; }

}

&.open, &:focus { border-color: #66AFE9; outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6); }

}

Category: Javascript

Replace Gravity Forms Selects