I have a div with a heading using and i have a Vertical Navigation menu in same div.
To make it responsive i use media query and "Display:none and position:abolute" to Navigation Container.
it works perfectly fine till this step.
NOW what i want is that. when i click this heading the the Navigation menu appears and when i click a Link on the Navigation Menu disappears means the menu itself become"Display:none"
I used .toggle() jquery to achieve this.
when this works perfectly fine.
but problem is that i want that this .toggle() function not to work when the width of window is more then 980px;
<h2 id="heading"><span>Office<span class="blue">Managnment</span></span></h2>
<ul id="list">
<li>P</li>
<li>A</li>
<li>N</li>
<li>L</li>
<li>A</li>
<li>R</li>
<li>P</li>
</ul>
and javascript
$(function () {
$("#heading").click(function () {
$("#list").toggle();
});
$("#list").click(function () {
$("#list").toggle('hide');
});
});
and yes i tried if statement to execute this code only when the width is less then 980px but problem is that it only check for width when the page load. i.e if the window is less then 980 on load. script works fine. but when window is more then 980 on load the script do not work even on resizing it to less then 980px.
i dont understand how to achieve this. mainly problem in choosing the condition for the the if else statement.
load the window and check the width
if it is less then 980px execute the script
if it is more then 980 do not execute the script.
on resize of the window check the new width
if it was more then 980 previously
check if the width increased. if it is increased do nothing(script should not work)
check if the width is now less then 980 . START the script.Script should work now.
if it was less then 980 previosly.
check if the width increased more then 980. if it is increased STOP the script. it should not work now
check if the width is now less then 980 . Do nothing. Script should work now.
IN SHORT turn on the toggle function when width less then 980px. and turn the toggle off and set to show when width is more then 980px.
I figured it out as below. It works, but sometimes when i resize slowly it behave strangely.
var $window = $(window),
ONLOADtoggleEnabled = false,
smallscreenbefore = false;
$window.on('resize', function() {
if (smallscreenbefore == false && $window.width() > 1220) {
} else if( smallscreenbefore == false && $window.width() < 1220) {
$( "#Tablist" ).hide(400);
$( "#heading" ).click(function() {
$( "#Tablist" ).toggle(400);
});
$( "#Tablist" ).click(function() {
$( "#Tablist" ).toggle(400);
});
smallscreenbefore = true;
}
else if(smallscreenbefore == true && $window.width() > 1220 ) {
$( "#heading" ).unbind('click');
$( "#Tablist" ).unbind('click');
$( "#Tablist" ).show(400);
smallscreenbefore = false;
}
else if(smallscreenbefore == true && $window.width() < 1220 ) {
smallscreenbefore = false;
}
});
var $window = $(window);
$window.on('load', function() {
if ($window.width() < 1220) {
$( "#heading" ).click(function() {
$( "#Tablist" ).toggle(400);
});
$( "#Tablist" ).click(function() {
$( "#Tablist" ).toggle(400);
});
smallscreenbefore = true;
}
else if($window.width() > 1220) {
smallscreenbefore = false;
}
});
You can listen for the resize event on the window and then use the width to decide what you want to do. I suppose something like this should work:
var MAX_WIDTH = 980,
$window = $(window),
toggleEnabled = false;
$window.on('resize', function() {
// Check window width and check if toggle isn't already enabled
if ($window.width() < MAX_WIDTH) {
// Check if toggle isn't enabled yet
if (!toggleEnabled) {
// Use on() to add eventListener
$("#heading").on('click', function () {
$("#list").toggle();
});
$("#list").on('click', function () {
$("#list").toggle('hide');
});
toggleEnabled = true;
}
} else if (toggleEnabled) {
// Use off() to remove eventListener
$("#heading").off('click');
$("#list").off('click');
// Show the list
$('#list').show();
toggleEnabled = false;
}
$('#output').text('Width: ' + $window.width() + ', toggleEnabled: ' + toggleEnabled);
});
// You can trigger the resize event at the start to set the initial state of the menu
$window.trigger('resize');
Working version with your list: http://jsfiddle.net/srm6p/3/
Related
I'm a beginner programmer and I'm trying to create this effect that when I scroll past a specific element in the HTML, The colors of the buttons in my navbar change colors. I thought the correct way of doing this was jQuery. I'm having problems getting the position of the elements in the page. I have tried with the position() and offset() methods. But neither seem to work.
I want to get the vertical positions of the elements with the IDs "info" and "security". I have these methods aren't very reliable in certain cases, but I can't find an alternative.
This is the code I have so far:
$(window).on('load', function(){
window.loaded = true;
console.log("LOADED");
});
$( window ).scroll(function() {
if (window.loaded == true){
var scrollTop = $(window).scrollTop();
var infopos = $( "#info" );
var secpos = $("#security");
if (scrollTop >= 0 && scrollTop < infopos-25) {
$( "#navgeneral" ).addClass("active");
$( "#navinfo" ).removeClass("active");
$( "#navsecurity" ).removeClass("active");
}
else if (scrollTop >= infopos && scrollTop < secpos){
$( "#navgeneral" ).removeClass("active");
$( "#navinfo" ).addClass("active");
$( "#navsecurity" ).removeClass("active");
}
}
});`
Thank you for the advice in advance!!
Here you go.
//Declare these first
const infopos = $( "#info" ).scrollTop();
const secpos = $("#security").scrollTop();
$(window).on('load', function(){
window.loaded = true;
console.log("LOADED");
});
$( window ).scroll(function() {
if (window.loaded === true){
let scrollTop = $(window).scrollTop();
if (scrollTop < infopos-25) { //scrollTop >= 0 will always be true so skip it
$( "#navgeneral" ).addClass("active");
$( "#navinfo" ).removeClass("active");
$( "#navsecurity" ).removeClass("active");
}
else if (scrollTop >= infopos && scrollTop < secpos){
$( "#navgeneral" ).removeClass("active");
$( "#navinfo" ).addClass("active");
$( "#navsecurity" ).removeClass("active");
}
}
});`
First get a good understanding of how variables work and please try to use let instead of var most of the time while declaring variables. This will prevent accidentally overwriting global variables.
The objective mentioned is to let NAV bar change based on the position that you scrolled to.
First you need to get your target ID scroll position.Use code below to get every archor element ID:
$('#testB').position().top
(In jQuery, position will return you the left and top value, here we use top only.)
Second, get the current scroll position.Use code below:
currentHeight = $(window).scrollTop();
Third, write related jQuery code to change NAV elements.Sample JS as below:
Here we have 5 DIV (#testA to E) and 4 nav buttons (#test1 to 4)
$(window).scroll(function () {
var currentHeight = $(window).scrollTop();
if (currentHeight <= $('#testB').position().top) {
$("#test1").addClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testC').position().top) {
$("#test1").removeClass('active-blue');
$("#test2").addClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testD').position().top) {
$("#test1").removeClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").addClass('active-blue');
$("#test4").removeClass('active-blue');
} else {
$("#test1").removeClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").addClass('active-blue');
}
});
I'm creating a sticky nav on scroll for a clients website and have got it working. However, because the div above it has a variable height based on the height of the browser window minus the nav for a carousel height: calc(100vh - 100px); it's breaking when the browser window is resized. So can someone help me to add a resize event onto the below code, so that it updates the height of the window on resizing the browser?
var yourNavigation = $(".home-navbar");
stickyDiv = "sticky";
yourHeader = $('.home-carousel').height();
$(window).scroll(function() {
if( $(this).scrollTop() > yourHeader ) {
yourNavigation.addClass(stickyDiv);
$( "#sticky" ).addClass( "sticky__padding" );
} else {
yourNavigation.removeClass(stickyDiv);
$( "#sticky" ).removeClass( "sticky__padding" );
}
});
I think you just want to make the scrollTop check into a function and call it on load, scroll, and resize If so, you can use either pure JS or jQuery to accomplish this:
function headerStuff() {
var yourNavigation = $(".home-navbar");
var stickyDiv = "sticky";
var yourHeader = $('.home-carousel').height();
if( $(this).scrollTop() > yourHeader ) {
yourNavigation.addClass(stickyDiv);
$( "#sticky" ).addClass( "sticky__padding" );
} else {
yourNavigation.removeClass(stickyDiv);
$( "#sticky" ).removeClass( "sticky__padding" );
}
};
window.addEventListener("load", headerStuff);
window.addEventListener("resize", headerStuff);
window.addEventListener("scroll", headerStuff);
I have a web application built on JQuery Mobile.
I've been looking for a way to have certain divs (which have data-role="collapsible") be collapsed when viewed on a mobile device, but expanded if viewed on a desktop browser.
I know there are a lot of similar questions, but I haven't been able to get any of those solutions to work. Here's what I've tried.
The divs have a class of mobileHide
<script type="text/javascript">
/*collapse non-crucial sections when viewed on mobile device*/
/* this works while resizing desktop browser, but can't resize mobile browser*/
$(window).on('resize', function(){
var w = $(window).width();
if(w >= 540 ) {
$( ".mobileHide" ).trigger( "expand" );
}else{
$( ".mobileHide" ).trigger( "collapse" );
}
});
/* Tried setting #media to make .hide-element {display:none} if screen size less than 540px (which worked in hiding that element) then set is_mobile to true. Also tried doing the same without the is_mobile and just using "if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )"*/
$(window).resize(function() {
var is_mobile = false;
if( $('.hide-element').css('display')=='none' {
is_mobile = true;
}
if(!is_mobile) {
$( ".mobileHide" ).trigger( "expand" );
}else{
$( ".mobileHide" ).trigger( "collapse" );
}
});
/*Also tried this without being in a window.resize function. The alert works when viewed on mobile device, but the collapse and expand don't*/
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
/*alert("I am mobile!");*/
$( ".mobileHide" ).trigger( "collapse" );
} else {
$( ".mobileHide" ).trigger( "expand" );
}
</script>
I didn't have all of those running at once, but each piece that I commented on was the only part that was active at the time.
Any insight into why the last one detects mobile device and displays the alert (when it's not commented out) but won't trigger the collapse when it detects mobile device would be much appreciated!
Here is a working DEMO
The function CollapsiblesOnSize() checks the window width and then either collapses or expands all elements with class of mobileHide. You can then call this on window resize, orientation change and jQM's pageshow:
$(document).on("pageinit", "#page1", function () {
CollapsiblesOnSize();
$(window).on("resize orientationchange", function(){
CollapsiblesOnSize();
});
});
function CollapsiblesOnSize(){
var w = $(window).width();
if(w >= 540 ) {
$( ".mobileHide" ).trigger( "expand" );
}else{
$( ".mobileHide" ).trigger( "collapse" );
}
}
I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/
Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});
I try to unload function if browser window less than 944px. I start to write this
$(window).resize(function() {
if ($(window).width() >= '944') {
$(window).load(function() {
$('#slider').nivoSlider();
});
} else {
alert($(window).width());
if ($(window).width() <= '944') {
$(window).unload(function() {
$('#slider').nivoSlider();
});
}
}
});
but i stuck. I want if the user enters, verify resolution and if more than 944px to load jquery function, however if browser is resize or less resolution than 944px, function will be unload.
i have a different solution for your problem; you can prepare a new slider mask (just like slider but without nivoSlider functions) for <944px window width, when browser width <944px niveSlider will be hide and your mask will be seen.
check it out:
$(window).resize(function() {
windowWidth = $(this).width();//you need to use this for changable values
if ( windowWidth > 943) {
$('#sliderMask').hide();
$('#slider').show();
$(window).load(function() {
$('#slider').nivoSlider();
});
} else if ( windowWidth < 944) {
$('#slider').hide();// hide your nivoSlider
$('#sliderMask').show();// show your basic slider mask
}
});
please note that: you need to use $(this) to get current value.
here is jsfiddle example for you; check the console log from your browser's developer panel