Getting an arrow to point at a specific (x, y) point - javascript

Hello I'm attempting to to have two arrows pointing at a specific (x, y) point or in the general area of a button.
I would like two arrows coming from each of the boxs pointing in the general area of the button. I can do this fine with regular css on certain screens but when the screen is resized or smaller then the arrows no longer point to the button. I'm just trying to figure out a good way to handle this.
So really what I'm asking is what would be good way to go about having two arrows appended after 2 divs pointing at the same point. (The Red Square)
JSFIDDLE:
https://jsfiddle.net/kxw7jquu/
HTML
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(50deg); top: -10px">
➝
</div>
</div>
<div class='data-source-panel-wrapper' id='source_order'>
<h1>Order_movement</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h2>ID: 1</h2>
</div>
<div class='data-source-info'>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
CSS
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
h1 {
font-size: 1.5rem;
font-weight: 500;
}
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
.source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
.data-source-info {
h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
}
}
#source_report {
.data-source-panel {
.data-source-info {
margin-right: 18px;
}
}
}
#source_order {
right: 60px;
.data-source-panel {
flex-direction: column;
.data-source-info {
margin: 5px 0;
}
}
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}


I'm not really a math enthusiast, i managed to find a formula on the internet to do what you wanted.
Source Pen Instead of following the mouse i made it so it follows the button
PS: I removed the the html on the right for the sake of this explanation.
i know it's not a complete answer, but you can adjust it from here.
window.onresize = pointing;
function pointing() {
let point = document.querySelector('.data-source-button');
let rad = Math.atan2(point.offsetLeft, point.offsetTop);
let left = (rad * (20 / Math.PI) * -5) + 60;
document.querySelector('.leftArrow').style.transform = "rotate(" + left + "deg)"
}
pointing();
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
}
.app-info-panel h1 {
font-size: 1.5rem;
font-weight: 500;
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
}
.data-source-panel-wrapper .source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
.data-source-panel-wrapper h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
}
.data-source-panel .data-source-info h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
.data-source-panel .data-source-info h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
#source_report .data-source-panel .data-source-info {
margin-right: 18px;
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow leftArrow' style=" top: -10px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>

Related

How to get access and change style of an element with JavaScript?

