I have the following code:
$(function() {
$('.type_choice_textarea').on('focus', function() {
$(this).css("height", "150px");
});
if ($('.type_choice_textarea').val().length == 0) {
$('.type_choice_textarea').on('blur', function() {
$(this).css("height", "30px");
});
}
});
but blur does not work. How do I use if in blur?
Just write you if condition within blur event handler
$(function() {
let elem = '.type_choice_textarea';
$(elem).on('focus', function() {
$(this).css("height", "150px");
});
$(elem).on('blur', function() {
if ($(this).val().length == 0) {
$(this).css("height", "30px");
}
});
});
Related
I am working on a task like kanban board. Everything is working fine but when I click on vertical scroll bar it hides and I am not able to scroll up and down.
I am using below code for horizontally scrolling on drag
$('.at-priortyboxsholder').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft)
.addClass("dragging");
$(this).css('overflow','hidden')
return false;
}).mouseup(function (event) {
$(this)
.data('down', false)
.removeClass("dragging");
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
}).mouseout(function() {
$(this).css('overflow','auto')
});
I have solved my issue by updating code
$('.at-priortyboxsholder').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft)
.addClass("dragging");
}).mouseup(function (event) {
$(this)
.data('down', false)
.removeClass("dragging");
}).mousemove(function (event) {
if ($(this).data('down') == true) {
$(this).css('overflow','hidden')
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
}).mouseout(function() {
$(this).css('overflow','auto')
});
I want to add automatic scrolling time to my slider code but unable to do it can you please suggest me something to help me out with the code to make this slider slide automatic with a set interval of time.
'use strict';
$(document).ready(function () {
var $slides = $('.con__slide').length,
topAnimSpd = 650,
textAnimSpd = 1000,
nextSlideSpd = topAnimSpd + textAnimSpd,
animating = true,
animTime = 4000,
curSlide = 1,
nextSlide,
scrolledUp;
setTimeout(function () {
animating = false;
}, 2300);
//navigation up function
function navigateUp() {
if (curSlide > 1) {
scrolledUp = true;
pagination(curSlide);
curSlide--;
}
}
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}
}
$(window).on('load', function () {
$('.con__slide--1').addClass('active');
});
//pagination function
function pagination(slide, target) {
animating = true;
// Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
if (target === undefined) {
nextSlide = scrolledUp ? slide - 1 : slide + 1;
} else {
nextSlide = target;
}
////////// Slides //////////
$('.con__slide--' + slide).removeClass('active');
setTimeout(function () {
$('.con__slide--' + nextSlide).addClass('active');
}, nextSlideSpd);
////////// Nav //////////
$('.con__nav-item--' + slide).removeClass('nav-active');
$('.con__nav-item--' + nextSlide).addClass('nav-active');
setTimeout(function () {
animating = false;
}, animTime);
}
// Mouse wheel trigger
$(document).on('mousewheel DOMMouseScroll', function (e) {
var delta = e.originalEvent.wheelDelta;
if (animating) return;
// Mouse Up
if (delta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
// Direct trigger
$(document).on("click", ".con__nav-item:not(.nav-active)", function () {
// Essential to convert target to a number with +, so curSlide would be a number
var target = +$(this).attr('data-target');
if (animating) return;
pagination(curSlide, target);
curSlide = target;
});
// Arrow trigger
$(document).on('click', '.con__nav-scroll', function () {
var target = $(this).attr('data-target');
if (animating) return;
if (target === 'up') {
navigateUp();
} else {
navigateDown();
}
});
// Key trigger
$(document).on("keydown", function (e) {
if (animating) return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
var topLink = $(".con__slide--4-top-h-link"),
botLink = $(".con__slide--4-bot-h-link");
$(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
mouseenter: function mouseenter() {
topLink.css('text-decoration', 'underline');
botLink.css('text-decoration', 'underline');
},
mouseleave: function mouseleave() {
topLink.css('text-decoration', 'none');
botLink.css('text-decoration', 'none');
}
});
});
Hope you understand the above code if you have any query in it feel free to ask me and please help me out as soon as possible.
Added setInterval in your code.
setInterval(() => {
if (curSlide >= $slides){
if (animating) return;
pagination(4, 1);
curSlide = 1;
}
else
navigateDown();
}, 10000);
Check updated fiddle.
update below navigateDown code.
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}else{
curSlide=1;
pagination(4,1)
}
}
Add this below line
setInterval(navigateDown,7000);
This code works perfectly but I need it to work when I open my browser. Also when I resize my browser to have mobile menu both functions work hover and toggle.
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
});
My best approach will be replacing the code with:
var reszFn = function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
};
$(document).on('ready', reszFn);
$(window).on('resize', reszFn);
Just trigger the resize function
$(window).on('resize', function(event) {
var windowWidth = $(window).width();
if (windowWidth < 1024) {
$(document).ready(function() {
$(".menu-item-has-children").hover(function() {
$(".sub-menu").css("display", "block");
}, function() {
$(".sub-menu").css("display", "none");
});
});
} else if (windowWidth > 1024) {
jQuery(document).ready(function() {
$('.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();
});
});
}
}).resize();
I have slide and when I click prev or next button, go to other images. Everything is OK. But I want add time option and auto slide in 10 seconds.
My click function:
$(document).ready(function () {
$(window).resize();
$("#nav #prevslide").click(function () {
ChangeBackground($("#backgrounds img.current"), -1);
});
$("#nav #nextslide").click(function () {
ChangeBackground($("#backgrounds img.current"), 1);
});
});
And:
function ChangeBackground(background, direction) {
if (is_animating)
return;
is_animating = true;
$background = $(background);
$newItem = null;
if (direction == -1) {
$newItem = $background.prev();
if ($newItem.length == 0) {
$newItem = $("#backgrounds img").last();
}
} else {
$newItem = $background.next();
if ($newItem.length == 0) {
$newItem = $("#backgrounds img").first();
}
}
$background.fadeOut(300);
$newItem.fadeIn(300, function () {
$("#backgrounds img").removeClass("current");
$newItem.addClass("current");
is_animating = false;
});
$clone = $("div.item.current").clone();
$clone.removeClass("current").addClass("new");
$clone.find("h1").html($newItem.attr("alt"));
$clone.find("h2").html($newItem.attr("data-title2"));
$clone.find("p").html($newItem.attr("data-desc"));
$clone.css({ display: "none" });
$("div.item.current").after($clone);
$("div.item.current").fadeOut(300, function () {
$(this).remove();
});
$clone.fadeIn(300, function () {
$(this).removeClass("new").addClass("current");
});
}
How can I add this option? Thank you.
$(document).ready(function () {
$(window).resize();
$("#nav #prevslide").click(function () {
ChangeBackground($("#backgrounds img.current"), -1);
});
$("#nav #nextslide").click(function () {
ChangeBackground($("#backgrounds img.current"), 1);
});
setInterval(function(){ $("#nav #nextslide").click()},10000);
});
your also can use following
setInterval(function(){ChangeBackground($("#backgrounds img.current"), -1)},10000);
This is my jS code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<script src="js/mr_lp_minimizr.js"></script>
<script>
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
</script>
<script type="text/javascript">
jQuery.fn.extend({
slideRightShow: function(speed) {
return this.each(function() {
$(this).show('slide', {direction: 'right'}, +speed || 1000);
});
},
slideLeftHide: function(speed) {
return this.each(function() {
$(this).hide('slide', {direction: 'left'}, +speed || 1000);
});
},
slideRightHide: function(speed) {
return this.each(function() {
$(this).hide('slide', {direction: 'right'}, +speed || 1000);
});
},
slideLeftShow: function(speed) {
return this.each(function() {
$(this).show('slide', {direction: 'left'}, +speed || 1000);
});
}
});
$(document).ready(function () {
$("#slides :first-child").addClass("currentSlide");
$("#slides :not(:first-child)").hide();
$(".left_hand_icon").button().click(function () { //This is the line where issue is
currentSlide = $("#slides .currentSlide");
if(currentSlide.prev().prev().size() < 1) {
// The incoming slide is the first - disable Left button
$(".left_hand_icon").button("disable");
}
currentSlide.prev().addClass("currentSlide");
currentSlide.removeClass("currentSlide");
currentSlide.prev().slideLeftShow();
currentSlide.slideRightHide();
$(".right_hand_icon").button("enable");
}).button("disable");
$(".right_hand_icon").button().click(function () {
currentSlide = $("#slides .currentSlide");
if(currentSlide.next().next().size() < 1) {
// The incoming slide is the last - disable Right button
$(".right_hand_icon").button("disable");
}
currentSlide.next().addClass("currentSlide");
currentSlide.removeClass("currentSlide");
currentSlide.next().slideRightShow();
currentSlide.slideLeftHide();
$(".left_hand_icon").button("enable");
});
});
</script>
I add this comment to the line for which the error shows: //This is the line where issue is
You haven't included jQuery ui widget. There is where the button is.
http://api.jqueryui.com/category/widgets/