On my webpage, I have a div that I would like to fill with content similar to the image. How can I achieve this without resizing the div and instead populate it from bottom to top?
On my webpage, I have a div that I would like to fill with content similar to the image. How can I achieve this without resizing the div and instead populate it from bottom to top?
Optimal solution for organizing this design would involve the Flexbox Strategy
To achieve a different layout, consider wrapping the rows in reverse order using the wrap-reverse property
$(document).ready(function() {
$('.create').on('click', function() {
$('.container').append('<div class="circle"></div>');
})
});.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
background: #6CC4DA;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
align-items: baseline;
align-content: flex-start;
height: 280px;
width: 770px;
}
.circle {
background: #C78DEF;
border-radius: 50%;
width: 60px;
height: 60px;
margin: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<button class="create">Create a circle</button>To achieve the desired effect, you can flip the parent div horizontally and then flip each child block back to its original position:
$(document).ready(function() {
$(document).on('click', 'button', function() {
var
items = $('.content-item').size(),
space = document.createTextNode(' ');
$('.container').append($('<div class="content-item">' + (items + 1) + '</div>')).append(space);
});
});.container {
width: 400px;
height: 200px;
background: cyan;
transform: ScaleY(-1);
}
.content-item {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 5px;
text-align: center;
line-height: 50px;
background: purple;
color: #fff;
transform: ScaleY(-1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Increase population</button>
<div class="container">
<div class="content-item">1</div>
<div class="content-item">2</div>
<div class="content-item">3</div>
<div class="content-item">4</div>
<div class="content-item">5</div>
<div class="content-item">6</div>
<div class="content-item">7</div>
</div>Here is a snippet of my HTML code where I attempted to bind the "formFriendsAll" scope to the ng-model. <form ng-submit="submitForm()" > <div class="col-sm-3"> <div class="form-group"> <label>Which Persons to show?< ...
My Objective My goal is to take a user input string and render it with specific substrings wrapped in a component. Specifically, I am looking to identify dates within the string using a regex pattern and then wrap these dates in a Vuetify chip. Progress ...
Working with PHP has always posed a challenge for me. Typically, I navigate through by searching and trial and error, but this time I'm stuck. Currently, I'm developing a project that allows users to order services online. The ordering module is ...
I have implemented a menu similar to http://tympanus.net/Tutorials/SlideDownBoxMenu/. Below this menu, I have placed a webgrid. The issue I am facing is that when I hover over the menu, the slidedownbox with two action links pops up directly over the heade ...
I have added an anchor link that, when clicked, opens a new window with the specified link. Below is the code I used for this purpose: <a href="javascript:window.open('https://www.remax.fi/fi/kiinteistonvalitys/tietosuojaseloste/', &apos ...
Can someone provide guidance on how to properly display JSON data retrieved from PHP within an Intel App Framework application? I've attempted using both the .getJSON() and .getJSONP() methods but would appreciate a comprehensive guide on their usage. ...
I am currently developing a node express app that responds to an AJAX post from the client browser. I am curious about what characters would be considered invalid to include in the HTTP response body. My response header specifies the use of charset=utf-8, ...
Whenever I click on a tag, I want the li class to change to "active" and open a new page with the corresponding tag as active. For example, if I click on the Overview tag, the new page should open with the li tag as active. I have attempted to write some c ...
Currently, I am exploring JavaScript examples on w3schools and I have a question. Is there a way to retrieve the text entered by the user while also determining if the user clicked OK or Cancel? I understand how to check if OK or Cancel was selected: var ...
Can I center these navigation links using only HTML without needing CSS? The navigation links are currently aligned to the left and I would like to center them on the webpage. <ul class="nav nav-tabs" id="myTab" role="tablist&q ...
I'm developing a custom table feature that allows users to customize <td> elements using a slot. Here's the current setup: <tbody> <tr v-for="(item, key) in items"> <slot :item=item"> <td v-for="(header, he ...
I am currently in the process of setting up a basic WordPress blog with only one page dedicated to the blog archive. However, I have encountered an issue. I want to implement a toggle functionality that allows visitors to easily navigate through posts on t ...
Seeking a solution to vertically align the 2 rows within the footer, both arranged using a Bootstrap grid. My attempt involved creating a content wrapper and utilizing a conventional flexbox solution: display: flex; align-items: center. However, this caus ...
After extensive searching, I couldn't find exactly what I needed. Therefore, I decided to utilize cookies to remember the toggled state of a div whether it's hidden or visible. However, I encountered an issue where there is flicker happening as t ...
I'm facing a challenge with mapping and displaying a JSON file in a different structure. I need help figuring out how to map the data properly. Here's the JSON file: var data = { "megamenu": [ { "name": "level1.2", "link": "#", ...
I recently finished putting together a one-page website using Twitter Bootstrap, based on a theme from Themeforest that I heavily customized. However, when viewing the site on a mobile or tablet, I noticed an issue where the top 2/3 of the page is unrespon ...
I am facing an issue where the menu opens and closes briefly when I refresh the page. I want to find a way to prevent this re-rendering process. Every time I refresh, my console.log shows: false 'open' navigation.jsx:23 item navigation.jsx: ...
Can a function be data bound in Vue? In my template, I am trying something like this: <title> {{nameofFunction()}}</title> However, when I run it, it simply displays 'native function' on the page. Any insights would be appreciated ...
Recently started learning NODE.JS Looking for some guidance. When I try to execute the command below: npm install --save express-handlebars I encounter the following error message: + <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cf ...
At the start, I am concealing a control panel known as myNestContainer. There is a button called navMyNest that, upon hovering, displays the myNestContainer. This functionality is working well. The problem arises when users try to explore the control pane ...