Develop Reference

jQuery function conversion

I've been working on this script that I am using with a WordPress plugin I wrote for our blogs at work. I'm stripping it down to make it a pure jQuery plugin but most of the questions I've seen where for getting the plugin to work like this:
$('.some-target').cta();
Whereas I want to write it so that the user can do something like:
cta();
or
$.cta
I'm not really getting clear answers or seeing many guides covering this, or really if it's possible. In the end I want it to work like it's original iteration for WP, but as a stand alone jQuery plugin for static sites:
cta({
text: "Some Text",
icon: "Some-icon.jpg",
dist: 50
});
Here is the original code:
jQuery(document).ready(function($){
cta = function(o) {
o = o || {};
var bgColor = o.bgColor;
var url = o.url;
var text = o.text;
var icon = o.icon;
var buttonText = o.buttonText;
var target = o.target;
var dist = o.dist;
if((o.icon != null) || o.icon == "" ) {
jQuery('body').append(
'<div class="cta-popup-wrapper with-icon"><div class="cta-popup"><span class="close-trigger">X</span><img class="cta-icon" src="' + icon + '" alt="Call to Action Icon"><p>' + text + '</p><a class="cta-button" style="background-color:' + bgColor + ';" href="' + url + '">' + buttonText + '</a></div></div>'
);
} else {
jQuery('body').append(
'<div class="cta-popup-wrapper without-icon"><div class="cta-popup"><span class="close-trigger">X</span><p>' + text + '</p><a class="cta-button" style="background-color:' + bgColor + ';" href="' + url + '">' + buttonText + '</a></div></div>'
);
}
if(target != null) {
var t = $(target);
if(t.length) {
$(window).scroll(function() {
var hT = t.offset().top,
hH = t.outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$('.cta-popup-wrapper').addClass('shown');
} else {
$('.cta-popup-wrapper').removeClass('shown');
}
});
}
} else {
if((dist != null) && (dist > 0)) {
var b = $('body').innerHeight();
dist = dist / 100;
var trigger = b * dist;
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS > trigger){
$('.cta-popup-wrapper').addClass('shown');
} else {
$('.cta-popup-wrapper').removeClass('shown');
}
});
}
}
}
});

W3C Validation - Attribute buttonindex not allowed on element a at this point

