We Keep Coding

Using wildcards in keyup function

I'm trying to get keyup to work with wildcards so it can match similar URL's as opposed to exact URLs but * ain't working, what am I doing wrong ?
<script>
$(document).ready(function () {
$("#fname").keyup(function () {
if(this.value == "*.drive.google.com/*"){
$('#input').css("display", "block");
}else{
$('#input').css("display", "none");
}
});
});
</script>
Any help is great thanks.

You can't just pass in a * to an equality comparison, I would do something like this:
let generateValidator = (str) => {
const pieces = str.split('*');
let regex = '';
for (let i = 0; i < pieces.length; i++) {
if (pieces[i] === '') {
regex += '.+';
} else {
regex += pieces[i].replace(/\./, '\\.');
}
}
let rule = new RegExp(regex);
return (url) => {
if (!url.startsWith('http')) {
url = `http://${url}`;
}
try {
new URL(url);
} catch (e) {
return false;
}
return rule.test(url);
}
}
let isValid = generateValidator('*.drive.google.com/*');
let valid = {
"www.drive.google.com/test": isValid("www.drive.google.com/test"),
"drive.google.com": isValid("drive.google.com"),
"abc.drive.google.com/world": isValid("abc.drive.google.com/world"),
"#421.drive.google.com/test": isValid("#421.drive.google.com/test")
}
console.log(valid);
And then in your code, you could just do:
<script>
let isValid = generateValidator('*.drive.google.com/*');
$(document).ready(function () {
$("#fname").keyup(function () {
if(isValid(this.value)){
$('#input').css("display", "block");
}else{
$('#input').css("display", "none");
}
});
});
</script>

Why in my case is return not ending the function

I have this code I'm using for sticky header some other things.
function stickyHeader(index) {
$('.worship-items .collapse').eq(index).on('hidden.bs.collapse', function() {
shouldReturn = true;
var header = $('.card-header').eq(index);
header.removeClass('fixed-top');
header.css('z-index', 0);
// The return here is not ending the function?
return false;
});
var shouldReturn = false;
$(window).scroll(function() {
if (shouldReturn == false) {
var header = $('.card-header').eq(index);
var scroll = $(window).scrollTop();
if (scroll >= $('.card').eq(index).offset().top) {
header.addClass('fixed-top');
header.css('z-index', 10);
} else {
header.removeClass('fixed-top');
header.css('z-index', 0);
}
} else {
// return here is not ending the function.
return false;
}
});
}
For some reason, the return is not ending the function. I've learned that return does not end the function if it's in a while, for, foreach, or loop but I'm not using that here.
Is there anything I'm doing wrong?

Set boolean for a function inside a variable