I am coding a survey. If a button is clicked the color of the clicked button is changing. I want to provide the possibility to the user to deselect a button if he for example clicked or selected respectively the wrong button. Therefore, I changed the class of the selected button to have a exclusive access only to the selected button to set the style-attributes to default when deselect the button. I tried different ways but none of them worked. Where is my failure? My code is below.
window.onload = function() {
const option = document.getElementsByClassName("button");
const forward = document.getElementById("forward");
Array.from(option).forEach(function(option) {
option.addEventListener("click", () => {
option.style.backgroundColor = "rgb(77, 55, 120)";
option.style.opacity = "0.65";
option.style.color = "white";
//Changong buttons backgroundcolor to purple
let keySelector = option.querySelector(".key-selector");
keySelector.style.color = "white";
//determine the key-selector and turn the color into white
forward.style.color = "white";
forward.style.backgroundColor = "rgb(77, 55, 120)";
forward.style.transition = "1s ease";
//changing the color of the continue-button to purple when at least one element is selected
option.className = "selected-button";
console.log(option.className);
//replace class name of selected-element to provide the possibility to have access to the selected element in order to deselect if required
});
});
const selectedButton = document.getElementsByClassName("selected-button");
Array.from(selectedButton).forEach(function(selectedButton) {
selectedButton.addEventListener("click", () => {
//if selected element is clicked again turn the style-settings to default
keySelector.style.color = "rgb(51, 51, 51)";
keySelector.style.opacity = "0.6";
selectedButton.style.backgroundColor = "rgb(226, 226, 226)";
selectedButton.style.color = "black";
selectedButton.style.opacity = "1";
//return the colors when a button is deselected
selectedButton.className = "button";
console.log(option.className);
//turn the class name to default to have provide the possibility to select the element again
});
});
};
body {
font-family: 'Noto Sans Avestan', sans-serif;
}
.navbar {
display: flex;
list-style: none;
background-color: rgb(77, 55, 120);
margin: 0;
position: fixed;
width: 100%;
gap: 4rem;
height: 50px;
text-align: center;
line-height: 45px;
left: 0;
top: 0;
}
.nav-text {
text-decoration: none;
color: white;
width: auto;
cursor: pointer;
font-size: 18px;
padding-bottom: 5px;
}
.instruction {
padding-top: 8rem;
left: 10%;
padding-bottom: 0px;
width: auto;
max-width: 730px;
font-size: 20px;
position: absolute;
}
.options {
height: auto;
max-height: 313px;
max-width: 750px;
width: auto;
padding-top: 15rem;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 15px;
position: sticky;
left: 8rem;
}
.button,
.selected-button {
background-color: rgb(226, 226, 226);
height: 418.75%;
width: auto;
padding: 21px 25px 22px 25px;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
font-size: 18px;
line-height: 16.8px;
display: block;
position: relative;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.text {
margin-left: 4rem;
}
.button:hover {
background-color: rgb(194, 194, 194);
opacity: 0.8;
}
#backward:hover,
#forward:hover {
background-color: rgb(77, 55, 120);
color: white;
}
.key-selector {
position: absolute;
top: 50%;
margin-top: -12px;
font-size: 16px;
line-height: 1.5em;
text-align: center;
width: 30px;
display: block;
opacity: 0.6;
border: 1px solid;
border-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 25px;
color: rgb(51, 51, 51);
}
.button:hover .key-selector {
color: black;
}
.button-bar {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
margin: 0;
left: 0;
}
.nav-inner {
cursor: pointer;
width: 50%;
text-align: center;
line-height: 83px;
}
#backward {
background-color: rgb(101, 93, 93);
color: white;
}
#forward {
background-color: rgb(191, 191, 191);
}
<div id="work-container">
<ul class="navbar">
<li class="section"><a class="nav-text" href="client.html">A</a></li>
<li class="section"><a class="nav-text" href="case.html" style=" border-bottom: 1px solid;">B</a></li>
</ul>
<div class="instruction">
<h3>Please choose an answer. You can choose more than one answers.</h3>
</div>
<div class="options">
<div class="option">
<div class="button">
<div class="key-selector">
<span>A</span>
</div>
<div class="text">1</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>B</span>
</div>
<div class="text">2</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>C</span>
</div>
<div class="text">3</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>D</span>
</div>
<div class="text">4</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>E</span>
</div>
<div class="text">5</div>
</div>
</div>
</div>
<div class="button-bar">
<div class="nav-inner" id="backward">
< Back</div>
<div class="nav-inner" id="forward"> Continue ></div>
</div>
</div>
</div>

