I was working the project where there is two view and three view (or if possible multiple view). Here in my code selected option normal creates two div placed vertically and Three view creates three view vertically (i.e adding one more div in Normal option). Here default one is Normal
.header{
width:100%;
height:40px;
background:#f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top:0px;
color: green;
font-weight:bold;
}
.container{
width: 100%;
min-height: 150px;
padding-top:2px;
display: flex;
}
.container .box1{
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #inside{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
padding-bottom:10px;
border-radius: 1px;
background:#f4f3f1;
}
.container .box1.box2{
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom:10px;
background:#f4f3f1;
}
.tabb{
float:left;
margin-left:10px;
margin:5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<body>
<div class="header">
<select class="tabb" name="opt" id="opt" >
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="inside" >
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second" >
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
</div>
</body>
Currently by default two div is created, how can I create 3 div on selecting the Three view of selection menu, placed vetically. In code how to dynamically create <div class="box1 box2 box3"> .
You mean this?
Also IDs need to be unique
$(function() {
$("#opt").on("change", function() {
$(".box3").toggle(this.value == "three"); // toggle will show if true, hide if false
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
</div>
</body>
To add views, try this:
var views = {
"three": ".box3",
"four": ".box3,.box4"
}
$(function() {
$("#opt").on("change", function() {
var view = views[this.value]; // if three or four
$(".box3,.box4").hide(); // hide anyway
if (view) $(view).show(); // show box2 or box3 and box4
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box4 #fourth {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
<option value="four">Four view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
<div class="box1 box2 box4">
<div id="fourth">
<center>Inside Box4</center>
</div>
<center>Main Box4</center>
</div>
</div>
</body>
first you must addEventListener for your select input and when you chose Three View:
//create div element
const div = documnet.createElement('div');
// add class name
div.className = 'box1 box2 box3';
// get container
const container = document.getElementsByClassName('container')[0];
// add div to container
container.appendChild(div);
Related
I am trying to place the top right of the div element friend_info to the top left of the button friend_button.
I have tried to use the code from https://javascript.info/coordinates#element-coordinates-getboundingclientrect but to no avail and I also tried to use this code:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.friend_info').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
> });
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
> });
but the div element disdplays in the middle of the button instead of the left hand side. Here is the html and css for the code I am working on.
HTML:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<div class="header">
<h1 class="Search_Media">Search Media</h1>
<div class="navigationbar">
<form>
<input type="text" placeholder="Search...">
<input type="submit" value="Search">
</form>
</div>
</div>
<br />
<div class="middle">
<div class="headings">
<a class="active" href="Main_Page.html">Home</a>
Messages
Friends
User page
</div>
<div class="friends">
<h2>Friends</h2>
<button type="button" class="friend-button" id="friend-button">
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info">
<video autoplay muted loop class="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-5">
<p class="info">Phone Number: 07914836605</p>
<p class="info">Name: Joe</p>
<p class="info">Surname: Smith</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 14/02/2003</p>
</div>
</div>
</div>
</div>
</div>
<div class="middle-grid">
<div class="user-post">
Create post:<br>
<form>
<textarea id="create_post" rows="10" cols = "50"></textarea><br>
<input type="submit" class="post-button" value="Post">
</form>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts"><img src="default-pic.png" class="profile-pic" alt="Default Picture" width="50" height="50">Posts</h3>
<p>This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
<div class="options">
Like
Comment
Report
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<button onclick="topFunction()" id="myBtn" title="Go To Top">Top</button>
</div>
<script src="Main_Page.js"></script>
</body>
</html>
CSS:
body{
background-color: black;
color: white;
}
.Search_Media{
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: aqua;
z-index: 0;
color: black;
margin-top: 0px;
}
.Search-media{
text-decoration: none;
color: black;
}
.Search-media:hover{
text-decoration: none;
color: black;
}
.navigationbar{
background-color: aqua;
width: auto;
position: fixed;
padding-top:15px;
left: 50%;
margin-left: -88.5px;
color: black;
}
.headings{
left:20.17%;
height: 100;
width: 200;
position: fixed;
margin-top: 40px;
background-color: black;
}
.headings a{
padding: 6px 0px 6px 0px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
}
.headings a:hover{
color: black;
background-color: aqua;
}
.headings a.active{
background-color: aqua;
color: black;
}
.friend-button{
width: 90%;
margin-bottom: 1px;
background-color: black;
color: white;
cursor: pointer;
border-radius: 5px;
}
.friend-button:hover{
background-color: aqua;
color: black;
}
.middle{
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 10px;
margin: 0% auto;
width: 75%;
height: auto;
text-align: center;
}
.middle-grid{
border-right: 1px solid white;
border-left: 1px solid white;
padding-top: 37px;
width: 50%;
}
.user-post{
width: auto;
margin: 0% auto;
}
.post-button{
margin: 0% auto;
color: black;
padding-right: 50;
padding-left: 50;
padding-top: 5;
padding-bottom: 5;
}
textarea{
resize: none;
color: black;
}
h3{
margin-top: 5px;
margin-bottom: 1px;
}
.posts{
width:75%;
text-align: left;
padding:10px;
margin-left: auto;
margin-right:auto;
}
.post{
padding-bottom: 20px;
}
.post:nth-child(odd){
color: black;
background-color: lightblue;
z-index: 2;
}
.post p{
margin-top: 5px;
}
.options{
float: right;
}
.options .report{
color: red;
}
h2{
margin-top: auto;
margin-bottom: auto;
}
.friends{
position: fixed;
right: 10%;
margin-top: 70px;
padding: 0px;
margin-bottom: auto;
border: 1px solid white;
width: 15%;
overflow-y: scroll;
top: 0;
bottom: 0;
}
.media-body{
text-align: left;
}
h5{
font-size: 20;
margin-bottom: 2px;
}
#myBtn {
display: none;
position: fixed;
top: 95%;
left: 50%;
margin: 0% auto;
transform: translate(-50%, -50%);
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: darkred;
}
.friend_info{
display: none;
position: fixed;
width: 20vw;
height: 20vh;
text-align: center;
left: 0px;
right:0px;
top: 0px;
}
.backgroundInfo{
position: inherit;
z-index: -99;
max-width: 800px;
max-height: 600px;
left: inherit;
top: inherit;
}
.d-flex{
color: white;
}
.Friend_Name{
padding: 0px;
margin: 0px;
font-size: 60px;
}
h5{
font-size: 30px;
}
.info{
font-size: 20px;
}
.p-5{
border: 0%;
width: auto;
height: 0px;
bottom: 0px;
left: 0px;
top: 0px;
border-width: 0px;
padding: 2rem !important;
}
I had the correct idea, but wrong execution. The correct javascript is the following:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.backgroundInfo').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
});
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
});
Notice how I changed which element I got the width off. I changed it to the backgroud width and now displays just how I want.
I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>
In this way you can add as many items as you want.
.p {
display: flex;
position: relative;
padding-top: 15px;
border-top: 2px solid red;
margin-bottom: 30px;
}
.p div {
position: relative;
flex: 1;
text-align: center;
}
.p div:after {
content: '';
position: absolute;
height: 15px;
width: 2px;
background: red;
top: -15px;
}
.p div:not(:first-child):not(:last-child):after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.p div:first-child {
text-align: left;
}
.p div:first-child:after {
left: 0;
}
.p div:last-child {
text-align: right;
}
.p div:last-child:after {
right: 0;
}
<div class="p">
<div>
Low
</div>
<div>
Average
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -2
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
Average 2
</div>
<div>
High
</div>
</div>
This is just a sample you can modify it to meet your requirments
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
}
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}
<div class="box">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}
<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>
First you need to define one outer wrap and define width as you want to this.
And position:relative for this.
For first inner div with float:left; and last with float:right;.
And center div with position:absolute; with margin:auto; from left and right;
And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2
.outer-wrap{
width: 80%;
height: 1px;
background-color: #000;
margin: auto;
text-align: center;
position: relative;
}
.fline {
width: 2px;
background-color: black;
height: 10px;
float: left;
margin-top: 1px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
float: right;
margin-top: 1px;
}
<div class="outer-wrap">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
</div>
This one is the right answer to this question
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>
I have multiple battery meters on a page that get their power bar width values dynamically and I'm trying to add a 'lowBatt' class with JS and jQuery to the existing 'bar' class when when the 'bar' class width is less than 2px and I have 2 issues:
It is only checking the first 'bar' class element width.
If the width of that first 'bar' class elements width is less than 2px it adds the 'lowBatt' class to all 'bar' class elements.
What I need to happen is check all 'bar' class elements widths and any that are less than 2px width add the class 'lowBatt' to only those 'bar' class elements, leaving the other 'bar' class elements with greater than 2px widths alone.
$('.bar').each(function(i, obj){
if ($('.bar').width() < 2) {
$(this).addClass('lowBatt')};
});
.progress {
height: 8px;
width: 16px;
background: #fff;
border-radius: 0;
border: 1px solid #fff;
float: left;
margin-bottom: 0;
}
.progress .bar {
background-color: #000;
background-image: none;
background-repeat: repeat-x;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: none;
transition: width 0.6s ease 0s;
}
.battTip {
height: 6px;
margin-top: 1px;
margin-right: -3px;
width: 2px;
float: right;
background: #fff;
border: 1px solid #000;
border-left: none;
}
.battIcnWrap {
width: 18px;
height: 10px;
margin: 0 auto;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
.bar.lowBatt {
background: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 8px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 15px;"></div>
</div>
<div class="battTip"></div>
</div>
Thanks for any help.
Inside your loop you need to use this to refer to the element being looped on. So use:
if ($(this).width() < 2) {
$('.bar').each(function(i, obj){
if ($(this).width() < 2) {
$(this).addClass('lowBatt')};
});
.progress {
height: 8px;
width: 16px;
background: #fff;
border-radius: 0;
border: 1px solid #fff;
float: left;
margin-bottom: 0;
}
.progress .bar {
background-color: #000;
background-image: none;
background-repeat: repeat-x;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: none;
transition: width 0.6s ease 0s;
}
.battTip {
height: 6px;
margin-top: 1px;
margin-right: -3px;
width: 2px;
float: right;
background: #fff;
border: 1px solid #000;
border-left: none;
}
.battIcnWrap {
width: 18px;
height: 10px;
margin: 0 auto;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
.bar.lowBatt {
background: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 8px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 15px;"></div>
</div>
<div class="battTip"></div>
</div>
Just replace $(.bar) with the .each loop with $(this).
$('.bar').each(function(i, obj) {
if ($(this).width() < 2) {
$(this).addClass('lowBatt')
};
});
.progress {
height: 8px;
width: 16px;
background: #fff;
border-radius: 0;
border: 1px solid #fff;
float: left;
margin-bottom: 0;
}
.progress .bar {
background-color: #000;
background-image: none;
background-repeat: repeat-x;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: none;
transition: width 0.6s ease 0s;
}
.battTip {
height: 6px;
margin-top: 1px;
margin-right: -3px;
width: 2px;
float: right;
background: #fff;
border: 1px solid #000;
border-left: none;
}
.battIcnWrap {
width: 18px;
height: 10px;
margin: 0 auto;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
.bar.lowBatt {
background: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 8px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 1px;"></div>
</div>
<div class="battTip"></div>
</div>
<div class="battIcnWrap">
<div class="progress">
<div class="bar" style="width: 15px;"></div>
</div>
<div class="battTip"></div>
</div>
I am trying to make a page with 2 questions with yes/no button using jQuery. I have used jQuery fade in/out options for this. But the buttons are not working. Can anyone help me with that??
I have given all the codes of my page with CSS and jQuery.
jQuery:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").delay(100).fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100, Function() {
$(".four").delay(100).fadeIn(100);
});
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #EEF3FA;
text-shadow: none;
}
a {
text-decoration: none;
}
.left {
float: left;
}
.fix {
overflow: hidden;
}
.clear {
clear: both;
}
header {
background: #49639C;
text-align: center;
}
section {} footer {
text-align: center;
}
.main {
width: 750px;
margin: 0 auto;
}
.head {} .head > h1 {
color: #ffffff;
font-size: 40px;
padding: 10px;
}
.sec {
background: #6281B6;
margin-top: 15px;
border-radius: 20px 20px 0px 0px;
}
.sec > h2 {
background: url("../img/prize.png") no-repeat scroll left 80px center rgba(0, 0, 0, 0);
color: #ffffff;
font-weight: normal;
margin-bottom: 0px;
margin-top: 10px;
text-align: center;
padding: 25px;
}
.sec > h2 > span {
color: #E8ED1A;
}
.cove {
border: 1px solid #cccccc;
background: #ffffff;
padding-bottom: 10px;
}
.congrts {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.congrts > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.congrts > p {
font-size: 16px;
margin: 5px 15px 8px;
text-align: left;
color: #000000;
}
.congrts > p > strong {} .prizes {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.prizes > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.item {
border-bottom: 2px dashed #cccccc;
margin-bottom: 30px;
margin-top: 20px;
padding-bottom: 15px;
padding-left: 60px;
}
.img {} .img > img {
width: 250px;
}
.text > h1 {
font-size: 30px;
margin-bottom: 5px;
}
.text > p {
font-size: 35px;
}
.text > span {
color: #FF0000;
font-size: 35px;
}
.text {
margin-top: 5px;
margin-left: 15px;
}
.anchor {
border-radius: 15px;
}
.anchor > a {
background: none repeat scroll 0 0 #6bb155;
color: #ffffff;
font-size: 35px;
padding: 10px 164px;
text-align: center;
}
.anchor > a:hover {
text-shadow: none;
}
.fotter {
margin: 10px 0px;
}
.heiighrt {
height: 580px;
}
.kolo {
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
}
.kolo > h1 {
color: #3B5998;
font-size: 35px;
}
.kolo > p {
color: #666666;
font-size: 17px;
margin-top: 10px;
}
.kolo > p > strong {}.span {
text-align: left;
font-size: 14px !important;
color: #666666;
margin-top: 10px;
}
.kolo1 {
border: 1px solid #cccccc;
padding: 5px 20px;
text-align: center;
background: #ffffff;
}
.pok {
margin: 15px auto;
width: 500px;
}
.pok > img {
float: left;
}
.pok > p {
float: left;
font-size: 35px;
font-weight: bold;
margin-left: 15px;
margin-top: 50px;
}
.anchortext {
margin: 5px auto;
}
.anchortext > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 40px;
padding: 2px 150px;
}
.anchortext1 {
margin: 5px auto;
}
.anchortext1 > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 35px;
line-height: 50px;
padding: 1px 70px;
}
.up1 {
padding: 2px 157px !important;
}
.up2 {
padding: 2px 143px !important;
}
.full {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
margin-top: 30px;
text-align: center;
}
.full h1 {
color: #3c599d;
font-size: 35px;
margin-bottom: 0px;
margin-top: 10px;
}
.full h2 {
font-size: 30px;
margin-bottom: 10px;
}
.full h2 span {
color: #3C599D;
}
.full1 {
text-align: center;
}
.full1 img {
margin-top: 150px;
width: 300px;
height: 20px;
}
.qus {
margin-bottom: 5px;
}
.two, .three, .four, .load, .ditiyo, .titiyo, .chortor{display:none;}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="main head fix">
<h1>Message</h1>
</div>
</header>
<section>
<div class="main fix">
<div class="heiighrt one">
<div class="kolo">
<h1>We Need Your Comment</h1>
<p>We've selected you from 1,873,235 <strong>Mac mobile users in Australia</strong> to comment on a new app. The great news is you'll have a chance to <strong>win a cool iPad mini after this!</strong>
</p>
<p class="span">* Only 2 questions and take just 15 secs!</p>
</div>
<div class="kolo1">
<div class="pok fix">
<img src="img/ipad.png" alt="ipad on hand">
<p>Do you use Fb
<br>everyday?</p>
</div>
</div>
<div class="qusone">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">Yes
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">No
</div>
</div>
</div>
</div>
</div>
<div class="heiighrt two">
<div class="full fix">
<h1>Question 1</h1>
<h2>Have You ever heard of <br><span>Facebook Home</span>?</h2>
<div class="qustwo">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, i know
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, Never Heard of
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt three">
<div class="full fix">
<h1>Question 1</h1>
<h2>If you get a new iPad mini,<br>will you install<span>Facebook <br>Home</span>?</h2>
<div class="qusthree">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, I love to
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, I don't like FB
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt load">
<div class="full1 fix">
<img src="img/loading.gif" alt="i pad on hand">
</div>
</div>
<div class="heiighrt four">
<div class="full full1 fix">
<h1>Thank You</h1>
<h2>You've helped in creating better apps for mobile users! Please proceed to see if<br> you will<br><strong>win the New iPad mini!</strong> </h2>
<img src="img/ipad.png" alt="i pad on hand">
<div class="qusfour">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">I am feeling lucky Today!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="main">
<p class="fotter">copyright 2013 Terms
Privacy
</p>
</div>
</footer>
Here the Fiddle
If you are going to want to bind your buttons that are hidden then my suggstion would be to switch to the following format
$(document).on('click', '.qustwo', function() { ...your code here... });
That should take care of it.
Try replacing your script by this:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100);
$(".four").delay(100).fadeIn(100);
});
});
You still need to clean up your code though to get intended flow.
I got problem with centering divs inside one div. In each div threre are should be the letters (username of the person).
So I got such picture
Here JSFIDDLE
Also here is the code
HTML
<div class="centered">
<div class="inner" id="first" style="margin-top: 580px;">
<div id="mainword" class="mainfont" style="text-align:center">
<div class="letters" id="A" style="display: block;"></div>
<div class="letters" id="B" style="display: block;"></div>
<div class="letters" id="C" style="display: block;"></div>
<div class="letters" id="D" style="display: block;"></div>
<div class="letters" id="E" style="display: block;"></div>
</div>
</div>
CSS
.letters{
width:30px;
height:50px;
float: left;
margin:1px;
text-align:left;
border: 4px solid red;
display:inline-block;
}
.mainfont{
font-family: 'Cinzel', serif;
font-size:40px;
color:#ffffff;
text-align: center;
margin:1%;
}
#mainword{
text-align:center;
display:inline-block;
width:100%;
height: 30pt;
border: 1px solid black;
}
.inner{
width: 100%;
margin: 0 auto;
}
#A {
/*background:url(A.png) left top; */
background-repeat: no-repeat;
background-repeat: no-repeat; width:25px !important;
}
#B {
/*background:url(B.png) left top; */
background-repeat: no-repeat;
width:19px !important;
}
#C{
/*background:url(C.png) left top; */
background-repeat: no-repeat;
width:10px !important;
}
#D{
/*background:url(D.png) left top; */
background-repeat: no-repeat;
width:21px !important
}
#E{
/* background:url(E.png) left top; */
background-repeat: no-repeat;
}
How to center it? I tried text align and stuff but it seems doesn't work here
Demo http://jsfiddle.net/6ghv3905/3/
All you need to do is apply display: inline-block; on .letters and remove display: block; and float: left; from them.
You can use full responsive design code. It may be help for you.
Live Working Demo
HTML Code:
<div class="main">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
CSS Code:
.main
{
height:50px;
width: 100%;
border: 1px solid #000000;
margin-top: 50px;
}
.one
{
height: 60px;
width: 30px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 35%;
}
.two
{
height: 60px;
width: 25px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
.three
{
height: 60px;
width: 15px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
.four
{
height: 60px;
width: 30px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
.five
{
height: 60px;
width: 35px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
Result:
http://i.stack.imgur.com/a4yZC.png