// openMNav.isDropDown = false;
var openMNav = function () {
if (!this.isDropDown) {
this.isDropDown = true;
console.log(1);
} else {
this.isDropDown = false;
console.log(0);
}
My question is how to do something like this: var openMNav.isDropDown = false;.
I want to set openMNav -> isDropDown outside the function to false

You mean to set on the function itself, you should just use openMNav in the function not this.
function openMNav () {
if (!openMNav.isDropDown) {
console.log('do open');
openMNav.isDropDown = true;
}
else {
console.log('already opened');
openMNav.isDropDown = false;
}
}
openMNav();
openMNav();

Return from deep closures

If I have some code for example -
loadImages(pos - 1,function(){
loadImages(pos,function(){
loadImages(pos + 1);
});
});
function loadImages(key){
$('.slide:nth-child('+key+') .imgholder').each(function(){
par = $(this).parent();
imgHold = $(this);
if (loaded_images.indexOf($(imgHold).data('img-src')) > 0){
return true;
} else {
$(imgHold).attr('src',$(imgHold).data('img-src')).on('load', function() {
if (!$(imgHold).hasClass('fgimg')){
$(par).css('background-image','url('+$(imgHold).data('img-src')+')');
} else {
$(imgHold).css('visibility','visible');
}
// How do I return loadImages from here??
})
}
})
}
I want to trigger code after this function has completed so I need to return true at my // comment line. What is the official/best way of doing this?

You'll need a callback:
function loadImages(key, callback){
$('.slide:nth-child('+key+') .imgholder').each(function(){
par = $(this).parent();
imgHold = $(this);
if (loaded_images.indexOf($(imgHold).data('img-src')) > 0){
return true;
} else {
$(imgHold).attr('src',$(imgHold).data('img-src')).on('load', function() {
if (!$(imgHold).hasClass('fgimg')){
$(par).css('background-image','url('+$(imgHold).data('img-src')+')');
} else {
$(imgHold).css('visibility','visible');
}
callback(true);
// How do I return loadImages from here??
})
}
})
}
Usage:
loadImages(key, function(yourVar){
console.log(yourVar); // true
});
You have to pay attention on cases when callback is not invoked.
More info: http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

jquery conflict with js script

welcome all ,
i have a problem with my images slider , it runs successfuly until poll script excuted then it stops , tried to combine both scripts didn't work also tried to use noConflict but in stops both of them .
this is the slider
(function ($) {
$.fn.s3Slider = function (vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#sliderContent .sliderImage");
var itemsSpan = $("#sliderContent .sliderImage span");
items.each(function (i) {
$(items[i]).mouseover(function () {
mOver = true
});
$(items[i]).mouseout(function () {
mOver = false;
fadeElement(true)
})
});
var fadeElement = function (isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut / 2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if (items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut)
} else {
console.log("Poof..")
}
};
var makeSlider = function () {
current = (current != null) ? current : items[(items.length - 1)];
var currNo = jQuery.inArray(current, items) + 1;
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if (faderStat == true) {
if (!mOver) {
$(items[currNo]).fadeIn((timeOut / 6), function () {
if ($(itemsSpan[currNo]).css("bottom") == 0) {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false)
}
})
} else {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false)
}
})
}
})
}
} else {
if (!mOver) {
if ($(itemsSpan[currNo]).css("bottom") == 0) {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
$(items[currNo]).fadeOut((timeOut / 6), function () {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false)
}
})
})
} else {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
$(items[currNo]).fadeOut((timeOut / 6), function () {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false)
}
})
})
}
}
}
};
makeSlider()
}
})(jQuery);
and this is the poll script
window.onload = function() {
$(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {
if (s == "error") {
$(".sidePollCon").load("poll.html");
} else {
$(".vote_booroo").html("صوت الان");
$(".viewresults").html("شاهد النتيجة");
$("fieldset p").html("");
$(".results_booroo p").html("");
$(".result_booroo").attr("src", "../images/poll_color.jpg");
}
});
};

One potential problem could be the window.onload assignment. It is very prone to conflict.
Every time you do window.onload = the previous assignemnt will be overridden. See demo here:
The output shows that the first window.onload assignment never gets called, while the jQuery alternative does get called.
jQuery.noConflict does little in this regard. All it does is to prevent override the $ symbol so that another lib can use it.
So if you are also using the window.onload event to invoke the slider, then you have conflict. You can easily solve this problem by using the jquery format:
$(window).load(function() {
...
});
However usually you would tie the event to $(document).load(function(){...}); or in short form: $(function(){...}).
So for your poll that would be:
$(function(){
$(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {
if (s == "error") {
$(".sidePollCon").load("poll.html");
} else {
$(".vote_booroo").html("صوت الان");
$(".viewresults").html("شاهد النتيجة");
$("fieldset p").html("");
$(".results_booroo p").html("");
$(".result_booroo").attr("src", "../images/poll_color.jpg");
}
});
});
Hope that helps.

resolving conflicts in jquery (possibly with another JS library .. like script.aculo.us) can be resolved using noconflict()
http://api.jquery.com/jQuery.noConflict/
$.noConflict();
but make sure that u have no error in your javascript code itself. use firebug and
console.log('') to test your script.