You're only looping over selectedButtons when the page first loads. Since there are no elements with the class at that time, nothing gets the second event listener.
Instead of two different event listeners, use a single event listener that tests the class of the element.
if (option.classList.contains("selected-button")) {
// do something
} else {
// do somthing else
}
It's also generally better to use the classList methods than assigning to className, so you don't remove other, unrelated classes. This would allow you to add/remove the selected-button class without removing button, so you don't need to assign the same style to both classes in CSS.
window.onload = function() {
const option = document.getElementsByClassName("button");
const forward = document.getElementById("forward");
Array.from(option).forEach(function(option) {
option.addEventListener("click", () => {
let keySelector = option.querySelector(".key-selector");
if (option.classList.contains("selected-button")) {
let selectedButton = option;
//if selected element is clicked again turn the style-settings to default
keySelector.style.color = "rgb(51, 51, 51)";
keySelector.style.opacity = "0.6";
selectedButton.style.backgroundColor = "rgb(226, 226, 226)";
selectedButton.style.color = "black";
selectedButton.style.opacity = "1";
//return the colors when a button is deselected
selectedButton.classList.remove("selected-button");
console.log(option.className);
//turn the class name to default to have provide the possibility to select the element again
} else {
option.style.backgroundColor = "rgb(77, 55, 120)";
option.style.opacity = "0.65";
option.style.color = "white";
//Changong buttons backgroundcolor to purple
keySelector.style.color = "white";
//determine the key-selector and turn the color into white
forward.style.color = "white";
forward.style.backgroundColor = "rgb(77, 55, 120)";
forward.style.transition = "1s ease";
//changing the color of the continue-button to purple when at least one element is selected
option.classList.add("selected-button");
console.log(option.className);
//replace class name of selected-element to provide the possibility to have access to the selected element in order to deselect if required
}
});
});
};
body {
font-family: 'Noto Sans Avestan', sans-serif;
}
.navbar {
display: flex;
list-style: none;
background-color: rgb(77, 55, 120);
margin: 0;
position: fixed;
width: 100%;
gap: 4rem;
height: 50px;
text-align: center;
line-height: 45px;
left: 0;
top: 0;
}
.nav-text {
text-decoration: none;
color: white;
width: auto;
cursor: pointer;
font-size: 18px;
padding-bottom: 5px;
}
.instruction {
padding-top: 8rem;
left: 10%;
padding-bottom: 0px;
width: auto;
max-width: 730px;
font-size: 20px;
position: absolute;
}
.options {
height: auto;
max-height: 313px;
max-width: 750px;
width: auto;
padding-top: 15rem;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 15px;
position: sticky;
left: 8rem;
}
.button {
background-color: rgb(226, 226, 226);
height: 418.75%;
width: auto;
padding: 21px 25px 22px 25px;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
font-size: 18px;
line-height: 16.8px;
display: block;
position: relative;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.text {
margin-left: 4rem;
}
.button:hover {
background-color: rgb(194, 194, 194);
opacity: 0.8;
}
#backward:hover,
#forward:hover {
background-color: rgb(77, 55, 120);
color: white;
}
.key-selector {
position: absolute;
top: 50%;
margin-top: -12px;
font-size: 16px;
line-height: 1.5em;
text-align: center;
width: 30px;
display: block;
opacity: 0.6;
border: 1px solid;
border-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 25px;
color: rgb(51, 51, 51);
}
.button:hover .key-selector {
color: black;
}
.button-bar {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
margin: 0;
left: 0;
}
.nav-inner {
cursor: pointer;
width: 50%;
text-align: center;
line-height: 83px;
}
#backward {
background-color: rgb(101, 93, 93);
color: white;
}
#forward {
background-color: rgb(191, 191, 191);
}
<div id="work-container">
<ul class="navbar">
<li class="section"><a class="nav-text" href="client.html">A</a></li>
<li class="section"><a class="nav-text" href="case.html" style=" border-bottom: 1px solid;">B</a></li>
</ul>
<div class="instruction">
<h3>Please choose an answer. You can choose more than one answers.</h3>
</div>
<div class="options">
<div class="option">
<div class="button">
<div class="key-selector">
<span>A</span>
</div>
<div class="text">1</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>B</span>
</div>
<div class="text">2</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>C</span>
</div>
<div class="text">3</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>D</span>
</div>
<div class="text">4</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="key-selector">
<span>E</span>
</div>
<div class="text">5</div>
</div>
</div>
</div>
<div class="button-bar">
<div class="nav-inner" id="backward">
< Back</div>
<div class="nav-inner" id="forward"> Continue ></div>
</div>
</div>
</div>

