jquery responsive Menu - javascript

i have create a Navigation (my first bigger script - Im learning ). I have nothing found on google who helps me.
I would use on Desktop , and mobile devices.
On Desktop it works and if i resize the desktop width it change to the mobile version. If i show on a mobile device i have only the desktop version.
http://www.kcserver.info/testarea/video2brain/nav/kreativ-nav/nav.html
The Javascript
// Navigation Script
$(function () {
// Reload the Script after Resize of the Window
$(window).bind('resize', function (e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function () {
this.location.reload(false); /* false to get page from cache */
}, 200);
});
// end Reload of the script
$(window).load(function () {
// Cache the elements we'll need
var menu = $('#nav-bar');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-menu');
// Create responsive Menu Version 4Version 4
menuList.prepend('<li id="responsive-menu">Menu</li>'); // here you can change the text of the repsonsive Menu
// show the responsiv menu links
menu.on('click', '#responsive-menu', function () {
listItems.slideToggle();
listItems.addClass('collapsed');
});
});
});
// Now the schript change from Desktop to responsive by 681 px. You can change this value. Dont forget to change the mediaqueries in the nav.css File
$(function () {
//
if ($(window).width() > 681) {
$("ul#menu li ul li:has(ul)").find("a:first").addClass("active");
$("ul#menu li").hover(function () {
$(this).addClass("hover");
$('ul:first', this).css('visibility', 'visible');
$(this).children('ul').delay(20).slideDown(300); // speed of the slide
}, function () {
$(this).removeClass("hover");
$('ul:first', this).css('visibility', 'hidden');
$(this).children('ul').delay(20).slideUp(200); // speed of the slide
});
} else {
$("ul#menu li ul li:has(ul)").find("a:first").addClass("subnav");
var $mobil = $("ul#menu li ");
$mobil.children("ul").css("display", "none");
$mobil.filter(":has(ul)").children(":first-child").click(function () {
$(this).next().slideToggle(); // animation to sho teh menu
//$(this).parent().siblings().children("ul:visible").slideUp(); // activate this if you will sho only 1 activ Menupoint
$(this).parent().removeClass('closed');
});
}
});
//
$(window).resize(function () {
if ($('body').width() < 960) {
console.log("Less than 960");
} else {
console.log("More than 960");
}
});

I guess, your problem lies in your HTML-construct, not the JS-Script.
Did you add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to your header?
Further Information:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Related

Menu in appme theme is not synching with hashing id in wordpress

I am using appme theme on wordpress and everything is working good except for the active menu.
https://themes.athenadesignstudio.com/?theme=appme_wp
if you click on the link and click on the menu, you can see that it's not syncing with what it is clicked. For ex: if you click on feature, home will be active, if you click on screen shot, feature will be active and behaves different on different browser as well.
In the main.js file of appme folder, go to this line and as you can see the scrollTop: h-offset, so for a work around, i have changed it to scrollTop: (h-offset)+10. This will scroll the section a little more and we are set like this untill fix.
//Menu
menu:function() {
//Slick nav
jQuery(".main-navigation").slicknav({
prependTo:"#responsive-menu",
label:"",
closeOnClick:true
});
//Submenu
jQuery(".nav li").on("mouseenter", function() {
jQuery(this).children("ul").stop().slideDown(200);
});
jQuery(".nav li").on("mouseleave", function() {
jQuery(this).children("ul").stop().slideUp(200);
});
//Header menu
jQuery(document).on("click", "#navigation ul li a, #responsive-menu ul li a", function() {
try {
var id = jQuery(this).attr("href");
var h = parseFloat(jQuery(id).offset().top);
var offset = parseInt(jQuery("body").data("offset"), 10);
jQuery("body, html").stop().animate({
scrollTop:(h-offset)+10
}, 800);
return false;
} catch(err) {}
});
//Sticky navigation
if (AppMeOptions.navigation==="sticky") {
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop()>200) {
jQuery(".navbar").addClass("sticky-header");
} else {
jQuery(".navbar").removeClass("sticky-header");
}
});
}
},

