Having some trouble with JQuery Mobile - html

This is some code I working on but now of JQuery Mobiles elements are working. It been a while since I have coded. Also if it important I am using Sumlime Text 2.
<!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>.......</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div date-role="page" data-theme="a">
<div date-role="header">
<!--Main Nav Bar-->
Home
<h1>HOME</h1>
</div>
<div data-role="content">
hello
</div>
</div>
</body>
</html>


From the looks of it, everything seems to be written correctly. The only thing that could be is that it does not use the correct HTML 5 doc type but html4. Jquery mobile is heavily reliant on HTML5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
</head>
<body>
</body>
</html>

Related

tailwind css is not working in my threejs website

I am using threejs website with webpack and to style my website I am using Tailwind CSS and I tried to configure it and this not working in my browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" >
<title>Globe animation</title>
</head>
<body>
<div class="flex">
<div class="w-1/2">
<h1>Globe</h1>
</div>
<div class="w-1/2" id="canvasContainer">
<!-- Threejs canvas globe -->
<canvas class="webgl"></canvas>
</div>
</div>
</body>
</html>

Upgrading Doctype from XHTML 1.0 Transitional to HTML5 causes layout differences in simple html page

I am upgrading doctype for some application and I see the differences in layout. I created small demo to show the problem.
The old doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
New doctype:
<!doctype html>
And I see this difference: notice second line is lower
This is happening when span element has font-size css attribute.
What is happening here? How do I debug it? Why layout is different?
Source for the page with old doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Transitional</title>
</head>
<body>
<div>
<h1>
<div>
<div>
<span>
<div><span>Is Your County Obese?</span></div>
<div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
</span>
</div>
</div>
</h1>
</div>
</body>
</html>
Source for the page with new layout:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div>
<h1>
<div>
<div>
<span>
<div><span>Is Your County Obese?</span></div>
<div><span style="font-size: 12px;">Select your county to see how it compares with other counties in the country</span></div>
</span>
</div>
</div>
</h1>
</div>
</body>
</html>
Source of the side-by-side view:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div style="display: flex" >
<iframe src="doctype1.html" style="width: 30%; height: 300px;" ></iframe>
<iframe src="doctype2.html" style="width: 30%; height: 300px;" ></iframe>
</div>
</body>
</html>

Here is a properly structured version:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5</title>
</head>
<body>
<div id="top">
<h1>Is Your County Obese?</h1>
<p>Select your county to see how it compares with other counties in the country</p>
</div>
</body>
</html>

html5 coding redirect not working

I am trying to redirect to another page here and it will not go when I test it both files are in the same folder on my computer
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8/>
<meta http-equiv="refresh" content="4; url=home.html" />
</head>
<body>
<h1>Welcome to BlazeFirer's Website</h1>
</body>
</html>
other page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blazefirer</title>
</head>
<body>
hello
</body>
</html>

Close your charset meta tag properly, it's missing quotes afterwards.
<meta charset="UTF-8/>
Should be
<meta charset="UTF-8"/>

Can't get drop down menu to display in Internet Explorer

I am using pre-built CSS and HTML to display a drop down menu on my site, but the menu does not work in Internet Explorer. I am not sure if it is the doctype or what, I have it linked to a csshover.htc page, as it came with, but it still won't work. I will list the code below for the first section of the menu that contains the doctype and file link, as well as the csshover.htc code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->
<body>
<ul id="menu">
<li>Home<!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Welcome !</h2>
</div>
<div class="col_2">
<p></p>
</div>
</div><!-- End 2 columns container -->
And here is the info from the csshover.htc file:
<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)): (hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\- ]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();

Change over to <!DOCTYPE HTML>
and add
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
into your head
also add a <html> tag and </head> tag
for example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<!-- Content -->
</body>
</html>
Your missing a lot of tags which are essential add these in and im sure your problem should be fixed
you also aren't closing your <ul> tag and <li> tag

Hebrew on mobile web site

I am trying to build a basic web page for mobile devices, on my pc Chrome browser I see "???? ???? ???" every where Hebrew written. Here is my code:
<?php
?>
<!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" lang="he">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="he" />
<meta name="GENERATOR" content="PHPEclipse 1.2.0" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="css/themes/light_blue.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<title>מניין</title>
</head>
<body>
<div id="wraper" data-role="header">בדיקה בדיקה הדיקה</div>
</body>
</html>
I am using eclipse IDE for developing. Any suggestions for how to solve this one?

Remove ; charset=UTF-8 and add <meta charset="iso-8859-8"> inside the document <head>.

what browser do you use?
on Chrome it works good