Expand/Collapse on mobile page - javascript

I have a weird thing happening.
I have a page that with several items on it, and each one has an iconfont. When the icon is clicked it changes the icon, and a new element shows below it. And of course, the opposite happens, clicking again changes back the icon and hides it. This works great.
However, when I try to make it work on a mobile version, which is called "modal" (and it kind of is a modal), the expand/collapse does not work. The main modal appears when clicked by a button, so that is not a problem. I am using the Chrome emulator for an iPhone 5. The same function is called, and I have verified it finds the function, but it won't expand (so I can't test collapsing either).
This is the basic HTML:
<p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
<p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals. Available on iOS or Android.</p>
The css:
.plus-fa {
&:before {
#include icon($icon-plus-fa);
color: #0056A7;
}
}
.minus-fa {
&:before {
#include icon($icon-minus-fa);
color: #0056A7;
}
}
.goApps {
display:none;
padding-bottom: 10px;
}
And the jquery function:
$(document).ready(function(){
$(".featureToggle").click(function(){
var togglelist = "#" + $( this ).attr('id') + '_list';
$(togglelist).toggle();
$( this ).toggleClass('plus-fa');
$( this ).toggleClass('minus-fa');
});
});
The code used is exactly the same on the desktop version and the mobile version, although they are in difference scss files, specified for the desktop version and the mobile version.
Can anyone help me figure out why it won't work? I am wondering if it is a "modal" limitation, or something simple I am missing.

Put # inside href
<p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
<p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals. Available on iOS or Android.</p>

Related

JQuery show keyboard on mobile with click