Let me tell you the mistakes in your code.
Array.from(option).forEach(function (option) {
is a very wrong way to add event listeners. Use event delegation.
option.className = "selected-button";
is a wrong way to add class. Use classlist.add()/classlist.remove().
const selectedButton = document.getElementsByClassName("selected-button");
You are adding a query of selected-button at the time of window load. You will not get any element in this case, because classname will be added if button is selected, and will not be present at the time of load. Event delegation will save you again.
element.style.backgroundColor = "purple"
This again is a piece of text from another world. Create a CSS class, .active and add/remove the CSS class.

You literally need 0 javascript for this part. CSS has the :focus and :disabled pseudoclasses, and HTML has the "disabled" attribute and automatically sets the focused element for CSS (:focus is the selected button/input):
button {
color: black;
background: aqua;
border: none;
border-radius: 5px;
padding: 4px 5px;
transition-duration: 0.2s;
}
button:disabled {
background: silver;
color: gray;
}
button:focus {
background: #aaf;
outline: 2px solid aqua;
}
<button disabled>Disabled</button>
<button>Back</button>
<button>Next</butotn>
There's also the HTML form element, which can have required fields of different types:
<form>
<input type="number" placeholder="Number"><br>
<input type="password" placeholder="Password"><br>
<input type="text" placeholder="Required text" required><br>
<input type="date"><br>
<input type="submit" value="Send"><br>
</form>

Using different images foreach object in one class

I am trying to make a catalog for online shop like ebay. How to make each box with different image and title. Am I supposed to use JS here and if so how to do it?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
.container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
background-image: url(Reference/Shoes/Air\ Jordan\ 1\ Retro\ High\ OG\ Shoes.webp);
background-repeat: no-repeat;
background-size: cover;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div class="container">
<div class="box">
<div class="image"></div>
<div class="title">
<p>Nike Air Max Jordan 1</p>
</div>
<div class="creator">
<p>Martingrgv</p>
</div>
<div class="price"></div>
</div>
<div class="box">
<div class="image"></div>
<div class="title">
<p>Nike Air Max Jordan 1</p>
</div>
<div class="creator">
<p>Martingrgv</p>
</div>
<div class="price"></div>
</div>
</div>
Result:
I am new to building a website so you might see beginner mistakes.
If you have any suggestions to improve the code I am open.

Do you mean this - you can ajax the object from your server:
const items = [
{ image: "nike1.jpg", title:"Nike Air Max Jordan 1",price:150, creator:"Martingrgv"},
{ image: "nike2.jpg", title:"Nike Air Max Jordan 2",price:160, creator:"Martingrgv"}
]
document.getElementById("container").innerHTML = items.map(item =>
`<div class="box">
<div class="image"><img src="${item.image}" /></div>
<div class="title">
<p>${item.title}</p>
</div>
<div class="creator">
<p>${item.creator}</p>
</div>
<div class="price">$${item.price}</div>
</div>`)
.join("");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
#container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div id="container"></div>

React- hover effect to hide div doesn't work

I am trying to use :hover in css to show/hide the display of one of my divs when I hover over another div, but for some reason it's not working. I got it to work on other components but for some reason it's not working for this instance. Can't figure out what I did wrong. please let me know what I'm doing wrong so I can fix my mistake
JSX
render() {
return (
<div className='row'>
<div className='container-job' onClick={this.test}>
<div className='row'>
<div className='job-title'>
{this.props.jobs_info.title}
</div>
</div>
<div className='row wrapper'>
<div className='category-title'>Category</div>
<div className='location-title'>Location</div>
<div className='type-title'>Type of Job</div>
<div className='creator-title'>Job Creator</div>
</div>
<div className='row wrapper'>
<div className='category'>
{this.props.jobs_info.job_team.title}
</div>
<div className='location'>
{this.props.jobs_info.job_location.title}
</div>
<div className='type'>
{this.props.jobs_info.job_work_type.title}
</div>
<div className='creator'>
{this.props.jobs_info.user.name}
</div>
</div>
</div>
<div
className='counter-container'
id='counter-container'
onMouseEnter={this.changeBackground}
onMouseLeave={this.changeBackground2}
>
Candidates <br />
{this.props.jobs_info.candidates_count}
</div>
<div className='delete-container-job center'>
<ion-icon id='trash' name='trash'></ion-icon>
</div>
</div>
);
}
CSS
.jobs-card {
height: 100%;
width: 100%;
.container-job {
position: relative;
height: 100px;
width: 860px;
background-color: rgb(37, 45, 73);
border-radius: 10px;
margin-left: 30px;
margin-bottom: 20px;
}
.container-job:hover {
.delete-container-job {
display: block !important;
}
}
.job-title {
position: relative;
color: white;
font-size: 16px;
margin-left: 40px;
margin-top: 15px;
margin-bottom: 10px;
}
.row .wrapper {
margin-left: 25px;
}
.counter-container {
position: relative;
background-color: rgb(37, 45, 73);
border-radius: 10px;
width: 110px;
height: 100px;
margin-left: 20px;
text-align: center;
color: white;
font-size: 15px;
padding-top: 30px;
}
.delete-container-job {
position: relative;
background-image: linear-gradient(to right, #4639a7, #78019c);
height: 100px;
width: 50px;
right: 180px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: none;
}
#trash {
font-size: 22px;
color: white;
display: inline-block;
margin-top: 40px;
}
.center {
text-align: center;
}

You need to use general sibling combinator to apply a style on .delete-container-job when .container-job is hovered on.
.container-job:hover ~ .delete-container-job {
display: block !important;
}

How can I make my div's appear in a horizontal way?

I have a website where users can post and the top 3 posts are showing in my MOST LIKED section. I style just one div because the script automatically adds rest of the divs when the post is stored in a most liked section, but they're showing in a vertical way, and I want them to be horizontal. I'll first share my index.php/html code and then my css.
Index
var list2 = $("<div class='testimonial-area spmostliked bg1'><div class='container' id='mostliked'><div class='section-title white'><h2>Most Liked Regrets</h2>");
var count = 1;
for (var t = 0; (t < data.length); t++)
{
var comment = data[t];
if(comment['parent_comment_id'] == '0'){
var commentId = comment['comment_id'];
var out = $('<li>').html('<figure class="snip1167"><img src="https://images.freecreatives.com/wp-content/uploads/2016/03/22054222/Flat-Wings-Logo-Design.jpg" alt="sq-sample17"/><blockquote>' + comment['comment'] + '</blockquote><div class="author"><h5>First Name <span> $DATE</span></h5></div></figure>');
list2.append(out);
count++;
}
if(count > 3){
break;
}
}
$("#output2").html(list2);
CSS
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
#import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1167 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
width: 100%;
color: #333;
text-align: left;
box-shadow: none !important;
}
figure.snip1167 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip1167 img {
max-width: 100%;
height: 100px;
width: 100px;
border-radius: 50%;
margin: 0 auto;
display: block;
z-index: 1;
position: relative;
}
figure.snip1167 blockquote {
margin: 0;
display: block;
border-radius: 8px;
position: relative;
background-color: #fafafa;
padding: 65px 50px 30px 50px;
font-size: 1em;
font-weight: 500;
margin: -50px 0 0;
line-height: 1.6em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1167 blockquote:before,
figure.snip1167 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 50px;
opacity: 0.3;
font-style: normal;
}
figure.snip1167 blockquote:before {
top: 70px;
left: 20px;
}
figure.snip1167 blockquote:after {
content: "\201D";
right: 20px;
bottom: 0;
}
figure.snip1167 .author {
padding: 15px;
margin: 0;
color: #ffffff;
text-align: right;
}
figure.snip1167 .author h5 {
opacity: 0.8;
margin: 0;
font-weight: 800;
color: white;
}
figure.snip1167 .author h5 span {
font-weight: 400;
text-transform: none;
display: block;
color: white;
}
So, how can I make my divs appear in a horizontal way? Thanks in advice!

You could add the divs automatically inside a container with display:flex, as David787 said, this should fix it, if not, maybe we are not understanding your problem. In that case, can you try to explain it in another way?
#Zli I am so glad that worked for you :D . The display:flex will affect only the direct children of the div.
<div class="father">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<div class="not-a-direct-child"></div>
</div>
</div>
In this case will affect the divs with the class "child", not the divs with the class "not-a-direct-child". So, if your text is a direct child like in the next case:
<div class="father">
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
<h2 class="child-too">
<div class="child">
<div class="not-a-direct-child"></div>
</div>
</div>
You can align or justify that item (your text) with some properties or just putting the text and the divs inside a container:
<div class="father">
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
<div class="child">
<h2 class="not-a-direct-child>
<div class="not-a-direct-child"></div>
</div>
</div>
I really recommend you to play this game flexbox froggy and I am sure you will understand how to use flexbox as an expert and to solve a lot of things.

Align 3 column divs in a row doesnt work

JSFiddle
I nested 3 columns in the row div to align them horizontally and the social media icons will not be part of the row. I put width: 100%, float: left, and tried different ways to make the 3 columns lined up straight - no success.
This graphic below is the goal I need to succeed.
HTML and CSS
p {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 27px;
}
.box {
background-color: #f3f3f3;
color: #fff;
font-size: 150%;
width: 100%;
}
.box .box {
background-color: #f3f3f3;
color: #444;
}
.placeholder {
grid-column: col 3 / span 2;
grid-row: row 2;
display: grid;
}
.sm-stw {
grid-column: 1;
grid-row: 1;
width: 573px;
}
.stw-box {
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 0 auto;
}
div.vertical-line {
width: 1px;
background-color: #979797;
height: 100%;
float: left;
margin: 0 15px 0 15px;
}
.sm-svrs {
grid-column: 2;
grid-row: 1;
text-align: left;
}
.sm-hashtag-stw {
grid-column: 1/3;
grid-row: 2;
text-align: center;
}
<div class="box placeholder">
<div class="box sm-stw">
<div class="stw-box">
<div class="col">
<div class="sm-icon"><img src="imgs/icon-fb.png" alt="Seek the World | Facebook"></div>
<div class="sm-logo"><img src="imgs/icon-ins.png" alt="Seek the World | Instagram"></div>
</div>
<div class="col">
<div class="vertical-line" style="height: 75px;"></div>
</div>
<div class="col">
<h3>Seek the World</h3>
<p>(short content place here)</p>
</div>
</div>
</div>
</div>

I clean a little your css code, and i replace the grid with flex. Also there a lot of stuff that i think were useless, so i removed them.
As #hungerstar said in comment, you can set a border to one of the col, and add a little padding to make the vertical line.
It is better this way because it does not pollute the html.
Check the code, and tell me I you need more explanation !
$('#removeGrayMargin').on('click', function(){
if(!$(this).hasClass('active')) {
$(this).text('Put back gray margins');
$(this).addClass('active');
$('.main-container').addClass('with-margin');
}else {
$(this).text('Remove the gray margin');
$(this).removeClass('active');
$('.main-container').removeClass('with-margin');
}
});
.main-container {
background-color: #f3f3f3;
color: #444;
font-size: 150%;
width: 100%;
}
.box {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 30px 0;
}
.main-container.with-margin {
background: transparent;
}
.main-container.with-margin .box{
background: #f3f3f3;
}
.col-1 {
width: 30%;
text-align: right;
padding-right: 20px;
}
.col-2 {
width: 70%;
border-left: 1px solid #8C8C8C;
padding-left: 20px;
}
.col-2-title,
.col-2-p {
font-family: 'Source Sans Pro', sans-serif;
}
.col-2-p {
font-size: 14px;
margin-top: 0;
}
.col-2-title{
font-size: 27px;
margin-top: 5px;
margin-bottom: 20px;
}
.sm-logo + .sm-logo{
margin-top: 8px;
}
img {
/* Trick to remove the white space under the image */
vertical-align: middle;
}
button {
border-radius: 0;
background: #262626;
color: white;
border: 0;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="box">
<div class="col-1">
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-facebook.png" alt="Seek the World | Facebook" width="25px"></div>
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-instagram.png" alt="Seek the World | Instagram" width="25px"></div>
</div>
<div class="col-2">
<h3 class="col-2-title">Seek the World</h3>
<p class="col-2-p">(short content place here)</p>
</div>
</div>
</div>
<p>
Bonus because i don't know if you want exactly your image, or if you want the gray margin as your js fiddle.
</p>
<button id="removeGrayMargin">Remove the gray margin</button>

Categories

Resources