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.
Related
Im building a .clicktoggle function in jQuery and for the life of me i can't get a .stop like effect on it, basically i don't want it to play over and over if mash clicked.
I want it to be applied the the function so its self contained, that's where im stuck.
JS fiddle link
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
$('div').clickToggle(function() {
$('.testsubject').fadeOut(500);
}, function() {
$('.testsubject').fadeIn(500);
});
<div class="clickme">click me fast</div>
<div class="testsubject">how do i stop it playing over and over if you click alot</div>
Toggle .click seems like something alot of people would use so i thought it might be useful to ask it here
By adding a check to a boolean variable fadeInProgress, you can choose to only queue the animation if fadeInProgress is false. It then sets the value to true and executes the animation. When the animation is completed, set the value to false.
var fadeInProgress = false;
$('div').clickToggle(function() {
if (!fadeInProgress) {
fadeInProgress = true;
$('.testsubject').fadeOut(700, function(){fadeInProgress = false;});
}
}, function() {
if (!fadeInProgress) {
fadeInProgress = true;
$('.testsubject').fadeIn(700, function(){fadeInProgress = false;});
}
});
var clicked = false;
var doing = false;
$(".clickme").click(function(e) {
if (doing) {
return;
} else {
doing = true;
}
doing = true;
clicked = !clicked;
if (clicked) {
$('.testsubject').fadeOut(700, function() {
doing = false
});
} else {
$('.testsubject').fadeIn(700, function() {
doing = false;
});
}
});
This example is a simple toggle which only allows you to click when it is not doing anything. I explained on IRC, but as an example here, the function only runs when doing is set to false, which only happens when it's set after fadeIn() or fadeOut's callback function thingymajigger.
I am implementing a new feature to let my page to support endless scroll AJAX show. But when I pull down my page scroll bar, sometimes the same request occurs.
This means that alert(nextPage) method is executed and it shows the same result. I've added the event.stopPropagation() code, but it didn't solve the problem. How can i fix it?
(function(window, undefined) {
var app = {
event: {
add: function(obj, type, handle) {
try {
obj.addEventListener(type, handle, false);
} catch (e) {
try {
obj.attachEvent('on' + type, handle);
} catch (e) {
obj['on' + type] = handle;
}
}
}
},
scroll: function(id, url) {
$.get(url, function(html) {
$("#" + id).append(html)
});
}
}
})(window);
HTML
<script>
$(function() {
app.event.add(window, "scroll", function(event) {
var nextPage = getNextPage();
alert(nextPage);
app.scroll("productTable", '?page=' + nextPage);
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
});
});
</script>
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.
at first I'm loading all my js script in my header and it's all working properly. But I have one js file that need to be loaded inline/ load it in a certain page only.
this is the js file that I need to load
var myScroll,pullDownEl, pullDownOffset, generatedCount = 0;
function pullDownAction () {
setTimeout(function () {
var el, li, i;
el = document.getElementById('newlist');
if ( el.hasChildNodes() ) {
while ( el.childNodes.length >= 1 ) {
el.removeChild( el.firstChild );
}
}
for (i=0; i<6; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.insertBefore(li, el.childNodes[0]);
}
myScroll.refresh();
}, 1000);
}
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
myScroll = new iScroll('wrapper', {
//hideScrollbar: false,
//hScrollbar: false, vScrollbar: false, vScroll: false,
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
$('#pullDown').css('display', 'inherit');
$('#pullDown').css('display', 'none');
$('#thelist').css('display', 'none');
$('#newlist').css('display', 'inherit');
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
$('#pullDown').css('display', 'inherit');
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
$('#pullDown').css('display', 'inherit');
this.minScrollY = -pullDownOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction();
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
loading it with my other script in my header it works but now I'm using the jquery getScript. It loads the script (using firebug) but when I tried calling the functions inside my js file it give me a two errors
Cannot read property 'offsetHeight' of null
Cannot call method 'refresh' of undefined
This is how I call my js script using getScript
$(document).ready(function() {
$('.email').click(function (){
$.getScript("assets/js/scroll.js",function() {
pullDownAction();
loaded();
});
});
});
Help anyone
I know this may suggest more work than you want to do, but have you tried doing namespacing? I do not know if this works 100% (as i am not sure of the reasoning why that is not working for you), but have you tried this?
(function( PullDown, $, undefined ) {
//Private variables and this is a great way for minification, you will get the most out of it
var myScroll,pullDownEl, pullDownOffset, generatedCount = 0;
function pullDownAction () {
//... your stuff here
}
function loaded() {
//... more your stuff here
}
}(window.PullDown = window.PullDown || {}, jQuery) // avoids name space collision w/ jQuery
Now do the same things, but with this edit.
$(document).ready(function() {
$('.email').click(function (){
$.getScript("assets/js/scroll.js",function() {
window.PullDown.pullDownAction();
window.PullDown.loaded();
});
});
});
If i am not mistaken, or have bad copy and paste skills, this should work out just great!
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.