I am trying to create an adaptive circle element, that will have the same height as its width, the code is here:
jQuery(document).ready(function() {
//Adaptive Circle
var width = jQuery(".circle-adaptive").width();
jQuery(".circle-adaptive").css({"height":width+"px", "line-height":width+"px"});
});
It works when I have one set of such circles, but when I create another div with different division:
<div class="container" style=" border:2px solid black">
<div class="container onethird">
<div class="circle-adaptive red">R</div>
</div>
<div class="container onethird">
<div class="circle-adaptive green">G</div>
</div>
<div class="container onethird">
<div class="circle-adaptive blue">B</div>
</div>
</div>
<div class="container" style="border:2px solid black">
<div class="container onequarter">
<div class="circle-adaptive pink"></div>
</div>
<div class="container onequarter">
<div class="circle-adaptive yellow"></div>
</div>
<div class="container onequarter">
<div class="circle-adaptive gray"></div>
</div>
<div class="container onequarter">
<div class="circle-adaptive magenta"></div>
</div>
</div>
It does no longer work and the circles keep their height generated in the first case.
Is there a way to make the variable generate once another element is created?
It works. But second container has no texts, so you don't see anything.
<div class="container" style=" border:2px solid black">
<div class="container onethird">
<div class="circle-adaptive red">R</div>
</div>
<div class="container onethird">
<div class="circle-adaptive green">G</div>
</div>
<div class="container onethird">
<div class="circle-adaptive blue">B</div>
</div>
</div>
<div class="container" style="border:2px solid black">
<div class="container onequarter">
<div class="circle-adaptive pink">1</div>
</div>
<div class="container onequarter">
<div class="circle-adaptive yellow">2</div>
</div>
<div class="container onequarter">
<div class="circle-adaptive gray">3</div>
</div>
<div class="container onequarter">
<div class="circle-adaptive magenta"></div>
</div>
</div>
Here tested for you with filled text: (https://jsfiddle.net/L0rf3vam/)
Related
I have created 3 cards with 2 widgets in the sidebar. To make it responsive I have used bootstrap 4 column ordering.
Now the issue I'm facing is if I have 2 columns in one row and the right column is larger than the left column it shows space in-between card 1 and card 2 because card 1 is smaller than widget 1 or 2.
Can anyone help me how can I remove this gap?
Codeply link for better responsive viewing:
https://www.codeply.com/go/8cNp9dUyE5
My code preview is below:
.left-panel {
background: gray;
}
.box1,
.box2,
.box3 {
background: white;
height: 50px;
border: 1px solid red;
margin-bottom: 20px;
}
.right-sidebar, .bg-pink {
background: pink;
}
<div class="container">
<div class="row">
<div class="col-12 bg-pink">
<div class="row d-md-block">
<div class="left-panel col-md-8 order-0 float-left">
<div class="box1 mt-2"><p>Box 1</p></div>
</div>
<div class="right-sidebar col-md-4 order-3 float-left">Widget 1</div>
<div class="right-sidebar col-md-4 order-1 float-left">
<p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="left-panel col-md-8 order-3 float-left">
<div class="box2 mt-2 ">Box 2</div>
</div>
<div class="left-panel col-md-8 order-5 float-left">
<div class="box3 mt-2">Box 3</div>
</div>
</div>
</div>
</div>
</div>
Real-life example: https://prnt.sc/ouscan
enter image description here
It's not totally clear to me what you are trying to do here, but simplifying your classes will remove the gap:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>
You can re-introduce the ordering classes if needed, but this will at least remove the gap. Depending on what the contents of the boxes and the widgets are, you may want to include rows within the two columns also.
Edit
If you were to create a re-usable component that represents your right side bar this would be a bit cleaner, but here is an option:
<div class="container">
<div class="row">
<div class="left-panel col-md-8">
<div class="box1 mt-2"><p>Box 1</p></div>
<div class="right-sidebar d-md-none">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
<div class="box2 mt-2">Box 2</div>
<div class="box3 mt-2">Box 3</div>
</div>
<div class="right-sidebar d-sm-none d-md-block col-md-4">
<p>Widget 1</p><p>Widget 2</p><p>Continue Widget 2</p><p>Widget 2 About to End</p><p>Widget 2 Ends</p>
</div>
</div>
</div>
To achieve this you might want to simplify your html and wrap your elements sort of like this:
<div class="container">
<div class="row">
<div class="col-md-8">
BOXES GO HERE
</div>
<div class="col-md-4">
SIDEBAR GOES HERE
</div>
</div>
</div>
The floats are battling what the bootstrap grid does automatically.
NEW This might be more what you are looking for using row-eq-height:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height" style="background-color: blue;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 1</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: red;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 2</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 2</p>
<p>Continue Widget 2</p>
<p>Widget 2 About to End</p>
<p>Widget 2 Ends</p>
</div>
</div>
<div class="row row-eq-height" style="background-color: yellow;">
<div class="col-md-8">
<div class="box1 mt-2">
<p>Box 3</p>
</div>
</div>
<div class="col-md-4">
<p>Widget 3</p>
</div>
</div>
</div>
I have an image that is supposed to appear on a website page. It works in Firefox, but does not appear in either Safari or Chrome for some reason. This is the line I have used for the image in the JS file:
$("#picture").append("<img src='/images/sub1/Green_graph.png' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")
I can't seem to figure out why it appears in one browser but not the others and have not yet found an answer to this problem.
Edit: this is the code from the HTML file:
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
You are appending an img to an img. I'm surprised that worked at all.
Either change the parent tag:
<span id="picture"></span>
$(document).ready(function(){
$("#picture").append("<img src='https://www.fillmurray.com/300/250' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<span id="picture"></span>
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
Or set the attributes on the existing tag.
$(document).ready(function(){
$("#picture").attr("src", "https://www.fillmurray.com/300/250");
$("#picture").attr("alt", "Bill is awesome");
//Style should really come from a stylesheet, but I'll leave it for now
$("#picture").attr("style", "width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
i want to add bootstrap row with col-lg-3class. my div contains different heights.hope to add articles with different length texts.
my output is but designed expected output and here. code as follows
<div class="row">
<div class="col-lg-3" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="col-lg-3" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="col-lg-3" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="col-lg-3" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="col-lg-3" style="background-color: #173e43"><p style="height: 44px">5</p></div>
<div class="col-lg-3" style="background-color: #b56969"><p style="height: 70px">6</p></div>
<div class="col-lg-3" style="background-color: #daad86"><p style="height: 20px">7</p></div>
<div class="col-lg-3" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
Updated
values put as 1,2,3 etc comes from mysql database. so the height is equal to text row numbers. php code is follows
`
foreach ($value as $add) {
echo "<div class='col-md-3'><p>";
echo $add->item;
echo "</p></div>";
}
?>`
Perhaps, I ruin your original code. I change everywhere. I hope this helps you.
Add customized stylesheet inside tag head:
<style>
.col-md-3{padding:0px;} // default: 15px -> left and right.
</style>
Here's the code:
<div class="container">
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12" style="background-color: #c5d5cb;height: 150px;">
1
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #173e43;height: 44px; color:white;">
5
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #9fa8a3;height: 200px;">
2
</div>
<div class="clearfix"></div>
<div class="col-md-12" style="background-color: #b56969;height: 70px;">
6
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #e3e0cf;height: 50px;">
3
</div>
<div class="col-md-12" style="background-color: #daad86;height: 20px;">
7
</div>
</div>
<div class="col-md-3">
<div class="col-md-12" style="background-color: #b3c2bf;height: 60px;">
4
</div>
<div class="col-md-12" style="background-color: #5a5c51;height: 35px;">
8
</div>
</div>
</div>
</div>
Because I don't know what version of your bootstrap, I use v3.1.1 for clearfix ... you can customize this based on your version.
You are on right track. This will definitely work. You need to use col-md-3 like this :
<div class="row">
<div class="col-md-3">
<p>1</p>
<p>5</p>
</div>
<div class="col-md-3">
<p>2</p>
<p>6</p>
</div>
<div class="col-md-3">
<p>3</p>
<p>7</p>
</div>
<div class="col-md-3">
<p>4</p>
<p>8</p>
</div>
</div>
I think try this
<div class="row">
<div class="col-lg-5">
<div id="1" ></div>
<div id="5" ></div>
</div>
<div class="col-lg-5">
<div id="2" ></div>
<div id="6" ></div>
</div>
<div class="col-lg-5">
<div id="3" ></div>
<div id="7" ></div>
</div>
<div class="col-lg-5">
<div id="4" ></div>
<div id="8" ></div>
</div>
</div>
Hope this will help you..
You can first use columns with col-lg-3 and then place your blocks inside each one. That way you will get your desired result.
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #c5d5cb"><p style="height: 150px">1</p></div>
<div class="left-block" style="background-color: #173e43"><p style="height: 44px">5</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #9fa8a3"><p style="height: 200px">2</p></div>
<div class="left-block" style="background-color: #b56969"><p style="height: 70px">6</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #e3e0cf"><p style="height: 50px">3</p></div>
<div class="left-block" style="background-color: #daad86"><p style="height: 20px">7</p></div>
</div>
<div class="col-lg-3 grid-row">
<div class="left-block" style="background-color: #b3c2bf"><p style="height: 60px">4</p></div>
<div class="left-block" style="background-color: #5a5c51"><p style="height: 35px">8</p></div>
</div>
</div>
</div>
CSS:
.grid-row{
margin-left: -15px;
margin-right: -15px;
}
.left-block{
float: left;
width: 100%;
}
Jsfiddle: https://jsfiddle.net/debraj/6dufsc4u/1/
Hope that helps.
I am writing a web ap which looks like this:
Instead of stacking a bunch of cards like in the image above, I want to try and have a slider that when swiped the next card is displayed.
My html looks like this:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
</head>
<body style="">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Statistics</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3>
<p class="center-align">Breweries Tried</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">99 bottles of beer on the wall...</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
I tried adding them to an image slider that is offered with materializecss which is what I am using to build my web app but it didnt work.
Anyway to slide them with html5 and css?
Here is a fiddle:
https://jsfiddle.net/mjbbc48h/
You can simply replace the image content in the materializecss slider with your card element. Like so:
<div class="slider">
<ul class="slides">
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This should give you what you are looking for. Remember to initialize the slider.
I have HTML codes like below.
When "Click" is clicked, the parent (div class="studentRow" ref="xxxx") is appended in the (div id="favoriteListContent").
The Rank text may contain some letters. The rank should be sorted using only number. If the Rank value is NO, this should be listed last - lowest rank.
How can I sort the sets of divs based on the Rank value in the (div id="favoriteListContent")? Right now, the divs are displayed in the order they are clicked. (see Demo http://jsfiddle.net/sunflowersh/YeSvH/11/)
<h2>Favorites</h2>
<div id="favoritesList">
<div class="studentRow">
<div class="favRow1"></div>
<div class="positionRow1">Rank</div>
<div class="studentRow1">Name</div>
<div class="todayRow1">Today</div>
<div class="thruRow1">Thru</div>
<div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent"></div>
</div>
<div id="studentList">
<h2>List</h2>
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1050">
<div class="favRow1" ref="1050">click</div>
<div class="positionRow1">D2</div>
<div class="studentRow1">Name C</div>
<div class="todayRow1">A</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-7</div>
</div>
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
</div>
I want to have the end result to be like
<h2>Favorites</h2>
<div id="favoritesList">
<div class="studentRow">
<div class="favRow1"></div>
<div class="positionRow1">Rank</div>
<div class="studentRow1">Name</div>
<div class="todayRow1">Today</div>
<div class="thruRow1">Thru</div>
<div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent">
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
</div>
</div>
and Not
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>