We Keep Coding

jquery toggle that closes on scroll?

I have a very difficult client that is demanding that a jquery toggle closes when a user scrolls down the page, rather than automatically staying open / closing when a user collapses it...
would that be possible? My jquery is pretty simple...
$(document).ready(function() {
$('.nav-toggle2').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Contact Us');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Contact Us <');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tag href="#contactus" class="nav-toggle2">Contact Us <</tag>
<div id="contactus">some content that hides/shows here</div>
I can get around in jquery but am a little naive when it somes to integrating new effects into it.... would it be possible to have toggle_switch.html on scroll so when a user gets maybe 1/3 the page down, it hides?

Based on your comments you said you haven't tried listening to the scroll event. Can you try that?
It will be something like this (code not tested):
$(window).on("scroll", function(){
// you can replace this with your hiding toggle logic
$('.nav-toggle2').toggle('false');
});
You may want to unbind the event from the window later to avoid memory leak.
Reference about scroll: Jquery scroll api

mouseover event and click event on same element conflicts on mobile

I'm using angular.js to build my website, and I have an element that MOUSEOVER event is supposed to show the navbar, and on mobile, clicking on that element, supposed to show the navbar + the menu.
These two events conflict.
Any ideas?
//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
angular.element('#navbar').stop().fadeIn();
btnState.setPosition(1);
// navbar fade out by mouse out of button
angular.element('.menu_hamburger').one('mouseout', function() {
btnState.setPosition(0);
});
});
//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
angular.element('#navbar').finish().slideDown();
btnState.openMenu();
});

i finally used this:
var isTouchDevice = 'ontouchstart' in document.documentElement;
and i had a variable that checks for touch screen ability, without adding Modernizr.

If you are able to use Modernizr (js library for checking HTML5 stuff), then it provides the best method for checking if a client is mobile or not. You can do this in pure javascript too I think, but after countless tries I gave it up:
By using Modernizr.touch, you can see if the device is touch capable or not. Touch screens are quite unique to phones and pads, but unfortunately also laptops which have touchscreens (not many of these thank God).
So then the code would be like this:
//navbar fade in by mouse over menu button
angular.element('.picture_hamburger>.text').on('mouseover', function() {
if(Modernizr.touch) {
return;
}
angular.element('#navbar').stop().fadeIn();
btnState.setPosition(1);
// navbar fade out by mouse out of button
angular.element('.menu_hamburger').one('mouseout', function() {
if(Modernizr.touch) {
return;
}
btnState.setPosition(0);
});
});
//menu open by click
angular.element('.picture_hamburger>.text').click(function () {
angular.element('#navbar').finish().slideDown();
btnState.openMenu();
});
So, if its mobile and the mouseover and mouseout fires, then it just returns before executing anything - just the way you want.
Modernizr can be found at http://www.modernizr.com/

jQuery onclick not working on mobile

I'm trying to activate a menu with jQuery with a click (touch) on mobile, but it is not working in mobile. When I do the 'window' resize to try the mobile look, it works with the click, but in an emulator or even trying it with my phone, it doesn't work.
HTML Markup
<img src="i/mobilemenu.jpg" id="mobileMenuButton" style="position:absolute; right:0;"/>
CSS:
#mobileNavigation {display:none}
Javascript Code:
<script type="text/javascript">
$(document).ready(function(){
$('#mobileMenuButton').on('click touchstart',function(){
if ($('#mobileNavigation').css('display') == 'none') {
$('#mobileNavigation').css('display','block');
}
else
{
$('#mobileNavigation').css('display','none'); }
});
});
</script>

Establish a click handler based on the client as such:
var clickHandler = ("ontouchstart" in window ? "touchend" : "click")
and use it whenever you want to listen to click events:
$(".selector").on(clickHandler, function() {...})
This way you can always make sure the proper event is being listened to.

<script type="text/javascript">
$(document).ready(function(){
$('#mobileMenuButton').on('mousedown touchstart',function(){
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)|| userAgent.match(/Android/i)) {
if ($('#mobileNavigation').css('display') == 'none') {
$('#mobileNavigation').css('display','block');
} else {
$('#mobileNavigation').css('display','none');
}
}
});
});
</script>
Just provide the user agent.

I remember when I was building a mobile app, elements that weren't links wouldn't pick up on the click event unless I gave them the CSS property of cursor: pointer. Perhaps this is a similar issue. Try giving the button that property in the style attribute.

Came across this question and realized the click (and touchstart) should work.
#vulcanR, it is not working in your case is because you already have #mobileNavigation as display: none; So, there is no place for the event to be triggered.
Instead, try the following code and it should work-
$(document).ready(function() {
$('#mobileMenuButton').on('click touchstart', function() {
if ($('#mobileNavigation').css('opacity') == '0') {
$('#mobileNavigation').css('opacity','1');
} else {
$('#mobileNavigation').css('opacity','0'); }
});
});
});
The reason behind this working is that opacity:0 retains the height and width of the element whereas display:none makes the dimensions zero, so there is no estate for the event.
You could have also used visibility:hidden, but that doesn't listen to click event or any events in general.