Hey guys I was following tutorial I found online on how to make Hangmen game and it was fine until I tested it on mobile. I just can't make virtual keyboard to show on mobile and I've already tried other answers to similar questions on stack. This is part of my code:
$(document).on("click", function() {
$('#dummy').focus();
});
$('#dummy').focus();
#dummy {
position: absolute;
left: -200px;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topbar">Todemanija</div>
<div class="spacer"></div>
<div id="gameContent"></div>
So guys is there a way to make this work. Also you can see full code in action here
http://www.wpacademy.nextweb.space/TestingMobile/
You need a text input to focus on to trigger the mobile keypad.
And you can't hide it, because a hidden input just can't be focussed.
But! I just had an idea you could try.
Add this to your function gameScreen(){:
$('#gameContent').append("<input type='text' id='dummy'>");
$("#dummy").css({"position":"fixed","left":"120%"}).focus();
So, the trick is to place the text input outside the viewport.
And you can remove this:
// with this function we add virtual keyboard for mobile users and we do not affect desktop gameplay
$(document).on("click",function() {
$('#dummy').focus();
});
$('#startButton').click(function(e) {
$('#dummy').trigger('click');
});
EDIT
Here is a small addition...
I tried your game after you added the previous answer.
In case the user looses the input focus during the game because of a tap outside the keyboard: add this, but outside function gameScreen() (at global scope):
function keepFocus(){
setTimeout(function(){
$(document).find("#dummy").focus();
},100);
}
At the end of function gameScreen(), to maintain the keyboard active:
$(document).on("touchstart", keepFocus);
At the end of victoryMessage() and function defeatMessage(), to deactivate the keyboard:
$(document).off("touchstart", keepFocus);
$("#dummy").blur();
Also, add this in your start() function:
$(document).on("touchstart", keepFocus);

'Hovering' elements when clicked

What I want is fairly simple, and I have two examples for it:
http://janvanderkleijn.nl/
http://studio-laucke-siebein.com/
When looking at these portfolio websites you see it's scroll based websites mainly relying on images. The interactivity I'm looking for is the clicking on an image, resulting in a 'hovering' element over the web page, further elaborating the project with text, images etc.
What I like about it is that you don't have to leave the home-page to look into a project, and it can be closed by either pressing the close button in the top right, or clicked anywhere outside of this element. Especially in Laucke-Sibein's webpage it's nice, that when you scroll far enough down, the element dissappears.
How hard is it to achieve a similar result? How does this function work? I've been looking all afternoon and failed to find something that helped me further.
As mentioned by others there are many jQuery plugins like lightbox, fancybox, etc. that are capable of outputting images and text. Or a jquery-ui dialog box would work.
Alternatively you could create your portfolio items inside div's and show them on click events.
<body>
<div id="project-list">
html showing images from your projects. <br />
<img src="img1.jpg" data-project="project1" />
<img src="img2.jpg" data-project="project2" />
</div>
<div id="project1" class="project">
html displaying <br />
your project 1
</div>
<div id="project2" class="project">
html displaying <br />
your project 2
</div>
</body>
Then css something like:
.project { position: absolute; top: 100px; left: 100px; display: none; }
#project-list.fixed { position: static; }
Then the using jQuery it would look like:
$(function(){
// add click handler to the images
$('#project-list img').click(function(e){
// if a project is visible then just return and let the
// document click handler handle the closing of the project
if($('.project:visible').length > 0){
return;
}
// get the data project attribute which tells you which project to open
var project = $(this).data('project');
$('#' + project).slideDown('slow');
// add the fixed class to the project list so that it doesn't scroll
$('#project-list').addClass('fixed');
// you must have this to keep the click event from bubbling up
// through the DOM and triggering the document click function
// which would close the project as soon as it opens.
e.stopPropagation();
});
$(document).click(function(){
// this closes the project when anything is clicked that doesn't
// have the event.stopPropagation function set.
$('.project').slideUp('slow');
$('#project-list').removeClass('fixed');
});
$('.project').click(function(e){
// you want this so if they click anything in the project it doesn't
// close the project.
e.stopPropagation();
});
});
See a fiddle here http://jsfiddle.net/wdv79yxw/1/
Sounds like you're looking for a modal window. There are tons of jQuery libraries out there, or even pure CSS solutions. A decent one that I've used is jQuery fancybox, which supports videos, iframes, content, a gallery of images. It's very robust.

Button not working on Mobile Devices but works on PC bootstrap

I created a bootstrap button that has a link inside. Which looks like this:
When you hover on it:
This is the code inside the button:
<div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>
The logout button:
<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>
This button works fine on the PC(IE, SAFARI, FireFox, Chrome, Opera) browser(takes me to the administration page, but it doesn't work on the Mobile devices.
I did the same thing for the logout button, and it works fine on PC and Mobile Devices. I am now puzzled.
The issue may be that you're using the onClick event which won't register on a mobile device (as you don't click - you tap).
This answer explains how to use the "touchstart" event which will work on a mobile.
https://stackoverflow.com/a/22015946/2619909
I know this might be a weird answer. But in some cases mobile clickevents dont work unless you put the style: cursor:pointer; to your button.
Mobile clickEvents are handled very differently, the first "click" or "tap" might be interpreted as a HOVER instead of the click which you are looking for.
So try setting the CSS style of the button to : cursor:pointer;
unfortunately neither setting cursor:pointer; nor adding a touchstart event listener
$(document).ready(function() {
$('#button_id').on('click touchstart', function() {
window.location.href = "/url";
});
});
as #noa-dev and #GitPauls suggested worked for me. for reference I tested on my phone7 (ios11.4 and safari)
working solution: I set the z-index of the button to a large positive number and the button now works.
#button_id{
z-index: 99;
}
solution found thanks to Daniel Acree https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone. I don't know if this generalizes to all iphone/mobile devices.

Dropdown menu flickering over slider, only on Chrome for Android

I'm pretty new to all this, so apologies if this is a dumb question:
I've got a Magento site located here: http://www.thisisnotavegetable.com It uses responsive design, and when displayed on mobile-width browsers, the topmenu becomes a javascript-enabled dropdown.
This all works fine, except on the home page (where it is loading over a javascript-enabled slider), and only on Chrome for Android. On that browser, the dropdown flickers and link text won't display. I assume this is a jQuery issue, but I'm not advanced enough to figure it out.
Any help is much appreciated!
Alex
Below is the jQuery for the dropdown (I think). The slider is ioSlider. I hope someone can help me without needing to see that jQuery, because it's unformatted and the license says I'm not supposed to post it.
if (jQuery('#categories-accordion').length){
jQuery('#categories-accordion li.level-top.parent ul.level0').before('<div class="btn-cat"><div class="inner"></div></div>');
if(mobileDevice == true){
jQuery('#categories-accordion li.level-top.parent').each(function(){
jQuery(this).on({
click: function (){
if(!jQuery(this).hasClass('touched')){
jQuery(this).addClass('touched closed').children('ul').slideToggle(200);
clearTouch(jQuery(this));
return false;
}
}
});
});
}else{
jQuery('#categories-accordion li.level-top.parent .btn-cat').each(function(){
jQuery(this).toggle(function(){
jQuery(this).addClass('closed').next().slideToggle(200);
},function(){
jQuery(this).removeClass('closed').next().slideToggle(200);
})
});
}
}
Would be great, if you could post the jQuery Code :)
Flickering might be solved by using hardware acceleration. You can force the browser to use hardware acceleration by adding "-webkit-transform: translateZ(0);" into the css class of the mobile menu.
mobileMenu {
...
-webkit-transform: translateZ(0);
}

How to open Safari from a WebApp in iOS 7

In previous versions of iOS, <a> tags would open Mobile Safari, and you had to intercept those to instead stay inside the webapp (an HTML page that has been saved to the home screen by the user).
Starting in iOS 7, all links are staying inside the WebApp. I cannot figure out how to get it to open Safari, when I really want it to.
I've tried using window.open and a target="_blank" but neither works.
Here is a sample. https://s3.amazonaws.com/kaontest/testopen/index.html
If you save that to your home screen in iOS 6, the link opens Safari. But in iOS 7, it doesn't.
Note that this is the OPPOSITE question that everyone is usually asking ("how to NOT open Safari"). That behavior seems to be the new default, and I can't figure out how to get the old behavior back!
Update 10/23/13: Fixed in iOS 7.0.3. Add a target="xxx" attribute to your links to do this. Also works with mailto: and friends.
This is a bug in iOS 7.0, 7.0.1 and 7.0.2 and there's no known way to do this.
It's a regression from earlier versions of iOS, where links that open in Safari work just fine. It appears to be a part of a cluster of problems revolving around opening URLs, with no external URL schemes working (for example "mailto:" doesn't work either).
The usual suspects of working around a problem like this unfortunately don't work (for example using a form and submitting it with a target of "_new").
There's other grave issues, like alert and confirm modal dialogs not working at all.
It may help to submit these as bugs to Apple, http://bugreport.apple.com
Having an anchor tag with target _blankwill work in iOS 7.0.3 but using window.open will not work and will remain to open within the webview in 7.0.3:
window.open('http://www.google.com/', '_blank');
This is a known issue for the last couple months of betas. There are no work arounds, and from what I can tell Apple has been silent on any ETAs on fixes, or even recognizing it's a bug. Bug reports have been submitted, but not updated/responded to.
More: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
UPDATE
Just wanted to let any one following this know that iOS 7.0.3 seems to fix the issue. I've keep standalone webapps saved for testing and the update released today restored external link/app functionality. So I've updated my code to let customers know to update their phones instead of deleting and re saving the web app.
I was going to just add a comment but apparently this is too long.
Apple set the stage for a WebApp world when they allowed chromeless webapps to be saved to the homescreen of the device. This "bug" feels like a major step backwards. It doesn't seem very apple to leave such a gapping bug in a final release. At least not one that, once they become aware of it, they don't publicly state they are working on a fix for it like they did with the lockscreen bypasses. I can't help that this feels intentional though there doesn't seem to be a clear reason why.
For developers dealing with this issue the only solution I could find was to
1st) Set the meta tag apple-mobile-web-app-capable to "no" - this prevents future users from dealing with the problem
2nd) Updated the code in our webapp to look for "standalone" and iOS version 7+. When conditions are meet I offered a popup that stated the issue and added a link to that page and asked the users for their forgivness and requested they copy the link and paste in in safari.
I wrapped the link in edge to edge tag with line breaks above and bellow to help make the copy and pasting process of the url a bit easier.
iOS v7.0.3 released 10/22/13 fixes the problem.
I found two solutions for the time being to this problem, both of which obviously using preventDefault on the external links.
If you're linking to another website or something to download, the only option I see is to ironically alert the user to hold their finger on the link to get the touch callout prompt. Then again, depending if it's a website or a PDF, instruct them to either copy the link or in the case of a PDF, add it to their reading list. Since the alert and confirm modals are also broken you'll need to implement your own modal notifications. If you already have that it shouldn't be that much trouble.
Update [2013-10-25] Apparently it's been fixed in iOS 7.0.3 and links open in Safari...
Edit [2013-10-05] Here's pretty much what I use with a jQuery UI modal
// iOS 7 external link polyfill
$('a[rel=external], a[rel=blank], a[target=_blank], a[href$=".pdf"]').on('click', function(e) {
if (navigator.standalone && /iP(hone|od|ad) OS 7/.test(navigator.userAgent)) {
e.preventDefault(); e.stopPropagation();
var href = $(this).attr('href');
var $dialog = $('<div id="ios-copy"></div>')
.html('<p>iOS 7 prevents us from opening external links in Safari, you can continue to the address and risk losing all navigation or you can copy the address to your clipboard by <strong>holding your finger on the link</strong> for a few seconds.</p><p><a style="background-color: rgba(0,0,0,.75); color: #fff; font-size: 1.25em; padding: 1em;" href="' + href + '">' + href + '</a></p>')
.appendTo('body')
.dialog({
title: 'External link',
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
});
The other workaround is using ajax or an iframe to load the external content, but unless you have a good sub-browser or something in your app it will look sketchy. Here's something along those lines.
// iOS 7 external link polyfill
if (/iP(hone|od|ad) OS 7/.test(navigator.userAgent) && window.navigator.standalone) {
$('a[rel=external], a[href$=".pdf"]').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var link = this;
var href = $(link).attr('href');
var frameContainer = $('<div></div>').css({
position: 'absolute',
left: 10,
top: $(link).position().top,
opacity: 0,
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch',
height: 520,
transition: 'opacity .25s',
width: 300
});
var iosFrame = $('<iframe class="iosFrame" seamless="seamless" width="1024" height="5000"></iframe>')
.attr('src', href)
.css({
height: 5000,
'max-width': 1024,
width: 1024,
overflow: 'scroll !important',
'-webkit-overflow-scrolling': 'touch !important'
});
var iosFrameClose = $('<i class="icon-cancel icon-remove icon-3x"></i>').css({
position: 'absolute',
left: -10,
top: $(link).position().top - 20,
'text-shadow': '1px 1px 1px #000',
transition: 'opacity .25s',
opacity: 0,
'-webkit-transform': 'translate3d(0, 0, 0)',
width: '3em',
height: '3em'
}).on('click', function(e) {
e.preventDefault();
setTimeout( function() {
$(frameContainer).remove();
$(iosFrameClose).remove();
}, 250);
});
iosFrame.appendTo(frameContainer);
frameContainer.appendTo('body');
iosFrameClose.appendTo('body');
iosFrame.contents().css({
'-webkit-transform': 'translate3d(0, 0, 0)'
});
// Show this thing
setTimeout( function() {
$(frameContainer).css({ opacity: 1 });
$(iosFrameClose).css({ opacity: 1 });
}, 1);
});
}
window.open('http://www.google.com/'); // stays in web app view
<a href='http://www.google.com/' target='_blank'>Click Here</a> // opens in safari
If you want to open Safari, but using an anchor tag like this isn't possible for whatever reason, the JavaScript solution to this question will open in Safari as well.
It looks suspiciously like an intentional bug to limit the ability of web apps to deliver advertisements. Maybe you can try open the new page in an iframe.
EDIT: Sorry, I misread your original problem. This solution was for opening an external website at all. Basic A href tags used to work in opening links and stopped working in iOS7. This was the only way I could get it to open an external link at all.
Here's how I got it to sort of work with a webapp saved to desktop in iOS7.
function openpage()
{
window.open('http://www.yourlinkhere.com', '_blank');
}
...
<a ontouchstart="openpage();" onclick="openpage();">LINKED TEXT</a>
The issue though is that it seems to ignore the target option and it opens it in the same full screen desktop webapp and there is no way to navigate back that I can see.
window.open('http://www.google.com/', '_system');
this will open native Safari Application even on latest version of iOS...
Happy coding!!
Maybe you should remove the meta setting of "apple-mobile-web-app-capable" in the head of page2.html
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1

Categories