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.
Related
When I resize the window, the toggle part is not working, I had to refresh the page again(keeping the window in the resized state) and it works fine.
bodyClass() part is working fine, just not the menu() part.
Please help :)
jQuery(document).ready(function() {
function menu(){
var memberAreaWidth = jQuery(window).width();
if( memberAreaWidth <= 900 ){
jQuery('.memebers-menu').css('display', 'none');
jQuery('.memebers-header-logo span').click(function(){
jQuery('.memebers-menu').toggle();
});
}
}
function bodyClass(){
var memberAreaWidth = jQuery(window).width();
if( memberAreaWidth > 900 ){
jQuery('body').addClass('fullwidth');
}else{
jQuery('body').removeClass('fullwidth');
}
}
jQuery(window).on("load resize",function(){
menu();
bodyClass();
});
});
Move the click event delegation so it only happens once. The rest of the code looks fine.
var smallWidth = false;
jQuery('.memebers-header-logo span').click(function(){
if (smallWidth){
jQuery('.memebers-menu').toggle();
}
});
function menu(){
var memberAreaWidth = jQuery(window).width();
if( memberAreaWidth <= 900 ){
jQuery('.memebers-menu').css('display', 'none');
smallWidth = true;
} else {
smallWidth = false;
}
}
Simplify your code a bit, put the event handlers outside the functions so they do not re-bind each time the function is called (which would end up with multiple event handlers firing); pass a parameter so you only have to calculate it once.
jQuery(document).ready(function() {
jQuery('.memebers-header-logo span').on('click', function() {
jQuery('.memebers-menu').toggle();
});
jQuery(window).on("load resize", function() {
var memberAreaWidth = jQuery(window).width();
menu(memberAreaWidth);
bodyClass(memberAreaWidth);
});
function menu(memberAreaWidth) {
if (memberAreaWidth <= 900) {
jQuery('.memebers-menu').hide();
}
}
function bodyClass(memberAreaWidth) {
if (memberAreaWidth > 900) {
jQuery('body').addClass('fullwidth');
} else {
jQuery('body').removeClass('fullwidth');
}
}
});
I have the following jQuery to vertically center text next to an image but it only loads after the page is re-sized.
$(window).load(function () {
$(function () {
var changeheight = function () {
$('.vertical-align').height($('.featurette-image').height());
}
$(window).on('resize', function () {
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
})
})
});
Remove window resize and should work on load
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});
Idk why OP deleted his answer but it was correct. I had to remove window resize
The following code is correct:
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});
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') });
I need that these header_top will be hidden at start of page, please help
var header_top = jQuery('#header-top-wrapper');
var header_top_button = jQuery('#header-wrapper a.accordion').addClass('active');
var header_top_height = header_top.height();
header_top_button.click(function() {
if(header_top_button.hasClass('active')) {
header_top_button.removeClass('active');
header_top.css({'overflow': 'hidden'});
header_top.stop(true, false).animate({"height": "0px"}, 500, function(){
});
}
else {
header_top.stop(true, false).animate({"height": header_top_height + "px"}, 500, function(){
header_top_button.addClass('active');
header_top.css({'overflow': 'visible'});
});
}
});
Best would be to add a css style:
#header-top-wrapper {
display:none;
}
and then show it with javascript
I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};
Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});
finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.