I am trying to make an on/off toggle button using a checkbox input type and using CSS to change the style to have it look like the ones the iPhone uses for my webapp. Currently my button works great in all browsers however when I load it up on my iPhone it doesn't work, when you click the button nothing happens. At first I thought it might be a problem with my jQTouch or javascript but I removed all my CSS so I could just test the functionality and it worked fine. So I know the problem is somewhere in my CSS. Any idea why this CSS code doesn't allow me to click the button. (The graphics and everything work and look fine, just nothing happens when I click the button). Any ideas? Thanks.
Code is in this fiddle:
http://jsfiddle.net/4gjZX/4/
change to onclick
add an empty onclick to the label - known issue on iDevices
DEMO
However why have inline event handlers when you use jQuery anyway???
Also why the data- in the ID, it is normally used for attribute names
You may get it works by making some css changes:-
label { cursor: pointer; }
Related
I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.
I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).
I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly but I can't get the ruddy thing to work.
The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.html I really can't work this out and its driving me absolutely batty. Any help would be really appreciated.
I had the same problem and found an easy workaround which I have used here
hover example
The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.
It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.
Hope this helps, what I've written represents about 3 days of poring over my library of reference books.
We had this problem and changed the hover to clicks.
Instead of using hover, which is of course impossible on touch devices, using :active would likely be a good start. Selection something is still possible on touch devices, bind the menu to the active state of a toggle and you're done.
You will have to switch from hover to click event for this case. There's no workaround for that.
You should definitely consider changing your design to have a hamburger styled menu which opens from left for touch devices.
See this demo from the link that you posted. It changes to a different menu style when you open it in mobile device.
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
Also if you want to have your top link as a direct link to other page; you can have two separate clicks on the top button for that. First click will open the menu and after the menu is opened you can assign the direct link to it as done in the above demo.
Put this line of code inside your head tag like this:
<head>
<script>document.addEventListener("touchstart", function(){}, true);</script>
</head>
Create for your hover element an active class like this:
element:hover, element:active { Your CSS }
Voila.
Why does this work on every other device and every browser unless that browser is on an iphone (iphone 4 in this case)?
<script type="text/javascript" lang="javascript">
function FocusTextBox()
{
var text = document.getElementById("textBox_Search");
text.select();
text.focus();
}
</script>
Also tried jquery:
$("#<%=textBox_Search%>").click(function () { ("#<%=textBox_Search%>").Select() });
I'm looking for this behavior after postback/end of button click event. Example screenshot:
FYI: The reason this behavior is required: The mobile devices have wireless bar-code scanners. Need the ability to scan items over and over again without touching the screen. Manually clearing out the previous item in the UPC box isn't going to work. Needs to do it automatically. It should just select what was previously entered so that it will be erased with the next item scanned. The scanner simply performs a keyboard enter function with each scan. This works well and the button is clicked because it's the default button on the page. But, the problem is that on an iphone, the text is not selected again as in the picture above.
I've also tried just doing a .select() from codebehind after the button click. I've tried registering the javascript and executing it last in the button click event. All of those things work on every device except an iphone.
Thinking of forcing my employees to buy Androids. lol
This simply won't work on a iphone. Reference this answer:
How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?
This is typical Apple thinking: Sacrifice usability for user friendliness. Not surprised this was the ultimate answer. If anyone ever finds a work around, please let me know!
If you are like me and want more confirmation that this is indeed the unfortunate answer: https://discussions.apple.com/thread/5187540
For highlight your text on recent navigators (http://kimblim.dk/css-tests/selectors/) like the iPhone, you should use the css3 pseudo classes :focus, ::selection and :hover and apply to them a specific style.
For example, if I want to highlight <p id="textBox_Search">Text</p> in yellow on select, the css will be :
#textBox_Search::selection { background-color: yellow; }
More informations here about css3 pseudo classes : http://www.w3schools.com/css/css_pseudo_classes.asp
You can also do it with jQuery, like following :
$(function(){
$('#textBox_Search:selected').css('background-color', 'yellow');
});
Details of the .css() function in jQuery : http://api.jquery.com/css/
NB: JQuery is the best way cause it works on every navigators instead of raw javascript and css, who are a bit hard to compatibly between navigators. A good way to learn how to use this framework : http://learn.jquery.com/
This should be another simple fix that is confusing me. I'm pulling data from a database and rendering a button for each row of the database. However, the text doesn't appear inside the button! It appears underneath it!
Here's the code:
$('#'+category).append('<li><a href="#itemColours" data-role="button" data-icon="false" data-rel="popup" data-mini="true" id="'+thisRow.fixture+'itemColour" class="descriptions" onClick="getItemColours(\''+thisRow.fixture+'\')" />'+thisRow.colour+'</a></li>');
Interestingly, when the getItemColours function runs, it shows a popup of colours and when you select one it changes the button and updates the database. That bit works just fine.
$('#'+item+'itemColour .ui-btn-text').text(colour);
here's what I get: http://i1320.photobucket.com/albums/u521/dan_jones2/buttons_zps185113ce.png
The button rendered incorrectly, the button after the function call (correct) and then the button after the list is refreshed (incorrect again).
This button is working just fine in my jsFiddle example. I think this is a problem in your custom css, and it is interfering with jQM button css.
What about your class descriptions, maybe it is causing this problem. Or maybe you have a css that interferes with
<span class="ui-btn-text">....
Probably best thing you can do is to use for example firebug addon for Firefox or Chrome ann take a look at button HTML and CSS. Specially take care for classes added to:
<span class="ui-btn-text">
I think something gave it display: block; css property and that is causing this problem.
I still don't know why this wasn't working but I got around it by changing the anchor tag for an input button and added another function to open the popup.
I'm using jQuery Mobile 1.1 and I have a fixed toolbar but I want to disable hiding it when a user clicks somewhere in the page. It would even be better if I can set that up for just specific page elements (like clicking on an input box).
I tried many methods that I found on the web (e.g. $.fixedToolbars.setTouchToggleEnabled(false);) but none of them work, probably because of the 1.1 version.
You can check my example here: http://jsfiddle.net/Leqpw/
The using is the JQM v 1.0.x method for disabling the fixed toolbar. There are multiple ways to disable this functionality.
The simplest way is to simply add data-tap-toggle="false" to your toolbar. But if you don't feel like copy and pasting a bunch of times in your project try these other methods.
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
You can also configure it so that certain elements will ignore this behavior.
$('[data-position=fixed]').fixedtoolbar({ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" })
Update added more info for a more complete answer.
All you need to do is add the following attribute to your header
data-tap-toggle="false"
and the tap toggling will go away.
Effect I'm trying to achieve:
In Twitter's new redesign, they implemented a "sticky" dropdown menu for the account settings area.
Basically, when you click on your username in the black global nav bar at the top, a menu is toggled open and stays open until you click on one of the links or on your username name again to toggle it closed.
I'd like to achieve the exact same effect of a sticky menu with just CSS and HTML. I'm okay with using CSS3 features, but if this can be achieved without relying on CSS3, that's even better.
What I've tried so far
I can create the basic navigation menu with dropdown working with pure CSS and HTML, but only using the :hover pseudoclass. I tried out the :active pseudoclass, but unfortunately it doesn't "stick" and stay open.
Is this "sticky" dropdown effect even possible without relying on javascript? If it is not possible without relying on javascript, how should I handle this so it degrades gracefully?
I'm going off memory here as I cannot access Twitter from work. If I recall correctly, the same script is used on the main page to login. It creates a little popup type window that stays there even after moving the mouse.
If that's what you're talking about you can't achieve that with just CSS; it's a styling language, not a scripting language. The :hover/:active pseudo-class styles will all un-apply themselves as soon as that event stops.
The alternative with Javascript involved would be to make the button a link that leads you to an actual page. Then bind it's onclick to popup an absolutely positioned div that's hidden by default (return false within the onclick to prevent following the link). This div isn't hidden until whatever condition you want to hide it with, and it starts off hidden, so if they don't have Javascript they won't know what they're missing.
Use the pseudo class :focus instead of :active. You might also need to use tabindex="" in your HTML to make an element accept focus.
However, iOS touchscreens don't seem to recognize tabindex="".
It's possible to achieve with help of CSS use label in combination with input[type="checkbox"] and :checked pseudoselector to store state
See example at https://developer.mozilla.org/en/CSS/%3achecked