UL tabs not clickable on Ipad

I've been tasked to determine why when an IPAD user attempts to use any tab bar it doesn't register as clickable at all. You can jab your finger at the button all day long, but as far as the IPAD is concerned it is just text it seems. A little project background is that its developed in asp MVC and uses LESS. I tested Safari 6 on my computer and a mac, the tabs are fine in those environments. Conflicting reports on whether the problem exists on the iPhone.
I did get my hands on a mac and an IPAD2 for the next few weeks. I've got web inspector running.
<div id="Tabs" class="tabContainer" >
<ul>
<li id="UserAdmin" class="selected">Users</li>
<li id="CompanyAdmin">Companies</li>
<li id="AdminMessages">Admin Messages</li>
</ul>
</div>
<div class="tabContentDivider">
</div>
<div id="tabPlaceHolder" class="tabContent">
<% Html.RenderPartial("ManageUsersPartial", Model, new ViewDataDictionary()); %>
</div>
JS:
$(function () {
$('#Tabs ul li:not(.selected)').live('click', function () {
$('#tooltip').remove();
var selectedTab = $(this).attr('id');
$('#Tabs ul li').removeClass('selected');
$(this).addClass('selected');
$(window).unbind('resize');
loadRequest($('.tabContent'), global.baseUrl() + 'Admin/ShowTab/' + selectedTab, function () { });
});
});
function loadRequest($container, resource, onComplete) {
$.get(resource, function(result) {
$result = $(result);
if ($('#ExceptionPanel', $result).length > 0) {
$('body').html(result);
} else {
$container.html(result);
if (onComplete)
onComplete();
}
$result.remove();
});
}
What is missing here? Some CSS tag? I'd prefer not change the JavaScript. This is mature code.

In iOS, the click event fires only on <a> elements (and possibly some form inputs). You should add the handler for touchstart event:
$('#Tabs ul li:not(.selected)').live('click touchstart', function () {
//...
});
Still, the problem might be more complicated, since users will experience the handler behaviour even when they want to scroll the page and, for that purpose, tap the screen in the li area.
The ultimate solution would introduce touchstart as well as touchend and checking if $(window).scrollTop() or mouse (finger) position has changed. The code might look like this:
var scrollTop = false;
$('#Tabs ul').on('touchstart', 'li:not(.selected)', function (e) {
e.preventDefault(); // IMPORTANT - this line fixes the Android bug but be aware that it might unintentionally prevent from scrolling the document
scrollTop = $(window).scrollTop();
});
$('#Tabs ul').on('click touchend', 'li:not(.selected)', function () {
// let's give it a 10px threshold, since the `click` is not always a pure point `click`
// still, you might want to experiment with different thresholds
if (false !== scrollTop && 10 < Math.abs(scrollTop - $(window).scrollTop())) {
return scrollTop = false;
}
// ...rest of your code
});
EDIT:
I replaced e.pageY with $(window).scrollTop() - touch position might stay the same in relation to the document while scrolling the page.
EDIT 2:
You described the problem as related to the iOS but it would also show up on Android devices. There, you can add one more line to the touchstart handler: e.preventDefault(). I could mention that before but somehow I didn't. There is a known problem with touch events on Android, where sometimes the touchmove and touchend events refuse to fire. The added line of code resolves the problem.
Note that e.preventDefault() might prevent the document from scrolling. As I already mentioned, I have no possibility to test it.
EDIT 3:
According to Mike Barwick's comment, thanks #Mike for the edit. I also modified it a bit. The OP probably used .live method due to event delegation - I guess he adds <li> elements dynamically, so it would be better to pass .li:not(.selected) as the second argument of the .on method. More info HERE.

jQuery draggable for live events on iPad

I am trying to drag live divs returned from ajax. the following code works nice for desktop, but on iPad, I have to drag (on page load) each of the draggable twice, once to initialize and then to drag. Any help in making this one drag even on page load? My code is as the following:
html:
<div class="draggable"> drag this </div>
jQuery:
$.fn.liveDraggable = function (opts)
{
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
{
this.live("touchstart", function() {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts);
}
});
return $();
}
else
{
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts);
}
});
return $();
}
};
$(".draggable").liveDraggable(
{
helper: 'clone',
containment: '#origin'
})

You can't bind mouseover events and expect them to have a 1 to 1 relationship on touch devices. Simply put I have the same issue and have not found a solution besides not using a live model which kind of sucks, as you have to re-initialise everything everytime you add a new dom element meant to inherit those properties.
On a side note.
try the following for determine if you have already attached a live event to that element.
if (!$(this).data("draggable")) {
$(this).draggable(opts);
}
Basically you are negating the need of adding random data() attributes like
'.data("init", true)'
The above prevents cluttering that name space with something you don't need, since draggable once attached is always true, and draggable methods can be removed quite easily.