We Keep Coding

Disable button after form reload

After I submit an invalid form page it redirects back to the same form page.
I want to be able to disable the "Find address" button and "House No" input field.
At the moment only "House No" input stays disabled and not the "Find address" button.
Please help.
var enableDisableFindAddress = function(postcodeLookupAvailabilityCountries) {
var $this = $( ".find-address-country"),
addressType = $this.data( "addresstype" ),
countryISO = $this.val(),
availableCountries = postcodeLookupAvailabilityCountries;
var foundAvailableISO = false,
HouseNameOrNoFieldId = "#" + addressType + "_house_no_or_name",
searchBtnID = "#" + addressType + "_search_btn";
for( i = 0; i < availableCountries.length; i++ ){
if( countryISO == availableCountries[i] ){
foundAvailableISO = true;
break;
}
}
if ( foundAvailableISO ) {
$( HouseNameOrNoFieldId ).prop( "disabled", false );
$( searchBtnID ).prop( "disabled", false );
} else {
$( HouseNameOrNoFieldId ).prop( "disabled", true );
$( searchBtnID ).prop( "disabled", true );
alert("I am suppose to disable this")
}
}
// THIS IS NOT WORKING
if ( $( ".find-address-country").val() !== "" ) {
enableDisableFindAddress( postcodeLookupAvailabilityCountries );
}
// THIS IS WORKING
$( ".find-address-country" ).change( function() {
enableDisableFindAddress( postcodeLookupAvailabilityCountries );
});

How do I jump to a specific slide upon clicking a button using jQuery?

I am using adopted code that uses switches and hashes to navigate between divs on a website, showing only one at a time, like a slideshow. Here's what it looks like:
$("#forward-button").click(function() {
var h = window.location.hash;
var s = h.replace("#","");
var n = parseInt(s) + 1 + '';
if( s == 20 ) { } else {
$( "#slide-" + s ).toggle( "drop", { direction: "left" }, 400 );
$( "#slide-" + s ).promise().done(function(){
$( "#slide-" + n ).toggle( "drop", { direction: "right" }, 400 ); });
rewriteSlideLabel(n);
window.location.hash = "#" + n;
}
});
This is working great, but I would like the added functionality of having buttons that can jump to specific slides instantly (rather than having to go through one by one to get to where you want).
I placed some buttons on the side to accomplish this, but I can't figure out the actual code. I've tried things like:
$("#button2").click(function() {
jumpToHash("2");rewriteSlideLabel("2");
});
but that doesn't have the fancy animation that makes navigating between slides look professional.
Please help. Thank you!
http://codepen.io/anon/pen/qbNOYG

fiddling around with your code, I made a new function for you to use:
var jumpToSlide = function(number) {
var h = window.location.hash;
var s = h.replace("#","");
var n = number;
if( s == 20 ) { } else {
$( "#slide-" + s ).toggle( "drop", { direction: "left" }, 400 );
$( "#slide-" + s ).promise().done(function(){
$( "#slide-" + n ).toggle( "drop", { direction: "right" }, 400 ); });
rewriteSlideLabel(n);
window.location.hash = "#" + n;
}
}
then from there, you can just call the following:
$("#button1").click(function() {
jumpToSlide(1);
});
I hope this helps!

how to add PIPS in jqueryUI Slider

