trying to horizontally align a countdown timer (first time coding/building) - javascript

This is my first time building a website. I picked a free bootstrap 3 theme and started editing it from there to try and get the hang of it all. So far it has been going well but I am having problems trying to horizontally center the countdown timer on my site (http://romy.landofthelegend.com/index.php?cID=1)
I tried fidgeting with the HTML, js, and CSS but if there is change the timer will still be aligned left but have a word-break instead.
var finalDate = '2017/04/14';
$('div#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div class=\"half\">' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
.main-content-tablecell {
display: table-cell;
vertical-align: bottom;
z-index: 700;
}
.main-content-tablecell .row {
position: relative;
padding-top: 4.2rem;
padding-bottom: 15rem;
}
.main-content-tablecell #counter {
margin-bottom: 4.2rem;
}
.main-content-tablecell #counter:before,
.main-content-tablecell #counter:after {
content: "";
display: table;
}
.main-content-tablecell #counter:after {
clear: both;
}
.main-content-tablecell #counter .half {
float: left;
}
.main-content-tablecell #counter span {
float: left;
text-align: right;
color: #FFFFFF;
font-family: "roboto-black", sans-serif;
font-size: 12rem;
line-height: 1;
padding: 0;
margin-bottom: 1.5rem;
}
.main-content-tablecell #counter span sup {
font-family: "roboto-bold", sans-serif;
font-size: .17em;
color: rgba(255, 255, 255, 0.3);
top: -3.6em;
right: 1em;
}
.main-content-tablecell h1 {
font-size: 4.2rem;
line-height: 1.143;
color: #FFFFFF;
margin-bottom: 1.2rem;
max-width: 600px;
position: relative;
}
.main-content-tablecell p {
color: rgba(255, 255, 255, 0.3);
font-family: "roboto-regular", sans-serif;
font-size: 1.8rem;
max-width: 400px;
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter">
<div class="center-div">
<span class="inner">94 <sup>days</sup></span>
<span class="inner">23 <sup>hours</sup></span>
</div>
<div class="center-div">
<span class="inner"> 40 <sup>mins</sup></span>
<span class="inner">03 <sup>secs</sup></span>
</div>
</div>
</div>
</div>
</div>
please try to make it as simple as possible with explaining, since I am still learning :)
Thank you in advance!

I would suggest first go over bootstrap css and understand grid system and existing components structure. Try to reuse what is already. http://getbootstrap.com/css/#overview
<!DOCTYPE html>
<html lang="en">
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap</title>
<!-- Bootstrap -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="contianer"> <!-- Boostrap main contianer (Bootstrap requires a containing element to wrap site contents and house in grid system.) http://getbootstrap.com/css/#overview-container-->
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter" class="text-center"></div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<script>
var finalDate = '2017/04/14';
$('#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div>' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
</script>
</body>
</html>

Related

How to let "cross" pop up with ::after a different section

I'm trying to make a cross change to minus and pop up some text.
I have a example but I don't understand how it works with ::after.
It is made with ::after but I don't understand how to use it. Or is it made with a JavaScript?
My code
h2 {
text-transform: uppercase;
letter-spacing: 3px;
font-family: ProximaNovaT-Thin;
font-weight: 400;
font-size: 34px;
line-height: 44px;
}
h5 {
cursor: pointer;
line-height: 24px;
border-top: 1px solid #777;
border-bottom: 1px solid #777;
position: relative;
padding: 20px 75px 20px 0;
}
h5::before {
content: "";
position: absolute;
background: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/plus-icon1.png) scroll no-repeat center center;
background-size: auto;
top: 0;
right: 0;
width: 70px;
height: 100%;
background-size: 45px 45px;
}
.opencont h5::after {
content: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/minus.png) scroll no-repeat center center !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- COSTUM STYLE.CSS -->
<link href="Classes/Model/Contact.css" rel="stylesheet" type="text/css"/>
<title>ThemeBuild B.V.B.A</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 style="padding-top: 50px; padding-bottom: 40px; font-weight: 400; font-family: ProximaNovaT-Thin;">Contact gegevens</h2>
<div class="locatie-dropdown">
<div class="topc text-left">
<h5 style="font-size: 16px;">WOODSTOCK LOCATIONS</h5>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- BOOTSTRAP SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</html>
I'll answer what I can with the information you've given.
First, ::after is a pseudo element. You can read about it here: https://www.w3schools.com/cssref/sel_after.asp.
This means that the "cross" (+) and (-) are positioned after a selected element (in this case h5).
Second, this functionality is most likely accomplished with some javascript. It would involve using an event listener (or in-line javascript onClick) to catch the onClick event of an element (in this case likely the parent of the h5 or the h5 itself), and change a css property that says whether the content is expanded (shown) or not. The content to be shown would be toggled on/off probably using display:none or visibility:hidden. The "cross" (+) or (-) would be changed appropriately within the same onClick event.
In pseudo-code:
If clicked, and content is hidden, then show content and change + to -.
If clicked, and content is shown, then hide content and change - to +.