bootstrap carousel in modal window - cannot activate swipe

I am redesigning my website, in each page I am showing a list of images, if you clcik on it a modal window pops up covering the entire page and displaying a bootstrap carousel vertically and horizontally centered. Everything works fine. I have just tried to enable the touch swipe for the mobile but it doesn't work anymore.
This is the js code that works
/* copy loaded thumbnails into carousel */
$('.immagini .thumbnail').on('load', function() {}).each(function(i) {
if (this.complete) {
var item = $('');
var itemDiv = $(this).parents('div');
var title = $(this).parent('a').attr("title");
item.attr("title", title);
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i == 0) { // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({
interval: false
});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function() {
$('.modal-title').html($(this).find('.active').attr("title"));
})
$('.immagini .thumbnail').addClass("point");
/* when clicking a thumbnail */
$('.immagini .thumbnail').click(function() {
var idx = $(this).parents('div').index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
$(".myModal").on('show.bs.modal', function() {
setTimeout(function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
$(".modal").addClass("modal-fullscreen");
$(".modal-body").removeAttr("style");
}, 0);
});
$("#myModal").on('hidden.bs.modal', function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
});
// Vertical centered modals // you can give custom class like this //
This is the bit that I have added to enable the swipe
$(document).ready(function() {
$("#modalCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#modalCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
Can you try this. You may need to reinitialize carousel.
$(".myModal").on('show.bs.modal', function() {
setTimeout(function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
$(".modal").addClass("modal-fullscreen");
$(".modal-body").removeAttr("style");
$('#modalCarousel').carousel()
$("#modalCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#modalCarousel").swipeleft(function() {
$(this).carousel('next');
});
}, 0);
});
Try using jQuery 'on' instead, this may prevent the need for re-initialising the carousel
Query( ".selector" ).on( "swiperight", function( event ) { ... } )

Responsive menu not closing on item selection

EDIT: I'm not trying to be pushy but if someone knows how to help me with this, I'd really appreciate it.
www.kwpei.com is the site I'm working on, the issue I'm having is with the responsive menu not closing after a menu or submenu item is chosen. Ive been told the place to make the change needed is in global.js which I've included here in its current state. Could someone show me how to fix the issue?
jQuery(function( $ ){
$('.site-header').addClass('front-page-header');
$('.footer-widgets').prop('id', 'footer-widgets');
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});
// Local Scroll Speed
$.localScroll({
duration: 750
});
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.nav-primary').addClass('fixed');
} else {
$('.nav-primary').removeClass('fixed');
}
});
});
You can slide up the menu again on clicking any of the menu items. Try adding this bit of jquery:
$('.menu-item a').click(function () {
$('.responsive-menu').stop(true, true).slideUp();
});
EDIT:
$('.menu-item a').click(function () {
if ($(window).width() < 800) {
$('.sub-menu').stop(true, true).slideUp();
$('.responsive-menu').stop(true, true).slideUp();
$('.menu-item').removeClass('menu-open');
}
});
If 800px is your breakpoint in the media query

How do I use multiple functions in jQuery?

