Create a html page for mobile some part of content is showing on Menu bar.
Only the bottom content is showing on menu bar how to avoid it ?
and also I want to disable scroll-bar when menu button is clicked & enable when content is touched using Mobile.
I tried below code but its disabliling but not enabling scrollbar when content screen is clicked on mobile :(
My Javascript :
$(document).ready(function() {
scrollTopPos = $( document ).scrollTop();
allowScrolling = true;
$(document).scroll(function() {
if(allowScrolling === false) {
$( document ).scrollTop( scrollTopPos );
} else {
}
});
$( "#mobile-toggle" ).click(function() {
$('body,html').css('overflow', 'hidden');
$("#divCls").css('display','None')
});
$(document).on('touchmove', function(e) {
e.preventDefault();
showDiv()
});
});
function showDiv() {
document.getElementById('divCls').style.display = "block";
}
It's hard to tell without the full code, but in terms of keeping the menu at the front you can just use CSS to se the Z-index of the DIV. In terms of the scroll, add a CSS rule trigger within your JavaScript to set Overflow to Hidden then set it back to scroll when you click the close button.
Also, if only parts are spilling over then be weary of the page size, if you're using a slide in menu that is hidden to the side then slides the whole page over, then mobile users can swipe it shut but the open button will not work unless you use the jquery swipe functionality so again, the z index and a bit of doodling with the script to make the menu sit over the page would fix this. Again, more script would be handy :P
Related
I have a sidebar with 3 sections:
In mobile resolutions, these sections appear like accordion tabs with only the header being visible, clicking on the anchor inside the header element triggers slideToggle which shows/hides rest of the content in that section. This works.
In desktop resolutions, the 3 sections and it's entire content are always visible, so basically clicking on the header shouldn't do anything. When I load/refresh the page in desktop resolution, clicking the header anchor element doesn't do anything (which is great) but if I switch to mobile resolution and then switch back to desktop resolution then clicking on the header anchor element toggles the contents, so please let me know, how to stop this slideToggle effect in desktop.
jQuery Code:
$(window).on('load resize', function(){
if ($('#page-content').width() < 991 ) {
$('#primary-sidebar header > a').click(function(e) {
e.preventDefault();
$(this).parent('header').siblings('.widget').slideToggle();
});
} else if ($('#page-content').width() > 992 ) {
$('#primary-sidebar header > a').click(function(e) {
return false;
});
}
});
Thanks!!!
Although unbinding the click event worked, the $(window).on('load resize', function(){ was creating issues, on resizing window, the slideToggle effect would run multiple times on single click. There is no need for the window resize/load line of code. The following is the code that works perfectly for me.
$('#primary-sidebar header > a').on('click', function(e) {
e.preventDefault();
var width = $('#page-content').width();
if (width <= 991) {
$(this).parent('header').siblings('.widget').slideToggle();
$(this).find('.fa.fa-chevron-left').toggleClass('fa-chevron-down');
}
});
I replaced the scrolling animation of my one page website with another scrolling animation which changes the URLs when you use the topbar (it was build in foundation)
While the URLs now change when I click an item in the topbar all the other links or clickable elements on my page make it scroll back to the top of the page.
For example when I try to click the next/prev buttons of my slider it scrolls back to the top of the page as if I clicked on Home.
Can someone see whats wrong with the code for the animation?
$(document).ready(function () {
$('a[href^="#"]').click(function () {
var target = $(this.hash),
hash = this.hash;
if (target.length == 0) {
target = $('a[name="' + this.hash.substr(1) + '"]');
}
if (target.length == 0) {
target = $('html');
}
$('html, body').animate({
scrollTop: target.offset().top
}, 500, function () {
location.hash = hash;
});
return false;
});
});
PS: When I scroll manually the URLs don't change when I go down to the next page. If anyone has a fix for this I'll be happy to here from you! (I tried using history.js but that only seems to work if you have a server, which I don't)
//* EDIT *//
I just found out it's not all links that make it scroll to the top of the page, just the buttons of my orbit slider and the menu button when the topbar is collapsed
//EDIT 2//
The URL now changes when I scroll to the next page!
The only problem I am seeing right now is that the buttons of my orbit slider and the menu button of the collapsed topbar act the same as my home button (makes the page scroll all the way back to the top) for some reason.
So the last thing I need to do is get the buttons working again. Making the menu button expand the topbar and making the next and prev buttons of my slider work as normal
If you only want to change the hash depending on the scrollPosition you are half way there.
You'll need to bind some logic to the scroll event. Here is a fork of your Fiddle where the hash is changed on scroll.
When the user scrolls the page we iterate through all .page elements and compare their offset().top against $( document ).scrollTop().
We set the new hash to be the id of the last .page element that has a lower offset().top than $( document ).scrollTop() is.
(I also debounced the function so it doesn't fire constantly when scrolling - you could of course remove that part)
You should however consider that by changing the hash you will jump to the equivalent element. Here is a guide on how to suppress that behaviour.
EDIT:
Here is an updated Fiddle where I implemented the solution from above for suppressing forced scroll on hash change.
I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)
Here is a link to the item in question:
http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html
All HTML, Javascript and CSS is in the one html file
Functionality description:
This is a simple dynamic horizontal navigation bar that is intended to disappear when a user scrolls down the page, in which a trigger is activated when the user mouses into the area, of which it slides down and reappears, and disappears once more upon mousing out. When the user scrolls back to the top the navigation returns to it's default (static) state...which is where the problem comes in.
Problem description:
Sometimes (and yes I can not re-create this problem every time) when you return to the top of the page, and the navigation returns to it's default state, when the mouse leaves this area (without scrolling down again) the navigation will slide up and disappear. Sometime it will happen on the first try, sometimes after several, and primarily in Firefox 2.0, although I have had it happen once or twice in Safari.
My thoughts:
I am baffled by this, and why I am seeking help. Any advice would be greatly appreciated.
To re-create the problem
Update: I just discovered how to re-create the problem. You must scroll down and trigger the menu at least once, before scrolling back to the top, in which mousing over the menu will for some reason make it disappear.
Code:
<script type="text/javascript">
// Use short notation of DOM ready
$(function(){
// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
menuTrigger = $('#menu-trigger'),
pos = menu.offset();
// Listen for the scroll event
$(window).scroll(function(){
// If we scroll past the position of the menu's height and it has it's default style, then hide menu.
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
// Remove the default class and replace with fixed class
$(this).removeClass('default').addClass('fixed');
});
// Initiate the trigger to show and hide the menu with the mouse event
$(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
$(menu).slideDown('fast').mouseleave(function(){
$(menu).slideUp('fast');
});
});
// If we scroll back to top and menu has fixed class, fadeIn menu
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeIn('fast', function(){
// Hide the trigger
$(menuTrigger).removeClass('block').addClass('hidden');
// Give menu default style
$(this).removeClass('fixed').addClass('default');
});
}
});
});
</script>
I've never asked a question here, but I've made use of many answers so am hoping that the effect I'm hoping to achieve will also help others looking to achieve the same effect.
I'm currently working on a client's website and have uploaded it to my dropbox for this question:
http://dl.dropboxusercontent.com/u/62164771/stage/cw/index16042013.html
It currently uses a few different scripts to achieve the following:
(this script is in the head area)
The navigation menu is fixed, and when you click on a menu link, the page scrolls to the relevant section.
When the page scrolls to the relevant section (after being clicked on), a class (.act) is added to the active menu link. The .act class is also added when the user scrolls up and down in the page with their mouse/track pad or whatever.
(this script is at the bottom of the page)
Another effect is also added to the nav bar links:
When you hover over a nav item, a nav menu indicator arrow (a div with a background image of an arrow) slides across to the hovered link.
So this is what I want to happen
Currently the nav menu indicator arrow only slides on hover. I want it to slide to the active link when it is clicked and stay there until the user hovers on another link. My current script is a little buggy with the menu indicator not always sliding to the active link.
I also want the nav menu indicator arrow to slide to the active link when the user scrolls through the page.
Is this achievable?
Relevant Scripts
Script 1 - scroll smoothly to section and activate 'act' class when scrolling:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]')
.offset().top + 1;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('#wrap section').each(function(i) {
if ($(this).position().top <= windscroll + 200) {
$('nav a.act').removeClass('act');
$('nav a').eq(i).addClass('act');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a.act').removeClass('act');
$('nav a:first').addClass('act');
}
}).scroll();
})
</script>
Script 2 - For sliding the main-menu-indicator to the position of the hovered and active links
<script type="text/javascript">
$('#header')
.css('position', 'relative')
.append(
$('<div>').attr('id', 'main-menu-indicator')
)
menuHover = function(which){
if(which==null)
which = $('ul#main-menu a.act')
$('#main-menu-indicator')
.stop(true, false)
.animate({
left: ($(which).offset().left - $('#header').offset().left +
$(which).width()/2 + parseInt($(which).css('paddingLeft')) -
$('#main-menu-indicator').width()/2 )
}, 500)
}
$('ul#main-menu a')
.hover(
function(){
menuHover(this)
},
function(){
menuHover(null)
}
)
</script>
You can use Bootstrap ScrollSpy to get the desired effect, it might be easier to implement than writing your own solution. You could start the animation using the activate event.
In your case you could set <a href="#top">, you currently have a section and an article with the same id, you should get rid of one of those as it is invalid html to have more than one element with the same id, and it might break things. For example keep the id on the article: <article class="top area" id="top">. Include the ScrollSpy script on the page and add:
$('.header').scrollspy({activate: function() {
// Add your logic here.
}
});
Inside the activate function $('nav li.active') will give you the currently active li, with that info you should be able to work out where to move your arrow, and you can then run your smooth scrolling arrow code to move the arrow to the right place.
Now ScrollSpy takes care of calling activate when the user scrolls somewhere, and you react on that by moving the arrow to the right place.