I'm having problems with my HTML and jQuery Code. I was wondering if someone could tell me what's wrong with it. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<!-- Color Scheme -->
<!-- Beige: #eee8cd; Green: #008b8b; Blue: #203471; -->
</head>
<body>
<div id="MainPage" style="background:#008b8b;color:#203471" data-role="page">
<div style="background:#008b8b;color:#203471" data-role="content">
<p style="background:#008b8b;color:#203471"><img alt="" src="Images/Header.png" style="width:100%" /></p>
<p style="background:#008b8b;color:#eee8cd">The content for the main page is here</p>
<a style="background:#eee8cd;color:#203471" href="AboutUs.htm" data-role="button">About Us</a>
<a style="background:#eee8cd;color:#203471" href="ContactUs.htm" data-role="button">Contact Us</a>
</div>
<div style="background:#203471;color:#eee8cd" data-role="footer">
<h4>Main Page Footer</h4>
</div>
</div>
</body>
</html>
There are two problems that I am having problems figuring out:
1) When I put this code on my web server and navigate to it via my iPhone it is fine when the phone is held in the vertical position. When the phone is moved into the horizontal position though, the buttons seem to be displayed over the text and are not workable. Any ideas on how to resolve this?
2) I tried to create a custom stylesheet.css and link to it via the class attribute of the various tags. This would not work so I had to put the inline code (for example:)
<div style="background:#203471;color:#eee8cd"
Can someone show me how to create a stylesheet.css with these attributes and "tag" them in the HTML so that this works?
Thanks So Much.
Well, you've got a link to jQuery where your link to your CSS should go. Check out www.codecademy.com !
I've separated inline css to its own and seems to render fine.
Play with this fiddle here http://jsfiddle.net/kVqWJ/
You can include css files in your html file many ways:
1)
<style type="text/css">
//your style here
</style>
2)
<link rel="stylesheet" type="text/css" href="css url here">
A quick googling will help. The Mozilla developer network is a great place to start.
Related
Is it necessary to define <head> and <body> with "loadHTMLString" in UIWebView?
When using loadHTMLString:baseURL: in UIWebView, Those two HTML comes same result.
1.
<html> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/> <meta name=\"viewport\" content=\"width=device-width, user-scalable=yes\"> </head> <body> <div class=label1-con3> <font color=#ff0000 size=3> <strong>Test</strong></font> </div> </body> </html>
2.
<div class=label1-con3> <font color=#ff0000 size=3> <strong>Test</strong></font> </div>
no it is not necessary at all, it's just user's requirement that how they wanna show their web template. So it's not necessary for all to use this kind of stuff it's just requirement that changes per senario.
No, its not necessary to add these tags.
You can add string of your own and it will work fine
Wait-webdriver, chrome-driver
I have the following html code:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc" aria-describedby="cke_27" style="width:100%;height:100%">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="CSS1Compat" lang="en" dir="ltr">
<head>
<title data-cke-title="Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc">Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc</title>
<link href="http:somefile.css" rel="stylesheet" type="text/css">
<style data-cke-temp="1" type="text/css">
</head>
<body class="cke_show_borders" contenteditable="true" spellcheck="false">
<br type="_moz">
</body>
</html>
</iframe>
I used the following code to set data to the body of the iframe :
#browser.frame(:title => 'Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc').send_keys "description"
Yesterday I updated my chromedriver with new one: https://code.google.com/p/chromedriver/downloads/list
and this line doesn't work for me anymore, but it still works using old chromedriver
Any ideas how can I make it work with new chromedriver?
Thanks,
Anna
Yes, got the same issue. Switched back to old version and got it to work again.
Got all the frameSwitch code in a C# try/catch and no error is given, just an empty textfield.
( Dojo richtext )
The issue fixed in new chromedriver v.2.2:
https://code.google.com/p/chromedriver/downloads/list
I have this page, the superfish menu does not show over the google earth plugin but under!
This problem is happening in IE8 and Google Chrome.
Any Ideas?
To run the following code run it under localhost (that is the domain registered with the google earth api key)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link type="text/css" rel="Stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAFoBwRF7WovCjsFJemYop1hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTpGk76aE2Yul2N6gAS9CZLeDBtuA"></script>
<script>
$(document).ready(function() {
$('ul.sf-menu').superfish();
});
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCallback(errorCode) {
}
</script>
</head>
<body onload="init()">
<ul id="sample-menu-1" class="sf-menu">
<li class="current">
menu item
<ul>
<li>
menu item
</li>
<li class="current">
menu item
</li>
</ul>
</li>
</ul>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
It is not possible to apply z-index layering of arbitrary HTML content on top of the Google-Earth-Plugin window. There is a long standing feature request for that functionality here:
http://code.google.com/p/earth-api-samples/issues/detail?id=9
In the comments to that request there are workarounds and demos posted involving an IFRAME shim, but that works only for iframe boxed content. Due to low-level details of how plugins work within browsers, I think it's unlikely z-index layering of arbitrary content over the plugin window will be possible anytime soon, especially across all browsers.
I have this link to a chess game but instead of it just displaying on the page id like it to be in a pop up. iv got videos, images, websites ext to pop up but having trouble with this. iv tried using a hidden div but couldnt get it to work.
I would much appreciate it if anyone could help.
thanks in advance
stephen
site with game i want to embed.
http://www.freegaming.de/onlinegames/Casino-|-Card-|-Board-Games/Classic-Chess-Game.html
I Read about Fancybox Usage in its home page...
Make sure You Have latest fancybox, folder layout like this...
It's a quick solution :) but it works!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<a id="various4" href="http://www.freegaming.de/components/flash//classic chess.swf">Swf</a>
</body>
</html>
I think now it's the asked solution....
I'm trying to fix a display issue on my jQuery mobile site. It looks great in other browsers but when viewed on the iPhone in Safari, everything is super large and you cannot shrink the page with pinch.
For example a simple h2 element takes up most of the screen.
<meta name="viewport" content="width=device-width;
height=device-height; user-scalable=no" />
<title>Start</title>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=yes" />
<link rel="stylesheet" href="/static/css/android.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="https://www.google.com/jsapi?key=ABQIAAAApPeof0WyN6ORT7NeNop5OxQhS8mdepxW5-6qUjpskYmhafYcLRQjyW8D0bRdsydbD1maEkV9aSDKrw" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
// Check for iPhone4 Retina Display
if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
$('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
}
}
</script>
</head>
<body>
<div data-role="page" id="start">
<div data-role="header" data-theme="a">
<h1>Start</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<h2>Adventure with:</h2>
<div id="buttons">
Spam Master
CREATE NEW FOO
</div><!-- /buttons -->
</div><!-- /content -->
</div><!-- /page -->
</body>
You're almost there.
Try setting the initial-scale, that should do the trick.
<meta name="viewport" content="width=default-width, initial-scale=1" />
Related:
jQueryMobile viewport not working in Windows Phone
changing viewport based on device resolution
Hide Safari address bar and footer
jquerymobile and screen resizing
Is it possible to use jQuery to read meta tags
Having trouble using jQuery to set meta tag values
Yeah I know there is some reading to do ;)
To enable pinch: user-scalable=yes