I getting the error "Attribute buttonindex not allowed on element a at this point". My code is
<p><a class="btn btn-success_ar hidden-xs" id="indexCarouselBeforeBtn2" buttonindex="2" role="button">HOVER HERE TO SEE BEFORE</a></p>
and my Script is
<script type="text/javascript" >
var imageList = [];
$(document).ready(function(){
var totalSlides = 5;
for (var i = 1; i <= totalSlides; i++) {
imageList[i] = [];
imageList[i][0] = $('<img />').attr('src', 'after/images/external/index' + i + 'after.jpg').attr('id', 'indexCarouselImg' + i);
imageList[i][1] = $('<img />').attr('src', 'after/images/external/index' + i + 'before.jpg').attr('id', 'indexCarouselImg' + i);
$("#indexCarouselBeforeBtn" + i).mouseenter(function(){
$("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
$("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][1]);
$(this).addClass('btnHover');
});
$("#indexCarouselBeforeBtn" + i).mouseleave(function(){
$("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
$("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][0]);
$(this).removeClass('btnHover');
});
$("#indexCarouselImg" + i).remove();
$("#item" + i).append(imageList[i][0]);
}
});
The error still exists even using P and Div tags instead of the a tag . How can I fix this.

I think that's attribute not exists in HTML.
You can use tabindex.
https://www.w3schools.com/tags/att_global_tabindex.asp

Cannot read property 'top' of undefined jQuery/JavaScript in both Chrome and Firefox

How to fix the error line of:
var targetTop = $('#' + page).offset().top;
I am trying last 3 months but still did not find a fix.
$(document).ready(function(){
$(window).scroll(function() {
$('.page').each(function () {
changePage(this.id);
});
});
});
function changePage (page) {
var position = $(window).scrollTop();
var targetTop = $('#' + page).offset().top;
var targetBottom = targetTop + $('#' + page).height();
if (position >= targetTop && position < targetBottom && !$('#' + page).hasClass('active')) {
console.log('id: ' + page);
$('.page').removeClass('active');
$('#' + page).addClass('active');
$('iframe').attr('src', '<?=SITE_URL?>upload_files/collection/TS.pdf#page=' + page[page.length - 1]+'&zoom=45&toolbar=0&navpanes=0');
}
}

$('#' + page) doesn't return any elements, which means $('#' + page).offset() returns undefined.
You can't get the .top property of undefined.
Apparently, the selector created with '#' + page is incorrect.
The cause is probably a undefined id in changePage(this.id);.

IE8-specific JavaScript error?

I have a problem in IE8:
function costructor(sectionId){
$('#nextG').ready(function(){
var counterBis = 0;
slider = '.slider0'+sectionId;
//sliderBox = $(slider).closest('.floatContent');
unitScrollBis = $(slider).find('.floatImg').eq(0).width();
maxImg = $(slider).find('.floatImg').length-2;
/*problem*/
prev = "#" + $("#controller0" + sectionId).find(".controller").eq(0).attr("id");
next = "#" + $("#controller0" + sectionId).find(".controller").eq(0).attr("id");
/*END*/
console.log(prev);
console.log(next);
makeMove(counterBis,unitScrollBis,prev,next,slider,maxImg);
function makeMove(counterBis,unitScrollBis,prev,next,slider,maxImg){
if(counterBis <= 0){
$(prev).fadeOut("fast");
}
else if(counterBis >= maxImg){
$(next).fadeOut("fast");
}
$(next).click(function(){
if(counterBis <= maxImg){
counterBis++;
$(prev).fadeIn("fast");
slide(counterBis);
}
else{
$(next).fadeOut("fast");
}
});
$(prev).click(function(){
if(counterBis > 0){
counterBis--;
$(next).fadeIn("fast");
slide(counterBis);
}
else{
$(prev).fadeOut("fast");
}
});
function slide(counterBis){
$(slider).animate({
marginLeft: '-' + (unitScrollBis*counterBis) + 'px'
},1000);
};
};
IE8 says that: SCRIPT438: Object doesn't support property or method Can anyone help me?
The problem is only in IE8, I don't understand why IE can't build this string.
thanks for the help

You need to declare variables with the var keyword, otherwise older versions of IE will not recognise them and possibly break.
So change
prev = "#" + $("#controller0" + sectionId).find(".controller").eq(0).attr("id");
next = "#" + $("#controller0" + sectionId).find(".controller").eq(0).attr("id");
to
var prev = "#" + $("#controller0" + sectionId).find(".controller").eq(0).attr("id");
var next = "#" + $("#controller0" + sectionId).find(".controller").eq(0).attr("id");
and everything should work as it does in other browsers/IE9

Button image change on a timer

In my project I have a page which contains 5 image buttons laying horizantally.
When the page loads image on the Button1 should change(remaining 4 buttons remains same).
After 3 seconds Button1 comes back to its original image and image on Button2 will change.
After 3 seconds Button2 comes back to its original image and image on Button3 will change.
And so on..
But After the Button5 is done , It should come back to the Button1 image again.
This should go on in a continuous loop.
Here is my code.But its not working I don't know the reason why its not working.
any help will be appreciated.
Here is my code
$(document).ready(function (){
BeginRotation();
});
function BeginRotation() {
rotateButton(0);
}
function rotateButton(buttonIndex) {
var previousIndex = (buttonIndex + 4) % 5;
var previousCurrentClass = 'main-nav-button' + (previousIndex + 1) + '-on';
var previousNewClass = 'main-nav-button' + (previousIndex + 1);
var currentClass = 'main-nav-button' + (buttonIndex + 1);
var newClass = 'main-nav-button' + (buttonIndex + 1) + '-on';
// alert('Previous Current Class: ' + previousCurrentClass + '\nPrevious New Class: ' + previousNewClass + '\nCurrent Class: ' + currentClass + '\nNew Class: ' + newClass);
$('.' + currentClass).removeClass(currentClass).addClass(newClass);
$('.' + previousCurrentClass).removeClass(previousCurrentClass).addClass(previousNewClass);
window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000);
}

One thing that is incorrect for sure
window.setTimeout(rotateButton((buttonIndex + 1) % 5), 3000);
It should be
window.setTimeout("rotateButton(" + ((buttonIndex + 1) % 5) + ")", 3000);

I didn't test this code, but something like this should work:
jQuery(function($){
var $btns = $('a.btn');
var index = 0;
setInterval(function() {
$btns.removeClass('rotateThis');
$btns[index].addClass('rotateThis');
index = (index + 1 >= $btns.size()) ? 0 : index + 1;
}, 3000);
});
$('a.btn') being whatever selector works to grab your image buttons of course.