I have a drop down menu where the user selects a location and it scrolls to the div to reveal the address (10 different locations).
This works well in a desktop browser. However on the ipad, iphone and nexus it doesnt work because of touch screen.
This is my code:-
<html>
<div class="location">
<ul>
<li>Select an Office
<ul class="officeselect">
<li><a data-emailaddress="" data-address='<span class="address">99 Walnut Tree Close</span>
<span class="address">Guildford</span>
<span class="address">Surrey</span>
<span class="address">GU1 4UQ</span><br>
<span class="address">T: +44 1483 881500</span>
<span class="address">info#petroplan.com</span>' href="">UK Head</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="span4 alpha">
<div class="addresstitle">
<h3>Address</h3>
</div>
<div class="address">
</div>
</div>
</html>
<script>
// Scroll down to map and address function
$(".location ul li ul a").click(updateAddressDisplay);
function updateAddressDisplay(src) {
$('.office-sel-cont .chooser').text($(this).text());
var target = $(".address");
var source;
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
if (src === null)
source = $(".black-sectors li a.adr-src:eq(0)");
else
source = $(this);
target.fadeOut();
target.html(source.data("address") + source.data("emailaddress"));
target.fadeIn();
var chooser = $(this).parent().parent().parent().find('.chooser');
if (chooser.hasClass('open')) {
chooser.removeClass('open');
chooser.next($('.black-sectors')).animate({
'top': '60px',
'opacity': 0
}, 600, 'easeOutQuint', function() {
chooser.next($('.black-sectors')).toggle();
});
return false;
} else {
}
return false;
}
</script>
And I used this below from this website, but it's still dodgy.
<script>
$('.location ul li ul a').on('click touchend', function(e) {
e.preventDefault();
var el = $(this);
var link = el.attr('href');
window.location = link;
});
</script>
Thanks for your help.
this is the fiddle:-http://jsfiddle.net/ScVs9/
For your drop down list to work on a touch screen device you need to trigger the drop-down using a javascript click event rather than the css hover. Simple way would be create a class, called something like .active and then use a function like this:
$('.location a').on('click', function(){
$('.officeselect').toggleClass('active')
});
The active class would simply have visibility set to visible:
ul.officeselect.active {visibility:visible;}
The user should then be able to select the correct link and display the address as per usual.
I hope this helps
Related
I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?
Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.
you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps
<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/
In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
I have a jQuery Accordion and my problem is two-fold.
When you click on the persons name to close the div (after you've clicked to open it) it closes then slides the whole window up. I don't want it to slide the whole window up.
When you click on the person's image to open the div and then click to close it, the div closes but then opens again right away and the whole window slides up.
My jQuery:
jQuery(function($){
$(document).ready(function() {
// do something...
function close_accordion_section() {
jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
});
And my HTML looks like this:
<div class="accordion"><!-- THUMBNAIL -->
<div class="accordion-item">
<a class="accordion-section-title" href="#accordion-1">
<img src="http://placehold.it/150x150" alt="First Last" width="150" height="150" />
</a>
<span class="accordion-section-name">
<a class="accordion-section-title" href="#accordion-1">First Name</a></span>
<span class="accordion-section-expertise">Expertise</span>
</div>
<!--end .accordion-item-->
<!-- ABOUT -->
<div id="accordion-1" class="accordion-section-content">
<div class="advisors">
<ul class="advisors">
<li>Marketing and Communications</li>
<li>Sales and Business Development</li>
<li>Finance</li>
<li>Startup Strategy</li>
</ul>
</div>
<div class="about">
<p class="about">About</p>
Biography
</div>
Does anyone know why this is happening?
Edited to add new function:
jQuery(function($){
$(document).ready(function() {
// do something...
function close_accordion_section() {
jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrValue = jQuery(this).attr('href');
currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length);
jQuery("#" + currentAttrValue).slideToggle();
});
});
return false;
});
This entire window is still sliding up for me.
add return false; after e.preventDefault();
Hope this will work for you,
jQuery('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrValue = jQuery(this).attr('href');
currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length);
jQuery("#" + currentAttrValue).slideToggle();
});
I think what is happening is that the click event on the anchor element is not being stopped and because of which the page tries to navigate to the id of the element passed as href param, and hence it scrolls up.
So you should try stopping the click event from bubbling up.
So either you can use e.preventDefault(); or return false;
As shown in this DEMO.
I'm writing a small website where I already implemented a JavaScript code to change to content of a div if an item in the menu bar is clicked. I know have the problem, that if someone refreshes the website, they are at the start-page again. I want to change this so the name of the menu item is added to the url with a # in front of it. Wikipedia does this in some way if you click on an item in the content-overview of an article.
My question is now how I can achieve this?
This is my current JavaScript code:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
});
});
And this the menu part of my HTML:
<div id="menu">
<ul>
<li>Über mich</li>
<li>Kinesiologie</li>
<li>Körbler Symbole</li>
<li>Energiearbeit</li>
<li>Ernährungsberatung</li>
<li>Diätberatung</li>
<li>Food Coach</li>
<li>Heilkräuterberater</li>
<li>Heilkräuterprodukte</li>
<ul>
<li>Salben</li>
<li>Öle</li>
<li>Pflege</li>
<li>Bad/Dusche</li>
<li>Allerlei</li>
</ul>
</ul>
</div>
And sorry for the bad description, I have absolutely no idea how to call this.
You can try this:-
At first add an attribute in the menu.
<div id="menu">
<ul>
<li data-btn-name="ueber_mich">Über mich</li>
<li data-btn-name="kinesiologie">Kinesiologie</li>
</ul>
</div>
At the time of clicking on the menu change the location hash of the page
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).attr('data-btn-name');
$('#content').load(page);
});
});
At the time of opening the page first time, load the content depending on the hash.
$('document').ready(function(){
if(window.location.hash){
$('#content').load('./content/'+window.location.hash+'.html');
}
})
you can simply use this if text name is same as file name:
$(function() {
$('#menu ul li a').on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href');
window.location.hash = $(this).text();// if you want to show text of the li
console.log($(this).text());
$('#content').load(page);
});
});
I have this responsive layout. What I want to achieve is that at "desktop" size, once a menu link is clicked it will navigate to that part of the page. I want the same thing for "mobile" size. Also, once the menu links are clicked, the menu will slideUp.
I have both of these things working, however it only works when the page is reloaded. To summarize, here are the problems:
At desktop size: navigation is fine, but when resized to mobile the menu doesn't show.
At mobile size: navigation works fine, when resized to desktop it also works fine, but the menu keeps on toggling.
I created a jsFiddle for it. Here is my code:
HTML
<div id="head" class="clearfix">
Pull Menu
<div class="menu-wrap clearfix">
<div class="nav">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
<div id="test1" class="section">Test1</div>
<div id="test2" class="section">Test2</div>
<div id="test3" class="section">Test3</div>
JavaScript
var respMenu = function(event) {
var menu = $('.menu-wrap');
if ($(window).width() < 501) {
$("#pull").on('click', function() {
menu.slideToggle('slow');
});
$(".nav ul li a").click(function() {
menu.slideUp('slow');
});
}
else{
}
return false;
event.preventDefault();
};
var onClick = function() {
$('a').bind('click',function(event){
var $anchor = $(this);
if ($(window).width() > 500) {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 90 }, 1000,'easeInOutExpo');
}
else{
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 50 }, 1000,'easeInOutExpo');
}
event.preventDefault();
});
};
$(window).load(function(){
respMenu();
onClick();
});
$(window).resize(function(){
respMenu();
onClick();
});
The issue is that you bind a new handler to the click event each time your window is re-sized and you never unbind them. So the handlers number keep increasing, which means that multiple events will be fired after a click once you've re-sized the window.
So what you can do is to unbind the handlers using the unbind or off methods.
Take a look here: http://jsfiddle.net/yohanrobert/p987prdd/
I have site with some info-tabs based on a template. Tabs have some anchors example.com/#convey, but when I try to use direct link to some tab using #anchor - nothing happens, because the tabs are using JS.
JS:
/* fading the content in using a sub-menu */
$('.content-fade-menu a').click(function(){
var href = $(this).attr('href');
var target = $('.content-fade').find(href);
$('.content-fade-menu a').removeClass('active');
$(this).addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');
return false;
});
HTML of menu:
<ul class="sub-menu content-fade-menu">
<li>Personal Injury</li>
<li>Employment</li>
</ul>
HTML of one non-active tab and one active tab:
<div class="content-fade">
<div class="content-fade-panel" id="pi" style="display: none;">
Non-active tab
</div>
<div class="content-fade-panel" id="employment" style="display: block;">
Active tab
</div>
</div>
What do I need to do, to make links, like example.com/#anchor, work?
Ok, I've found the answer.
//Take #anchor from url and find right block
var loc = window.location.hash;
if (loc != "") {
var href = loc;
var target = $('.content-fade').find(href);
//Unactivate first tab
$('.content-fade-menu a').removeClass('active');
//Activate right tab
$('.content-fade-menu a[href="'+href +'"]').addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');
//Scroll to the h3 of the activated block
var zagolovok = $(target).find('h3');
$('html, body').animate({scrollTop: $(zagolovok).offset().top}, 300);
}
That's all.