Currently the snippet only allows toggling of each menu when I un-comment the e.stopImmediatePropagation();.
The problem is I cannot use e.stopImmediatePropagation(); because I have to use an animation on the .button that would be killed by the stop.
How do I change the code to be able to toggle the menu's as is done when using e.stopImmediatePropagation();, but not have to use it.
To emulate problem: Click the Apple or Google logo (or Bell Icon) and then click it
again. The solution should remove .active from it's associated
.modal and it should close just like it does when clicking document (except for Bell Icon button which isn't set up to close when document is clicked). I just don't know how to acheive this without using e.stopImmediatePropagation();
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
/* e.stopImmediatePropagation();*/
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal, .google-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.buttons {
display: flex;
align-items: center;
}
.button {
height: 30px;
cursor: pointer;
border: 2px solid;
padding: 1rem;
font-size: 28px;
}
#icon {
color: silver;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" />
<div class="button" id="icon" data-close="icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="modal google-modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal icon-modal" data-id="icon">
<div class="header">Icon</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
I was able to implement what you want by adding the close modal functionality inside the click button and check if the modal for the current element is visible or not:
$(".button").on("click", function () {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length
? $('[data-id="' + dataClose + '"]')
: $(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
} else {
const id = $(this).prop("id");
$(".modal").each(function () {
$(this).toggleClass("active", $(this).data("id") == id);
});
}
});
$(document).on("click", function (e) {
if (
$(".apple-modal, .google-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.buttons {
display: flex;
align-items: center;
}
.button {
height: 30px;
cursor: pointer;
border: 2px solid;
padding: 1rem;
font-size: 28px;
}
#icon {
color: silver;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" />
<div class="button" id="icon" data-close="icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="modal google-modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div>
<div class="modal icon-modal" data-id="icon">
<div class="header">Icon</div>
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div>
Related
I have three buttons, each with their dropdown menu which is toggled on click. The dropdown menu has a transition of transition: all 0.2s and it works just fine when they are displayed as flex-direction: row. Now I have a media query that displays them with flex-direction: column and for some reason they no longer have transitions.
const buttons = document.querySelectorAll('.link');
let arrow = document.querySelectorAll('.arrow-pag');
let dropMenu = document.querySelectorAll('.link-dropdown');
Array.from(buttons).forEach((el, index) => {
let toggled = false;
el.addEventListener('click', function(event) {
if (toggled) {
el.style.backgroundColor = "white";
el.style.color = "var(--midnightBlue)";
arrow[index].style.borderColor = "var(--midnightBlue)";
arrow[index].classList.toggle('up-pag');
dropMenu[index].style.height = "0px";
toggled = false;
} else {
console.log(index);
el.style.backgroundColor = "var(--midnightBlue)";
el.style.color = "white";
arrow[index].style.borderColor = "white";
arrow[index].classList.toggle('up-pag');
dropMenu[index].style.height = "100%";
toggled = true;
}
});
});
:root {
--fontSansSerif: 'Inter';
--fontSerif: 'DM Serif Display';
--heightDropdown: 250px;
--bluePigment: #333895;
--midnightBlue: #1B1164;
--aliceBlue: #E4EBF8;
--lightSteelBlue: #B0C5E3;
--darkSteelBlue: #86ADE3;
}
.pagini-folositoare,
.toate-linkurile {
width: 100%;
}
.toate-linkurile {
font-weight: 500;
display: flex;
gap: 30px;
}
.link {
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
width: 100%;
padding: 20px 10px;
background-color: white;
border-color: var(--midnightBlue);
transition: all 0.15s;
}
.link:hover {
cursor: pointer;
}
.link-container {
width: 33%;
}
.link h2 {
user-select: none;
margin: 0;
font-weight: 500;
text-align: center;
}
.arrow-pag {
vertical-align: middle;
border: solid;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 9px;
margin-left: 10px;
}
.down-pag {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.15s;
}
.up-pag {
margin-bottom: 4px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.link-dropdown {
background-color: white;
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
padding: 0px 10px;
height: 0px;
overflow: hidden;
transition: all 0.2s;
}
.link-dropdown ul {
margin: 0px;
padding-left: 15px;
}
.link-dropdown ul li {
margin-bottom: 10px;
}
#media all and (max-width: 790px) {
.toate-linkurile {
flex-direction: column;
}
.link-container {
width: 100%;
transition: all 0.2s;
}
.link {
width: 100%;
transition: all 0.2s;
}
}
<div class="pagini-folositoare">
<h1>Pagini folositoare</h1>
<div class="toate-linkurile">
<div class="link-container">
<div class="link">
<h2>MEDIA<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li><a target="_blank" href="https://stackoverflow.com">cccc</a></li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>CLUBURI<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">link 1</a></li>
<li><a target="_blank" href="https://stackoverflow.com">link 2</a></li>
<li><a target="_blank" href="https://stackoverflow.com">link 3</a></li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>ADMITERE<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li><a target="_blank" href="https://stackoverflow.com">cccccc</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Now I don't know if I did something wrong in my code or if I'm missing a transition somewhere, but I can't figure this out
I think this is because when in flex-direction: column, the height of each link-container item need to be specified for a transition of height to work.
Since this does not seem practical in this use case, you could use flex-wrap: wrap instead of flex-direction: column.
#media all and (max-width: 790px) {
.toate-linkurile {
flex-wrap: wrap;
}
}
This will make the transition of .link-dropdown happen, which hopefully achieves the desired result without major changes of the existing code.
Full example:
const buttons = document.querySelectorAll(".link");
let arrow = document.querySelectorAll(".arrow-pag");
let dropMenu = document.querySelectorAll(".link-dropdown");
Array.from(buttons).forEach((el, index) => {
let toggled = false;
el.addEventListener("click", function (event) {
if (toggled) {
el.style.backgroundColor = "white";
el.style.color = "var(--midnightBlue)";
arrow[index].style.borderColor = "var(--midnightBlue)";
arrow[index].classList.toggle("up-pag");
dropMenu[index].style.height = "0px";
toggled = false;
} else {
console.log(index);
el.style.backgroundColor = "var(--midnightBlue)";
el.style.color = "white";
arrow[index].style.borderColor = "white";
arrow[index].classList.toggle("up-pag");
dropMenu[index].style.height = "100%";
toggled = true;
}
});
});
:root {
--fontSansSerif: "Inter";
--fontSerif: "DM Serif Display";
--heightDropdown: 250px;
--bluePigment: #333895;
--midnightBlue: #1b1164;
--aliceBlue: #e4ebf8;
--lightSteelBlue: #b0c5e3;
--darkSteelBlue: #86ade3;
}
.pagini-folositoare,
.toate-linkurile {
width: 100%;
}
.toate-linkurile {
font-weight: 500;
display: flex;
gap: 30px;
}
.link {
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
width: 100%;
padding: 20px 10px;
background-color: white;
border-color: var(--midnightBlue);
transition: all 0.15s;
}
.link:hover {
cursor: pointer;
}
.link-container {
width: 33%;
}
.link h2 {
user-select: none;
margin: 0;
font-weight: 500;
text-align: center;
}
.arrow-pag {
vertical-align: middle;
border: solid;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 9px;
margin-left: 10px;
}
.down-pag {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.15s;
}
.up-pag {
margin-bottom: 4px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.link-dropdown {
background-color: white;
box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.1);
padding: 0px 10px;
height: 0px;
overflow: hidden;
transition: all 0.2s;
}
.link-dropdown ul {
margin: 0px;
padding-left: 15px;
}
.link-dropdown ul li {
margin-bottom: 10px;
}
#media all and (max-width: 790px) {
.toate-linkurile {
flex-wrap: wrap;
}
.link-container {
width: 100%;
transition: all 0.2s;
}
.link {
width: 100%;
transition: all 0.2s;
}
}
<div class="pagini-folositoare">
<h1>Pagini folositoare</h1>
<div class="toate-linkurile">
<div class="link-container">
<div class="link">
<h2>MEDIA<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li><a target="_blank" href="https://stackoverflow.com">cccc</a></li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>CLUBURI<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown height">
<ul>
<li>
<a target="_blank" href="https://stackoverflow.com">link 1</a>
</li>
<li>
<a target="_blank" href="https://stackoverflow.com">link 2</a>
</li>
<li>
<a target="_blank" href="https://stackoverflow.com">link 3</a>
</li>
</ul>
</div>
</div>
<div class="link-container">
<div class="link">
<h2>ADMITERE<i class="arrow-pag down-pag"></i></h2>
</div>
<div class="link-dropdown">
<ul>
<li><a target="_blank" href="https://stackoverflow.com">aaaa</a></li>
<li><a target="_blank" href="https://stackoverflow.com">bbbbb</a></li>
<li>
<a target="_blank" href="https://stackoverflow.com">cccccc</a>
</li>
</ul>
</div>
</div>
</div>
</div>
I'm trying to customise a menu I've found on CodePen. Here's what I've found.
What I'm trying to do is modify it so that the menu closes after you click on an item, or if you click outside the menu. I've tried various things but can't seem to get it to work.
Here's my html:
<!-- new hamburger menu be here -->
<div id="menu-main">
<div id="menu-wrapper">
<div id="hamburger-menu"><span></span><span></span><span></span></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class="menu-list accordion">
<li id="nav1">
<a class="menu-link" href="index.html">Home</a>
</li>
<li id="nav2">
<a class="menu-link" href="#about">About the Project</a>
</li>
<li id="nav3">
<a class="menu-link" href="#timeline">Timeline</a>
</li>
<li id="nav4">
<a class="menu-link" href="#vision">The Vision</a>
</li>
<li id="nav5">
<a class="menu-link" href="#where">Where We Are</a>
</li>
<li id="nav6">
<a class="menu-link" href="#news">Stay In Touch</a>
</li>
<li id="nav7">
<a class="menu-link" href="#faq">FAQ</a>
</ul>
</div>
Here's my JavaScript
$(function() {
function slideMenu() {
var activeState = $("#menu-main .menu-list").hasClass("active");
$("#menu-main .menu-list").animate({left: activeState ? "0%" : "-100%"}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-main .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
}); // jQuery load
I've tried adding in various classes in this bit as I believe this is what controls the code but no luck:
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
Would love some help with this.
You can add a check on document click to see if an element has been clicked our the user clicked outside the menu div.
$(function() {
function slideMenu() {
var activeState = $("#menu-container .menu-list").hasClass("active");
$("#menu-container .menu-list").animate({
left: activeState ? "0%" : "-100%"
}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-container .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
$(document).on("click", function(e) {
let isLink = jQuery(e.target).is(".accordion-content a");
let isOutside = jQuery(e.target).closest("#menu-container").length == 0;
if (isLink || isOutside)
$("#menu-wrapper").trigger("click");
})
}); // jQuery load
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
body {
font-family: 'Dosis', sans-serif;
background: #FF5722;
}
#menu-wrapper {
overflow: hidden;
max-width: 100%;
cursor: pointer;
}
#menu-wrapper #hamburger-menu {
position: relative;
width: 25px;
height: 20px;
margin: 15px;
}
#menu-wrapper #hamburger-menu span {
opacity: 1;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: 10px;
color: black;
background-color: white;
position: absolute;
transform: rotate(0deg);
transition: .4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1) {
top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
transform: translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
opacity: 0;
transform: translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
transform: translateY(-9px) rotate(-135deg);
}
#menu-container .menu-list .menu-submenu {
padding-top: 20px;
padding-bottom: 20px;
}
#menu-container .menu-list {
padding-left: 0;
display: block;
position: absolute;
width: 100%;
max-width: 450px;
background: white;
box-shadow: rgba(100, 100, 100, 0.2) 6px 2px 10px;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
left: -100%;
}
#menu-container .menu-list li.accordion-toggle,
#menu-container .menu-list .menu-login {
font-size: 16px;
padding: 20px;
text-transform: uppercase;
border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li:first-of-type {
border-top: 0;
}
.accordion-toggle,
.accordion-content {
cursor: pointer;
font-size: 16px;
position: relative;
letter-spacing: 1px;
}
.accordion-content {
display: none;
}
.accordion-toggle a:before,
.accordion-toggle a:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 30px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #5a5858;
transform-origin: 50% 50%;
transition: all 0.3s ease-out;
}
.accordion-toggle a:before {
transform: rotate(-90deg);
opacity: 1;
z-index: 2;
}
.accordion-toggle.active-tab {
background: yellowgreen;
transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
transform: rotate(0deg);
background: #fff !important;
}
.accordion-toggle a.active:after {
transform: rotate(180deg);
background: #fff !important;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu-container">
<div id="menu-wrapper">
<div id="hamburger-menu"><span></span><span></span><span></span></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class="menu-list accordion">
<li id="nav1" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu1</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
<li><a class="head" href="#">Submenu3</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li id="nav2" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu2</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li id="nav3" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu3</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
<li><a class="head" href="#">Submenu3</a></li>
<li><a class="head" href="#">Submenu4</a></li>
</ul>
<!-- menu-submenu accordon-content-->
</ul>
<!-- menu-list accordion-->
</div>
<!-- menu-container -->
I am trying to create a page, where each film (from a database) is displayed in an image slider, I have managed to make the image slideshow but I am now attempting to repeat this code via a for loop, rather than add an individual film each time.
This is my code currently, without any for loops, I have attached my HTML and external css file
tml {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 10px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#wrapper {
max-width: 100%;
padding: 50px 75px 50px 45px;
position: relative;
bottom: 0em;
}
button:focus {
outline: 0 !important;
}
.left-controls {
position: absolute;
top: 0;
left: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify-content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-left-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.right-controls {
position: absolute;
top: 0;
right: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-right-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.title {
color: #eee;
}
.module-section {
/*max-width: 100%;*/
overflow: hidden;
overflow-x: scroll;
/* border-left:1px solid #fff;
border-right:1px solid #fff;
*/
}
ul {
width: 600em;
list-style-type: none;
padding: 50px 0 50px 0;
}
#content {
position: relative;
}
/*
.arrow-guides, .arrow-guides:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:left;
position:relative;
top:80px;
left:-10px;
padding: 10px 5px 5px 2px;
background:#999;
color:#fff;
}
*/
/*
.arrow-guides-right, .arrow-guides-right:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:right;
position:relative;
bottom:185px;
right:-40px;
padding: 10px 2px 5px 5px;
background:#999;
color:#fff;
}
*/
.card {
width: 15em;
height: 350px;
background: mistyrose;
float: left;
margin-right: 10px;
margin-bottom: 50px;
cursor: pointer;
transform: scale(1);
visibility: visible;
-moz-box-shadow: 0px 1px 5px 0px #676767;
-webkit-box-shadow: 0px 1px 5px 0px #676767;
box-shadow: 0px 1px 5px 0px #676767;
}
.card:hover {
cursor: pointer;
transform: scale(1);
visibility: visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index: 100;
position: relative;
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
transition-duration: 400ms;
}
.inside-top {
width: 14em;
height: 300px;
position: absolute;
text-align: center;
top: 0;
left: 0;
z-index: 100;
}
.clearfix {
overflow: auto;
zoom: 1;
}
<div id="wrapper">
<span id="controlL" class="left-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-left fa-chevron-left-extra" aria-hidden="true"></b>
</span>
<div class="module-section clearfix">
<!-- <button class="btn arrow-guides fa-chevron-left"></button> -->
<ul id="content">
<li class="card">
<div class="inside-top">
<input type="image" id="image" alt="1917" src="./Images/1.png">
<h4>1917</h4>
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/2.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/3.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/4.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/5.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/6.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/7.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/8.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/9.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/10.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/11.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/12.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/13.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/14.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/15.png">
</div>
</li>
</ul>
</div>
<!--end of module-section-->
<span id="controlR" class="right-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-right fa-chevron-right-extra" aria-hidden="true"></b>
</span>
<!-- <button class="btn arrow-guides-right fa-chevron-right"></button> -->
</div>
Assuming your data is stored in a variable called films like the following:
var films = [["1917", "1.png"], ["The Lion King", "2.png"], ["Parasite", "3.png"]];
you can loop through them like this:
var i, len, films, list;
for (i = 0, len = films.length, list=""; i < len; i++) {
list += "<li class='card'><div class='inside-top'><img src='http://yoursite/wherefilesare/" + films[i][1] + "' id='image-" + i + "><h4>" + films[i][0] + "</h4>";
}
then echo the list inside your unordered list:
document.getElementById("content").innerHTML = list;
Updated the code to add an ID to images. The ID will be "image-(number)" and will be unique to each image then you could do something like this:
document.getElementById("image-1").addEventListener("click", doSomethingMethod);
I think this would do. Do the changes if needed. Add this script in script tag.
const ul_tag = document.getElementById("content")
let list_of_images = ["1.png","2.png","3.png"] // so on ...
list_of_images.forEach( (image, index) => {
let card = document.createElement("li")
card.setAttribute("class", "card")
let div = document.createElement("div")
div.setAttribute("class", "inside-top")
card.appendChild(div)
let img_tag = document.createElement("img")
img_tag.setAttrbute("src", "./Images/"+image)
div.appendChild(img_tag)
ul_tag.appendChild(card)
})
Hi try this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="dataOutput"></div>
</body>
<script>
data = [
{ name: "Alessio", surname: "Bardolino", age: "20" },
{ name: "Giovanni", surname: "Told", age: "32" },
{ name: "Sonia", surname: "Bin", age: "42" }
]
createTable(data);
function createTable(data) {
var htmlContents = "";
const app = document.getElementById('dataOutput');
data.forEach(resp => {
htmlContents += "<div class='container'>";
htmlContents += "<div><p class='name'>" + resp.name + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.surname + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.age + "</p></div>";
htmlContents += "</div>";
});
app.innerHTML = htmlContents;
}
</script>
</html>
I hope this help you!!!
Regards
In my example am loading from a JSON but you can equally do same with your DB.
<ul id="imageLoad"></ul>
<script>
var images = [
"https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531702275836-8a2922d78491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1523032217284-d9e49d6c5f04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1534142499731-a32a99935397?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"];
var loadPhotos = "";
var i;
for (i = 0; i < images.length; i++) {
loadPhotos += "<li><img src=" + images[i] + " /></li>";
}
document.getElementById("imageLoad").innerHTML = loadPhotos;
</script>
Try let me know if this works and feel free to ask if you need clarification.
I want to create a menu like http://www.barangaroo.com/
I have opened the overlay section when click on the humburger menu icon.It worked as i expected.
But for the search option, It doesn't close when closing the overlay.
Here is the code from jsfiddle
https://jsfiddle.net/g7pe9uw6/11/
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$('.icon').on('click',function(e){
e.preventDefault();
$('#toggle').addClass('active');
$('#overlay').addClass('open');
$('.search').addClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end
header {
height: 400px;
background: rgba(0,0,0,.5);
}
header .header__menu__list li {
display: inline-block;
}
header .header__menu__list li .header__menu__list__search {
display: block;
padding: 0 25px;
}
header .header__menu__list li .header__menu__list__search i {
font-size: 40px;
}
header .header__menu__list .brand img {
margin-top: -30px;
}
.button__container {
position: fixed;
top: 70px;
left: 70px;
float: left;
width: 100%;
height: 27px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button__container:hover {
opacity: 1;
}
.button__container__icon {
width: 35px;
height: 27px;
float: left;
position: relative;
}
.button__container__icon.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #fff;
}
.button__container__icon.active .middle {
opacity: 0;
background: #fff;
}
.button__container__icon.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #fff;
}
.button__container span {
background: #fff;
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button__container span:nth-of-type(2) {
top: 10px;
}
.button__container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0;
visibility: hidden;
transition: opacity .35s,visibility .35s;
overflow: hidden;
}
.overlay.open {
opacity: 1;
visibility: visible;
overflow: auto;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay .overlay-menu {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width: 0;
padding: 5px;
transition: all .5s ease;
position: absolute;
right: 20px;
box-sizing: border-box;
opacity: 0;
}
.search.expanded {
max-width: 200px;
opacity: 1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="src/css/app.css">
<title>Hello, world!</title>
</head>
<body>
<div id="app">
<header>
<div class="header__menu">
<div class="container">
<div class="header__menu_icon">
<div class="button__container">
<div class="button__container__icon" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<ul class="header__menu__list">
<li>
<!-- <form action="#">
<a href="#" class="header__menu__list__search" id="search-toggle">
<i class="fa fa-search"></i>
</a>
<input type="text">
</form> -->
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon">s</div>
</div>
</li>
<li>
<a href="#" class="brand">
<img src="http://via.placeholder.com/176x40" alt="" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- header__menu -->
</header>
<div class="overlay" id="overlay">
<div class="overlay-menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="src/js/app.js"></script>
</body>
</html>
Can you please help me to fix the function?
Thanks
Check below js fiddle with your issue resolved if that's what you were looking for
https://jsfiddle.net/g7pe9uw6/27/
You just needed to remove "expanded: class from search box to close it.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$('.search').removeClass('expanded');
});
Not the nicest solution, but it is working :D
Edited
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
var dat = $(this).data('from');
$(this).toggleClass('active');
if (typeof dat === 'undefined') {
$('#overlay').toggleClass('open');
} else {
$('.search').toggleClass('expanded');
}
$(this).removeData('from');
});
$('.icon').on('click',function(e){
e.preventDefault();
var toggleOpened = $('#toggle').hasClass('active');
var dat = $('#toggle').data('from');
if (!toggleOpened) {
$('#toggle').toggleClass('active');
}
if (typeof dat === 'undefined') {
$('#toggle').data('from', 'search');
} else {
$('#toggle').removeData('from');
}
$('#overlay').removeClass('open');
$('.search').toggleClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end
I am trying to toggle a class on the wrapper of a header (that you click to drop the body) and the body. The class changes the visibility, opacity, and max-height of the body to create the drop down effect.
This first item is dropped down by default. When another is open, all currently open items should close.
instead, when I click on a closed one it opens all of them but and closes the first one that is open by default.
here is my code:
$(".template_wrap").first().addClass("open");
$('.templates').find('.template_header').click(function(){
$(this).drop();
$('.template_header').not($(this)).drop();
});
$.fn.drop = function() {
$(this).parent(".template_wrap").toggleClass('open');
};
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center { zoom: 1; } /* IE6 */
*:first-child+html .page_center { zoom: 1; } /* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family:"FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF</li>
<li>Download PDF</li>
<li>Download PDF</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>
Also, Something strange happens to the h2s where they move around based on various clicks. Any help would be appreciated.
This should do the trick:
$(".template_wrap").first().addClass("open");
$('.template_header').click(function(){
$('.template_wrap').removeClass("open");
$(this).parent().addClass("open");
})
Fiddle: https://jsfiddle.net/26kasg4t/
The trick here is to make all accordions close and then afterwards make this the only one open:
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
Added a condition, should an accordion be open while it's clicked, it will just close.
SNIPPET
$('.template_wrap:first').addClass('open');
$('.template_header').click(function() {
if ($(this).parent().hasClass('open')) {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
} else {
$('.template_wrap').removeClass('open');
$('.template_body').slideUp();
$(this).next('.template_body').slideDown();
$(this).parent().addClass('open');
}
});
.page_center {
margin: 0 auto;
float: none;
}
.page_center.large {
width: 95%;
}
.page_center.medium {
width: 85%;
max-width: 1350px;
}
.page_center.small {
width: 85%;
max-width: 1130px;
}
.page_center.x-small {
width: 75%;
max-width: 680px;
}
.page_center:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .page_center {
zoom: 1;
}
/* IE6 */
*:first-child+html .page_center {
zoom: 1;
}
/* IE7 */
.template_wrap {
border: 1px solid #a32021;
width: 100%;
margin-bottom: 30px;
}
.template_header {
background: #a32021;
position: relative;
cursor: pointer;
padding: 1px 0 1px 2%;
}
.template_header:after {
position: absolute;
right: 2%;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 36px;
font-family: "FontAwesome";
content: "\f107";
transition: all 0.4s ease;
}
.template_wrap.open .template_header:after {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all 0.4s ease;
content: "\f106";
top: 30%;
}
.template_header h2 {
color: #fff;
margin: 0;
line-height: 65px;
font-weight: 400;
}
.template_body {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
}
.template_wrap.open .template_body {
visibility: visible;
opacity: 1;
max-height: 10000px;
transition: opacity .4s ease-out, visibility .4s, max-height: .8s;
padding: 2%;
}
.template_links {
width: 50%;
float: left;
}
.template_links_wrap {
border: 1px solid #f47628;
padding: 0;
margin: 0;
list-style: none;
}
.template_links_wrap li {
padding-left: 3%;
line-height: 52px;
}
.template_links_wrap li:nth-child(odd) {
background: #fbe4d6;
}
.template_links_wrap li a {
color: #f47628;
}
.template_img {
width: 50%;
float: right;
}
.template_img img {
margin: 0 auto;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content templates">
<div class="page_center medium">
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
<div class="template_wrap">
<div class="template_header">
<h2>Template Header</h2>
</div>
<div class="template_body">
<div class="page_center">
<div class="template_links">
<ul class="template_links_wrap">
<li>Download PDF
</li>
<li>Download PDF
</li>
<li>Download PDF
</li>
</ul>
</div>
<div class="template_img">
<img src="images/template_placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>