I've added jQuery function that shows and hides navbar when scrolled. I also want to hide a div when the button 'start' is clicked. After i add new function none of them works longer. I have tried to add it to various places, but I still get no result at all. So how do I add multiple functions and make them to work?
Heres my code:
<script>
// function that hides text on click
(function($) {
$('#start').click(function() {
$('.lead').hide());
});
});
// my original function that stopped working after i added new one
(function($) {
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
</script>
I think the problem is in the closing tag of the function you're adding.
Try like this:
(function ($){
$('#start').click(function(){
$('.lead').hide();
});
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {
$(document).ready(function(){
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
$(".masthead").css("background-color","inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
At least, closing bracket is wrong here. $('.lead').hide());
Tip: always check developer console first. Have fun coding.
Edit : Note that you have an extra closing bracket in the first function $('.lead').hide());.
You can use the following. Both functions can be combined in to a single block. And you can use $(document).ready() directly. If there is a problem with name conflict for $ use jQuery.noConflict();
<script>
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$('#start').click(function() {
$('.lead').hide();
});
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if ($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
</script>

Execute function only if window width is greater than something else don't

function dropdownHover() {
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
}
$(window).on('resize', function(event){
var windowSize = $(window).width();
if(windowSize > 992){
dropdownHover();
}
});
I need this function dropdownHover() to fire only when window is greater than 992px, both on load and on resize, else if window is < 992px, both on load or on resize i dont want to fire this function on hover i want regular bootstrap dropdown on click. I tried to do this with css but i cant add animation on dropdown because its just display: none/block. I also tried to add class on resize to fire this function if element has that class else dont but it doesnt work either.
Edit: Final working version
$('.dropdown').on('mouseenter', function(){
if(!$(this).is('.open') && $(window).data('wide'))
$('.dropdown-menu', this).dropdown('toggle').hide()
.stop(true, true)
.delay(200)
.fadeIn(function(){
this.style.display = '';
}).find('a').on('touchstart click', function (e) {
e.stopPropagation();
});
}).on('mouseleave', function(){
if($(this).is('.open') && $(window).data('wide'))
$('.dropdown-menu', this).dropdown('toggle');
});
$('.dropdown').on('click', function(e){
if( $(window).data('wide')) {
$('.dropdown-menu', this).dropdown('toggle');
} else {
$('.dropdown-menu', this)
.stop(true, true).slideToggle()
.closest('.dropdown').removeClass('open');
}
});
// not entirely necessary. Not sure which is faster: this or just checking the width in all three places.
$(window).on('resize', function(){
$(window).data('wide', $(window).width() > 992);
// reset the open menues
$('.dropdown').removeClass('open');
$('.dropdown-menu').css({
display: '',
left: '',
position: '',
});
// because we are checking the width of the window, this should probably go here although this really should be a media query style
$('.dropdown-menu.pull-center').each(function() {
var menuW = $(this).outerWidth();
if ($(window).width() > 1000) {
$(this).css({
left: - menuW / 2 + 60 + 'px',
position: 'absolute'
});
} else {
$(this).css({
left: '',
position: ''
});
}
});
}).trigger('resize');
Initial Solution
Your question is twofold. First, you need it to not show the menu at smaller sizes. For that, you check on resize what the window width is. The problem is that it only works once. It triggers the event listeners for hover and it doesn't kill those event listeners if the screen is then larger at some point. For that, you can set a flag. There are a lot of ways to do this, but for my answer, I've chosen to use jQuery .data() method.
$(window).on('resize', function(event){
var windowSizeWide = $(window).width() > 600; // reduced for testing purposes
jQuery('ul.nav li.dropdown').data('dropdown-enabled', windowSizeWide);
}).trigger('resize');
Then when we listen for the hover events (which are mouseenter and mouseleave events), we simply return out of the function if the screen is too small.
jQuery('ul.nav li.dropdown').on('mouseenter', function() {
if(!jQuery(this).data('dropdown-enabled')) return;
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}).on('mouseleave', function() {
if(!jQuery(this).data('dropdown-enabled')) return;
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}).find('.dropdown-menu').hide();
Finally, you also want the event to trigger on load. You can do that by simply adding .trigger('resize') as seen in the first snippet. You can see a functioning demo here: http://jsfiddle.net/jmarikle/xw9Ljshu/
Possible Alternative Solution
Alternatively, you can also use CSS to handle this with media queries. The simplest way to do this is to force display: none on smaller screens. I don't recommend completely hiding the element because it becomes inaccessible at that point, but this is the general idea:
#media(max-width: 600px) {
ul.dropdown-menu {
display:none !important;
}
}
Note that !important is used because jQuery adds inline styles when you fadeIn or fadeOut.
Second demo: http://jsfiddle.net/jmarikle/xw9Ljshu/1
window.screen.availWidth to get the window size. i am yet not tested your code.But i think this will ok.
function dropdownHover() {
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
}
$(document).ready(function(){
$(window).on('resize', function(event){
var windowSize = window.screen.availWidth;
if(windowSize > 992){
dropdownHover();
}
});
})

Categories

Resources