cannot initialise jQuery knob in jquery moble page [closed] - javascript

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

Related

Submit button is giving null

I am trying to develop a rating site which is a part of Frontend Mentor Challenge(https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) in which I am facing the following problems:-
On clicking submit button it gives a null error. Why is it happening and how can I fix this?
Should I use a modal box for thank you page or is it ok to make a different HTML page to handle the thank you page?
How can I access the 'numbers' class and use it on the 'thank you.html' page?
const numberClicked = document.querySelectorAll(".number")
const submitBtn = document.getElementById("submit-btn")
numberClicked.forEach(function(oneNumbreClicked) {
oneNumbreClicked.addEventListener('click', function() {
console.log(oneNumbreClicked.innerText)
})
})
submitBtn.addEventListener('click', function() {
document.getElementById("final-rating").innerText = `You selected ${oneNumbreClicked.innerText} out of 5`
})
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
font-family: 'Overpass', sans-serif;
background-color: hsl(216, 12%, 8%);
}
.container {
color: white;
width: 35%;
background-color: hsl(213, 19%, 18%);
border-radius: 10px;
box-shadow: 0 10px hsl(216, 12%, 8%);
margin: 3em auto;
padding: 2em;
}
.thank-you-container {
text-align: center;
}
.star {
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
padding: 10px;
}
.numbers {
margin: 0 auto;
}
.number {
display: inline-block;
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
text-align: center;
padding: 10px;
width: 40px;
font-size: 1em;
margin: 0 0.423em;
opacity: 0.5;
border: none;
color: inherit;
}
.submit-btn {
background-color: hsl(25, 97%, 53%);
color: white;
padding: .8em 2em;
width: 100%;
border-radius: 1.5em;
border: none;
margin-top: 1.5em;
font-weight: 400;
font-size: 1.1em;
}
.number:hover {
opacity: 1;
background-color: hsl(217, 12%, 63%);
}
.submit-btn:hover {
opacity: 0.5;
}
.submit-btn:focus,
.number:focus {
opacity: 1;
background-color: white;
color: hsl(25, 97%, 53%);
}
.final-rating {
background-color: hsl(229.4, 14.3%, 23.3%);
color: hsl(25, 97%, 53%);
border-radius: 1.5em;
padding: 0.4em;
margin: 1.3em auto;
width: 12.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component | Rating Page</title>
<style>
.attribution {
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main>
<!-- Rating state start -->
<section class="container">
<img class="star" src="images/icon-star.svg" alt="">
<h2>How did we do?</h2>
<p>
Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
</p>
<div class="numbers" id="numbers">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
</div>
<a href="thank.html" target="_self">
<button class="submit-btn" id="submit-btn">Submit</button>
</a>
</section>
<!-- Rating state end -->
<div class="attribution">
Challenge by Frontend Mentor. Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
<!--This is the linked HTML file(thank.html) which activates on clicking upon Submit button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component |Thank You Page</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<main>
<section class="container thank-you-container">
<img src="images/illustration-thank-you.svg" alt="">
<p class= "final-rating" id="final-rating"></p>
<h2>Thank you!</h2>
<p>We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!</p>
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
-->
So first it would be better if you could write the whole error, so we have more info of what is causing it.
Issue: But of what I've seen is that, the submit button is wrapped in anchor tags, which is redirecting us to "thank.html" as: <button>Submit</button>, and in the thank.html (the commented code below) you are loading the very same script. <script src="script.js"></script> which causes the problem/error. Why is it causing a problem, is simply because in this script you are accessing the DOM elements which does not exist in thank.html. For example in script.js you access the elements with class query selector .numbers, but when thank.html is loaded this elements are not existing. =)
Solution:
You could create a new unique js file for the purpose of thank.html. And add an event listener on load as: window.addEventListener("load", () => {../logic here}), but with this approach you will have to think of how would you pass the parameter of the value oneNumbreClicked.innerText so you can use and print it. As a starter you could share the information through the sessionStorage or the localeStorage. (There are way more ways)
Other easy and straight forward approach to have only one html file. Have the both <section></section> (section with class container and thank-you-container). Initially the section with class thank-you-container would have css property: display: "none". When clicking on submit button, firstly you will change the display property of the section with class thank-you-container to "flex or block", and change the display prop of the section with class container to "none, and print the text. On a way you will simulate "single page applicaton" :D. And do not forget to remove the <a> </a> tags from the submit button, so you won't redirect.
Dummy demo solution:
const container = document.getElementById("container")
const containerTwo = document.getElementById("thank-you-container")
const myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", ()=> {
container.style.display = "none";
containerTwo.style.display = "flex";
// your additional logic here
})
.thank-you-container {
display: none}
<div class="container" id="container">
<h1>Container one</h1>
</div>
<div class="thank-you-container" id="thank-you-container">
<h1>Container two</h1>
</div>
<button id="myBtn">Submit</button>

