Is it possible to disable the hover and active pseudo classes for mobile devices only?
I've found this
html.touch {
/* Touch is enabled */
}
html.no-touch {
/* Touch is disabled */
}
Which seems pretty neat. But I can't get it to work.
The code is below, and you can test it here: http://jsfiddle.net/5qb2J/
<html>
<head>
<style type="text/css">
#button{background:url("http://www.webstuffshare.com/wp-content/uploads/2010/03/button3.jpg") no-repeat 0 0;display:block;width:201px;height:67px;}
#button:hover{background-position:0px -67px;}
#button:active{background-position:0px -134px;}
#button span{position:absolute;top:-99999999em;}
</style>
</head>
<body>
<a id="button" href="#"><span>this is foo</span></a>
</body>
</html>
edit
I'm using this now
<?php // detect mobile
$Mobile = FALSE;
if
(strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "android") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "webos") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "iphone") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "ipod") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "ipad") ||
strstr(strtolower($_SERVER["HTTP_USER_AGENT"]), "zune"))
{
$Mobile = TRUE;
}
?>
and
<?php
If ($Mobile == FALSE)
{
echo <<<escapethis
some html here
escapethis;
}
?>
the lines that use the word escapethis can not begin with a space
Sounds like html.touch and html.no-touch are being used with a feature detection library like modernizr, which will do all sorts of feature testing and add classes to the html element based on the results of those tests.
In that case, you would want to do something like this:
html.no-touch #ElementThatShouldHaveNoHoverEventOnTouchDevices:hover{
//do your stuff
}
<div id="ElementThatShouldHaveNoHoverEventOnTouchDevices">
hello
</div>
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
JavaScript hide/show element
(13 answers)
Closed 3 years ago.
Referring to the example code below.
CSS is not changing the display value after the js function changes it.
Expected example behaviors:
narrowing window hides "nav display"
widening window displays "nav display"
clicking "toggleNav" toggles visibility of "nav display"
Unexpected example behaviors:
clicking "toggleNav" disables the effect of window width
/* toggle between showing and hiding nav when the user clicks on toggleNav */
function toggleNav() {
var x = document.getElementById("nav");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#nav {display: block; } /* display is not restored after js function */
/* narrow window */
#media screen and (max-width: 70rem) {
#nav {display: none } /* display is not removed after js function */
}
<div>
<!-- button to toggle nav display -->
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<div>toggleNav</div>
</a><br>
<nav id="nav">
<h1>nav display</h1>
</nav>
</div>
<p>Initially, #media width toggles nav display.</p>
<p>After running toggleNav() function, #media width does nothing.</p>
Apparently, CSS does not change display value after js changes it.
Is there some way for media max-width to change a display value after js changes it?
ANSWER:
The solution is to use js for all show and hide:
<!DOCTYPE html>
<!-- based on https://www.w3schools.com/howto/howto_js_media_queries.asp -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dropbtn</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>
<!-- button to toggle nav display -->
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<div>toggleNav</div>
</a><br>
<nav>
<h1>nav display</h1>
</nav>
</div>
<p>Initially, #media width toggles nav display.</p>
<p>After running toggleNav() function, #media width does nothing.</p>
<script>
/* toggle between showing and hiding nav when the user clicks on toggleNav */
function toggleNav() {
$("nav").toggle();
}
/* if narrow window, hide nav, if wide window show nav */
function wideShowNav(x) {
if (x.matches) {
$("nav").hide();
} else {
$("nav").show();
}
}
var x = window.matchMedia("(max-width: 70rem)")
wideShowNav(x) // Call listener function at run time
x.addListener(wideShowNav) // Attach listener function on state changes
</script>
</body>
</html>
I have a link that triggers a modal to appear, but also need to apply a class to the body in order to set position: fixed due to the iOS 11 bootstrap modal form field bug. However, this isn't setting the property to the body.
HTML
<body class="" ng-class="{'login-form' : toggle, 'login-form' : !toggle}" window-detection page-class>
<a ng-click="openLoginModal(); toggle = !toggle"
data-rt-id="login--sm">[[ "Login / Join" | translate ]]</a>
CSS
body{
#media screen and (max-width: 414px){
.login-form{
position: fixed!important;
}
}
How can I toggle a class on the body when the user clicks the login button?
Which bootstrap version are you using . Use 3.2 version.
You can use some thing like that
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-top:70px
}
Change the code like so.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
.login-form{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body class="" ng-class="{'login-form' : toggle, '' : !toggle}" window-detection page-class ng-controller='MyController' ng-app="myApp">
<a ng-click="openLoginModal(); toggle = !toggle"
data-rt-id="login--sm">{{"Login / Join" }}</a>
</body>
Hi all I'm trying to create a mobile site for a website I've already created and am using in file css.
i am trying to make the input boxes 10% of the screen height. how can I do this?
how can I make the login button taller?
here is the code from the view file
<?php echo $this->Html->docType('xhtml-trans'); ?>
<html>
<head>
<style>
body {
background-color:#ADD8E6;
height: 960px;
width: 640px;
}
table, td, th
{
background-color: #ADD8E6;
}
input
{
height:233%;
width:70%;
}
</style>
<title> <?php echo $title_for_layout; ?></title>
<?php echo $this->Html->css($stylesheet_used); ?>
</head>
<body>
<div id = "headertwo" style="background-image:url(<?php echo $this->webroot; ?>img/BannerGradient2.jpg);">
<center>
<?php echo $this->Html->image($image_used, array(
"alt" => "eBox",
'url' => array('controller' => 'Users', 'action' => 'login'))) ?>
</center>
</div>
<?php echo $this->Form->create('User', array('url' => array('controller' => 'users', 'action' => 'login')));?>
<table border=0 style="width:640px;">
<tr>
<td >Username:
<?php echo $this->Form->input('username',array('label'=>false,));?></td>
</tr>
<tr>
<td>Password: <?php echo $this->Form->input('password',array('label'=>false,));?></td>
</tr>
</table>
<?php echo $this->Form->end('Login', array('width'=>100));?>
</div>
</body>
</html>
user1393064,
You're using XHTML Doctype rightnow which is not good practice now a days to achieve good result in Targeted Mobile Device.
Instead I recommend you to try HTML5 Doctype, like below...
<!DOCTYPE html>
Additionally for Mobile support you need to add Viewport Meta
<meta name ="viewport" content ="initial-scale = 1.0, user-scalable = no">
Then you define your CSS for INPUT
input { /* put your code here */ }
input#submit { /* put your style here */ }
I also suggest you to use CSS Media Query for your targeted Mobile Device & Screen.
#media screen and (max-width: 640px){
body{ /* put your style here */ }
form{ /* put your style here */ }
input{ /* put your style here */ }
input#submit{ /* put your style here */ }
}
For further help you can refer to this article http://www.yourinspirationweb.com/en/tips-tricks-how-to-optimize-a-website-for-mobile-devices/
1.
input
{
font-size:200%;
width:70%;
}
did not think about including the font-size in the input as I didn't think of it as text, duhhh
Am wondering if there is a way to ignore tags:
<!-- I can add code here -->
<!-- I cannot edit the following start -->
<style>
div, td {
color: #555555;
font-size: 10pt;
text-align: left;
}
</div>
<!-- I cannot edit the following end -->
<div id="myapp" style="color:red"><div>Test</div></div>
Am wondering if there is anything that I can add to skip these generic div/td styles. e.g. #myapp div { font-color: inherit; }
There is no straightforward CSS method to ignore later CSS rules.
The most reliable option is to use JavaScript to remove the tag.
Example: Remove the, say, first <style> tag after the <script> element:
<script id="unique-id-script">
setTimeout(function() {
var removeTheNthStyleElement = 1, found = 0,
script = document.getElementById('unique-id-script'), elem = script;
while (elem = elem.nextSibling) {
if (elem.nodeName.toUpperCase() === 'STYLE') {
if (++found === removeTheNthStyleElement) {
// Remove style element => disable styles
elem.parentNode.removeChild(elem);
// Remove temporary script element
script.parentNode.removeChild(script);
break;
}
}
}
}, 4);
</script>
... anything but a style element...
<style>
/* I want to prevent these rules from being used */
</style>
This will inherit red color
#myapp div{
color: inherit;
}
I'm working on adding content to a web-page with javascript. The problem is that the CSS in IE (7) doesn't seem apply to the dynamically added content.
Here's an example document..
<html>
<head>
<style type="text/css">
p.foo { color: #FF4400 ; background-color: #000000 }
p.bar { color: #FF0000 ; background-color: #000000 }
</style>
<script type="text/javascript">
function add() {
var node = document.createElement("p");
node.setAttribute("class", "bar");
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};
</script>
</head>
<body onload="add()">
<p class="bar">bar</p>
<p class="foo">foo</p>
</body>
</html>
In FF, the newly added 'New Content' paragraph has the style applied to it, but in IE, it doesn't. This seems like something obvious enough that it ought to be easily searchable-for, but some obvious queries gave me nothing.
So what's the trick?
Why not use a framework, such as jQuery, MooTools, extJs, Dojo, Prototype, etc., that has already solved all of these problems?
But if you insist on doing it yourself, try using:
function add() {
var node = document.createElement("p");
node.className = 'bar'; // <- use in leu of setAttribute()
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};