Getting JavaScript code errors, can anyone help me?

I am getting a few errors within JavaScript. I am fairly new at JavaScript/Jquery. I have checked the errors over google and I understand the errors, however they still appear after attempting to troubleshoot these problems....
Errors are shown on this link:
JavaScript Console Errors
I have tried - Changing file directories, - changing file names, - adding JQuery CDN as first point of call in HTML as expected,- adding a Local Jquery file, - Adding Particles.js and Typed.Js in body tags, adding the js code within body.
HTML Code shown below:
<!DOCTYPE html>
<html>
<head>
<meta lang="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="stylesheet/normalize.css">
<link rel="stylesheet" href="stylesheet/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet/c0nsec.min.css">
<!-- Scripts -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/typed.js"></script>
<script type="text/javascript" src="js/c0nsec.min.js"></script>
<!-- My own js file -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<!-- For full body paricles -->
<div class="container">
<section class="mainLanding">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1 class="test"> ELLO WORLD M8</h1>
<div class="center">
<!-- For typed.js plugin -->
<span class="type"></span>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
CSS code shown Below:
/*======================*/
/* DEFAULT TEMPLATE*/
/*======================*/
html {
font-family: 'Source Sans Pro', Sans-Serif;
}
body {
background: #1f1f1f;
}
/* Particles JS tag */
#particles-js {
width: 100%;
height: 100%;
}
/*======================*/
/* HEADER */
/*======================*/
/*======================*/
/* HEADINGS */
/*======================*/
.test {
font-family: Source Sans Pro;
font-weight: 300;
color: #fff;
text-align: center;
font-size: 7vh;
}
/*======================*/
/* SECTIONS */
/*======================*/
.mainLanding {
position: relative;
top: 50vh;
width: 100vh;
height: 100vh;
left: 0;
right: 0;
}
/* Typed JS tags */
.center {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: center;
width: 100%;
}
.center span {
font-family: Source Sans Pro;
font-size: 5em;
color: #fff;
}
JavaScript code shown below:
// Custom Typed.js scripts
$(function() {
$(".type").typed({
strings: [
"Hello World",
"We are C0nSec, we consult with security vulnerabilites",
"Our mission is to keep the internet safe from criminals"
],
typeSpeed: 70,
backDelay: 200,
loop: true
})
})

Swap body tags between two HTML files

