I am working on a responsive design template where the horizontal menu-bar will convert into an icon to save space. Basically I have created 3 media queries, i.e. > 800px, betweeen 500 to 800px and less than 500px.
.
It is working fine, but when the windowWidth of the screen reaches the range of 484px to 500px, the menu-bar just disappears! You can go to the link to view the test page : http://www.acetraining.com.sg/responsive1/
// JavaScript Document
var windowSize = "";
var windowWidth = 0;
var actualSize = 0;
$(document).ready(function (e) {
checkBrowserSize();
setInterval("checkBrowserSize()", 100);
$("a.mobile_menu").on("click", function () {
var navHeight = $("nav").height();//finding current height of navigation
var newNavHeight = $("nav div").height();
//mobile screen
if (navHeight == 0) {
$("nav").animate({"height": newNavHeight + "px"}, 500);
$(this).addClass("selected");
}
//retract back to 0
else {
$("nav").animate({"height": "0px"}, 500);
$(this).removeClass("selected");
}
});
});
function checkBrowserSize() {
windowWidth = window.outerWidth;
var contentWidth = $("body").width();
var sizeDiff = windowWidth - contentWidth;//size of scrollbar
actualSize = windowWidth - sizeDiff;
if (actualSize > 800) {
newWindowSize = "large";
}
if (actualSize <= 800 && actualSize > 500) {
newWindowSize = "medium";
}
if (actualSize <= 500) {
newWindowSize = "small";
}
//display out
$("h1").html(windowWidth + "(" + contentWidth + "(contentWidth) + " + sizeDiff + "(sizeDiff)) is " + newWindowSize);
if (windowSize != newWindowSize) {
windowSize = newWindowSize;
//invoke changeNav
changeNav();
}
else {
//append the word no change
$("h1").append("--no change--");
}
}//end of checkBrowserSize()
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}//end of changeNav()
I suspect the problem lies in my javascript file. I have attached the codes for your perusal:
I am hoping there is a way to show the menus between these ranges.
The media query in screen_layout_large.css css file is hiding the mobile menu. Either edit the media query to give a min-width or show the mobile menu as follows in changeNav function.
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").show().removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}
Related
I have a big function which has many others functions, (But I can't have all those functions because make a wrong with my others scripts) therefore I only need the functions which make the action which I need; recently I was helped to find a function, but I think which miss other function which Hide the content, and show a button that I need. When I run the script works well, but doesn't show a button and too isn't hidden that bar when you return to the initial position. I tested the big script only for know if there is my mistake and elementally yep.
The big script you can find this here and too the example of what I'm trying to do See the code and example
You can take a look of what I'm trying to do on this image and the problem:
See Picture of the problem
My current script is this, works very well, but miss those two details which are into the big script. Please help me.
// JavaScript Document
;
jQuery(document).ready(function () {
"use strict";
jQuery(window).scroll(function () {
var scrollTop = jQuery(window).scrollTop();
var docHeight = jQuery(document).height();
var winHeight = jQuery(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100);
jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
});
jQuery(window).scroll(function () {
if (jQuery('#pp_fixed_menu').val() == 1)
{
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper .above_top_bar').hide();
jQuery('.extend_top_contact_info').hide();
jQuery('.top_bar').addClass('scroll');
jQuery('#post_info_bar').addClass('scroll');
} else if (jQuery(this).scrollTop() < 200) {
jQuery('.header_style_wrapper .above_top_bar').show();
jQuery('.extend_top_contact_info').show();
jQuery('#custom_logo img').removeClass('zoom');
jQuery('#custom_logo img').css('maxHeight', '');
jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
jQuery('.top_bar').removeClass('scroll');
jQuery('#post_info_bar').removeClass('scroll');
}
} else {
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper').addClass('nofixed');
} else {
jQuery('.header_style_wrapper').removeClass('nofixed');
}
}
});
});
If you want to show button (arrow) you need to add it in your html then you can use this script:
<!-- language: lang-js -->
// JavaScript Document
;
jQuery(document).ready(function() {
"use strict";
jQuery(window).scroll(function() {
var scrollTop = jQuery(window).scrollTop();
var docHeight = jQuery(document).height();
var winHeight = jQuery(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100);
jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
});
jQuery(window).scroll(function() {
var calScreenWidth = jQuery(window).width();
if (jQuery(this).scrollTop() > 200) {
jQuery('#toTop').stop().css({
opacity: 0.5,
"visibility": "visible"
}).animate({
"visibility": "visible"
}, {
duration: 1000,
easing: "easeOutExpo"
});
} else if (jQuery(this).scrollTop() == 0) {
jQuery('#toTop').stop().css({
opacity: 0,
"visibility": "hidden"
}).animate({
"visibility": "hidden"
}, {
duration: 1500,
easing: "easeOutExpo"
});
}
});
jQuery('#toTop, .hr_totop').on('click', function() {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
});
jQuery(window).scroll(function() {
if (jQuery('#pp_fixed_menu').val() == 1)
{
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper .above_top_bar').hide();
jQuery('.extend_top_contact_info').hide();
jQuery('.top_bar').addClass('scroll');
jQuery('#post_info_bar').addClass('scroll');
} else if (jQuery(this).scrollTop() < 200) {
jQuery('.header_style_wrapper .above_top_bar').show();
jQuery('.extend_top_contact_info').show();
jQuery('#custom_logo img').removeClass('zoom');
jQuery('#custom_logo img').css('maxHeight', '');
jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
jQuery('.top_bar').removeClass('scroll');
jQuery('#post_info_bar').removeClass('scroll');
}
} else {
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper').addClass('nofixed');
} else {
jQuery('.header_style_wrapper').removeClass('nofixed');
}
}
});
});
when you scroll up, the bar not hide again ?? i test here with this small script and its hide it when i scroll up
This is the page I am working on http://bigislandnaturetours.com/tour/
The issue is I am trying to extend the height of the right column to automatically adjust the height of the left column. I use the following JS below which I have tested and works on other sites but not on this one. What might be wrong?
function doResize() {
if ($(window).width() > 981) {
setTimeout(function() {
$(".leftpane").css("height", "auto");
$(".midpanel").css("height", "auto");
var heightLeft = $(".rightpane").height();
var heightMiddle = $(".midpanel").height();
var heightRight = $(".leftpane").height();
if (heightRight > heightMiddle) {
$('.midpanel').css('min-height', heightRight + 2)
} else {
$('.leftpane').css('min-height', heightMiddle + 2)
}
heightMiddle = $(".midpanel").height();
heightRight = $(".leftpane").height();
if (heightLeft >= heightRight) {
$(".leftpane").css("height", heightLeft - 10);
$(".midpanel").css("height", heightLeft - 10);
}
}, 1000);
}
}
$(document).ready(function() {
doResize();
});
$(window).resize(function() {
doResize();
if ($(window).width() < 561) {
$(".leftpane").css("min-height", "auto");
$(".midpanel").css("min-height", "auto");
}
$('.main-nav li').unbind("click");
if ($('.rightpane').css('display') == 'none') {
$('.main-nav li').bind("click", function() {
$(this).addClass('im-curent');
$("ul", this).toggle(100);
});
}
});
The simplest answer is to use flex-box CSS (HTML5 / CSS3) or, for older browsers, a table used in 'presentation' mode.
Both should automatically keep column height in sync.
Ok so I have some sticky tabs that I am using to automatically pin to the top of the content area when scrolling so the user always knows that category they are in. You can see this here http://www.codeclimb.com/menus3/index2.html as you scroll the tab will stick the top. I am achieving this with the following javascript
function stickyTitles(stickies) {
this.load = function() {
stickies.each(function(){
var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
thisSticky.parent().height(thisSticky.outerHeight());
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
}
this.scroll = function() {
stickies.each(function(i){
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i+1),
prevSticky = stickies.eq(i-1),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos <= jQuery(window).scrollTop()) {
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
}
jQuery(document).ready(function(){
var newStickies = new stickyTitles(jQuery(".followMeBar"));
newStickies.load();
jQuery(window).on("scroll", function() {
newStickies.scroll();
});
});
However you can see that this is designed to stick the tabs to the very top of the browser and not right below the header. Currently I have applied a margin-top to the CSS to make the followbar stick to the bottom of the div I want it to (the "now serving" section) but you can see that it takes longer for the title tab to snap to the next category because it is really doing it when it hits the top of the browser.
So as each time it passes the "now serving" section I want it to snap the tab there.
Any fix on how I can make it work to the div I want specifically?
You can accomplish this by accounting for the height of the header in the $(window).scroll event like so:
this.scroll = function() {
stickies.each(function(i){
var thisSticky = jQuery(this),
nextSticky = stickies.eq(i+1),
prevSticky = stickies.eq(i-1),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos - 120 <= jQuery(window).scrollTop()) {
//**120px is the height of the header
thisSticky.addClass("fixed");
if (nextSticky.length > 0 && thisSticky.offset().top - 120 >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight() - 120);
}
} else {
thisSticky.removeClass("fixed");
if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
prevSticky.removeClass("absolute").removeAttr("style");
}
}
});
}
P.S. When can I buy a chicken kabob drink? :)
I would change the line:
if (pos <= jQuery(window).scrollTop())
To something like this:
if (pos <= jQuery(window).scrollTop() + offset)
Where offset is equal to the height of the header.
I've got a sticky sidebar going on with this code. But I only want it to affect the .fake-sidebar div when at 768px or below. Could anyone explain how to add media queries to my javascript?
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('.fake-sidebar').offset();
sticky_offset = original_position_offset.top;
$('.fake-sidebar').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('.fake-sidebar').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('.fake-sidebar').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('.fake-sidebar').css('position', 'fixed');
}
});
Any help is appreciated. Thanks in advance!
You can add the event on window resize, or on document ready, depending of what you want:
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$('.fake-sidebar').css('position', 'relative');
}
else {
$('.fake-sidebar').css('position', 'fixed');
}
});
trying to use :visible and it's not working.
neither $('.landscape:visible') or $('.landscape').filter(':visible')
My goal is to make a variable of whatever the visible landscape picture is, grab it's height, then apply that to the portrait images for consistency.
For testing purposes , the third navigation button, #w, is set to write what that height is using variable vincent.
test site: http://brantley.dhut.ch/
JavaScript:
(function($){
$.respond = function(callback) {
var element = $('#main');
$('.z').hide();
$(document).ready(function() {
dimensions();
});
$(window).load(function() {
dimensions();
$('#load').fadeOut('fast', function() {
$('.z:first').fadeIn('slow');
$('footer').fadeIn('slow');
});
});
$(window).resize(function() {
dimensions();
});
//Adjust image size
function dimensions() {
return element.each(function() {
var i = $('.z', element);
$(i).each(function(){
var browserWidth = $(window).width();
var imgRatio = $(this).width() / $(this).height()
var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
var browserRatio = browserWidth / availableHeight
var zzz = $('.z').height();
/* resize functions
$(this).height(availableHeight).width('auto');
$(this).width(browserWidth - 40).height('auto');
*/
/* image sizing logic */
if (imgRatio >= 1) {
$(this).addClass('landscape');
}
var vincent = $('.landscape').filter(':visible').height();
if (browserRatio >= imgRatio) {
if (availableHeight <= 312) {
/* Landscape */
$('body').css('background', 'yellow');
$(this).width(browserWidth - 40).height('auto');
} else {
$(this).height(availableHeight).width('auto');
$('body').css('background', 'green');
}
} else {
if (availableHeight <= 312) {
/* Portrait */
$('body').css('background', 'yellow');
$(this).height(200).width('auto');
} else {
$(this).width(browserWidth - 40).height('auto');
$('body').css('background', 'blue');
}
}
/* horizontally center content */
$(this).css('margin-left', (browserWidth - $(this).width())/2);
$('#w').text(vincent);
});
return false;
});
};
//callback();
};
})(jQuery);
Try if ($('.landscape').is(':visible')){}