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

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

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>

Internal CSS works, but external doesn't

Internal CSS works, but external doesn't. I've tried the external with the code !important, but it just didn't made any sense.
I want to add a gallery to my site. But I have a problem. As I've seen in the browser some margin overwrites the ext. CSS. But here's the thing, I have no margins in the HTML code. The only thing I can imagine is that the Bootstrap is doing something with high priority.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
position: static;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="gallery">
<a target="_blank" href="gtrr35.jpg">
<img src="gtrr35.jpg" alt="Nissan GT-R R35 Nismo">
</a>
<div class="desc">Nissan GT-R R35 Nismo</div>
</div>
Where is your custom css stylesheet linked?
It should be the last of all the other tags (fromm top-left to bottom -right), otherwise it gets overwritten due the cascading aspect of CSS...

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>

Don't work retina.js

I have problems with retina.js.
Download images https://yadi.sk/d/VEpe-Kdz35PEfr
Why not apply #2x and #3x images? Why retina.js doesn't work? I've been doing documentation. Why this is happening? How to fix this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
text-align: center;
font-family: helvetica, sans-serif;
padding-bottom: 25px;
}
h2 {
margin-top: 35px;
}
.responsive {
width: 80%;
margin: auto;
}
.responsive img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.wrapper {
background: #eaeaea;
margin: 35px auto;
width: 1170px;
padding: 25px 25px 45px;
border-radius: 5px;
}
.img-wrapper {
display: inline-block;
width: 30%;
background: rgba(0, 0, 0, .06);
padding: 0 15px 25px;
vertical-align: middle;
border-radius: 3px;
}
.img-wrapper p {
height: 75px;
font-size: 13px;
}
.bg, .bg2, .bg3 {
height: 150px;
}
</style>
<!-- Uncomment one of the following CSS links to test the behavior of a
different CSS preprocessor.-->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> -->
<!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> -->
<script type="text/javascript">
// Spoof the browser into thinking it is Retina
// comment the next line out to make sure it works without retina
window.devicePixelRatio = 3;
</script>
</head>
<body>
<div class="wrapper">
<h1>retina.js test environement</h1>
<h2>Img Tags</h2>
<!-- This image does not opt in. It will always be shown at 1x -->
<div class="img-wrapper">
<h3>Img tag #1x</h3>
<p>
This image does not opt in. It will always be shown at 1x.
</p>
<img src="google-logo.png">
</div>
<!-- This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments. -->
<div class="img-wrapper">
<h3>Img tag #2x</h3>
<p>
This image should be shown at 2x all retina environments,
but shown at 1x in non-retina environments.
</p>
<img src="google-logo.png" data-rjs="2">
</div>
<!-- This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments. -->
<div class="img-wrapper">
<h3>Img tag #3x</h3>
<p>
This image should be shown at 3x in all environments 3x and up,
shown at 2x in 2x environments, and shown at 1x in non-retina
environments.
</p>
<img src="google-logo.png" data-rjs="3">
</div>
</div>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.0/retina.min.js"></script>
</body>
</html>
There must be a bug in v2.1.0, I changed the source of the script to 2.0.0 and it works as expected:
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js"></script>

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