I need to add 6 pips in JqueryUI slider. The PIPS wopuld range from 2000, 2010, 2020, 2030, 2040, 2050. I'm unable to get the understand functionality of adding these pips. Also, currently the slider has been coded to work on step sliding effect. Here is the code I'm using:
<div id="slider"></div>
<script>
$(function() {
var extensionMethods = {
pips: function( settings ) {
options = {
first: "number", // "pip" , false
last: "number", // "pip" , false
rest: "pip" // "number" , false
};
$.extend( options, settings );
// get rid of all pips that might already exist.
this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();
// we need teh amount of pips to create.
var pips = this.options.max - this.options.min;
// for every stop in the slider, we create a pip.
for( i=0; i<=pips; i++ ) {
// hold a span element for the pip
var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>');
// add a class so css can handle the display
// we'll hide numbers by default in CSS, and show them if set.
// we'll also use CSS to hide the pip altogether.
if( 0 == i ) {
s.addClass('ui-slider-pip-first');
if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
} else if ( pips == i ) {
s.addClass('ui-slider-pip-last');
if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
} else {
if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
}
// if it's a horizontal slider we'll set the left offset,
// and the top if it's vertical.
if( this.options.orientation == "horizontal" )
s.css({ left: '' + (100/pips)*i + '%' });
else
s.css({ top: '' + (100/pips)*i + '%' });
// append the span to the slider.
this.element.append( s );
}
}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
$("#slider").slider({
min: 0,
max: 600,
step: 100,
// on slide adjust width of all rects
slide: function(event, ui) {
svg.selectAll("rect")
.attr("width", function (d) {

Well JQuery-UI slider doesn't have pip's by default. To get pip's refer to the link below
https://github.com/simeydotme/jQuery-ui-Slider-Pips

Can I modify this waypoint so that it doesnt take effect until scrolling 500px down the screen

A WordPress theme I am using has this code which is what I assume initiates the themes fixed header class once the user starts to scroll down.
Is there a way to modify this so that the class is not initiated on scroll rather initiated when the user gets to a certain point down the screen such as 100px or something liek that. Here is the code.
if ( et_is_fixed_nav ) {
$('#main-content').waypoint( {
offset: function() {
if ( etRecalculateOffset ) {
et_calculate_header_values();
etRecalculateOffset = false;
}
return et_header_offset;
},
handler : function( direction ) {
if ( direction === 'down' ) {
$('#main-header').addClass( 'et-fixed-header' );
} else {
$('#main-header').removeClass( 'et-fixed-header' );
}
}
} );

It looks like your theme is using Waypoints. The link I attached shows how to adjust the offset. The function that is currently in place looks like it handles the offset somewhere else though, possibly in your Wordpress options panel. I haven't tested it but I'd imagine your code would end up looking like this:
$('#main-content').waypoint( {
offset: 100px,
handler : function( direction ) {
if ( direction === 'down' ) {
$('#main-header').addClass( 'et-fixed-header' );
} else {
$('#main-header').removeClass( 'et-fixed-header' );
}
}
} );

Thanks for the help Austin. You were right about it being handled elsewhere. With the help f a friend, I found this bit elsewhere in the file...
function et_calculate_header_values() {
var $top_header = $( '#top-header' ),
secondary_nav_height = $top_header.length && $top_header.is( ':visible' ) ? $top_header.innerHeight() : 0,
admin_bar_height = $( '#wpadminbar' ).length ? $( '#wpadminbar' ).innerHeight() : 0;
et_header_height = $( '#main-header' ).innerHeight() + secondary_nav_height - 1,
et_header_modifier = et_header_height <= 90 ? et_header_height - 29 : et_header_height - 56,
et_header_offset = et_header_modifier + admin_bar_height;
et_primary_header_top = secondary_nav_height + admin_bar_height;
}
function et_fix_slider_height() {
if ( ! $et_pb_slider.length ) return;
$et_pb_slider.each( function() {
var $slide = $(this).find( '.et_pb_slide' ),
$slide_container = $slide.find( '.et_pb_container' ),
max_height = 0;
$slide_container.css( 'min-height', 0 );
$slide.each( function() {
var $this_el = $(this),
height = $this_el.innerHeight();
if ( max_height < height )
max_height = height;
} );
And then I changed this line...
et_header_offset = et_header_modifier + admin_bar_height;
to this...
et_header_offset = et_header_modifier + admin_bar_height - 1000;
Mission accomplished. Thanks for your help austinthedeveloper and Dan Mossop. By the way, this is what is being used in the custom.js in the Divi theme by Elegant Themes just in case in helps someone else.

How to clone and change id?

I need to clone the id and then add a number after it like so id1, id2, etc. Every time you hit clone you put the clone after the latest number of the id.
$("button").click(function() {
$("#id").clone().after("#id");
});

$('#cloneDiv').click(function(){
// get the last DIV which ID starts with ^= "klon"
var $div = $('div[id^="klon"]:last');
// Read the Number from that DIV's ID (i.e: 3 from "klon3")
// And increment that number by 1
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
// Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
var $klon = $div.clone().prop('id', 'klon'+num );
// Finally insert $klon wherever you want
$div.after( $klon.text('klon'+num) );
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="cloneDiv">CLICK TO CLONE</button>
<div id="klon1">klon1</div>
<div id="klon2">klon2</div>
Scrambled elements, retrieve highest ID
Say you have many elements with IDs like klon--5 but scrambled (not in order). Here we cannot go for :last or :first, therefore we need a mechanism to retrieve the highest ID:
const all = document.querySelectorAll('[id^="klon--"]');
const maxID = Math.max.apply(Math, [...all].map(el => +el.id.match(/\d+$/g)[0]));
const nextId = maxID + 1;
console.log(`New ID is: ${nextId}`);
<div id="klon--12">12</div>
<div id="klon--34">34</div>
<div id="klon--8">8</div>

Update: As Roko C.Bulijan pointed out.. you need to use .insertAfter to insert it after the selected div. Also see updated code if you want it appended to the end instead of beginning when cloned multiple times. DEMO
Code:
var cloneCount = 1;;
$("button").click(function(){
$('#id')
.clone()
.attr('id', 'id'+ cloneCount++)
.insertAfter('[id^=id]:last')
// ^-- Use '#id' if you want to insert the cloned
// element in the beginning
.text('Cloned ' + (cloneCount-1)); //<--For DEMO
});
Try,
$("#id").clone().attr('id', 'id1').after("#id");
If you want a automatic counter, then see below,
var cloneCount = 1;
$("button").click(function(){
$("#id").clone().attr('id', 'id'+ cloneCount++).insertAfter("#id");
});

This is the simplest solution working for me.
$('#your_modal_id').clone().prop("id", "new_modal_id").appendTo("target_container");

This works too
var i = 1;
$('button').click(function() {
$('#red').clone().appendTo('#test').prop('id', 'red' + i);
i++;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="test">
<button>Clone</button>
<div class="red" id="red">
</div>
</div>
<style>
.red {
width:20px;
height:20px;
background-color: red;
margin: 10px;
}
</style>

I have created a generalised solution. The function below will change ids and names of cloned object. In most cases, you will need the row number so Just add "data-row-id" attribute to the object.
function renameCloneIdsAndNames( objClone ) {
if( !objClone.attr( 'data-row-id' ) ) {
console.error( 'Cloned object must have \'data-row-id\' attribute.' );
}
if( objClone.attr( 'id' ) ) {
objClone.attr( 'id', objClone.attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );
}
objClone.attr( 'data-row-id', objClone.attr( 'data-row-id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );
objClone.find( '[id]' ).each( function() {
var strNewId = $( this ).attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } );
$( this ).attr( 'id', strNewId );
if( $( this ).attr( 'name' ) ) {
var strNewName = $( this ).attr( 'name' ).replace( /\[\d+\]/g, function( strName ) {
strName = strName.replace( /[\[\]']+/g, '' );
var intNumber = parseInt( strName ) + 1;
return '[' + intNumber + ']'
} );
$( this ).attr( 'name', strNewName );
}
});
return objClone;
}

$('#cloneDiv').click(function(){
// get the last DIV which ID starts with ^= "klon"
var $div = $('div[id^="klon"]:last');
// Read the Number from that DIV's ID (i.e: 3 from "klon3")
// And increment that number by 1
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
// Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
var $klon = $div.clone().prop('id', 'klon'+num );
// Finally insert $klon wherever you want
$div.after( $klon.text('klon'+num) );
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>