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 ) { ... } )
Related
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");
}
});
}
},
I am using bootstrap mega menu. On hover it opens sub menu but sometime it takes click event also and sub menu got stuck.
In my javascript there is not mention any click event just have hover code.
$(document).ready(function() {
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("100");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("100");
$(this).toggleClass('open');
}
);
});
reference:
https://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel
You need to change the Hover event to Click event and make it "toggleable".
Theres an example for that:
$(document).ready(function(){
var dropdownOpen = null; // Toggle status
$(".dropdown").click(function() {
if(dropdownOpen === this){
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close clicked
dropdownOpen = null; // Reset
}
else{
$('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); // Open clicked
dropdownOpen = this; // Set
}
$(this).toggleClass('open');
});
// Hide when click outside the element
$(window).click(function() {
$('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all
});
});
You can try this code in the same reference example you posted above.
Edit: I added the dropdown hidden when click outside the element
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
I have a website where there is implemented a CSS overlay when the menu is accessed. This overlay fades in and out over the rest of the page but not the menu itself via the z-index. All works well on mouseover, the overlay fades in, and the rest looks dimmed.
However when the mouse is not on the menu anymore, the fadeout of the overlay is messed up. The overlay itself fades out correctly, but all images show up immediately (opacity 1?) and that makes it look strange. I think the images have to be fade-in when the overlay fades-out. You can see an example on www.appartement-tekoop.nl of the behavior.
I think the problem is with the z-index of the images, but am not sure.
This is my javascript for the overlay:
<script type="text/javascript">
jQuery(function () {
var $menu_main_nav = jQuery('#menu-main-nav');
var $menu_main_nav_items = $menu_main_nav.children('li');
var $oe_overlay = jQuery('#oe_overlay');
var $pricetable_dropdown = jQuery(".price-header");
var $menutoggle = jQuery('.menutoggle');
var $mainmenu = jQuery('.main-nav');
$menu_main_nav_items.bind('mouseenter', function () {
var $this = jQuery(this);
$this.children.addClass('slided selected');
// updated code starts
if($this.children('.menu-item-has-children').hasClass('not-shown')){
$menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
$this.removeClass('slided');
}
else {
$this.children('.menu-item-has-children').css('z-index', '9999').stop(true, true).slideDown(200, function () {
$menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
$this.removeClass('slided');
});
}
// updated code ends
})
.bind('mouseleave', function () {
var $this = jQuery(this);
$this.removeClass('selected').children('.menu-item-has-children').css('z-index', '1');
});
$menu_main_nav.bind('mouseenter', function () {
var $this = jQuery(this);
$oe_overlay.stop(true, true).fadeTo(1000, 0.3);
$oe_overlay.css('z-index', '40');
$this.addClass('hovered');
})
.bind('mouseleave', function () {
var $this = jQuery(this);
$this.removeClass('hovered');
$oe_overlay.stop(true, true).fadeTo(1000, 0);
$oe_overlay.css('z-index', '0');
$menu_main_nav_items.children('.menu-item-has-children').hide();
});
$pricetable_dropdown.bind('click', function() {
if (jQuery( this ).hasClass('clicked')) {
jQuery( this ).removeClass('clicked');
jQuery( 'section.detail-page' ).css('display', 'none');
jQuery( 'section.detail-page' ).css('display', 'block');
} else {
jQuery( this ).addClass('clicked');
// $initialDivHeight = jQuery('section.detail-page').height();
}
jQuery( this ).next().fadeToggle();
});
$menutoggle.bind('click', function() {
$mainmenu.toggle();
});
});
</script>
You're right, the z-index is messing things up... The Overlay is jumping behind some elements on the page before the transition has finished.
There is no need to change the overlays z-index on mouseover, remove this from your JS. Set the overlays 'z-index: 40' in your css and set it to 'display: none' also.
Thats all you need. When you fadeOut() an element it sets 'display: none' on it after it's finished animating, so your mouse won't be able to interact with it, and you can click on anything underneath it.
Hope this helps!
I am working on a website. The layout is horizontal when you click on the navigation it slides to the page you want. That all works but I then added a dimmer to each page so when you are on the your selected page the others are dimmed out. I was wondering if there is a better way to write this code, at the moment it is a function for each page and I wanted to know if there is a way to shorten this.
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".test").click(function(){
$(".dimmerservices").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother1").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".casestud").click(function(){
$(".dimmercase").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother2").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".aboutclick").click(function(){
$(".dimmerabout").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother3").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".contactbutton").click(function(){
$(".dimmerend").fadeOut('slow', function() {
// Animation complete.
});
$(".dimmerother4").fadeIn('slow', function() {
// Animation complete.
});
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
As Sufyan described, you bound the close events and #fuzz multiple times which wasn't necessary. In regards to the dimmer code, you can just bind that in the navigation anchor click function by fading in the hidden dimmer, and fading out the current dimmer, like so:
$('ul.nav a').bind('click', function(event) {
...
// show hidden dimmer
$('.dimmer:hidden').fadeIn('slow');
// fade out current dimmer
$($anchor.attr('href')).find('.dimmer').fadeOut('slow');
}
This removes the need for all the other click events you bound on the anchors.
I've updated your jsFiddle to show this in action: http://jsfiddle.net/uQH37/1/
Try this one, i have removed extra document.ready(), close functions.
$(document).ready(function () {
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the message box is closed, fade out
$(".close").click(function () {
$("#fuzz").fadeOut();
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".test").click(function () {
$(".dimmerservices").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother1").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".casestud").click(function () {
$(".dimmercase").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother2").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".aboutclick").click(function () {
$(".dimmerabout").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother3").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".contactbutton").click(function () {
$(".dimmerend").fadeOut('slow', function () {
// Animation complete.
});
$(".dimmerother4").fadeIn('slow', function () {
// Animation complete.
});
return false;
});
});
//Adjust height of overlay to fill screen when browser gets resized
$(window).bind("resize", function () {
$("#fuzz").css("height", $(window).height());
});