Using Jquery mobile on Tizen webapp - javascript

I am making a Tizen web app and want to use jQuery mobile's "taphold" listener.
I downloaded the latest .js from the jQuery mobile site, but when I try to include it, it doesn't work.
Am I meant to use it with jQuery or by itself? both product errors.
Without including jQuery I get the error:
js/jquery.mobile-1.4.2.min.js (26) :TypeError: 'undefined' is not an object (evaluating '$.mobile = {}')"
But if I do include jQuery when going to that page the screen is completely black and I can not do anything.

You should post your code. JQuery Mobile works with Tizen, you can even add it to project from IDE.
Below is index.html for TizenWeb version of JQuery tutorial on taphold event. All is working. You can use it as template for your solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - tapHold listener</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css"/>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style>
<!--
based on http://api.jquerymobile.com/taphold/
-->
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
}
#nav {
font-size: 200%;
width:17.1875em;
margin:17px auto 0 auto;
}
#nav a {
color: #777;
border: 2px solid #777;
background-color: #ccc;
padding: 0.2em 0.6em;
text-decoration: none;
float: left;
margin-right: 0.3em;
}
#nav a:hover {
color: #999;
border-color: #999;
background: #eee;
}
#nav a.selected,
#nav a.selected:hover {
color: #0a0;
border-color: #0a0;
background: #afa;
}
div.box {
width: 3em;
height: 3em;
background-color: #108040;
}
div.box.taphold {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<!--
based on http://api.jquerymobile.com/taphold/
-->
<div data-role="page" >
<div data-role="header" data-position="fixed" >
<h1>Single-Page Application </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.</p>
<h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
<div class="box"></div>
<script>
$(function(){
$( "div.box" ).bind( "taphold", tapholdHandler );
function tapholdHandler( event ) {
$( event.target ).addClass( "taphold" );
}
});
</script>
</div><!-- /page -->
</body>
</html>

Related

Css header page with html in bulma

Hello I have a problem.
Why my css doesn't work on my head page in html?
Someone can help me the link of my code if you to see the result on run: https://jsfiddle.net/02kf1msd/`.
I use bulma for the style.
I want to have the logo and the menu in the same header line: logo on left and menu nav on right.
HTML Code:
<head>
<meta charset="utf-8">
<title>Oumar Pathe SOW Portfolio </title>
<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="src/css/main.css">
<!--css-->
<!--font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!--font-->
</head>
<!--head-->
<!--body-->
<body>
<!--head-->
<div class="block">
<head class="header">
Oumar Pathé SOW Portfolio
<nav class="header-menu">
Accueil
Apropos
Réalisations et Expériances
Contact
</nav>
</head>
</div>
<!--head-->
CSS Code:
.header header {
width: 100%;
margin-left: 0;
margin-right: 0;
height: 70px;
line-height: 70px;
background-color: rgba( 0 , 0 , 0, 0);
position:fixed;
top: 0;
z-index: 999;
}
.header .header-logo {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
float: left;
margin-left: 30px;
}
.header .header-menu{
float: right;
margin-right: 30px;
}
.header .header-menu a {
margin-right: 15px;
color: #FFFFFF;
}
.header .header-menu a:hover {
color: #3498db;
}
Why my access doesn't apply on this code?
sometimes Bulma style overrides your CSS codes so you will need to use !important after some of your CSS attributes.
second use navbar-end and navbar-start classes to make the logo on left and menu nav on right,
https://bulma.io/documentation/components/navbar/

how to bring the Content of the dropdown menu button on top of the page displayed within my main.html using frameset tag

My main.html displays the menu.htm and welcome.htm using frameset. Drop down menu buttons "Admin..." and "Scheduler..." suppose to show dropdown content on mouse hover. Since welcome.htm is on top of menu.htm therefore content of the dropdown button doesn't show up.
However, All menu button work as expected when open the menu.htm as standalone page(see attached pic)menu.htm But drop-down buttons content does not show up when open in main.html using frame tags.
main.html
<html>
<head>
<title>Main Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<meta http-equiv="cache-control" content="max-age=0" />
</head>
<frameset rows = "25,*" >
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="no" id="menu_frame1"
name="menu_frame" src="menu.htm" />
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"
id="content_frame1" name="content_frame" src="welcome.htm" />
</frameset>
</html>
Here is menu.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Main Menu</title>
<style type="text/css">
body
{
background-color: #333;
border: 0px;
margin: 0px;
padding: 0px;
FONT-SIZE: 15px;
FONT-FAMILY: sans-serif;
}
.topnav
{
overflow: hidden;
background-color: green;
}
.topnav a
{
float: left;
color: #fec10d;
font-size: 15px;
text-align: center;
text-decoration: none;
font-weight: none;
padding-left: 10px;
padding-right: 10px;
}
.topnav a:hover
{
background-color: #ddd;
text-decoration: underline;
color: black;
}
.topnav a.active
{
margin-top: 5px;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 15px;
border: none;
outline: none;
color: #fec10d;
padding: 5px 7px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #fec10d;
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 90px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
background-color: #582c83;
color: white;
padding: 5px 7px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #fec10d;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
<script type="text/javascript">
function open_in_content(url)
{
parent.document.getElementById("content_frame").src = url;
}
function open_in_new(url)
{
window.open(url);
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="/mainmenu" target="_top">Home</a>
<a class="active" href="/acctlist" target="content_frame">Accounts</a>
<a class="active" href="/reports/main" target="content_frame">Customers</a>
<div class="dropdown">
<button class="dropbtn">Admin...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Add Account
Files
Add Rule
Account Update
Ref Upload
Check stats
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Scheduler...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
New Job
Remove Job
Add checkpoint
</div>
</div>
<a class="active" href="help/index.htm" target="content_frame">Help</a>
</div>
</body>
</html>
Here is welcome.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>
Main Menu Welcome Page
</TITLE>
</HEAD>
<BODY>
Use the links at the top of the menu to navigate.
</BODY>
</HTML>
first of all Why not use html5?
You should use iframe instead of frame
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
after, you add id to iframe and you add display option or you add "position:absolute;z-index" these iframes with css.
after, then was mouseover in iframe you change z-index option with javascript
I help you but first
Can you review jquery.load()
https://api.jquery.com/load/
I think it might be easier for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="divMenu"></div>
</body>
</html>
<script>
$(document).ready(function(){
$("#divMenu").load("./menu.html");//.txt or html or url
});
</script>
try this
Even if the scroll page, the menu will remain at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:#111;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src="./menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
try this
I made the "manubar "background transparent and when mouseover and manubar the height will automatically 300px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:transparent;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src=".menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
<script>
var menuBar = document.querySelector(".menuBar")
menuBar.onmouseover = function(){
menuBar.style.height="300px"
}
menuBar.onmouseout = function(){
menuBar.style.height="50px"
}
</script>

Ajax call not loading the pages on the main page

I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.

HTML not stretching to window on sever but working locally

I am facing a strange issue while creating a responsive webpage.
Basically, I created a simple html page(Page 1) and uploaded it to a blob storage. The page is then run in Azure AD's B2C portal which inserts login form into my html page (using CORS) and shows the combined page to the user. Since I have the source code of the final combined page(Page 2) which automatically merges my content with Azure's form, I am able to test the page from my local machine as well.
The issues I am facing is that Page 1 (which I upload to blob) stretches to window perfectly (both height and width), but Page-2 after it's merged with Azure login-form does not stretch along height.
I have already verified using chrome developer tools (enabled using F12 on chrome) that css style on html/body in page2 is the one I applied and only other thing added to it by browser/Azure is {display: block;} which I think should not cause this current issue.
Below are the source codes :-
Page 1 :
<html>
<head>
<title>User Details</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/common-1.0.4.css">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/selfAsserted.1.0.8.css">
<script src="https://login.microsoftonline.com/static/tenant/default/js/layout-1.0.0.min.js"></script>-->
<style>
#main_div {
background-image:url('https://adasphase2.blob.core.windows.net/democontainerblockblob/mm_background.jpg');
/* background-color: 00ff00; */
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:100% 100%;
}
body {
/*background-color: #ff00ff;*/
height:100%;
width:100%;
}
h1 {
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
padding:0% 5% 5% 5%;
}
img {
width:100%;
padding-top:10%;
/*padding-top:10%;
padding-left:5%;
padding-right:5%*/
}
label[for=password] {
display: none;
}
h2 {
display: none;
}
{
}
label[for=logonIdentifier] {
display: none;
}
#forgotPassword {
display: none;
}
#password, #logonIdentifier {
margin: 2% 5% 2% 5%;
width: 90%;
}
#password, #logonIdentifier {
margin: 1% 5%;
width: 86%;
padding: 2% 2%;
}
#next {
background-color: #222222;
border-style: solid;
border-radius: 5px;
border-color: #ffffff;
color: white;
padding: 2% 2%;
text-align: center;
font-size: 3vw;
font-family: sans-serif;
border-width: 1px;
width: 90%;
margin: 2% 5%;
text-transform: uppercase;
font-weight: bold;
}
#next:active {
background-color: #444444;
}
div.create {
display: none;
}
#forgot{
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
margin:2% 5%
}
</style
</head>
<body>
<div id="main_div">
<img id="background_background_image" src="https://adasphase2.blob.core.windows.net:443/democontainerblockblob/splash_stacked_logo.png" alt="Illustration" />
<h1>LOGIN WITH A TARPPORTAL.COM ACCOUNT OR CLICK REGISTER FOR A NEW ACCOUNT.</h1>
<div id="api"></div>
</div>
</body>
</html>
Page2 (combined page):
<!DOCTYPE html>
<!-- Build: 1.0.0.114 -->
<html>
<head>
<title>Loading...</title>
<script src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
<script>window.staticHost="https://login.microsoftonline.com/static";window.targetSlice="001-000";</script>
<script>var elementUrl="elements/selfasserted/unifiedSSP-1.0.8.min";</script>
<script>define('template.CP', [/** no dependencies. **/], {"list":[]});
define('template.SA_FIELDS', [/** no dependencies. **/], {"AttributeFields":[{"IS_TEXT":true,"IS_PASSWORD":false,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"LogonIdentifier","ID":"logonIdentifier","U_HELP":"","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false},{"IS_TEXT":false,"IS_PASSWORD":true,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"Password","ID":"password","U_HELP":"Enter password","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false}]});
define('language.data', [/** no dependencies. **/], {"email_pattern":"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","logonIdentifier_email":"Email Address","requiredField_email":"Please enter your email","logonIdentifier_username":"Username","createaccount_link":"Sign up now","requiredField_username":"Please enter your user name","createaccount_intro":"Don't have an account?","forgotpassword_link":"Forgot your password?","divider_title":"OR","cancel_message":"The user has forgotten their password","button_signin":"Sign in","social_intro":"Sign in with your social account","requiredField_password":"Please enter your password","invalid_password":"The password you entered is not in the expected format.","local_intro_username":"Sign in with your user name","local_intro_email":"Sign in with your existing account","invalid_email":"Please enter a valid email address","unknown_error":"We are having trouble signing you in. Please try again later."});
define('settings.data', [/** no dependencies. **/], {"remoteResource":"https://adasphase2.blob.core.windows.net/democontainerblockblob/RemoteServicesLoginPage.html","retryLimit":3,"api":"CombinedSigninAndSignup","csrf":"R2lYeVl1cEJLYWlpdENnSHJoOHpITHZtWWFaR2Y4eCsvcUZiK3JsTDd5OXFBZFAzUDViNDBtSTczUTd1YnpPS3RpVURmd1dPOGM1K0FZYU5Fam1IRkE9PTsyMDE2LTA1LTE4VDIyOjEzOjU3LjQxNTEwMjJaO0F6U0VkYlRUbDlHenNoQkVHK1JYSUE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjoxfQ==","transId":"eyJUSUQiOiJmN2I4ODJjOS03NmJlLTQ0MzktYWJjNi1hNzE1NjM3ZDM4MGQifQ","pageMode":0,"config":{"operatingMode":"Email","sendHintOnSignup":"False","forgotPasswordLinkLocation":"AfterLabel","includePasswordRequirements":"true"},"hosts":{"tenant":"/lexustmstest.onmicrosoft.com/B2C_1_TMS_Lexus_SignUpandSignIn_Policy","policy":"B2C_1_TMS_Lexus_SignUpandSignIn_Policy","static":"https://login.microsoftonline.com/static/"},"locale":{"lang":"en","country":"US"}});
</script>
<script>var cookieEnabled=navigator.cookieEnabled?!0:!1,Constants;typeof navigator.cookieEnabled!="undefined"||cookieEnabled||(document.cookie="probe",cookieEnabled=document.cookie.indexOf("probe")!=-1?!0:!1),function(){document.querySelectorAll||(document.querySelectorAll=function(n){var i=i=document.createStyleSheet(),r=document.all,f=r.length,t,u=[];for(i.addRule(n,"k:v"),t=0;t<f;t+=1)if(r[t].currentStyle.k==="v"&&(u.push(r[t]),u.length>Infinity))break;return i.removeRule(0),u});String.prototype.trim||function(){var n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(n,"")}}()}();cookieEnabled&&(Constants=[],Constants.ERROR_REDIRECT_CONSOLE_STRING="Redirecting back to B2C service with querystring",function(){for(var n,u=function(){},t=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"],i=t.length,r=window.console=window.console||{};i--;)n=t[i],r[n]||(r[n]=u)}(),require(["require"],function(){require.config({baseUrl:window.staticHost,paths:{jquery:"library/jquery-1.10.2.min",handlebars:"library/handlebars-2.0.0.min",requirecss:"library/require-css-0.1.8.min",simpleModal:"library/jquery.simplemodal-1.4.5.min",core:"js/core-1.0.17.min",metrics:"js/metrics-1.0.1.min",modal:"js/modal-1.0.1.min",iso:"js/iso-unified-1.0.2.min",element:elementUrl},map:{"*":{css:"requirecss"}},skipDataMain:!0});require(["core","settings.data","metrics","element"],function(n,t,i,r){try{window.Metrics=i;metricResource=window.Metrics.create(t.remoteResource);metricResource.start();function u(){var i,f=canSetHeaders=!0,e=t.retryLimit;window.XDomainRequest?(i=new XDomainRequest,f=canSetHeaders=!1):i=new XMLHttpRequest;i.open("GET",metricResource.id);canSetHeaders&&metricResource.id.indexOf(window.staticHost)===0&&i.setRequestHeader("x-ms-cpim-slice",window.targetSlice);i.onload=function(){var t,u;if(!f||f&&i.status===200){metricResource.end();t=(new Date).getTime();r.initialize(i.responseText);metricResource.setInitializationTime((new Date).getTime()-t);return}u="external?statusCode="+i.status+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(u);return};i.onerror=function(){var t=0,r;f&&(t=i.status);r="external?statusCode="+t+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(r)};i.timeout=function(){if(this.tryCount++,this.tryCount<=this.retryLimit){u();return}var t="external?statusCode=4&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(t);return};i.onprogress=function(){};i.send()}u()}catch(f){n.redirectToServer("error?statusCode=0&statusMessage="+encodeURIComponent(f.message)+"&resource="+encodeURIComponent(t.remoteResource))}})}))</script>
</head>
<body>
<style>.no_display{display:none}.error_container h1{color:#333;font-size:1.2em;font-family:'Segoe UI Light',Segoe,'Segoe UI',SegoeUI-Light-final,Tahoma,Helvetica,Arial,sans-serif;font-weight:lighter}.error_container p{color:#333;font-size:.8em;font-family:'Segoe UI',Segoe,SegoeUI-Regular-final,Tahoma,Helvetica,Arial,sans-serif;margin:14px 0}</style>
<noscript>
<div id="no_js">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block JavaScript. You need to allow JavaScript to use this service.</p>
<p>To learn how to allow JavaScript or to find out whether your browser supports JavaScript, check the online help in your web browser.</p>
</div>
</div>
</div>
</noscript>
<div id="no_cookie" class="no_display">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block cookies. You need to allow cookies to use this service.</p>
<p>Cookies are small text files stored on your computer that tell us when you're signed in. To learn how to allow cookies, check the online help in your web browser.</p>
</div>
</div>
</div>
<script>if (!cookieEnabled) document.getElementById('no_cookie').className = '';</script>
</body>
</html>
Any help/pointers are appreciated !
You can try
body, html { margin: 0; padding: 0; }
On line 1 of your first page add
<!doctype html>
and then further down you have a typo on the closing style tag
</style <--------
</head>
thanks for your help. I found this post helpful :
Stackoverflow
Adding html{ height:100%; } resolved the issue.

Make input look like anchor link (AKA jQueryUI datepicker without input)

I wish to make an input element look just like an anchor link. Furthermore, it should look like a link where the x-editable plugin is applied to it. My attempt is displayed below. My difficulty is the underline extends past the text, and the text width is not always the same. Ideally, the input width would always be the width of the text (JavaScript solutions are okay). I also have problems with the before/after clicked color, but suppose I could just eliminate this from the other links on the page.
.inputLink {
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
cursor: pointer;
color:#0000ff;
border-bottom: 1px dashed #0088cc;
text-decoration: none;
/* width:75px; */
}
Why am I doing this?
I need jQuery datepicker (actually timepicker) to be initiated by clicking the current date. I've seen several solutions, but believe my solution posted below (and also at http://jsbin.com/tadaqomure/1/) is cleaner provided I can figure out the input CSS. If you feel I should be doing differently, please provide a comment.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<style type="text/css">
.inputLink {
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
cursor: pointer;
color:#0000ff;
border-bottom: 1px dashed #0088cc;
text-decoration: none;
/* width:75px; */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js" type="text/javascript"></script>
<link href= "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet">
<link href= "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#text').editable();
$("#datetime").datetimepicker();
});
</script>
</head>
<body>
<div>
<span>Normal Link:</span>
test
</div>
<div>
<span>Datetime Fake Link:</span>
<input class="inputLink" id="datetime" type="text" readonly value="1/05/1984" />
</div>
</body>
</html>

Categories

Resources