I m having issues in manipulating Cascading Style Sheets of this particular tag.I want an external Cascading Style Sheets to change its styling.
A bit more here....
<style>
div[u=slides] {
}
</style>
You can specify css for 'slides' container in following manner,
<div id="yourid" class="yourclass" u="slides" ...>
<style>
#yourid {
}
.yourclass {
}
</style>
Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
I have a jsfiddle here - http://jsfiddle.net/eYV4n/
Really simple navigation and a hidden div block beneath it.
When you click the second link in the nav the div block slides down with slideToggle.
When the div block slides down I would like the button clicked to be selected.
I can do this when it's clicked by changing the background color.
Is it possible to deselect the link (change it's color back) when the div block slides again.
jquery.hover() handler hover-in and hover-out. Is it possible to do the same thing with slideToggle.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
#wrap{
background:#fff;
max-width:800px;
margin:0 auto;
height:1000px;
}
ul{
list-style:none;
overflow:auto;
}
ul li{
display:inline;
}
ul li a {
float:left;
display:block;
color:#222;
padding:10px;
margin:0 5px 0 0;
}
#block{
width:100%;
margin:0 auto;
height:200px;
background:red;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li>One</li>
<li>Two ↓</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div id="block">
</div>
</div><!-- #wrap -->
<script>
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').css('background','red');
})
</script>
</body>
</html>
A better solution is to toggle a class that in turn changes the background. You should make it a best practice to never style elements with Javascript, you should use CSS for that. Adding/removing classes is fine though. This will make the code much easier to maintain in the long run, and it's also more semantic since you're using classes and not inline styling.
Try this:
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').toggleClass('active');
})
Then in your CSS.
.active { background: red; }
Edit: Jsfiddle here.
I have a test form with whitespace above the top image that shouldn't be there... The image is a background-image attached to the h1 tag. It looks like there's space between the .wufoo div, and the #main_form form.
Css:
<link rel="stylesheet" href="https://system.netsuite.com/c.659197/oboe/integrate/wufoo/css/structure.css" type="text/css" />
<link rel="stylesheet" href="https://system.netsuite.com/c.659197/oboe/integrate/wufoo/css/form.css" type="text/css" />
<link rel="stylesheet" href="https://system.netsuite.com/c.659197/oboe/integrate/wufoo/css/theme.css" type="text/css" />
<style type="text/css">
* {padding:0;margin:0;}
.wufoo{border:1px solid #444;margin:0;padding:0;}
.wufoo p{padding:3px;}
h1 {background:url("/oboe/header1.jpg") no-repeat -270px top;
cursor:pointer;height:164px;margin:auto;width:626px;}
h2{padding:3px; color:#444;}
.wufoo textarea.inputreq{width:355px;}
#main_form{padding:0;margin:0;}
</style>
HTML:
<div id="container">
<div class="wufoo">
<form id="main_form" name="main_form" method="POST" action="test.nl" onsubmit="return ( window.isinited && window.isvalid && save_record( true ) )" style="margin: 0pt;">
<h1>Earth Day Giveaway</h1>
<h2>Earth Day Giveaway</h2>
</form>
</div><!--end wufoo-->
</div><!--container-->
An h1 element will have margins applied to it by default.
h1 { margin: 0px; }
or in your case if you're centering it (I don't know if that's what you're doing with margin auto) you could use this:
h1 { margin: 0px auto; }
I have a html called today.html and I use it on my iphone and I have to zoom in to see my tasks how can I have it formated correctly so that I it warps around the screen on the iphone and the text is the right size
here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tasks for today</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}
body p{
font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 10px;
}
.todos {
font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
color: #7D1518;
padding-left: 20px;
}
.todos p{
font: 1em Arial;
}
</style>
<!-- Date: 2008-08-24 -->
</head>
<body>
<p>a greeting</p>
<div class="todos">
<li>a task</li>
<li>a task with detail</li>
<p>detail</p>
<li>a task with muilple acitons</li>
<ul>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
</ul>
</div>
</body>
</html>
thanks
Have you tried setting the viewport to fit the iphone screen size?
<meta name="viewport" content="width=320" />
see more details at: constrain-your-viewport-for-iphone-web-development
Also see developer.apple.com for other factors regarding iPhone web development (such as Adjust Text Size for Readability)
Have a look here
Quote:
If you are a CSS expert, your first thought will be to use the "handheld" media type in your CSS code. For instance, if a browser considers itself a handheld device, this code will hide all elements that belong to the navigation CSS class. That's handy if you know that these elements are convenient but redundant and take up more space than a handheld user wants to give up:
#media handheld {
.navigation {
display: none;
}
}
Unfortunately this won't work on the iPhone. Why? Because Apple knows that the iPhone can display a page much better than most handhelds. And they didn't want the iPhone to display all web pages in a "dumbed-down" way. So the iPhone looks at the "screen" media type, just like your desktop browser does.
Is there an alternative? Yes! You can specify that a set of CSS rules apply only when the screen is smaller than a certain resolution:
#media only screen and (max-device-width: 480px) {
.navigation {
display: none;
}
}
Try setting font-size: 100%; on the body, that way the browser will definitely be starting from it's default size before applying your em sizes. In addition to that try adding -webkit-text-size-adjust: auto; to your page.
This article goes into a lot of depth on the specifics of developing for mobile safari:
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
Ive cleaned up your HTML a little, by putting the LI inside UL and getting rid of the redundant div.
You can set a max-width on any block level element, so combining that with #epatel's media declarations get's you the following.
Play around with the width's and so on. Ive just set them randomly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tasks for today</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}
body p{
font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 5px;
}
.todos {
font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
color: #7D1518;
padding-left: 20px;
}
.todos p{
font: 1em Arial;
}
ul {
max-width:200px;
}
#media only screen and (max-device-width: 480px) {
ul {
max-width:480px;
}
}
#media only screen and (max-device-width: 240px) {
ul {
max-width:240px;
}
}
</style>
<!-- Date: 2008-08-24 -->
</head>
<body>
<p>a greeting</p>
<ul class="todos">
<li>a task</li>
<li>a task with detail
<p>detail</p>
</li>
<li>a task with muilple acitons
<ul>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
</ul>
</li>
</ul>
</body>
</html>
The selected answer is for iphone but for dynamic width of ranging devices you may add this piece of code in your "head" tag.
Reference
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">