How can I fix this error in DOM manipulation and error getting an HTML line to the console? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
Whenever I print any text to the console that is being printed successfully. But when I try to print the HTML line to the console even with ID or class name. That is not working and giving me the output null.
I have this HTML 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.0" />
<title>Number Game</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
The CSS code is:
* {
font-family: Raleway, sans-serif;
box-sizing: border-box;
}
h1 {
margin-top: 30px;
font-size: 150%;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
}
.play-again {
padding: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: fit-content;
display: block;
border: none;
background-color: rgb(38, 194, 64);
border-radius: 3px;
}
.result {
text-align: center;
}
.left-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
input {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
border-radius: 50%;
display: block;
}
.right-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
.check-result {
padding: 5px;
margin-left: auto;
margin-right: auto;
display: block;
background-color: rgb(38, 194, 64);
border-radius: 3px;
border: none;
}
.check-result:hover,
.play-again:hover {
box-shadow: 0px 0px 10px black;
}
And the JavaScript code is:
"use strict";
console.log(document.querySelector("#message"));
console.log("hi");
The "hi" text printed successfully to the console, but the second line gives me "null" in Chrome. I have also reinstalled Chrome.
image link= "https://drive.google.com/file/d/1Iq2kHr6YFFAWl0pHLnpI9uiWY2WyBwno/view?usp=sharing"
Your Javascript code is running before the HTML finishes loading, to prevent this, add the defer attribute to your <script> tag as follows
<!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.0" />
<title>Number Game</title>
<link rel="stylesheet" href="style.css" />
<!-- Adding the defer attribute -->
<script src="script.js" defer></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
You have added <script> tag in the head section that means your javascript load before the <p id="message"> tag which you want to get and log in console.
Solution - add you script file just before </body> tag closing.
You have to remove the -script- tag to the -head- and put it to the end of the -body-

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 +.

Underlining links

I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through
a: hover {text-decoration: none}
as well as on another.
From below I will provide HTML code as well as CSS code
I ask to help to correct such unexpected error
body{background: #efefef
url("images/geometry2.png");
margin: 0; padding: 0;
font: 16px/24px Arial, Tahoma, Sans-serif;
}
div.mid{
width: 1000px; margin: 0 auto;
}
a:hover {
text-decoration: none;
}
div.header{
background: #101417;
}
/*Шапка сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой сайт</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div class="header">
<div class="mid" >
<header>
<div class="topmenu" style='float:right;height: 70px; line-height: 70px'
</div>
<aside>
Главная
Тренинг
Шаблоны
Контакты
</aside>
</div>
<img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
<div class="afisha"</div>
<img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
<h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
<p>Смотрите здесь<p>
<div class="clear"></div>
</header>
</div>
</div>
<div class="menu">
<div class="mid" >Привет мир</div>
</div>
<div class="conten">
<div class="mid" ></div>
</div>
<div class="footer">
<div class="mid" ></div>
</div>
</body>
</html>
try with
div.mid{
width: 1000px; margin: 0 auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
also clear caches before checking results..
With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).
It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:
a{text-decoration: none}

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

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>

Categories