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; }
Related
When i try to load markers from my map i get this error message:
{"message":"Markers do not exist"}
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BoxMap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'this_is_my_token';
var map = L.mapbox.map('map')
.setView([40.447, -5.625], 2);
L.mapbox.styleLayer('mapbox://styles/this_is_my_style').addTo(map);
L.mapbox.featureLayer().loadID('this_is_my_map_id').addTo(map);
</script>
</body>
</html>
PS: when i try to put a map_id from the given examples on mapbox website, it works! example: examples.map-h61e8o8e
Thanks
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 leaflet map in a div that I loa like this:
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I then have a div such as this:
Some js that loads the map:
map = L.map($attrs.id,
center: [40.094882122321145, -3.8232421874999996]
zoom: 5
)
L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png",
maxZoom: 18
).addTo map
Then on page load I have some JS that monitors window height and resizes:
$("#map").height($(window).height())
$(window).resize(_.throttle(->
$("#map").height($(window).height())
, 100
))
However when the map loads it loads with half the tiles in grey. When i resize the map loads fine but the initial load is 1/2 grey
If you don't have a reason to use JS for map sizing its probably better to use CSS:
html, body, #map {
width: 100%;
height: 100%;
}
However you can try using map.invalidateSize() after inserting the map into the DOM (or map resized by $("#map").height($(window).height())).
invalidateSize() is called by default when you resize the window, see the following links:
https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 and https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.
After a long search on this issue, in my case I had a global css style which was :
<pre>
img {
position: relative;
display: block;
max-width: 100%;
}
</pre>
In my case problem were the "position : relative", so I add a line
<pre>
//Fix personnal bug leaflet
.leaflet-pane{
img{
position: absolute;
}
}
</pre>
I am trying to implement a simple page with bunch of text fields and using iscroll to scroll.
The issue is when I click on the textfield, the key pad appears but I can't scroll either to the bottom of the screen or to top of the screen.
Here is the code. Any help regarding this is much appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>sample</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/* function preventBehavior(e)
{
e.preventDefault();
}
document.addEventListener("touchmove", preventBehavior, false);*/
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
<link rel="stylesheet" type="text/css" href="scrollbar.css">
<script type="application/javascript" src="src/iscroll.js?v4"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:45px;
line-height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute;
z-index:1;
top:45px;
bottom:48px;
left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
</head>
<body>
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
check out this
iScroll 4 not working with form <select> element iPhone Safari and Android browser
i was facing the same issue. worked for me. just a small change. instead of doing for select tag, do for all the tags for which u face the issue.
try to remove -webkit-user-select:none;
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;">