I'm trying to build drop down options on mouse over and on click. The only problem I have with it, is when I put the mouse over an on child element, the menu gets hidden quickly.
jQuery code:
var navPos = $("#topNav").position().top; // ignore this line
// menu drop options
$('.repeat, .recitor, .volume, .bandwidthOption').bind('dropOption', function(e, force) {
var force = force || 'toggle';
if ($(this).hasClass('repeat'))
var optionName = 'repeat';
else if ($(this).hasClass('recitor'))
var optionName = 'recitor';
else if ($(this).hasClass('volume'))
var optionName = 'volume';
else if ($(this).hasClass('bandwidthOption'))
var optionName = 'bandwidthOption';
else
return;
var optionSubName = $(this).find('ul').attr('class');
var position = $(this).position();
position.top = navPos;
var isActive = $(this).hasClass('active');
if ((isActive && force != 'show') || (force && force == 'hide'))
{
$(this).removeClass('active');
$('.'+optionSubName).hide();
if (optionName == 'recitor') /* ie fix - z-index issue */
$('.logoBox').show();
}
else
{
$(this).addClass('active');
$('.'+optionSubName).show();
$('.'+optionSubName).css('left',position.left+'px');
if (optionName == 'recitor') /* ie fix - z-index issue */
$('.logoBox').hide();
}
});
$('.repeat, .recitor').click(function() {
$(this).trigger('dropOption');
return false;
});
$('.volume, .bandwidthOption').hover(function() {
$(this).trigger('dropOption', 'show');
},function() {
$(this).trigger('dropOption', 'hide');
});
Menu demo: http://jsbin.com/ozokir/2
The last bit is hiding the options:
$('.volume, .bandwidthOption').hover(function() {
$(this).trigger('dropOption', 'show');
},function() {
$(this).trigger('dropOption', 'hide');
});
Hover is only over the link option. To solve this you could use:
$('.volume, .bandwidthOption').mouseover(function() {
$(this).trigger('dropOption', 'show');
});
or click as you have in the previous line. Then you can hide with:
$('.dropOption').mouseout(function() {
$(this).trigger('dropOption', 'hide');
});
Related
So I'm having scrolling issues on my site when viewing on mobile browsers. For some reason, scrolling is sometimes stopped or frozen and there is a weird vertical scrolling bar line that appears randomly in the middle of the browser. I have no idea what this could be, I figure it's a js issue between the menu and the project container but not sure if it may be css overflow issue. The link is johnavent.net/projects if you want to view yourself.
Here's my JS for the menu:
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
And here it is for my project contianers:
$('.cd-single-project').bgLoaded({
afterLoaded : function(){
showCaption($('.projects-container li').eq(0));
}
});
$('.cd-single-project').on('click', function(){
var selectedProject = $(this),
toggle = !selectedProject.hasClass('is-full-width');
if(toggle) toggleProject($(this), $('.projects-container'), toggle);
});
$('.projects-container .cd-close').on('click', function(){
toggleProject($('.is-full-width'), $('.projects-container'), false);
});
$('.projects-container .cd-scroll').on('click', function(){
$('.projects-container').animate({'scrollTop':$(window).height()}, 500);
});
$('.projects-container').on('scroll', function(){
window.requestAnimationFrame(changeOpacity);
});
function toggleProject(project, container, bool) {
if(bool) {
container.addClass('project-is-open');
project.addClass('is-full-width').siblings('li').removeClass('is-loaded');
} else {
var mq = window.getComputedStyle(document.querySelector('.projects-container'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, ""),
delay = ( mq == 'mobile' ) ? 100 : 0;
container.removeClass('project-is-open');
project.animate({opacity: 0}, 800, function(){
project.removeClass('is-loaded');
$('.projects-container').find('.cd-scroll').attr('style', '');
setTimeout(function(){
project.attr('style', '').removeClass('is-full-width').find('.cd-title').attr('style', '');
}, delay);
setTimeout(function(){
showCaption($('.projects-container li').eq(0));
}, 300);
});
}
}
function changeOpacity(){
var newOpacity = 1- ($('.projects-container').scrollTop())/300;
$('.projects-container .cd-scroll').css('opacity', newOpacity);
$('.is-full-width .cd-title').css('opacity', newOpacity);
$('.is-full-width').hide().show(0);
}
function showCaption(project) {
if(project.length > 0 ) {
setTimeout(function(){
project.addClass('is-loaded');
showCaption(project.next());
}, 150);
}
}
});
(function($){
$.fn.bgLoaded = function(custom) {
var self = this;
var defaults = {
afterLoaded : function(){
this.addClass('bg-loaded');
}
};
var settings = $.extend({}, defaults, custom);
self.each(function(){
var $this = $(this),
bgImgs = window.getComputedStyle($this.get(0), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "").split(', ');
$this.data('loaded-count',0);
$.each( bgImgs, function(key, value){
var img = value.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
$('<img/>').attr('src', img).load(function() {
$(this).remove();
$this.data('loaded-count',$this.data('loaded-count')+1);
if ($this.data('loaded-count') >= bgImgs.length) {
settings.afterLoaded.call($this);
}
});
});
});
};
Will post CSS if the issue does not lie within the JS but everything is what you would think and how it behaves on desktop.
I have some jQuery that I want to change based on screen width. When the page loads, I want the script to determine the window width, var = width, and choose a set of functions based on that width. BUT, if the user were to resize the screen, I want the script to redefine width and choose which set of functions again.
jQuery
$(document).ready(function () {
var width = $( window ).width();
// Should I use this commented-out function below somehow???
// $(window).resize(function() {
// width = $( window ).width();
// });
// Navbar functionality
// for large screens
if ( width > 767 ) {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var loc = el.offset();
var left = loc.left;
var width = el.width();
var center = left + (0.5 * width);
var corrected_center = center - 5;
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.show();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
console.log($(".rest").css("top"));
$(".rest").animate({"top": "105px"});
}
}
var isActive = el.hasClass('activate');
$(".navbar-link").removeClass('activate');
$(".arrow-up").css("left", corrected_center);
if (isActive) {
$('.arrow-up').hide(400);
} else {
$('.arrow-up').show();
el.addClass('activate');
}
});
// For small screens
} else {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
$(".dropdown-nav").removeClass('down');
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").slideUp();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
}
});
}
});
I found the easiest way to address this was to get the screen width AFTER the click event. Click -> get width -> if screen > 767 do {}, else do {}. This can be seen below.
$(document).ready(function () {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var loc = el.offset();
var left = loc.left;
var width = el.width();
var center = left + (0.5 * width);
var corrected_center = center - 5;
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
var screenWidth = $( window ).width();
// check width to determine how to proceed
if ( screenWidth > 767 ) {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.show();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
console.log($(".rest").css("top"));
$(".rest").animate({"top": "105px"});
}
}
var isActive = el.hasClass('activate');
$(".navbar-link").removeClass('activate');
$(".arrow-up").css("left", corrected_center);
if (isActive) {
$('.arrow-up').hide(400);
} else {
$('.arrow-up').show();
el.addClass('activate');
}
// for small screens
} else {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").slideUp();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
}
}
});
});
I have a webpage, and some jQuery that I wrote, and had working functionally until I brought it into my rails application. I'm not sure if this is some turbolink issue (like I've had before) or if its unrelated.
My jQuery script is for my custom dropdown menu, and while the clicking causes the dropdown to appear, the dropdown doesn't remain, and all the html is reset. I have a video: http://tinypic.com/r/35ml7jr/8 that shows what I am trying to explain.
jQuery
$(document).on("page:change", function() {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var loc = el.offset();
var left = loc.left;
var width = el.width();
var center = left + (0.5 * width);
var corrected_center = center - 5;
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
var screenWidth = $( window ).width();
// check width to determine how to proceed
if ( screenWidth > 767 ) {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.show();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
$(".rest").animate({"top": "105px"});
}
}
var isActive = el.hasClass('activate');
$(".navbar-link").removeClass('activate');
$(".arrow-up").css("left", corrected_center);
if (isActive) {
$('.arrow-up').hide(400);
} else {
$('.arrow-up').show();
el.addClass('activate');
}
// for small screens
} else {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").slideUp();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
}
}
});
});
Instead of .on('click',function(){...})
Try using
.on('click',function(event){
event.preventDefault(); // This should prevent reloading
//YOUR CODE GOES HERE
return true; // It informs, that event has ended
})
I have this navigation for mobile that i want to hide/show depending on which direction the viewport gets scrolled in. So if scrolling down i want it to hide, and scrolling up i want it to show.
My current code looks like this. It just toggles on scroll top. Anyone?
$(function() {
$(window).on("scroll touchmove", function () {
$('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
});
});
Maybe something like this:
var menu_height = 80;
var menu_visible = true;
var old_scroll = $(window).scrollTop();
function checkMenu() {
new_scroll = $(window).scrollTop();
if (old_scroll < new_scroll && new_scroll > 0) {
// Scroll down
if (menu_visible == true) {
toggleMenu();
}
} else if (old_scroll > new_scroll) {
// Scroll up
if (menu_visible != true) {
toggleMenu();
}
}
old_scroll = new_scroll;
}
function toggleMenu() {
if (menu_visible == true) {
// Hide
$('#menu').animate({top: '-='+menu_height+'px'}, 200, function(){ $(this).css('display', 'none') });
menu_visible = false;
} else {
// Show
menu_visible = true;
$('#menu').css('display', 'block').animate({top: '+='+menu_height+'px'}, 200);
}
}
$(document).ready(function() {
// Show / hide menu on scroll
setInterval(checkMenu, 100);
});
Codepen: http://codepen.io/anon/pen/dPGggg
Working on a site
http://lsmcreative.co.nz/
I get a funny bug when using the nav to filter the thumbs. The images do a wierd movement to the left when animating
The container is position relative like the documentation I am not sure what is going on
My code is like this
and pretty much when you click on a button in the menu the thumbs are all of a sudde pushed like 200px to the left and then animate back into place?
// Custom sorting plugin
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: false,
by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
// DOMContentLoaded
$(function() {
// bind radiobuttons in the form
var $btn = $('#navigation ul li a');
// get the first collection
var $projectThumbs = $('#portfolio');
// clone applications to get a second collection
var $data = $projectThumbs.clone();
// attempt to call Quicksand on every form change
$btn.click(function(e) {
e.preventDefault();
if($(this).data("type") == "all"){
$btn.removeClass("selected");
$(this).addClass("selected");
var $filteredData = $data.find('li');
} else {
$btn.removeClass("selected");
$(this).addClass("selected");
var $filteredData = $data.find('li[data-type~=' + $(this).data("type") + ']');
} // end $btn.click function
$projectThumbs.quicksand($filteredData, {
adjustHeight: 'auto', // This is the line you are looking for.
duration: 800,
easing: 'easeInOutQuad'
}, function(){
// call js on the cloned divs
$("a.grouped_elements").fancybox();
});
});
});
I fixed it by adding
left:2.9702970297%!important; to the css of the li
and then
#portfolio li:nth-child(3n+1){
margin-left:0;
}