Setting the Selector's:
btNext = $('<a>' + options.labelNext + '</a>').attr("href", "#").addClass("buttonNext");
btPrevious = $('<a>' + options.labelPrevious + '</a>').attr("href", "#").addClass("buttonPrevious");
btFinish = $('<a>' + options.labelFinish + '</a>').attr("href", "#").addClass("buttonFinish");
test = $('<a class="LinkMe" href="#">MotherBoard</a>')
Click():
$(test).click(function () {
showStep(0);
});
$(btNext).click(function () {
if ($(this).hasClass('buttonDisabled')) {
return false;
}
doForwardProgress();
if ($.isFunction(options.onNext)) {
if (!options.onNext.call(this, $(steps))) {
}
}
return false;
});
$(btPrevious).click(function () {
if ($(this).hasClass('buttonDisabled')) {
return false;
}
doBackwardProgress();
if ($.isFunction(options.onPrevious)) {
if (!options.onPrevious.call(this, $(steps))) {
}
}
return false;
});
$(btFinish).click(function () {
if (!$(this).hasClass('buttonDisabled')) {
if ($.isFunction(options.onFinish)) {
if (!options.onFinish.call(this, $(steps))) {
return false;
}
} else {
var frm = obj.parents('form');
if (frm && frm.length) {
frm.submit();
}
}
}
return false;
});
ALL of the click functions work EXCEPT the selector (test), ive tried taking the click function out of the plugin and in a
$(document).ready(function () {});
and it still doesnt work thier, Please help.
Try doing:
test.click(function() {});
or
$("a.LinkMe").click(function() {});
// since test is a link having a class 'LinkMe'
But if those elements are dynamically added into your HTML, you can use .on() or .delegate()
$("a.LinkMe").on("click", function() {});
// OR
$(document).on("click", "a.LinkMe", function() {});
// OR
$("body").delegate("a.LinkMe", "click", function() {});
Take a look at this.
Instead of doing
test = $('<a class="LinkMe" href="#">MotherBoard</a>')
You'll want to do instead
$test = $('a.LinkMe');
// or just
$test = $('.LinkMe');
Same for the btNext, btPrevious, btFinish. I'm not sure why they work, maybe someone else can explain it to me.
Related
Im trying to write a function that fades X elements out in sequence and once finished run another function.
function fadeOut(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
});
showTimeline(pro);
});
}
function showTimeline(pro){
$('.timeline-container').addClass('in-view');
console.log(pro);
}
For some reason 'showTimeline()' runs at the same time and I can't understand why?
Full JS
$(document).ready(function() {
'use strict';
function init() {
function showPath(pro) {
fadeOut(pro);
}
function fadeOut(pro) {
$('.ul li').each(function(i) {
$(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
$('.title').delay(500).fadeOut();
});
});
showTimeline(pro);
}
function showTimeline(pro) {
$('.container').addClass('in-view');
console.log(pro);
}
$('.path').on('click', function() {
showPath( $(this).attr('data-pro') );
});
} //end init
init();
}); //end doc ready
You are calling showTimeline function in a loop. Call it this way instead ...
function fadeOut(pro) {
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200 * (i + 1)).fadeOut(200, function() {
$('.opening-title').delay(500).fadeOut();
});
});
showTimeline(pro);
}
function showTimeline(pro) {
$('.timeline-container').addClass('in-view');
console.log(pro);
}
You need to wait until all elements are faded. Working Example
But, basically just add a counter to know when all elements are faded:
var hiddenElements = 0;
function fadeOut(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
hiddenElements++;
if (hiddenElements === $('.interactive ul li').length){
showTimeline(pro);
}
});
});
}
You can use jquery when
Hope this snippet will be useful
var fadeOut=function(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
});
showTimeline(pro);
});
}
var showTimeline=function(pro){
$('.timeline-container').addClass('in-view');
console.log(pro);
}
$.when(fadeOut()).then(showTimeline());
I am not able to completely test it but you can try this
$(document).ready(function() {
'use strict';
$('.path').on('click', function() {
$.when(fadeOut($(this).attr('data-pro'))).then(showTimeline($(this).attr('data-pro')));
});
function fadeOut(pro) {
$('.ul li').each(function(i) {
$(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
$('.title').delay(500).fadeOut();
});
});
}
function showTimeline(pro) {
$('.container').addClass('in-view');
console.log(pro);
}
});
I have two functions.
<script type='text/javascript'>
$(function(){
$('form[name=checkout_confirmation]').submit(function(){
var return_value = false;
if (!$('#matc').is(':checked')){
alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
}else{
return_value = true;
}
return return_value;
});
});
</script>
AND
<script type="text/javascript">
$(function() {
$("#confirmation .btn").click(function(){
$(this).button('loading').delay(100000).queue(function() {
});
});
});
</script>
I need the second function to load when return_value = true;.
Can anyone please help as to how i can merge these two function and run based on the else statement.
Try this, just call the disered block when return_value=true;
$(function () {
$('form[name=checkout_confirmation]').submit(function () {
var return_value = false;
if (!$('#matc').is(':checked')) {
alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
} else {
// call of the desired block here
$("#confirmation .btn").click(function () {
$(this).button('loading').delay(100000).queue(function () {
});
});
return_value = true;
}
return return_value;
});
});
Just move the second action into the first function where you want the action to take place..
$(function() {
$('form[name=checkout_confirmation]').submit(function() {
var return_value = false;
if (!$('#matc').is(':checked')) {
alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
} else {
return_value = true;
$(this).button('loading').delay(100000).queue(function() {});
}
return return_value;
});
});
I am trying to add a delay to the toggleclass 'slidein' however it doesn't seem to be adding to it.
here is my fiddle
and here is my code;
$(function () {
$(".expand").on("click", function () {
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
$(this).next().children('#slidinghold').delay(5000).toggleClass('slidein');
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
Try this:
$(this).next().children('#slidinghold').delay(5000).queue(function(){
$(this).toggleClass("slidein").dequeue();
});
Fiddle
use setTimeout instead of delay. Sample :
$(".expand").on("click", function () {
$(".expand").next().children('#slidinghold').removeClass('active-expand');
$(this).next().children('#slidinghold').addClass('active-expand');
setTimeout(function () {
$('.active-expand').next().children('#slidinghold').toggleClass('slidein');
}, 500);
});
demo https://jsfiddle.net/anthonypagaycarbon/v1geqa8e/
as said by jQuery's doc
.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases
So you can use window.setTimeout to achieve this:
$(function() {
function toggleClassDelay(element,class,delay) {
window.setTimeout(function() {
element.toggleClass(class)
},delay);
}
$(".expand").on("click", function() {
var el;
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
el = $(this).next().children('#slidinghold');
toggleClassDelay(el,"slidein",5000)
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
I'm not very good with javascript and I have this javascript code. When I click on the link the div shows and hides. The problem is the showing effect, it pops up and doesn't look good so I want the div to slide down when it shows.
Here's the code:
<script type="text/javascript">
var s;
ShowHideWidget = {
settings : {
clickHere : document.getElementById('clickHere'),
dropdown_signup : document.getElementById('dropdown_signup')
},
init : function() {
//kick things off
s = this.settings;
this.bindUIActions();
},
bindUIActions : function() {
//Attach handler to the onclick
/*
s.clickHere.onclick = function() {
ShowHideWidget.toggleVisibility(s.showing);
return false;
};
*/
ShowHideWidget.addEvent(s.clickHere, 'click', function() {
ShowHideWidget.toggleVisibility(s.dropdown_signup);
});
},
addEvent : function(element, evnt, funct) {
//addEventListener is not supported in <= IE8
if (element.attachEvent) {
return element.attachEvent('on'+evnt, funct);
} else {
return element.addEventListener(evnt, funct, false);
}
},
toggleVisibility : function(id) {
if(id.style.display == 'block') {
id.style.display = 'none';
} else {
id.style.display = 'block';
};
}
};
(function() {
ShowHideWidget.init();
})();
</script>
You can achieve it by using jquery slideDown and slideUp functions:
Add following code:
toggleVisibility : function(id) {
if( $(id).is(':visible') ){
$(id).slideUp();
} else {
$(id).slideDown();
}
}
DEMO
You'd do well to use something like jQuery's .slideDown function. You'll have to write a lot of code to do this yourself.
When I click on the 'slide-toggle' link, my url turns from mysite.com to mysite.com/#
I was told that I needed to put a 'return false' somewhere in here but I'm not sure where. Can someone kindly help me out?
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
});
It would be nicer not to use return false but to use event.preventDefault instead. You can put this at the very top of your event handler:
$('a#slide-toggle').click(function(e) { // note e added as the function's parameter
e.preventDefault();
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
This has the same effect as return false, but with the following advantages:
It is semantically more logical -- it does what it says
You can put it at the head of the function, so it is immediately obvious
You can have multiple exit points without having to ensure they are all return false
If any part of your code causes an error, the default action will still be prevented
like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
Probably you need to add the return false also in the $('a#slide-toggle').click() function
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
**return false;**
});
});
I think, it should be like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
You have one at the end of slide-up; add one to the end of slide-toggle.