problem link : http://comingsoonnurul.blogspot.com/
why did the Slideshow stacked with menu??
html:
<div id="cf4a" class="shadow" >
<img= src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
<img src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
<img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg">
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg">
</div>
css:
#cf4a {
position:absolute;
}
#cf4a img {
position:absolute;
height:105px;
width:200px;
left:0;
}
Related
My site allows users to upload bulk images. The issue is when a user is on mobile they could potentially have to scroll through 100's of images. I want to implement a show more button.
I found this demo online that I got to work
html:
<div class="container">
<div class="grid">
<div class="cell">
<img src="https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324.jpg" class="book" />
</div>
<div class="cell">
<img src="https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324.jpg" class="book" />
</div>
</div>
</div>
<button onclick={showMore()}>Show all books</button>
<script>
const showMore = () => {
document.querySelectorAll('.cell').forEach(c => c.style.display = 'block')
}
</script>
css:
#media screen and (min-width: 600px) {
.container{
overflow: auto;
height: (70vh);
}
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
width: calc(50% - 2rem);
}
}
.cell {
margin: 1rem;
}
button {
display: none;
}
#media screen and (max-width: 600px) {
.cell {
display: none;
}
.cell:first-child {
display: block;
}
button {
display: inline-block;
}
}
However when I use the same code just with a for loop to display it does not work and just displays all the images.
<div class="container">
<div class="grid">
{% for images in postgallery %}
<div class="cell">
<img src="{{ images.images.url }}" class="book" />
</div>
{% endfor %}
</div>
</div>
<button onclick="{showMore()}">Show all books</button>
<script>
const showMore = () => {
document.querySelectorAll(".cell").forEach((c) => (c.style.display = "block"));
};
</script>
How to make a dropdown .top-bar? Foundation hides it by display: none; and i can't use transition height.
Below header structure
<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
<div class="toggle-button"><button class="menu-icon" type="button" data-toggle></button></div>
<div class="title-bar-title show-for-sr" >Menu</div>
</div>
<nav class="top-bar navigation" id="example-animated-menu">
<div class="dropdown menu navigation-list" data-dropdown-menu >
<ul id="menu-menu " class="menu algin-right vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
</ul>
</div>
<form class="search">
<div class="grid-x grid-padding-x">
<div class="small-9 cell">
<input type="text" id="middle-label" placeholder="Search">
</div>
<div class="small-3 cell">
<label for="middle-label" class="text-left middle"><img src="img/ico-search.png" alt="#" /></label>
</div>
</div>
</form>
</nav>
You can display the .top-bar as a child of .dropdown-pane and then override the display: none; with display: block.
Then simply add a max-height transition to the .top-bar going from 0 to the height of your choice.
HTML:
<div class="dropdown-pane"
id="example-animated-menu"
data-dropdown
data-position="bottom"
data-alignment="bottom"
data-v-offset="40px">
<nav class="top-bar navigation" ></nav>
</div>
CSS:
.dropdown-pane {
width: 100%;
padding: 0;
display: block;
max-height: 0;
-webkit-transition: all 0.11s ease;
transition: all 0.11s ease;
}
.top-bar {
max-height: 0;
overflow: hidden;
}
.is-open .top-bar {
max-height: 76px;
-webkit-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;
overflow: hidden;
}
See a JSFiddle demo
I have a list of items. Each item has an icon (fontawesome) on the left and text on the right. Unfortunately I'm not able to align the items.
My CSS and HTML code is:
.colle ul {
margin-left: -20px;
}
.colle ul li {
list-style-type: none;
margin-bottom: 35px;
display: flex;
}
.colle ul li i {
margin-right: 25px;
}
.colle ul li p {
margin: 0;
}
<div class="colle">
<ul>
<li>
<i class="fa fa-black-tie" style="color:#0e3c68;font-size:230%;"></i>
<div style="color: #0e3c68;">
<strong>DIRECTOR: </strong><br> <strong>Francisco </strong><br><div style="color: #0e3c68;font-size:80%;line-height: 12px;">Universidad Francisco de Vitoria</div>
</div></li> </ul>
<li> <i class="fa fa-suitcase" style="color:#0e3c68;font-size:230%;"></i> <div style="color: #0e3c68;">
<strong>COMITÉ CIENTÍFICO ASESOR: </strong><br> <strong>Francisco </strong><br><div style="color: #0e3c68;font-size:80%;line-height: 12px;">Universidad Francisco de Vitoria</div>
</li>
<li> <i class="fa fa-mobile" style="color:#0e3c68;font-size:230%;"></i> <div style="color: #0e3c68;"><strong>CONTACTO: </strong><br> <strong>Francisco</strong><br><div style="color: #0e3c68;line-height: 12px;">9135567 ext. 2115</div> </li>
</div>
(Unfortunately the code snippet can't run the icons) What I'm trying to do is having all perfectly aligned. You can find an image of what I have done up to now. Anyone can help me?
Since you are trying to have two columns, your flex container (the "li") should have two child elements. One should be the (i.fa) icon, and the other should be a container (e.g "div") with all of the info that you want next to the icon.
Then, you need to give at least the icon a fixed width. This is what will align things.
I modified your code to do that, and also replaced your inline styles with classes. That just makes it more maintainable and readable.
See my version here: https://codepen.io/anon/pen/aEzQgM
Here is the code:
.colle ul {
margin-left: -20px;
}
.colle ul li {
list-style-type: none;
margin-bottom: 35px;
display:flex;
}
.colle ul li i.fa {
color:#0e3c68;
font-size:230%;
width:1em;
height:1em;
}
.data1{
color: #0e3c68;
font-weight:bold;
}
.data2{
color: #0e3c68;
font-size:80%;
line-height: 12px;
}
.data3{
color: #0e3c68;
font-size:80%;
line-height: 12px;
}
.colle ul li p {
margin: 0;
}
<div class="colle">
<ul>
<li>
<i class="fa fa-black-tie">x</i>
<div class="data">
<div class="data1">DIRECTOR:</div>
<div class="data2">Francisco</div>
<div class="data3">Universidad Francisco de Vitoria</div>
</div>
</li>
<li>
<i class="fa fa-suitcase">x</i>
<div class="data">
<div class="data1">COMITÉ CIENTÍFICO ASESOR:</div>
<div class="data2">Francisco</div>
<div class="data3">Universidad Francisco de Vitoria</div>
</div>
</li>
<li>
<i class="fa fa-mobile">x</i>
<div class="data">
<div class="data1">CONTACTO:</div>
<div class="data2">Francisco</div>
<div class="data3">9135567 ext. 2115</div>
</div>
</li>
</ul>
</div>
.colle ul li {
list-style-type: none;
margin-bottom: 35px;
display: flex;
align-items: center;
}
align-items: center will align both your flex items vertically center.
I have a fairly simple flex layout built on Angular Material. It has a side panel that can be slid offscreen. I'm currently using negative margins to handle that so that the main content box follows its movement with a width adjustment, which works well. However, this results in animation that's not smooth. Apparently it's more of a chore for the graphics rendering mechanism than translation.
How can I accomplish the same using translateX? Here's my demo layout:
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div flex="60" class="main md-padding">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
The sidebar movement is handled with simple Angular directives and CSS:
.sidebar-out .sidebar {
transform: translateX(40vw)
}
Fiddle demo
The problem is that the main content box doesn't adjust size as the sidebar translates off screen. How can I make that happen? Thanks heaps.
Does this help in anyway? - Fiddle
I think there may be a better way to do this bit though...
.sidebar-out .main {
transform: scaleX(1.7)
}
Markup
<div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}">
<div id="newMain" flex="60">
<div id="mainContent">
<h1>Main Content</h1>
<button class="toggler" ng-click="sidebarOut=!sidebarOut">Toggle sidebar</button>
</div>
<div class="main md-padding">
</div>
</div>
<div flex="40" class="sidebar md-padding">
<h2>Sidebar</h2>
</div>
</div>
CSS
.wrapper {
background: pink;
overflow: hidden;
}
#newMain {
position: relative;
width: 100vw;
height: 100vh;
}
#mainContent {
position: absolute;
z-index: 1;
}
.sidebar,
.main {
height: 100vh;
}
.main {
background: #fff;
transition: all .5s;
transform-origin: 0 0;
}
.sidebar-out .main {
transform: scaleX(1.7)
}
.sidebar {
background: #ddd;
transition: all .5s;
}
.sidebar-out .sidebar {
transform: translateX(40vw)
}
this is my question:
is it possible to set equal heights to last items in row?
My masonry layout is on two columns and I would like to set the last two items with the same height...
UPDATE
This is a simple starting code that I think to use because I haven't yet begun to work on it:
/* ---- js ---- */
jQuery(document).ready(function($) {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
isInitLayout: false,
isFitWidth: true
});
$container.masonry('layout');
});
});
/* ---- css ---- */
.wrapper{
margin: 0 auto;
}
#container {
width: 100%;
height: 1200px;
background: #DDD;
margin: 0 auto;
}
#container:after {
content: '';
display: block;
clear: both;
}
.item {
float: left;
width: 500px;
background: #0D8;
border-color: hsla(0, 0%, 0%, 0.7);
}
.item img{
max-width: 100%;
}
<!-- ---- html ---- -->
<div class="wrapper">
<div id="container">
<div class="item"><img src="img/image1.jpg" width="500" height="200" alt="" /></div>
<div class="item"><img src="img/image2.jpg" width="500" height="450" alt="" /></div>
<div class="item"><img src="img/image3.jpg" width="500" height="300" alt="" /></div>
<div class="item"><img src="img/image4.jpg" width="500" height="260" alt="" /></div>
<div class="item"><img src="img/image5.jpg" width="500" height="500" alt="" /></div>
<div class="item"><img src="img/image6.jpg" width="500" height="420" alt="" /></div>
<div class="item"><img src="img/image7.jpg" width="500" height="260" alt="" /></div>
<div class="item"><img src="img/image8.jpg" width="500" height="430" alt="" /></div>
</div>
</div>
Thank you.
Fabio