I have two separate HTML files (index.html and home.html) and a javascript (bodyswapscript.js) file. I'm trying to figure out how to swap the body of home.html (only) into the body of the index.html by using java script. Basically replacing body tags between HTML files.
I have posted my html code and java script below. The html is quick and dirty, so I'm only interested in swapping out the body information from index.html with home.html
1.) index.html
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<header>
<hgroup>
<center><h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<body>
<article>
<div id='swapcontent'>
index page
</div>
</article>
</body>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
2.) home.html
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<body>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</body>
3.) bodyswapscript.js
$(document).ready(function()
{
$( 'li>a[id$="Container"]' ).click(function(event)
{
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('#swapcontent').load(href);
return false;
});
});
4.) Supporting CSS
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 720px;
margin: 0px auto;
}
header h1 {
font-size: 36px;
margin: 0px;
}
header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #2B60DE;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px;
display: block;
width: 26px;
padding: 2px;
text-align: center;
background-color: #993333;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
This code was pulled from the following URL: http://jsfiddle.net/Christophe/hj9ry/1/
Correct invalid html, include wrapper parent element for content of <body> at home.html; call .load() with fragment identifier referencing wrapper element within home.html; use .unwrap() to remove wrapper element at index.html at complete function of .load()
index.html
<!doctype html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<hgroup>
<center>
<h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<article>
<div id='swapcontent'>
index page
</div>
</article>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
</body>
</html>
home.html
<!doctype html>
<html>
<head></head>
<body>
<div id="body">
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</div>
</body>
</html>
bodyswapscript.js
$(document).ready(function() {
$('li>a[id$="Container"]').click(function(event) {
event.preventDefault();
var href = $(this).attr('href');
// alert("Loading " + href);
$('body').load(href + " #body", function() {
$("#body *:first").unwrap()
});
return false;
});
});
plnkr http://plnkr.co/edit/r8WTsQ9Xm3ZLsRp8nwLr?p=preview
You can use IFrames in html to show your contents of index.html in homw.html
Or
You can use
in your home file

Random background generator with Javascript and CSS

