I have a UL with a hover effect on its LIs. When hovering there is a red div appears on the left and when you click on the LI it toggles a class to the text inside of it. It's all ok on the desktop version but when I switch to the mobile version the first tap should activate only the hover effect. Instead of that it acticates the hover and toggle a class immediately. I want to have on mobile version the first tap activates hover and then if it's still active next taps toggle the class. Pls try the code on mobile version it's all clear there what I mean.
Thanks
$('ul').on('click', 'li', function () {
$(this).toggleClass('completed');
});
$('ul').on('click', 'div', function (event) {
$(this).parent().fadeOut(250, function () {
$(this).remove();
});
//prevent event bubbling
event.stopPropagation();
});
.container {
width: 360px;
margin: 0 auto;
border: 1px solid black;
}
ul{
list-style: none;
padding:0;
margin:0;
}
li{
width: 100%;
border: 1px solid black;
display: flex;
}
li div{
background-color:red;
width:0;
transition: 0.1s linear;
display:inline-block;
}
li:hover div{
width: 40px;
}
.completed {
color: grey;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Groceries</h1>
<ul>
<li><div></div><p>carrot</p></li>
<li><div></div><p>onion</p></li>
<li><div></div><p>tomato</p></li>
</ul>
Update: I'm almost got it, got the first toggle on the second tap, the problem is the next toggle occurs on the double tap too:
var isMobile = false;
var isClicked = 0;
$('ul').on('click', 'li', function () {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
isMobile = true;
isClicked++;
}
if(!isMobile || isClicked > 1){
$(this).toggleClass('completed');
isClicked = 0;
}
});
First of all disable hover with CSS using #media queries for mobile devices.
Second create a jquery method for tap/click on that at which you want to show red div. you can do something like this
$('li').on('click' , function(){
if($(window).width() <= 760){ // Enter maximum width of mobile device here for which you want to perform this action
// show red div here
}
return false;
});
Also keep in mind #media and $(window).width() should have same pixels/size
EDIT:
try replacing this
var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
isMobile = true;
}
$('ul').on('click', 'li', function () {
if(isMobile){
$(this).toggleClass('completed');
}
});
And let the other code in the click function and try again
You should use touchstart event to handle touch event on mobile but don't forget to check if ontouchstart is available.
$('ul').on('click', 'li', function() {
if ('ontouchstart' in document.documentElement) {
if ($(this).hasClass('hover')) {
$(this).toggleClass('completed');
}
} else {
$(this).toggleClass('completed');
}
});
$('ul').on('touchstart', 'li', function(e) {
var link = $(this); //preselect the link
if (link.hasClass('hover')) {
return true;
} else {
link.addClass("hover");
$('li').not(this).removeClass("hover");
e.preventDefault();
return false; //extra, and to make sure the function has consistent return points
}
});
$('ul').on('click', 'div', function(event) {
$(this).parent().fadeOut(250, function() {
$(this).remove();
});
//prevent event bubbling
event.stopPropagation();
});
.container {
width: 360px;
margin: 0 auto;
border: 1px solid black;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
width: 100%;
border: 1px solid black;
display: flex;
}
li div {
background-color: red;
width: 0;
transition: 0.1s linear;
display: inline-block;
}
li:hover div,
li.hover div{
width: 40px;
}
.completed {
color: grey;
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Groceries</h1>
<ul>
<li>
<div></div>
<p>carrot</p>
</li>
<li>
<div></div>
<p>onion</p>
</li>
<li>
<div></div>
<p>tomato</p>
</li>
</ul>
</div>
Related
Alright, so I'm working on my own javascript slideshow which consist of cards. Right now I'm adding/looping through the cards and adding an eventlistener (mouseover and mouseout) to check if the user hovered over chosen card.
Now to the problem. I need to be able to target all of the cards (part 1, see image) which comes before the chosen card of the user and also all of the cards (part 2, see image) which comes after. But I have to target them individually. Basically the cards in part 1 will get one kind of styling and the cards in part 2 will get another one. The chosen card will get its own styling.
This is what I have so far. If someone could point me in the right direction, that would be great, thanks. I don't want to use any libraries, strictly javascript.
var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('mouseover', function() {
//Do something
console.log('Mouseover: Do something');
});
cards[i].addEventListener('mouseout', function() {
//Do something
console.log('Mouseout: Do something');
});
}
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
You can select the particular card and apply class name using jquery.
var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('mouseover', function() {
//Do something
$(this).addClass('selected');
console.log('Mouseover: Do something');
});
cards[i].addEventListener('mouseout', function() {
//Do something
$(this).removeClass('selected');
console.log('Mouseout: Do something');
});
}
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
.selected{
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
you can even use simple css which will be comman for all the card.
when card class is hovered this css will execute.
.card:hover{
background-color: blue;
}
You can set class for group/part 1, current card and group/part 2 separately.
You can possibly also listen to bubbling phase of event instead of multiple listener registration.
Check.
let ul = document.querySelectorAll('ul')[0];
ul.addEventListener('mouseover', function(e) {
if(e.target.className.indexOf("card") === -1) { return; }
let currentFound = false;
document.querySelectorAll('.card').forEach(function(card) {
if(card === e.target) {
card.classList.add("current-card");
currentFound = true;
}
else
if(currentFound) {
card.classList.add("next-cards");
}
else {
card.classList.add("previous-cards");
}});
});
ul.addEventListener('mouseout', function() {
document.querySelectorAll('.card').forEach(
function(card) {
card.classList.remove("previous-cards");
card.classList.remove("next-cards");
card.classList.remove("current-card");});
});
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
.previous-cards {
background-color: crimson;
}
.next-cards {
background-color: darkred;
}
.current-card {
background-color: indianred;
}
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
If you would like to preserve the colors until next hovering just remove the mouseout listener and put its logic to start of mouseover listener right after if block.
I would do this with CSS and it's sibling selector:
.card {
background-color: red;
}
.card:hover ~ .card {
background-color: green;
}
If you need to use JavaScript, use [...mouseEnterCard.parentElement.children].indexOf(mouseEnterCard) to get the element index and then loop over the elements with a lower/higher index.
I have created a context menu item but it does not work all of the time. For instance, when I click on pause, it pauses, and when I click play, it plays again, and that happens one more time. After that, it does not do anything when I click on it. Then, it goes back to where it started. Here is my code:
<script>
var x = 1;
</script>
<script>
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
</script>
<script>
function changeContextMenuIn() {
</script>
<style>
/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<video width="640" id="vidPlayerMain" autoplay="" controls="" onclick="if (x == 1) {document.getElementById('vidPlayerMain').pause(); document.getElementById('pauseContextMenu').innerHTML='Play'; x = 0;} else {document.getElementById('vidPlayerMain').play(); document.getElementById('pauseContextMenu').innerHTML='Pause'; x = 1;}" name="media">
<source src="https://video-lax1-1.xx.fbcdn.net/hvideo-xpa1/v/t42.1790-2/1063787_495053737243964_500266464_n.mp4?efg=eyJybHIiOjYzNSwicmxhIjo3MzZ9&rl=635&vabr=353&oh=d763b8ecfa2a823b9971c497732e4b69&oe=55C8F2C9" type="video/mp4">
</video>
<br />
<ul id='contextMenu' class='custom-menu'>
<li data-action="first">Pause</li>
</ul>
It is because the function to pause and play video is bound to contextMenu's <a> element but function to alert data-action attribute is bound to contextMenu's <li> element and <a> element is not fully occupying width and height of <li> element. (The video does not play/pause at times when you click on context menu button outside of its area occupying text)
One simple solution to this is to change the CSS of these two element such that <a> element is occupying full width and height.
CSS:
/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
cursor: pointer;
list-style-type: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
.custom-menu li a {
padding: 8px 12px;
display:inline-block;
}
On my website I have set up a "click-to-scroll" menu with the logic of:
1. when menu link is clicked, scroll to corresponding anchor and add active class to $(this)
2. onscroll, toggle active class according to the current anchor's location
This all works fine, but there is a small bug in that when you click a link, the page flickers slightly and so do the active menu links. You can see and test it live at http://jcwd98.appspot.com/ (warning that it's in its early development stages, no mobile and probably looks pretty crappy right now).
I'm not sure what causes the page to flicker, but I do know that the reason the menu links flicker is because my code is telling it to add an active class to it when it scrolls over its corresponding section. Since the document has to first scroll over a section to get to the desired section, it adds an active class to other links before it arrives.
I don't want either of these scenarios.
jsFiddle
Code:
var section_padding = 45;
$("#menu ul li a").on("click", function(event) {
event.preventDefault;
$("#menu ul li a.active").removeClass("active");
$(this).addClass("active");
var target = this.hash;
var menu = target;
var cache_target = $(target);
var buffer = (cache_target.offset().top - section_padding);
$("html, body").stop().animate({
"scrollTop": buffer
}, 400, "swing");
});
function scroll(event) {
var scroll_pos = $(document).scrollTop();
$("#menu ul li a").each(function() {
var cur_link = $(this);
var ref_el = $(cur_link.attr("href"));
if( ref_el.position().top <= scroll_pos && ref_el.position().top + ref_el.height() + (section_padding * 2) > scroll_pos ) {
$("#menu ul li a").removeClass("active");
cur_link.addClass("active");
} else {
cur_link.removeClass("active");
}
});
}
$(document).on("scroll", scroll);
* {
margin: 0;
padding: 0;
}
#menu {
display: block;
height: 50px;
width: 100%;
position: fixed;
z-index: 100;
background: rgba(255, 255, 255, .8);
}
#menu ul {
display: block;
width: 100%;
height: 100%;
list-style: none;
}
#menu ul li {
display: block;
box-sizing: border-box;
height: 100%;
width: calc(100% / 5);
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
float: left;
text-align: center;
line-height: 50px;
}
#menu ul li a {
display: block;
text-decoration: none;
font-family: arial;
}
#menu ul li a:hover,
#menu ul li a.active {
background: #f0f0f0;
}
#sections {
display: block;
position: relative;
top: 50px;
}
section {
display: block;
height: 500px;
width: 100%;
background: #67D182;
padding: 45px 50px;
box-sizing: border-box;
}
#sections section:nth-child(even) {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Top</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div id="sections">
<section id="top">
<h2>#top</h2>
</section>
<section id="about">
<h2>#about</h2>
</section>
<section id="portfolio">
<h2>#portfolio</h2>
</section>
<section id="contact">
<h2>#contact</h2>
</section>
<section id="blog">
<h2>#blog</h2>
</section>
</div>
Any help would be greatly appreciated. :)
This happen because preventDefault is a function, then you only need to change:
event.preventDefault;
To:
event.preventDefault();
And this work fine.
FIDDLE: https://jsfiddle.net/lmgonzalves/ve5qr3bL/2/
EDIT:
You need to unbind the scroll event, and then bind it again when the animation be completed.
$("#menu ul li a").on("click", function(event) {
event.preventDefault();
$(document).off("scroll"); // here unbind
// code
$("html, body").stop().animate({
"scrollTop": buffer
}, 400, "swing", function() {
$(document).on("scroll", scroll); // here bind again
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/ve5qr3bL/3/
I am using the Bourbon Refill navigation menu, and want to modify it so when a link is clicked on in small mode the menu slides back up. At the moment the menu drops down, but when a menu item is clicked the menu stays dropped down. As I am using scroll-on-page with a fixed top menu this means a lot of the content is hidden behind the menu.
Here is the code on Codepen:
http://codepen.io/mikehdesign/pen/LVjbPv/
My existing code is below:
HTML
<header class="navigation" role="banner">
<div class="navigation-wrapper">
<a href="javascript:void(0)" class="logo">
<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image">
</a>
Menu
<nav role="navigation">
<ul id="js-navigation-menu" class="navigation-menu show">
<li class="nav-link">About Us</li>
<li class="nav-link">Contact</li>
<li class="nav-link">Testimonials</li>
<li class="nav-link">Sign up</li>
</ul>
</nav>
SCSS
.navigation {
$large-screen: em(860) !default;
$large-screen: $large-screen;
// Mobile view
.navigation-menu-button {
display: block;
float: right;
margin: 0;
padding-top: 0.5em;
#include media ($large-screen) {
display: none;
}
}
// Nav menu
.navigation-wrapper {
#include clearfix;
position: relative;
}
.logo {
float: left;
img {
max-height: 2em;
padding-right: 1em;
}
}
nav {
float: none;
#include media ($large-screen) {
float: left;
line-height: 1.5em;
padding-top: 0.3em;
}
}
ul.navigation-menu {
clear: both;
display: none;
margin: 0 auto;
overflow: visible;
padding: 0;
width: 100%;
#include media ($large-screen) {
display: block;
margin: 0;
padding: 0;
}
&.show {
display: block;
}
}
// Nav items
ul li.nav-link {
display: block;
text-align: right;
width: 100%;
#include media ($large-screen) {
background: transparent;
display: inline;
text-decoration: none;
width: auto;
}
}
li.nav-link a {
display: inline-block;
#include media ($large-screen) {
padding-right: 1em;
}
}
}
JS
$(document).ready(function() {
var menuToggle = $('#js-mobile-menu').unbind();
$('#js-navigation-menu').removeClass("show");
menuToggle.on('click', function(e) {
e.preventDefault();
$('#js-navigation-menu').slideToggle(function(){
if($('#js-navigation-menu').is(':hidden')) {
$('#js-navigation-menu').removeAttr('style');
}
});
});
});
Help greatly appreciated
Mike
Check out the following demo tested working in small and large version as your expectation.
EDIT 2
Updated toggling for small version as per your requirement.
Codepen
jQuery
function smallVersion() {
$("#js-navigation-menu a").on('click', function(e) {
$('#js-navigation-menu').slideToggle(function() {
if ($('#js-navigation-menu').is(':hidden')) {
$('#js-navigation-menu').removeAttr('style');
}
});
});
}
function dothis(){
var ww = $(window).width();
var emToPx = 53.75 * parseFloat($("html").css("font-size"));
if( ww < emToPx ) {
smallVersion();
}
}
$(document).ready(function() {
var menuToggle = $('#js-mobile-menu').unbind();
$('#js-navigation-menu').removeClass("show");
menuToggle.on('click', function(e) {
e.preventDefault();
$('#js-navigation-menu').slideToggle(function(){
if($('#js-navigation-menu').is(':hidden')) {
$('#js-navigation-menu').removeAttr('style');
}
});
});
dothis();
});
You could try...
$('header.navigation').on('click',function(){
$('header.navigation ul.submenu').css('display','none');
})
Check following code, hope it helps.
I have used matchmedia to check screen resolution. IE 10 and above supports it. You can use matchmedia polyfill https://github.com/paulirish/matchMedia.js/ for IE9 and below.
"min-width: 53.75em" is from Refills css after this point it changes to mobile navigation.
$('li.nav-link').on('click', function(){
if(!window.matchMedia("(min-width: 53.75em)").matches) {
menuToggle.trigger('click');
}
})
http://codepen.io/praveenvijayan/pen/YXrbKB
So I sorted this by detecting whether the menu button was visible, and then using that as the toggle in the JQuery:
$(document).ready(function() {
var menuToggle = $('#js-mobile-menu').unbind();
$('#js-navigation-menu').removeClass("show");
$('li.nav-link').on('click', function(){
if($(".navigation-menu-button").is(":visible") ) {
menuToggle.trigger('click');
}
});
menuToggle.on('click', function(e) {
e.preventDefault();
$('#js-navigation-menu').slideToggle(function(){
if($('#js-navigation-menu').is(':hidden')) {
$('#js-navigation-menu').removeAttr('style');
}
});
});
});
This code works great if i want to make toggle effect by clicking on the menu. You can see the result here.
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
});
var $subs = $links.next();
});
My problem is .menu-item a, with this the script executes the code for all links of the menu(also for links that don't have submenu links). But in my case i want to execute only for the links that contains submenu links.
If i try t replace .menu-item a with .menu > ul li a doesn't work.
The structure of the html(generated by php) code is like this:
<ul id="menu-menu-1">
<li class="menu">
<a>News</a> //first main menu
<ul class="sub-menu" style="display: none;"> //second grey menu
<li>
<a>Mondo</a>
<a>News Live</a>
<a>Quotidiani Cartacei</a>
</li>
</li>
</ul>
The relevant css:
.menu {
background-color: #F6F6EE;
border-radius: 1px;
height: 30px;
padding: 10px 10px 0 5px;
width: 100%;
}
.menu li a {
color: #716B6B;
display: block;
float: left;
font-size: 14px;
padding: 2px 17px;
text-decoration: none;
width: 100%;
}
#menu-2 {
background-color: #DCDCD5;
border-radius: 1px;
display: none;
height: 33px;
position: relative;
width: 100%;
z-index: -1;
}
How can i fix it?
You need to check, on the top of the function, if the current link has a submenu attached. Check the first two lines of the click callback:
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next(".sub-menu");
var hasSubmenu = submenu.length >= 1;
if(hasSubmenu) {
handleLinkWithSubmenu.call(this, submenu);
} else {
handleLinkWithoutSubmenu.call(this);
}
});
var $subs = $links.next();
function handleLinkWithSubmenu(submenu) {
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
}
function handleLinkWithoutSubmenu() {
$subs.hide();
}
});
If I understand your question correctly (only execute if selector has children), then replace with this:
var $links = $('#menu-menu-1 .menu-item a').click(function (e) {
if($links.children().length > 0){
e.preventDefault();
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
}
});
I think something like this will work for what you need, it's a lot cleaner and more compact:
UPDATED:
http://jsfiddle.net/FZHC8/2/
<head>
<script src="jquery-1.10.2.min.js"></script>
<style>
.menu {
background-color: #F6F6EE;
border-radius: 1px;
height: 30px;
padding: 10px 10px 0 5px;
width: 100%;
}
a {
color: #716B6B;
display: block;
float: left;
font-size: 14px;
padding: 2px 17px;
width: 100%;
cursor:pointer;
}
#menu-2 {
background-color: #DCDCD5;
border-radius: 1px;
height: 33px;
position: relative;
width: 100%;
z-index: -1;
}
li{
list-style:none;
}
</style>
</head>
<body>
<ul id="menu-menu-1">
<li class="menu">
<a>News</a>
<ul class="sub-menu">
<li>
<a>Mondo</a>
<a>News Live</a>
<a>Quotidiani Cartacei</a>
</li>
</ul>
<a>News1</a>
<ul class="sub-menu">
<li>
<a>Mondo1</a>
<a>News Live1</a>
<a>Quotidiani Cartacei1</a>
</li>
</ul>
</li>
</ul>
<script>
(function () {
$("li > ul").hide();
$(".menu > a").click(function (e) {
$(this).parent().children(".sub-menu").slideUp(200);
$(this).next(".sub-menu").slideDown(200);
})
})();
</script>
</body>