I can't seem to figure out why bootstrap's modal window isn't popping up.
I've looking into other similar questions and I still can't get it to work.
I've tried the process of elimination and try to eliminate all my scripts (except the bootstrap script) and it still won't open. Same with my CSS files. I also had inputted manual code for a modal window (before I incorporated bootstrap) so I was worried that the id="modal" from other modals would interfere. I deleted those too and nothing worked.
Here is my codepen, I've commented the sections the modal window code starts: https://codepen.io/eylenkim/pen/KKwMPLm
HTML:
<!--
-- fix other <a> tags // fix navigation
--fix "exit" for contact pop up (mobile)
-- center the Contact dialog box on viewport in mobile
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Art By Eylen | Shop</title>
<meta name="description" content="Browse Eylen's art portfolio to view work created with 35mm photography, blockprinting, and acrylic.">
<meta name="author" content="Eylen Kim">
<!-- data-src
––––––––––––––––––––––––––––––––––––––––––––––––––- -->
<link href="subpage-stylesheet.css" rel=stylesheet type="text/css">
<link href="StyleSheet.css" rel=stylesheet type="text/css">
<link href="skeleton.css" rel=stylesheet type="text/css">
<link href="otherCss/normalize.css" rel="stylesheet" type="text/css">
<link href="otherCss/font-awesome.css" rel=stylesheet type="text/css">
<link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel=stylesheet type="text/css">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Mobile Meta
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Favicon
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<link rel="icon" type="image/png" href="photo/favicon1.png" />
</head>
<!-- Menu // Hamburger Bar
––––––––––––––––––––––––––––––––––––––––––––––––––-->
<nav class="navigation">
<a href="#" class="menu-icon">
<i class="fa fa-bars"></i>
</a>
<ul class="main-navigation" role="navigation">
<div id="nav-x" class="menu-icon">⨯</div>
<li>
<div href="index.html">
Home</a>
</li>
<li>
<div href="portfolio.html">
Portfolio</a>
</li>
<li>
<div class="trigger" style="height: 100%;padding: 10px 0 10px 10px;">
About Me
<div class="modal">
<div class="modal-content" style="height: 95%; max-height: 600px;padding: 2rem 4.6rem;">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p style="font-size: .75em; height: 44.3%; padding-top: 15px;">This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</div>
</li>
<li style="height: 100%;padding: 20px 0 10px 7px;">
<p class="about-me-desktop" onclick="document.getElementById('id01').style.display='block'" style="position: relative;top: -3px;">Contact
</p>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="modal-content-contact-portfolio">
<span class="close-button" onclick="document.getElementById('id01').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form" style="font-size: .7em;">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" requiprintmaking>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" requiprintmaking>
</div>
</div>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" requiprintmaking style="height: 160px;margin-top: 20px;line-height: 17px;padding-top: 8px;"></textarea>
<input class="button u-pull-right" type="submit" value="Send" style="color: black;"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</li>
</ul>
</nav>
<header>
<div class="container fade-in">
<div class="row">
<a href="index.html">
<h1 class="one-third column u-pull-left">Art By <span><br></span><span id="h1-title-span"> Eylen</span></h1>
</a>
<h2 class="one-third column u-pull-left" id="portfolio-title-desktop">| Shop</h2>
<h2 class="one-third column u-pull-left" id="portfolio-title-mobile">
<span>──<br></span>Shop
</h2>
<div class="about-contact-text" class="one-third column u-pull-right">
<a href="index.html">
<p class="about-me-desktop">Home</p>
</a>
<span class="trigger">
<p class="about-me-desktop">
About Me
</p>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h3>
Hello,<br>I'm Eylen!
</h3>
<img id="about-me-pic" src="photo/meee.JPG">
<p>This art website is my passion project. I have coded my own platform to showcase & sell my art. What a treat to have you here on this site!<br><br> The mediums I work with: 35mm film photography, acrylic (canvas & glass), polymer clay (earrings), and printmaking.
<br><br>
In my free time I like petting my cat, tickling some gnarly tunes on the bass/electric guitar, coding, playing video games, and doing art stuff.<br><br>
</p>
</div>
</div>
</span>
<p class="about-me-desktop" onclick="document.getElementById('id02').style.display='block'">
Contact
</p>
<div class="w3-container">
<div id="id02" class="w3-modal">
<div class="modal-content-contact">
<span class="close-button" onclick="document.getElementById('id02').style.display='none'" >×</span>
<h3 style="margin-bottom: 0px;">
Contact Me
</h3>
<p>
<div class="contact-us-form">
<form action="https://formspree.io/eylenkim#gmail.com" method="POST">
<div class="overlap-text">
<div class="overlap-text-base-contact">
<h2 class="load two-thirds column">Contact</h2>
</div>
</div>
<div class="row" style="z-index: 9999999;">
<div class="six columns">
<input class="u-full-width" type="text" placeholder="Name" id="nameInput" name="Name" required>
</div>
<div class="six columns">
<input class="u-full-width" type="email" placeholder="Email" id="emailInput" name="Email" required>
</div>
</div>
<br>
<textarea class="u-full-width" placeholder="Message" id="messageInput" name="Message" required style=" height: 100px;
margin-top: 10px;
line-height: 17px;
padding-top: 8px;"></textarea>
<br><br>
<input class="button u-pull-right" type="submit" value="Send"><br><br><br>
</form>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
</header>
<body class="top" id="top">
<section class="grid-wrapper">
<div class="filter-controls">
<div class="control fade-in">Filter By:
<select class="filter-field form-control">
<option value="">None</option>
<option value="prints">Prints</option>
<option value="earrings">Earrings</option>
<option value="commissions">Commisions</option>
</select>
</div>
</div>
<div class="grid bootstrap-on fade-in" style="flex-direction: row !important;">
<!------ Product w/ Carousel ---------------------------------------------------------------------->
<div class="card item" data-color="earrings">
<div class="price-tag">$10</div>
<div id="earrings1" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image" class="d-block w-100 crop-shp" alt="...">
</div>
<div class="carousel-item">
<img src="image" class="d-block w-100 crop-shop" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#earrings1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#earrings1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Carousel</h5>
<p class="card-text">I want to potentially add the ability to click on the carousel images for the pop up modal</p>
</div>
</div>
<!------ Product w/ Modal Window ---------------------------------------------------------------------->
<div class="card item" data-color="prints">
<div class="price-tag" data-toggle="modal" data-target="#exampleModal">$10</div>
<img src="image" class="card-img-top crop-shop" alt="Print" data-toggle="modal" data-target="#exampleModal">
<div class="card-body">
<h5 class="card-title">(Modal Window)</h5>
<p class="card-text">I want the modal window to pop up when clickin on the image</p>
</div>
</div>
</div>
<!-- Modal ------------------------------------------------------------------------------------>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cute Earrings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>THIS IS THE MODAL!</p>
Buy
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</select>
</section>
<!----- Muuri Filtering ----->
<script>
document.addEventListener('DOMContentLoaded', function () {
var grid = null,
wrapper = document.querySelector('.grid-wrapper'),
searchField = wrapper.querySelector('.search-field'),
filterField = wrapper.querySelector('.filter-field'),
sortField = wrapper.querySelector('.sort-field'),
gridElem = wrapper.querySelector('.grid'),
searchAttr = 'data-title',
filterAttr = 'data-color',
searchFieldValue,
filterFieldValue,
sortFieldValue,
dragOrder = [];
// Init the grid layout
grid = new Muuri(gridElem, {
dragEnabled: false,
layout: {
fillGaps: true
}
});
// Filter field event binding
filterField.addEventListener('change', filter);
// Sort field event binding
sortField.addEventListener('change', sort);
// Filtering
function filter() {
filterFieldValue = filterField.value;
grid.filter(function (item) {
var element = item.getElement(),
isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
return isSearchMatch && isFilterMatch;
});
}
});
</script>
<script src="js/muuri.js"></script>
<script src="https://unpkg.com/web-animations-js#2.3.2/web-animations.min.js"></script>
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
<script>
function closeButton() {
document.getElementByClass('id02').style.display='none'
}
</script>
<!----- JS files ----->
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/singlenav.js"></script>
<script type="text/javascript" src="js/scrollreveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload#12.4.0/dist/lazyload.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></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>
<i class="icon-chevron-up"></i>
<!----- Lazy Load ----->
<script>
(function() {
function logElementEvent(eventName, element) {
console.log(
Date.now(),
eventName,
element.getAttribute("data-src")
);
}
var callback_enter = function(element) {
logElementEvent("🔑 ENTERED", element);
};
var callback_exit = function(element) {
logElementEvent("🚪 EXITED", element);
};
var callback_reveal = function(element) {
logElementEvent("👁️ REVEALED", element);
};
var callback_loaded = function(element) {
logElementEvent("👍 LOADED", element);
};
var callback_error = function(element) {
logElementEvent("💀 ERROR", element);
element.src =
"https://via.placeholder.com/440x560/?text=Error+Placeholder";
};
var callback_finish = function() {
logElementEvent("✔️ FINISHED", document.documentElement);
};
ll = new LazyLoad({
elements_selector: ".lazy",
load_delay: 300,
threshold: 0,
// Assign the callbacks defined above
callback_enter: callback_enter,
callback_exit: callback_exit,
callback_reveal: callback_reveal,
callback_loaded: callback_loaded,
callback_error: callback_error,
callback_finish: callback_finish
});
})();
</script>
<!----- Scroll To Top ----->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() >= 600) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
</script>
</body>
</html>
There are 2 separate issues that are preventing the modal from showing up.
1) The first issue is with your code
The bootstrap library you use returns 404.
How to check if it's happening for you?
Open your browser's inspector, and press CTRL+SHIFT+I
You will see:
Failed to load resource: the server responded with a status of 404 () eylenkim/fullpage/bootstrap-4.3.1-dist/css/bootstrap.css
In fact, this happens for a lot of your relative URLs.
Solution
Replace links to Bootstrap libraries with working ones, eg. from https://getbootstrap.com/
The ones I used in my testing of your code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
See gist for minimum code sample for a modal here: https://codepen.io/edwin-chua/pen/rNaLOEg
Once you fix the link problem, you will run into the second issue.
2) The second issue is with your stylesheet
Once you fixed your code as I suggested, you get a dark overlay with no modal.
Removing the reference to https://eylenkim.github.io/ArtByEylen/StyleSheet.css allows the modal to show up, so something in here is interfering with the modal's css.
Here is a working pen: https://codepen.io/edwin-chua/pen/QWwEyyZ
Separate Problem
You seem to have imported some libraries twice, once in the Codepen UI, and once in the HTML file. This will cause you debugging headaches. Make sure you only import them once. Since you are building an entire webpage, I suggest putting all of it in the HTML file.
also see JS tab
And
Further Comments
This section of code seems to be for closing the modal? If so, it probably isn't required, as Bootstrap automatically binds the click events.
<!--Modal - Dialog Boxes -->
<script type="text/javascript"> const modals = Array.from(document.querySelectorAll('.modal'));
const triggers = Array.from(document.querySelectorAll('.trigger'));
var closeButton = document.querySelector(".close-button");
//if a trigger is clicked then...
for (const trigger of triggers) {
trigger.addEventListener('click', toggleModal);
}
// .. then toggle it's modal
function toggleModal(event) { event.target.closest('.trigger').querySelector('.modal').classList.toggle("show-modal"); }
// check if the clicked element is a modal, or in a modal
function windowOnClick(event) {
if (modals.some((modal) => modal.contains(event.target))) {
toggleModal();
}
}
</script>
Related
I’m trying to make it so my high resolution images (jpgs png gifs) that are inside of the modal carousel don’t load until the thumbnail is clicked on. Getting lazy load to work on carousels in modals seems extra tricky.
Like a newbie I assumed that functionality was built into Bootstrap 4.5. I’ve found many similar questions on here as well as other places (I can post them if anyone wants) but I can’t get any of them to work, some are outdated, unanswered, or not applicable to Bootstrap 4.5. The most promising one I’ve found is here:
https://github.com/verlok/vanilla-lazyload/issues/451
I like it because it’s vanilla js (although I’m not totally comfortable in jquery), but more importantly because it wouldn’t require me to drastically rewrite my code, the page is quite large and I’m hoping to be able to simply add a class to the images.
But regardless, this one won’t work for me either. Any advice (for a newbie)? I’ve pasted my (abbreviated) code below, and I’ve uploaded the files to github: https://github.com/epignosis567/mygithub/tree/main/lazyLoadBootstrap
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link href="../mystyle.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div class="container-fluid">
<div class="row">
<!-- Media content -->
<div class="offset-sm-3 col-sm-9 p-4">
<div class="row d-flex justify-content-center">
<div class="col p-0 text-center" style="width: 100%; max-width: 500px">
<img class="img-fluid pb-3 myPics" src="img/01-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="0"/>
<img class="img-fluid pb-3 myPics" src="img/02-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="1"/>
<img class="img-fluid pb-3 myPics" src="img/03-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="2"/>
</div>
</div>
<!-- begin carousel modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog modal modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body p-1 ">
<!-- begin carousel-->
<div id="myCarousel" class="carousel slide" pause="false" data-ride="false" data-interval="false" >
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 lazy" data-src="img/01-4K.png" />
</div>
<div class="carousel-item">
<img class="d-block w-100 lazy" data-src="img/02-4K.png" />
</div>
<div class="carousel-item">
<img class="d-block w-100 lazy" data-src="img/03-4K.png" />
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end carousel-->
</div>
</div>
</div>
</div>
<!-- end carousel modal-->
</div>
<!-- End media content -->
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="../myscript.js"></script>
<!-- Lazy Load script -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload#17.3.1/dist/lazyload.min.js"></script>
<!-- Lazy Load script -->
<script>
var carouselLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
$('#carousel.carousel .carousel-item').each(function(){
let next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (let i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
// The following line tells LazyLoad that new elements have been added to the page
carouselLazyLoad.update();
});
</script>
</body>
<script>
//carousel script to open to the thumb that was clicked on
$('.myPics[data-slide-to]').on('click', function(){
$('#myModal').carousel($(this).data('slide-to'));
});
</script>
</html>
The heights of each building from West (left) to East (right) is given in an integer array. You have to tell which buildings will be able to see the sunset. I've written a program that will be able to tell which buildings can view the sun from left to right. The problem I'm having is currently with the modal. I'm trying to clear the information that is inside the modal use clearContents(). At first, I was using clear() till i noticed that clear() is a global method. I then tried using document.getElementById("results").innerHTML = " ";.
the entire website is provided but the code snippet is below.
https://zacharyhadjahsunsethills.netlify.app/
let sunsetOrder = ["Building 1 will always view the sunset!"];
function BeginFunction(){
//wire up all the data to the building variables
let building1 = parseInt( document.getElementById("input1").value )
let building2 = parseInt( document.getElementById("input2").value )
let building3 = parseInt( document.getElementById("input3").value )
let building4 = parseInt( document.getElementById("input4").value )
let building5 = parseInt( document.getElementById("input5").value )
//User Input validation
if(building1 == null || building2 == null || building3 == null || building4 == null ||
building5 == null){
document.getElementById("results").innerHTML = `You must input numbers for all buildings`
//clear data
document.getElementById("results").innerHTML = ``
}else{
//Put all the buildings into an array
let buildingsArray = [building1, building2, building3, building4, building5]
//You will need to use nested for loops. Nested for loops are how you can properly
//compare elements inside of an array with eachother.
//Loop starts at one because it will be the loop that is compared to all the
//previous buildings that are infront of it
for (let currentBuilding = 1; currentBuilding < buildingsArray.length; currentBuilding++) {
//will be kept false UNTIL you find the tallest building
//once tallest building is found, it will be switched to true
let tallest = false;
//this loop starts at one because it will need to stay before the position of the
//current building. It needs to stay before current building to properly compare
//which building is taller. That is why the middle condition is
// previousBuilding < currentBuilding
for (let previousBuilding = 0; previousBuilding < currentBuilding; previousBuilding++) {
//if any of the previous building are taller than the building that is currently being compared with,
//then change the bool to true
if(buildingsArray[previousBuilding] >= buildingsArray[currentBuilding]){
tallest = true;
break;
}else{
continue;
}
}
if(tallest == false){
sunsetOrder.push("Building #" +(currentBuilding + 1)+ " can view the sunset")
}
else{
sunsetOrder.push("Building #" +(currentBuilding + 1)+ " can't view the sunset")
}
let results = sunsetOrder.join("<br>")
document.getElementById("results").innerHTML = `${results}`
}
}
}
function clearContents(){
document.getElementById("results").innerHTML ="";
}
.navbar-dark .navbar-nav .active>.nav-link{
color:white;
}
.navbar-dark .navbar-nav .nav-link{
color:black;
}
.navbar .navbar-brand{
color:black;
}
.container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
}
body{
background-image: url("img/SunsetHillsBackground.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
::selection{
background-color: #F0E440;
}
#ResultsHeader{
background-color: #F0E440;
}
#ResultsFooter{
background-color: #F0E440;
}
#ResultsBody{
background-color:#f3eb7b
}
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fizz Buzz Coding Challenge (Implementing the Meta Strat</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/prism.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #F0E440;">
<a class="navbar-brand" href="index.html">SunsetHills</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">🌒Home </a>
</li>
<li class="nav-item">
<a class="nav-link active" href="solve.html">🌓Solve <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="code.html">☀Code</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://zacharyhadjah.netlify.app/">🌗Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/zhadjah9559/SunsetHills">🌘Github</a>
</li>
</ul>
</div>
</nav>
<div class="container pt-5 align-items-center">
<div class="row justify-content-center pb-4">
<img src="img/SunsetHills.png" alt="Sunset Hills logo" id="Logo" class="responsive" >
</div>
<hr/>
<div class="row pt-5 mt-5">
<div class="col-md form-group">
<input class="form-control" id="input1" placeholder="Enter Height" type="number"/>
</div>
<div class="col-md form-group">
<input class="form-control" id="input2" placeholder="Enter Height" type="number"/>
</div>
<div class="col-md form-group">
<input class="form-control" id="input3" placeholder="Enter Height" type="number"/>
</div>
<div class="col-md form-group">
<input class="form-control" id="input4" placeholder="Enter Height" type="number"/>
</div>
<div class="col-md form-group">
<input class="form-control" id="input5" placeholder="Enter Height" type="number"/>
</div>
</div>
<div class="row justify-content-center pt-2">
<label>
<button class="btn btn-primary" type="submit" onclick="BeginFunction()"
data-toggle="modal" data-target="#ResultsModal">
Submit
</button>
</label>
</div>
</div>
<!--Results Modal-->
<div class="modal fade" id="ResultsModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header justify-content-center" id="ResultsHeader">
<h1 id="ResultsHeaderH1">Results</h1>
</div>
<div class="modal-body" id="ResultsBody">
<div id="small-dialog2" class="white-popup zoom-anim-dialog text-center">
<div id=results></div>
</div>
</div>
<div class="modal-footer justify-content-center" id="ResultsFooter">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="clearContents()">Close</button>
</div>
</div>
</div>
</div>
<!--Results Modal-->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/custom.js"></script>
<script src="js/prism.js"></script>
</body>
</html>
If you inspect the content of the web with the devs tools you can see that your function clearContents() is working correctly.
The problem here is that you ain't clearing your sunsetOrder array, so every time that you do click on the submit button you are pushing new elements to it and showing all the array in the modal.
To solve this you can add the following code to your clearContents function:
function clearContents() {
document.getElementById("results").innerHTML ="";
sunsetOrder = [];
}
i have this code, witch is basically a click counter in javascript.
my question is, is it possible to show the "clicks" in two different pages?
My goal is to make two identical pages, but the second one is just to show the click counting, as the first one is to click and at the same time to show the counting.
i dont have much experience in programing.
all help is much apreciated :)
html page code:
<!DOCTYPE html>
<html>
<head>
<title>FCT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/scripts.js"></script>
<script src="chama.js"></script>
</head>
<body>
<button type="button" onclick="hello()">Anterior</button>
<button type="button" onclick="bye()">Próximo</button>
<div class="barraTop"> </div>
<div class="container page">
<div class="row barraSuperior">
<div class="col-xs-1">
<img src="imagens/espamol.png" height="150" width="250">
</div>
<div class="col-xs-11" style="text-align: right;">
<p></p>
<span class="uespiTexto">Escola Secundária Padre António Martins de Oliveira</span><br>
<span class="subtitulo">Matrícula Institucional <strong>SiSU 2019</strong></span>
<!-- <img src="imagens/sisu.png" class="sisuLogo"> -->
</div>
</div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="barraTop"> </div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ultimaSenha">
<br>
<span id="ultimaSenhaTexto">ÚLTIMA CHAMADA</span><br>
<span>Senha </span>
<span id="ultimaSenhaNumero">0000</span>
</div>
</div>
</div>
<audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>
and javascript code:
var clicks = 0;
function hello() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function bye() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
Only if one page opens the other one*.
If you use var w=window.open() you can access the other page's document in w.document. And, from the second page, you can access the first one's in window.parent.document.
*That is with js only. If you can use a server language you could make something more complex using ajax or even sockets.
Here is My Master Page Code. None of the buttons on any page inherited from this master is firing. I have no idea what could be stopping it. It's been killing my brains for 3 days. Help, Please? Tried creating new onClick methods etc. Buttons just wont fire. Something somewhere is stopping the button Fire and I;m not sure what it is
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.Master.cs" Inherits="ABSA.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABSA Property | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Plottage Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="js2/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css2/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Different Multiple Form Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css3/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css3/font-awesome.css" rel="stylesheet"/>
<!-- //font-awesome icons -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"/>
<!-- //web font -->
</head>
<body>
<form id="form1" runat="server">
<!-- header -->
<div class="header">
<div class="header-top">
<div class="container">
<div class="header-top-left">
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+270000000</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>property#absa.co.za</li>
</ul>
</div>
<div class="header-top-left1">
<ul class="social-icons">
<li></li>
<li></li>
</ul>
</div>
<div class="header-top-right">
<div class="search">
<input class="search_box" type="checkbox" id="search_box"/>
<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
<div class="search_form">
<form action="#" method="post">
<input type="text" name="Search" placeholder="Search..."/>
<input type="submit" value=" "/>
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<h1><a class="navbar-brand" href="Home.aspx">ABSA<span>Real Estate</span></a></h1>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Absa Help Us Sell</li>
<li>Absa Properties</li>
<li>FAQ's</li>
<li><a id="modal_trigger" href="#modal" class="hvr-bounce-to-bottom modal_close2">Login</a></li>
</ul>
</nav>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<section id="SigninModal" class="popupBody" >
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close"><i class="fa fa-times "></i></span></p>
<h2>SIGN IN</h2>
<form id="signin" action="#" method="post">
<input type="text" name="Email" placeholder="Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" runat="server"/>
<input type="checkbox" id="brand" value="" runat="server"/>
<label for="brand" runat="server"><span></span> Remember me ?</label>
<asp:Button ID="btnLogin" type="submit" runat="server" Text="SIGN IN"/>
<div class="signin-agileits-bottom">
<p>Forgot Password ?</p>
<p><a class="modal_close" id="modal_trigger2" href="#modal2" runat="server">Register </a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- //main -->
</section>
<section class="popupBody">
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal2" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close2"><i class="fa fa-times "></i></span></p>
<h3>REGISTER</h3>
<form id="register">
<input type="text" name="FirstName" placeholder="First Name" required="" runat="server"/>
<input type="text" name="LastName" placeholder="Last Name" required="" runat="server"/>
<input type="text" name="Contact" placeholder="Contact Number" required="" runat="server"/>
<input type="email" name="Email" placeholder="Your Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" />
<input type="checkbox" id="brand1" value="" runat="server"/>
<label for="brand1"><span></span>I accept the terms of use</label>
<asp:Button ID="btnRegister" runat="server" Text="REGISTER" OnClick="btnRegister_Click"/>
</form>
</div>
</div>
</div>
<!-- //main -->
</section>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$("#modal_trigger2").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close2" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#modal_trigger2").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
</script>
<!-- //header -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-2 footer-grid" style="font-size:12px">
<ul>
<li>Contact Us</li>
<li>Security Estates</li>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
<li>Site Map</li>
<li>Property for Sale By Suburb</li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/7.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 1
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/6.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 2
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/8.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 3
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid-instagram">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/10.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/6.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/7.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 footer-grid">
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Johannesburg, South Africa</p>
<p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> property#absa.co.za</p>
<p><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+27000000</p>
</div>
</div>
<div class="clearfix"> </div>
<div class="footer-copy">
<p>© 2016 ABSA Ltd. All rights reserved</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</form>
</body>
</html>
I've Deleted Validation from the scripts but still nothing
First, you have to put some more info...It impossible to know what is really happening only by see some jquery and dependencies..
Second, (in chrome) right click on the element, click on "inspect", go to "Event Listeners" and click on "click".
You will see which are the event listeners of the buttons, and you will be able to investigate what is going on.
Add method="post" attribute to the first form tag and try again;
I mean;
<form id="form1" runat="server" method="post">
I'm using https://almsaeedstudio.com/preview theme which gives some brilliant boxes layout and social widget boxes layout which I want to use in my project.
Refer to simple box screenshot
and social widget box
.
I'm trying to arrange multiple simple boxes horizontally where each of the simple box can contain multiple social widget boxes.
Refer to this screenshot for more clarity:
.
I tried playing with the exiting simple boxes and social widget boxes code and come up with this snippet.
I have created this plunker, somehow css is not getting loaded properly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div style="overflow:auto;">
<div class="" style="width:2050px;">
<div class="box" style="display:inline-block;width:1000px;">
<div class="box-header with-border">
<h3 class="box-title">Monthly Recap Report</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<div class="btn-group">
<button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="">
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
</div>
<!-- /.row -->
</div>
<!-- ./box-body -->
<div class="box-footer" style="display: block;">
<!-- /.row -->
</div>
<!-- /.box-footer -->
</div>
<!-- /.box -->
<div class="box" style="display:inline-block;width:1000px;">
<div class="box-header with-border">
<h3 class="box-title">Monthly Recap Report</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<div class="btn-group">
<button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="">
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
</div>
<!-- /.row -->
</div>
<!-- ./box-body -->
<div class="box-footer" style="display: block;">
<!-- /.row -->
</div>
<!-- /.box-footer -->
</div>
</div>
<!-- /.col -->
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/slpJLIRVGfMSC8JWG1bT?p=preview
But its not working. Can anyone please help me how to accomplish this ?
P.S.: I have searched on internet and found similar threads but none is working for me.
Horizontally align div without float
I'm still a beginner in CSS and would really appreciate if I can get some help here. I'm breaking my head on this for a long time.
Update
I think it makes sense to clearly write out the actual issues and try to solve them one by one.
Horizontal boxes are not aligned on the same row if the inner social widget box is collapsed/expanded. How can I ensure the height of the horizontal box is fixed irrespective of the inner social widget box height ? Refer to screenshot for same.
There are some answers which mention the use of display: float:left; but my issue is the variable width which actually ensures all horizontal boxes on the same row.
<div class="" style="width:2050px;">
How do I ensure the width:2050px; to increase dynamically as I will be adding inner boxes on fly. P.S.: I'm using angularjs for ui. Is there any CSS trick which is independent of the width:2050px; That way there will be no dependency on the total width calculation.
How to fix the height of inner social widget box ? The inner social widget box overflows the actual horizontol container. how can I fix this ?
Sharing an image of what actually I'm trying to accomplish. .
In short I want to accomplish point 4 with this theme's existing boxes and social widget boxes. If there is any other better way of doing this, please share the same.
In case anything is not clear, please feel free to mention it in comment. I'll update the question accordingly.
Thanks
Update 2:
I think same height columns is what making this problem more complicated. What I can do is having a scroll bar inside horizontol box which can have multiple social widgets boxes. That way we can have a fixed height for each of the horizontol column.
Update 3:
While zer00ne# has provided one solution which is based on Flex. I have read on some forums that it doesn;t work on all browsers. Since my web-page is going to be mobile friendly, I;m more inclined towards achieving my desired results using general CSS techniques.
In path of achieving my result, I created following version http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview using this SO thread. Following is screenshot of same:
Now I'm facing one issue of text getting out of inner social widget box. I need some help on this thing.
In addition to that, can people take a review of these if this solution is any better or not ?
Thanks
>>>>>>>>>>>>>>>>>>>>FLEXBOX SOLUTION<<<<<<<<<<<<<<<<<<<<
Here is the REAL SOLUTION to the ORIGINAL QUESTION if anyone is actually interested.
dark_shadow:
While zer00ne# has provided one solution which is based on Flex.
Problem resolved see my demos below, it speaks for itself. I have no idea why starikovs is getting upvotes at all when there is clearly no solution provided.
I had to recreate the page because the extra classless <div>s you placed inside the markup was confusing. The significant change was adding flexbox to the layout. I used two flexbox containers, one that controlled the two columns .flexRow and another inside of each column to control the widgetboxes, .flexCol. Those classless <div>s are combined into a <section class="colWrap" I added intrinsic measurements so that your layout isn't stuck at a fixed width of 2050px, you'll still need to adjust both .box to an intrinsic measurement, 1000px fixed is going to give grief in the future. The changes will be annotated when I get back. Unless of course this isn't what you wanted?
LAST to the LAST UPDATE
>>>>>>>>>>PLUNKER<<<<<<<<<<
EDIT
Just add a fixed height to .colWrap, suggest 100vh to 150vh
I checked out the height of both columns and they are in fact identical down to the decimal. See the screenshots:
Column 1
Column 2
OLD
You just need everything aligned, correct? Ok, look here please: http://embed.plnkr.co/MRI69qLoTkiL9F68g54M/preview
I added this to the <head>
<!DOCTYPE html>
<html>
<head>
<base href="https://almsaeedstudio.com/themes/AdminLTE/">
<link href="https://almsaeedstudio.com/themes/AdminLTE/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
UPDATE
Added the script as well. It's located before the closing </body> tag.
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
You probably don't need all of them, but the essential ones are:
bootstrap.min.css
font-awesome.min.css
jQuery-2.1.4.min.js
bootstrap.min.js
app.min.js
jquery.slimscroll.min.js
There's a lot of relative URLs (ex. ../dist/img/photo2.png), so I added the following to the top of the <head>:
<base href="https://almsaeedstudio.com/themes/AdminLTE/">
The majority of these external files are located at that base url. If the download package didn't properly provide adequate assets, I always go to the source of the site's demo. Frequently the developer(s) neglect the differences between the dist and the demo.
UPDATE
As I understand the problem is that the layout needs to be properly aligned with widgetboxes or in the absence of widgetboxes. I don't think using display:none on widgetboxes is the way this template was designed. Consider the following annotated excerpts from the file, app.min.js
Excerpts from the AdminLTE script, app.min.js
Notes at the bottom.
/*! AdminLTE app.js
* ================
* Main JS application file for AdminLTE v2. This file
* should be included in all pages. It controls some layout
* options and implements exclusive AdminLTE plugins.ᵃ
*
/*...*/†
$.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
animationSpeed: $.AdminLTE.options.animationSpeed,
activate: function (a) {
var b = this;
a || (a = document), $(a).on("click", b.selectors.collapse,
function (a) {
a.preventDefault(), b.collapse($(this))
}), $(a).on("click", b.selectors.remove, function (a) {
a.preventDefault(), b.remove($(this))
})
},
ᵇcollapse: function (a) {
var b = this,
c = a.parents(".box").first(),
d = c.find(
"> .box-body, > .box-footer, > form >.box-body, > form > .box-footer"
);
c.hasClass("collapsed-box") ? (a.children(":first").removeClass(
b.icons.open).addClass(b.icons.collapse), d.slideDown(
b.animationSpeed,
function () {
c.removeClass("collapsed-box")
})) : (a.children(":first").removeClass(b.icons.collapse)
.addClass(b.icons.open), d.slideUp(b.animationSpeed,
function () {
c.addClass("collapsed-box")
}))
},
ᶜ remove: function (a) {
var b = a.parents(".box").first();
b.slideUp(this.animationSpeed)
}
}
}
if("undefined" == typeof jQuery) throw new Error(
"AdminLTE requires jQuery");
/*...*/†
ᵈ function (a) {
"use strict";
a.fn.boxRefresh = function (b) {
function c(a) {
a.append(f), e.onLoadStart.call(a)
}
function d(a) {
a.find(f).remove(), e.onLoadDone.call(a)
}
var e = a.extend({
trigger: ".refresh-btn",
source: "",
onLoadStart: function (a) {
return a
},
onLoadDone: function (a) {
return a
}
}, b),
f = a(
'<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
);
return this.each(function () {
if("" === e.source) return void(window.console &&
window.console.log(
"Please specify a source first - boxRefresh()")
);
var b = a(this),
f = b.find(e.trigger).first();
f.on("click", function (a) {
a.preventDefault(), c(b), b.find(".box-body").load(
e.source,
function () {
d(b)
})
})
})
}
}(jQuery),
function (a) {
"use strict";
a.fn.activateBox = function () {
a.AdminLTE.boxWidget.activate(this)
}
}(jQuery) function (a) {
"use strict";
a.fn.boxRefresh = function (b) {
function c(a) {
a.append(f), e.onLoadStart.call(a)
}
function d(a) {
a.find(f).remove(), e.onLoadDone.call(a)
}
var e = a.extend({
trigger: ".refresh-btn",
source: "",
onLoadStart: function (a) {
return a
},
onLoadDone: function (a) {
return a
}
}, b),
f = a(
'<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
);
return this.each(function () {
if("" === e.source) return void(window.console &&
window.console.log(
"Please specify a source first - boxRefresh()")
);
var b = a(this),
f = b.find(e.trigger).first();
f.on("click", function (a) {
a.preventDefault(), c(b), b.find(".box-body").load(
e.source,
function () {
d(b)
})
})
})
}
}(jQuery),
function (a) {
"use strict";
a.fn.activateBox = function () {
a.AdminLTE.boxWidget.activate(this)
}
}(jQuery)
† This code is skipped over
ᵃ The developer implies that this app is not a complete solution but a complete solution is available to buy.
ᵇ The boxwidgets collapse and height should adjust accordingly.
ᶜ The boxwidgets can be removed and height should be adjusted accordingly.
ᵈ The function boxRefresh() is a public method I believe. It could be used after an addition or subtraction of a widget I suppose.
I'm not the best at interpreting third party plugins, so any extra observations and/or corrections are welcome.
LAST UPDATE
I got it so when any section is collapsed, they will slide up rather than down. As for the 2 main columns, they behave as they should and if the first column is actually removed, then the second column will take the first column's place.
The new way of aligning is to use flexbox. Here's a simple example to show the power:
HTML:
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
CSS:
.wrapper {
display: flex;
}
Now your divs inside .wrapper are aligned in a row.
BTW, you can use Autoprefixer to get the right browser prefixes.
Flexbox is supported by all the major browsers: http://caniuse.com/#search=flexbox (with prefixes)
With flexbox you can align items as you want simply, aligning them vertically in the center, horizontally in the center, etc.
You can use display: flex, read more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
P.S. But you need use prefixes for old browsers
You could use float to position the boxes horizontally. I forked your Plunker and changed the .box from display: inline-block; to float: left;: http://plnkr.co/edit/Woo31pPiHi4HcvXZ9NXE?p=preview
After reading your question and looking over the comments I see the theme you are using has (or you have added) twitter bootstrap. I am not sure why you wouldn't use its grid system based on the layout you are trying to achieve. Looking at the theme link you provided I see this layout which contains 4 horizontally aligned widgets which should be more than enough for what you are trying to achieve.
<section class="content">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 1, example widget code below -->
<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
</div>
<!-- Next widget underneath would go here -->
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 2, add widgets in here -->
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 3, add widgets in here -->
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 4, add widgets in here -->
</div>
</div>
</section>
If I am misunderstanding the question please let me know. Hope that helps.
EDIT #2 - Added some CSS and Fiddle link
Based on your feedback here is how I would handle the multiple columns
CSS
.cust-table {
display: table;
padding: 0;
width: 100%;
}
.cust-tr {
display: table-row;
}
.cust-td {
border-collapse: collapse;
display: table-cell;
vertical-align: top;
background: pink;
border: 1px solid gray;
min-width: 100px;
}
HTML
<div class="cust-table">
<div class="cust-tr">
<div class="cust-td">
<!-- Column 1, example widget code below -->
<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
</div>
<!-- Next widget underneath would go here -->
</div>
<div class="cust-td">
<p>Its all bang bang bloddy bang to me!</p>
</div>
<div class="cust-td">
<p>This is another column with text just for fun</p>
</div>
<div class="cust-td">
<p>This is another column with more excitement then the last column. Dont believe me?</p>
</div>
</div>
</div>
This way if you end up with 20 columns they would all show horizontally. Depending on how wide you want them to show you could use min-width so they wouldn't end up too squished. Here is a JS.Fiddle link if you want to play around with the layout.