I have created two href's which act like buttons, in a comic game. I am following this tutorial . The issue i have is the links are not clickable. They dont respond to touch, nothing happens when clicked.
Here is the project structure:
here is my styles.css:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
and now i'll show you the index.html where the button is not clickable from :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable:
In my opinion,
if you want to move between pages with tau.js library, you need to follow their rule. Here is some reference guide.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU.
It is very simple. Just insert class="ui-page" in root <div> tag.
I tested on my desktop with Tizen IDE. In your index.html,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<<
>>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
And on every other pages(comic/page1.html, page2.html... etc)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
Please try again with above my example.
I checked that project runs well now :)
Related
In my external css tag is working but another defined class is not working.
I have defined two classes in my external CSS file, 1st one of them is working but 2nd one class is not working with external CSS. both classes work properly if I write these codes on my HTML page.
//code of external css page;
.container{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
color: aliceblue;
}
.userCircle{
width: 100%;
margin-top:10px;
border: #fff 2px solide;
}
//code of the HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!----------------Custome Links---------------->
<link rel="stylesheet" type="text/css" href="assets/css/profile.css">
<!----------------/Custome Links---------------->
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h3>User Details</h3>
<div class="userCircle">
User Id : <?php echo $uid; ?>
</div>
</div>
</div>
</div>
</body>
</html>
The background-color CSS property in Chrome is not working when I implement it into the body. However, when I test it in CodePen, the body's background color changes accordingly. Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw.
Here is the code that does not work in notepad:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties.
Add these meta tags-
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="viewport"content="height=device-height, initial-scale=1.0">
</head>
Now your webpage can detect the devices width and height and set the style attributes according to them.
However, if this still doesn't work. Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR.
I found I was having the same issue when using all of the CSS code for the body tag. I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended. It's an organizational problem, but it is functional.
Here's the example from my code (This is in my main.css file):
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>
I created a sample page with a header containing an image. But the page is not responsive. I added the class img-responsive to the img tag but yet it is not responsive. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>A Sample Bootstrap Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header" id="header">
<img id="logo" src="img/logo.png" height="100" alt="Image" class="img-responsive">
<p>Some text here</p>
</div>
</div>
</body>
</html>
The style.css includes the following:
#header #logo
{
display: block;
margin-left: auto;
margin-right: auto;
}
Remove the img tag height="100" as suggested above and add this to your style.css
#header #logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 100px;
}
As for the image not being responsive make sure the bootstrap style for .img-responsive is being used
In firebug/developer tools you should see a class of
.img responsive {
max-width: 100%;
height: auto;
display: block;
}
As for resolving your issue I'll be glad to solve it if you can make a codepen/snippet example for me to see/look at
You should do like this,even needn't use custom class to style, bootstrap provided enough.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="http://lorempixel.com/1900/100/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
I have page here with 2 elements in it and bootstrap on the run, yet I fail to make the first element responsive.
1st element is a SVG with a path animation from Lazy Line Painter, it refuses to become responsive with the written code, doesn't move when the windows is being resized, I need help with it.
2nd Element is a heading which is responsive and looks great.
Question is: How do I get the first element to act like the second, thus being responsive instead of fixed (as it seems fixed when resizing the window)
HTML:
<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Oswald:700'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Code Home</title>
<!--CSS Start-->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--CSS End-->
<!--Scripts Start-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/jquery.lazylinepainter-1.4.1.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/main.js"></script>
<!--Scripts End-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="pencilandbrackets"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div id="title" class="animated bounceInDown">The Code Home</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
CSS:
/*=======MAIN CSS=======*/
body {
background:#2ecc71;
}
#pencilandbrackets {
position: absolute;
top:-170px;
left:200px;
display: block;
}
#title {
font-family: 'Oswald', sans-serif;
font-size: 4.13em;
position: fixed;
top:40%;
left:50%;
margin: -1.0em 0px 0px -3.2em;
color: #2c3e50;
display: block;
}
.lazy-line svg {
width:300% !important;
}
You could create a new #media query with the max width that you'd like to hide this element at, then use display: none; on the element you wish to hide.
My css isn't being applied to a specific img id element on page. I have spent about 30 minutes trying to figure this thing out to no avail. I have 2 other elements with the exact same html and css being applied correctly. Image in question: http://i.imgur.com/Lrtucyo.gif The other two images are just like that one as far as i can tell.
body{
font-family: 'Montserrat', sans-serif;
background: url(/img/body_bg.jpg);
color:#ddd;
font-weight: 700;
font size: 30px;
}
.container{
margin: 0 auto;
}
#blue{
height:8px;
background-color: #4eb1ba;
margin-bottom: 45px;
}
#img{
border-bottom: 2px solid #4eb1ba;
}
/*BOTTLE*/
}
#spray{
border: 1px solid #4eb1ba;
}
/*/BOTTLE*/
/*Vacuum*/
#vacuum{
border: 1px solid #4eb1ba;
margin-left: 400px;
margin-top: -130px;
}
/*Vacuum*/
/*MOP*/
#mop{
border: 1px solid #4eb1ba;
margin-left: 630px;
margin-top: -130px;
}
#portfolio{
margin-top:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Get In Touch</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="row-fluid">
<h4 class="underline"><span>Recent images</span></h4>
<img src="img/clean-home1.jpg" width="960" height="540" alt="">
<div id="portfolio">
<div class="row-fluid">
<div class="span4">
<img src="img/bottle.gif" id="spray" width="180" height="130">
</div>
<div class="row-fluid">
<div class="span4">
<img src="img/vacuum.gif" id="vacuum" width="180" height="130"></img>
</div>
<div class="row-fluid">
<div class="span3">
<img src="img/mop.gif" id="mop" width="180" height="130" ></img>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You have a random closing brace before the #spray{} rule. Not sure if that is the problem, but maybe.
As I saw your codes, you don't have any element with id img in your HTML codes. I think you likely want to apply this CSS rule for all img elements, if so, replace your #img with img in your CSS style
Replace
#img {
border-bottom: 2px solid #4eb1ba;
}
with
img {
border-bottom: 2px solid #4eb1ba;
}