I'm trying to make the background change randomly when coming to my site.
I saved some images as 1.jpg, 2.jpg etc and I tried to do a bit of javascript random. Can any one suss why this would not work? I know you won't be able to see the photos, but any help would be great.
Here is the jsbin - notice the background is selected in #topContainer in css
https://jsbin.com/qodukozuqi/edit?html,output
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
}
return randomPicture;
</script>
Here is the full code:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tenor+Sans::latin', 'Rock+Salt::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript">
function randomBackground () {
var randomPicture = [Math.floor(Math.random() * 4)+ '.jpg'];
return randomPicture;
}
</script>
<title>NaturallyPizza</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Tenor+Sans|Rock+Salt' rel='stylesheet' type='text/css'/>
<style>
.navbar-collapse{
color: white;
}
.navbar-brand {
font-size: 1.5em;
font-family: 'Rock Salt', sans-serif;
color: white;
}
.navbar-default {
margin-top: 30px;
background-color: transparent;
border: hidden;
font-family: 'Tenor Sans', sans-serif;
}
.listing a{
font-size: 1.5em;
color: white;
}
#topContainer {
background-image: url("images/background/"+randomPicture);
height: 500px;
width: 100%;
opacity: 0.95;
background-size: cover;
color: white;
}
.navbar-default .navbar-brand {
color: white;
}
#media (max-width: 760px) {
.navbar-default {
background-color: lightgrey;
opacity: 0.95;
}
}
#topRow {
margin-top: 130px;
font-family: 'Tenor Sans', sans-serif;
}
.center {
text-align: center;
}
.title {
font-size: 3em;
color: white;
}
.backing {
background-color: grey;
opacity: 0.6;
border-radius: 10px;
}
.marginTop {
margin-top: 30px;
}
.jumbotron {
background-image: url("images/background/1.jpg");
background-size: cover;
}
</style>
</head>
<body>
<script type="text/javascript">alert(randomBackground);</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar color-me"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">NaturallyPizza</a>
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse navbar-right listing">
<ul class="nav navbar-nav">
<li class="color-me">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div>
</div> <!-- class="navbar navbar-default" -->
<div class="container-fluid contentContainer" id="topContainer">
<div class="row-fluid">
<div class="col-md-8 col-md-offset-2 backing" id="topRow">
<h1 class="title marginTop center">Learn to make great Pizza!</h1>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("min-height", $(window).height());
</script>
</body>
</html>
You cannot use JS inside a CSS, you have to set the style directly with javascript (put this code at the end of the page, after #topContainer):
<script>
var el = document.getElementById('topContainer');
el.style.backgroundImage = 'url(images/background/' + Math.floor(Math.random() * 4) + '.jpg)';
</script>
Your return statement is outside of your function.
Just use this
function randomBackground() {
var randomPicture = [Math.floor(Math.random() * 4) + '.jpg'];
return randomPicture;
}
jsFiddle : https://jsfiddle.net/hbhz3x4L/

cannot initialise jQuery knob in jquery moble page [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to use jquery knob plugin
to display a circle through which the user can post a rating. But I cannot get it to display. I'm posting my code here, please tell me whats wrong.
PS : I'm using JQuery Mobile. So the page is being loaded via Ajax. Please keep that in mind.
<html>
<head>
<title>Rate and Review</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="flatUI/jquery.mobile.flatui.css" />
</head>
<body>
<div data-role="page" id="pageRate">
<script src="jQueryKnob/jquery.knob.js"></script>
<script src="jquery-2.1.3.min.js"></script>
<style type="text/css">
#ratingHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 18vw 0 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}
#reviewHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 2% 2% 2% 10vw;
text-align: left;
width: 90%;
}
#ratingCircleDiv {
width: 50vw;
overflow: hidden;
position:relative;
margin-left:25vw;
}
.dial {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
color: #ff8800;
font: bold 3em Arial;
height: 80px;
left: 0;
margin: 0; !important
padding: 0;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 124px;
}
#header1 {
color: white;
font-family: arial;
font-size: 1.4em;
margin: 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}
#textarea {
margin-left: 3vw;
width: 93%;
}
</style>
<div data-role="header" style="width:100%;position:fixed;z-index:1" data-theme="a">
<div class="ui-grid-a" style="width:100%">
<div class="ui-block-a" style="min-height:10vw;width:20%;overflow:hidden;margin-left:2%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:5%;padding:0;border:0">
<img src="images/logo.png" style="max-height:100%;max-width:100%">
</div></div>
<div class="ui-block-b" style="min-height:10vw;width:70%;overflow:hidden;margin-left:0%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:0;padding:0;border:0">
<h2 class="removeShadow" id="header1">Rate & Review</h2>
</div></div>
</div><!-- /grid-a -->
</div><!-- /header -->
<div data-role="content" style="padding:0;z-index:0;position:relative;height:100vh" data-theme="a">
<label id="ratingHeader">
Your Rating : </label>
<div id="ratingCircleDiv">
<input class="dial" data-width="200" data-min="-100" data-displayPrevious=true value="2.5" style="margin:0">
<script>
$("#pageRate").on("pageinit",function(e)
{
$(".dial").knob({
'min':0,
'max':5,
'step':0.5,
'fgColor':'#ff8800',
'bgColor':'#BBBBBB',
'width':'100%'
alert('initialized Knob');
});
$('.dial').css('margin','11vw 0 0 10vw');
});
</script>
</div>
<label id="reviewHeader">
write a review : </label>
<div data-role="fieldcontain">
<!-- <label for="textarea">review:</label> -->
<textarea name="textarea" id="textarea"></textarea>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Wrap you code in pagecreate event delegated to #pageRate. You also need to add data-role="none" to input to prevent jQM from styling it.
<input class="dial" data-role="none">
$(document).on("pagecreate", "#pageRate", function () {
$(".dial", this).knob({
'min': 0,
'max': 5,
'step': 0.5,
'fgColor': '#ff8800',
'bgColor': '#BBBBBB'
});
});
Demo
I solved it. Looks like it was a minor mistake
in the (".dial").knob function, i accidentally added a "width:100%" which was not defined for the jQuery knob plugin. It was supposed to go in the css. i removed that line and everything works properly.
Thanks

Categories