Anyone know what is wrong with this code JS code? The function does not fire and console isn't offering any insight. This was working in the click function with minor changes but not in its own function.
//History Chart
$expanded = true;
var $parent;
function graphShowHide(parent) {
$parent = parent;
if ($expanded) {
$('#ExpandedGraphRow').hide("fast", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '415px');
$(parent).find('#ExpandedGraphRow').css({
position: 'relative',
bottom: '0'
});
$(parent).find('.animation-wrapper').animate({
height: '397px'},
200, function() {
});
}
setTimeout(function($) {
$(parent).find('.history-bar-wrapper').width('100%');
}, 200);
$(parent).find('h4 img').hide('fast');
$(parent).find('h4 span').width('100%').css('float', 'none');
$expanded = false;
$(this).text('show history');
} else {
var currentWidth = $(parent).find('h4').width();
var nthChild = $(parent).index();
if($('body').innerWidth() > 982 && nthChild == 2) {
$('.nbs-flexisel-nav-right').trigger('click');
} else if($('body').innerWidth() < 983 && nthChild == 1) {
$('.nbs-flexisel-nav-right').trigger('click');
}
$(parent).find('h4 span, .history-bar-wrapper').width(currentWidth);
$(parent).find('h4 span').css('float', 'left');
$(parent).find('h4 img').show('slow');
$('#ExpandedGraphRow').show("slow", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '748px');
$(parent).find('#ExpandedGraphRow').css({
position: 'absolute',
bottom: '66px'
});
$(parent).find('.animation-wrapper').animate({
height: '729px'},
200, function() {
});
}
$(this).text('hide history');
$expanded = true;
}
}
$('.history-button').click(graphShowHide('.BMI'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Try this:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
You are calling the function, not binding it to the click. Wrap the call in another function for it to work correctly:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
http://learn.jquery.com/javascript-101/functions/
You have to change this line:
$('.history-button').click(graphShowHide('.BMI'));
By this one:
$('.history-button').click(function() { graphShowHide('.BMI') });
Related
For some reason my counter isn't changing to 1 when I click again it makes the width 100% again.(Found this out using Chrome's inspect)
$(document).ready(function columnreacts1() {
var columncounter1 = 0;
if (columncounter1 == 0) {
$("#lol").click(function() {
$("#column1").animate({ width: '100%' });
});
$("#lol").click(function() {
$("#column2").hide();
});
columncounter1 = 1;
} else {
$("#lol").click(function() {
$("#column1").animate({ width: '50%' });
});
$("#lol").click(function() {
$("#column2").show();
});
columncounter1 = 0;
}
});
It seems the condition need to be checked after click event. Inside the event check the if condition.Also action on column2 & column1 is due to same event,so attaching one click event will work
$(document).ready(function columnreacts1() {
var columncounter1 = 0;
$("#lol").click(function() {
if(columncounter1 === 0) {
$("#column1").animate({width: '100%'});
$("#column2").hide();
columncounter1 = 1;
}
else {
$("#column1").animate({width: '50%'});
$("#column2").show();
columncounter1 = 0;
}
});
});
How can I combine this to reduce the repetition. What is the best way so I don't have duplicate click functions and do you have any suggestions to combine the lightning functions even though the parameters are different? Thanks
$(document).ready(function(){
var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0;
lightning_one();
lightning_two();
lightning_three();
$("#head").click(function(){
if(headclix < 9){
$("#head").animate({left:"-=367px"}, 500);
headclix += 1;
} else{
$("#head").animate({left:"0px"}, 500);
headclix = 0;
}
})
$("#eyes").click(function(){
if(eyeclix < 9){
$("#eyes").animate({left:"-=367px"}, 500);
eyeclix += 1;
} else{
$("#eyes").animate({left:"0px"}, 500);
eyeclix = 0;
}
})
$("#nose").click(function(){
if(noseclix < 9){
$("#nose").animate({left:"-=367px"}, 500);
noseclix += 1;
} else{
$("#nose").animate({left:"0px"}, 500);
noseclix = 0;
}
})
$("#mouth").click(function(){
if(mouthclix < 9){
$("#mouth").animate({left:"-=367px"}, 500);
mouthclix += 1;
} else{
$("#mouth").animate({left:"0px"}, 500);
mouthclix = 0;
}
})
});//end doc.onready function
function lightning_one(){
$("#container #lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()", 4000);
}
function lightning_two(){
$("#container #lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()", 5000);
}
function lightning_three(){
$("#container #lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()", 7000);
}
Something like that
var obj = {
headclix: 0,
eyesclix: 0,
noseclix: 0,
mouthclix: 0
}
var types = ['head', 'eyes', 'nose', 'mouth'];
for (var i in types) {
var type = types[i];
$("#" + type).click(function() {
if (obj[type + 'clix'] < 9) {
$("#" + type).animate({ left: "-=367px" }, 500);
obj[type + 'clix'] += 1;
} else {
$("#" + type).animate({ left: "0px" }, 500);
obj[type + 'clix'] = 0;
}
});
}
This is what I had in mind:
$(document).ready(function () {
var head = {clix: 0, id: $("#head")}, eyes = {clix: 0, id: $("#eyes")}, nose = {clix: 0, id: $("#nose")},
mouth = {clix: 0, id: $("#mouth")};
lightning_one();
lightning_two();
lightning_three();
head.click(function () {
body_clix(head.id, head.clix)
})
eyes.click(function () {
body_clix(eyes.id, eyes.clix)
})
nose.click(function () {
body_clix(nose.id, nose.clix)
})
mouth.click(function () {
body_clix(mouth.id, mouth.clix)
})
});//end doc.onready function
function body_clix(b_part_id, clix) {
if (clix < 9) {
b_part_id.animate({left: "-=367px"}, 500);
clix += 1;
} else {
b_part_id.animate({left: "0px"}, 500);
mouthclix = 0;
}
}
function lightning_one() {
$("#container").find("#lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()", 4000);
}
function lightning_two() {
$("#container").find("#lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()", 5000);
}
function lightning_three() {
$("#container").find("#lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()", 7000);
}
You can try this:
$(document).ready(function() {
var clickCounter = [];
var types = ['head', 'eyes', 'nose', 'mouth'];
//lightning_one();
//lightning_two();
//lightning_three();
types.forEach(function(type) {
clickCounter[type] = 0;
$("#" + type).click(function() {
processClick(this, type);
});
});
function processClick(element, type) {
if (element) {
if (clickCounter[type] < 9) {
$(element).animate({left: "-=367px"}, 500);
clickCounter[type] += 1;
} else {
$(element).animate({left: "0px"}, 500);
clickCounter[type] = 0;
}
console.log(type + ': ' + clickCounter[type]);
}
}
function lightning_one() {
$("#container #lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()", 4000);
}
function lightning_two() {
$("#container #lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()", 5000);
}
function lightning_three() {
$("#container #lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()", 7000);
}
});
div.holder > div{
display:inline-block;
border: 1px solid black;
margin:10px;
padding:5px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click on one of these: </p>
<div class='holder'>
<div id="head">Head</div>
<div id="eyes">Eyes</div>
<div id="nose">Nose</div>
<div id="mouth">Mouth</div>
</div>
I have a div say div1 and I want when that div1 is completely scrolled then a button to appear on the navigation bar...else the button should remain hidden. I have tried the following code:
$(function(){
$("#b1").hide();
var h=$("#d1").height();
var h1=$("#d2").height();
var eventPosition=h+h1;
$(window).scroll(function{
if(window.screenY>=eventPosition)
{
fireEvent();
}
else{
fireEvent1();
}
});
fireEvent()
{
$("#b1").show();
}
fireEvent1()
{
$("#b1").hide();
}
});
you missed the function word
$(function () {
$("#b1").hide();
var h = $("#d1").height();
var h1 = $("#d2").height();
var eventPosition = h + h1;
$(window).scroll(function{
if (window.screenY >= eventPosition) {
fireEvent();
}
else {
fireEvent1();
}
});
function fireEvent()
{
$("#b1").show();
}
function fireEvent1()
{
$("#b1").hide();
}
});
$(document).ready(function(){
$("#b1").hide();
$(window).scroll(function(){
if(($(window).scrollTop()+$(window).height()) >=
$(document).height())
{
fireEvent();
}
else{
fireEvent1();
}
});
function fireEvent()
{
$("#b1").show();
}
function fireEvent1()
{
$("#b1").hide();
}
});
Here is your code with some changes. When it gets to the bottom a button will be shown.
Here is a jsfiddle example.
https://jsfiddle.net/okisinch/6t02bum1/1/
I hope this will help you to find the solution to your problem.
I create a pop-up dialog box which lift up on left bottom while user scroll page.
You can see it live here- http://uposonghar.com/jobs/odesk/daniel/new/
My problem is it does not smoothly lift up first time, then it is ok. Anyone please suggest any idea to fix it. Need to make smoothly lift up.
My code
<div id="scrolltriggered" style="width: 310px; left: 10px; bottom: 10px;">
<div id="inscroll">
x<a href="http://www.google.com" target="_blank"><img src="images/buyersguide.png" alt="Free Resources" height="235" width="310">
</a>
</div>
</div>
<script type="text/javascript">
var stb = {
hascolsed: false,
cookieLife: 7,
triggerHeight: 30,
stbElement: ""
};
</script>
Javascript Code-
if (typeof stb === "undefined")
var stb = {};
jQuery(document).ready(function () {
jQuery("#closebox").click(function () {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'-210px' }, 700, function () {
jQuery('#scrolltriggered').hide();
stb.hascolsed = true;
jQuery.cookie('nopopup', 'true', { expires: stb.cookieLife, path: '/' });
});
return false;
});
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
stb.boxOffset = '';
if (stb.stbElement != '') {
stb.boxOffset = jQuery(stb.stbElement).offset().top;
}
jQuery(window).resize(function () {
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
});
jQuery(window).scroll(function () {
stb.y = jQuery(window).scrollTop();
stb.boxHeight = jQuery('#scrolltriggered').outerHeight();
stb.scrolled = parseInt((stb.y + stb.windowheight) / stb.totalheight * 100);
if (stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":hidden") && stb.hascolsed != true) {
jQuery('#scrolltriggered').show();
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'10px' }, 700, function () {
});
}
else if (!stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":visible") && jQuery('#scrolltriggered:animated').length < 1) {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':-stb.boxHeight }, 700, function () {
jQuery('#scrolltriggered').hide();
});
}
});
jQuery('#stbContactForm').submit(function (e) {
e.preventDefault();
stb.data = jQuery('#stbContactForm').serialize();
jQuery.ajax({
url:stbAjax.ajaxurl,
data:{
action:'stb_form_process',
stbNonce:stbAjax.stbNonce,
data:stb.data
},
dataType:'html',
type:'post'
}).done(function (data) {
jQuery('#stbMsgArea').html(data).show('fast');
});
return false;
});
});
(function(stb_helpers) {
stb_helpers.showBox = function(scrolled, triggerHeight, y) {
if (stb.isMobile()) return false;
if (stb.stbElement == '') {
if (scrolled >= triggerHeight) {
return true;
}
}
else {
if (stb.boxOffset < (stb.windowheight + y)) {
return true;
}
}
return false;
};
stb_helpers.isMobile = function(){
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
return true;
}
else return false;
}
})(stb);
i think you need css changes, copy paste the following in your aspx
<div style="width: 310px; left: 10px; bottom: -225px; display: none;" id="scrolltriggered">
Hope it Helps
All you need to do is add the following line to your document ready as the First line
$("#scrolltriggered").css({bottom: -235});
This will make sure that the popup is scrolled to the bottom by 235px. If you need it to scroll variably add the Elements height by using jquery selector.
See the Fiddle Here
I am quite new to Javascript (intermediate in HTML & CSS), though I am pretty good at working things out on my own by looking up other's examples. Unfortunately, I am having significant trouble with this one.
I have a table displaying 3 links to the viewer. Each link when clicked, slides a hidden div open to the right. When one of the other links are clicked, the opened div slides back to being hidden, and then the other one slides open.
What I am looking for, is to hide the divs again when the mouse is clicked on the link again, and also when the mouse is clicked outside the div (or anywhere on the page, really).
I have tried using "e.stopPropagation" but it doesn't seem to be working for me.
Any help is greatly appreciated - thank you.
I have a jsFiddle that I created for practice:
http://jsfiddle.net/AuU6D/3/
This is my jQuery code:
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
Try
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
left: -($target.width())
}).finish().animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
} else if ($target.hasClass('active')) {
$target.removeClass('active').finish().animate({
left: -$target.width()
}, 500);
}
});
$(document).click(function(e){
var $target = $(e.target), $active = $('div.panel.active');
if($active.length && $target.closest('a.panel').length == 0 && $target.closest($active).length == 0){
$active.removeClass('active').finish().animate({
left: -$active.width()
}, 500);
}
})
});
Demo: Fiddle
DEMO
$(document).click(function (e) {
if (!$(e.target).hasClass('panel')) {
$('div.panel').removeClass('active').removeAttr('style').css('background', ' #e4e4e4');
}
});
or
DEMO
$(document).click(function (e) {
console.log($(e.target).hasClass('panel'));
if (!$(e.target).hasClass('panel')) {
$('div.panel.active').removeClass('active').finish().animate({
left: -$('#right').width()
}, 500);
}
});