I'm trying to implement a sticky div that is always present in the view when scrolling. My javascript code works fine, and the div is indeed scrolling with the page. The problem is when I apply position: fixed; to the my sticky div of class scrolling-panel, it switches position from the right of the page (the original position) to the left.
Here is my HTML (most relevant part, still a lot of markup though)
<div class="container">
<div class="main-container">
<div class="row">
<div class="col-md-12">
<img id="brand-logo" src="images/logo.png">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
<div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
</div>
</div>
</div>
<div class="scrolling-panel">
<h3>Get Started</h3>
<h3>$45</h3>
<p>Join the Club for exclusive pric- ing. See a new box each month and skip if it’s not for you.</p>
<button class="btn btn-success"><small>Join the club + get refresh</small></button>
<p>Want Refresh without joining?
Quick Buy for $55.</p>
</div>
<div class="row">
<div class="col-md-8">
<div class="para-intro">
<h1>REFRESH</h1>
<p>Time to toss the cheap plastic bags -- your dopp kit should be
as composed as the rest of your travel getup. Our friends at
Men’s Journal helped us bring back this classic. Get ready to
breathe new life into your bathroom cabinet and carry-on.</p>
</div>
</div>
<div class="col-md-8">
<div class="sm-content-list">
<ul class="ul-content-list">
<li>DOPP KIT<br>
<span class='doppkit-value'>10"X6"X4"</span></li>
<li>DOUBLE HITTER<br>
2-IN-1 SHAMPOO &<br>
CONDITIONER<br>
<span class='doppkit-value'>8.5oz</span></li>
<li>CLEAN CUT<br>
SEMI-MATTE<br>
STYLING CREAM<br>
<span class='doppkit-value'>3.0oz</span></li>
<li>HANDMADE GOLD<br>
MOSS SOAP<br>
<span class='doppkit-value'>5.0oz</span></li>
<li>FACE WASH<br>
<span class='doppkit-value'>4.4oz</span></li>
<li>LOTION<br>
0.75oz</li>
<li>BODY POWDER<br>
<span class='doppkit-value'>1.0oz</span></li>
</ul>
</div>
<!-- <div class="col-md-5"> -->
<div class="dopp-kit">
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
</div>
</div>
<div class="col-md-8">
<div class="tabbed-interface">
<div class="appearing-content">
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to wearing down. Designed exclusively for Bespoke, each bag was painstakingly handcrafted in the good old US of A.</p>
</div>
</div>
<div class="clickable-links">
<a class='links-toggle'>blabla</a>
<a class='links-toggle'>blabla</a>
<a class='links-toggle'>blabla</a>
</div>
<div class="changing-para">
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to wearing down. De- signed exclusively for Bespoke, each bag was painstakingly handcrafted in the good old US of A. The waterproof exterior is crafted from heavy, 15oz waxed canvas sourced from family mills in the heartland, while the full-grain leather handle and pull tab, bronze rivets and zipper, and signature blue ballistic nylon lining boast a rugged simplicity. Americana at its best.</p>
</div>
</div>
</div>
<div class='media-objects'>
<h3> From The Post </h3>
<div class="row">
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>The Perfect Side Part for any Hair Type</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Grooming Tips</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>How Soap is Made</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Behind the Scenes with Sasquatch Soap</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Blue Claw's Adam Blitzer Talks Design</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>How To Shine Your Shoes</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS (also using bootstrap for its grid system):
p {
font-family: times;
font-size: 15px;
}
#container {
height: 400px;
width: 650px;
margin: 20px auto 35px auto;
position: relative;
}
.main-container {
margin: 40px 130px 40px 130px;
border: solid black 1px;
}
#slider-img {
height: 400px;
width: 650px;
position: absolute;
}
#left_holder {
height: 400px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 400px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top:40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top:40%;
right: 0px;
}
img#brand-logo {
margin-top: 25px;
margin-left: auto;
margin-right: auto;
display: block;
height: 12px;
width:120px;
}
.para-intro {
margin-left: 110px;
}
.para-intro h1 {
margin-top: 0px;
}
.sm-content-list {
background-color: rgb(240,240,234);
margin-left: 110px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
ul.ul-content-list {
list-style-type: none;
margin: 0px;
padding: 5px 8px 5px 8px;
}
.ul-content-list li {
font-size: 8px;
font-weight: 600
}
.dopp-kit {
margin-left: 110px;
}
.dopp-kit h5 {
margin-bottom: 2px;
margin-top: 0px;
}
.tabbed-interface {
background-color: blue;
margin-top: 20px;
margin-left: 110px;
height: 250px;
width: 450px;
}
.clickable-links a {
text-align: center;
display: inline-block;
margin-left: 110px;
color: rgb(204,204,204);
hover: none;
}
.clickable-links {
text-align: center;
margin-top: 10px;
}
.changing-para {
margin-left: 110px;
margin-bottom: 20px;
margin-top: 30px;
}
.media-objects {
margin-left: 110px;
margin-bottom: 30px;
}
.media-objects h3 {
margin-bottom: 30px;
}
.media-objects p {
font-size: 12px;
}
.scrolling-panel {
background-color: rgb(240,240,234);
height: 270px;
width: 170px;
float: right;
margin-right: 115px;
text-align: center;
}
.scrolling-panel p {
font-size: 10px;
}
.company-color {
color: rgb(153,66,60);
}
.doppkit-value {
color: rgb(151,151,151);
}
.appearing-content {
color: white;
float: bottom;
}
.stick {
margin-right: 115px;
position:fixed;
top:0px;
}
Javascript for the sticky scrolling-panel div:
$(document).ready(function() {
var s = $(".scrolling-panel");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
Let me know if I haven't been clear enough and/or if you need more information
Instead of margin-right on the element (in .stick class) use a right value.
Here's a fiddle example
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a carousel that is working perfectly fine as I want but I'm having trouble center aligning the image and text properly. It looks fine in small screen but is not aligned in bigger screens or smaller screens.
Also the previous and next button arrows are not aligned in the center of the background circle aswell.
HTML
<div>
<h3 style="text-align:center; padding:30px; padding-bottom:10px;">Trending now</h3>
<!-- Multi Carousel -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="owl-carousel">
<div class="item">
<img src="https://www2.hm.com/content/dam/hm-magazine-2020/featured-fashion/20_13_A_trend_bildspel_1.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Jackets & Coats</span>
</p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F33%2F9e%2F339e3549ec41eef34883a4fbe73e8501c36764fb.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_cardigans%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span>
</p>
</div>
<div class="item">
<img src="https://cdna.lystit.com/photos/56a1-2014/11/06/hm-blue-jumper-in-a-mohair-blend-product-1-25065199-0-150443488-normal.jpeg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Clothes</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/32/00/a8/3200a8617dfbc6139b8251a36d5118de.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Boys 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmprod?hmver=0&set=quality[79],source[/environment/2016/8EZ_0117_008R.jpg],width[4054],height[4740],x[549],y[438],type[FASHION_FRONT]&call=url[file:/product/main]">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Girls 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/b3/21/bd/b321bd9d618ee5439cd7218f9a543704.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Hoodies &<br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/Ol-YWVWUQnVmpEjhoKL6eZK0Kfo/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/11/879/n/24155406/6877ea140db7a0db_thumb_temp_image22153611410465627/i/HM-Newborn-Clothes.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Newborn 0-9<br>months</span></p>
</div>
<div class="item">
<img src="https://mk0stylisheve1cal1r6.kinstacdn.com/wp-content/uploads/2011/12/HM-Jumpers-and-Cardigans-for-Men_01.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F0e%2F50%2F0e50030ec7575845e95ead7a4046c4522544852d.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bmen_trousers_dressed%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/b7/2a/50/b72a5020325b27dd6c053223703ee04b.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Baby Exclusive <br> 0m-4 years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2Fe3%2F6c%2Fe36c9e916fdfa4b3896bfe9992889b7fa4a827ca.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_hoodiessweatshirts%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Hoodies & <br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/18fWRKJF__pohskeGtu_P3dCSRE/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2020/01/08/883/n/1922564/28a69c26b18fd4bf_netimgaMezvq/i/HM-Paper-bag-Pants.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/14/ff/b0/14ffb09b1bcef167ed28a9624748e032.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Accessories</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=width[800],quality[80],options[limit]&source=url[https://www2.hm.com/content/dam/men_s02/september_2020/3132b/3132B-1x1-v41-the-casual-edit.jpg]&scale=width[global.width],height[15000],options[global.options]&sink=format[jpg],quality[global.quality]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Jackets & <br>Coats</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/ornsuB5wU0zsOvtIq06LKYZaN0o/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2019/06/05/932/n/1922564/201a10c4095b52d1_netimgVaH6Nm/i/HM-Linen-Shirt.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Shirts &<br> blouses</span></p>
</div>
<div class="item">
<img src="https://decoholic.org/wp-content/uploads/2020/09/HM-Home-fall-2020-2.jpg">
<p class="carosueltitletxt">
H&M Home<br>
<span class="carosueltxt">New Home &<br> Interior</span></p>
</div>
</div>
</div>
</div>
CSS
/*carousel*/
.prod-slider-container {
position: relative;
font-family: font-awesome;
margin-left: 10%;
margin-right: 10%;
}
.owl-buttons {
background-color: transparent;
border: 0px none transparent;
width: 9%;
}
.owl-prev,
.owl-next {
position: absolute;
top: 37px;
}
i.fa {
cursor: pointer;
font-size: 10px;
padding-top: 0;
height: 0;
width: 0px;
color: rgba(0, 0, 4, 0.5);
}
.owl-perv {
left: -2%;
}
.owl-next {
right: 5.1%;
}
.item img {
margin-left: 10px;
margin-right: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
background: #222222;
object-fit: cover;
}
.carosueltitletxt{
font-family:helvetica;
text-align:center;
color:#555555;
font-size:11px;
font-weight:bold;
}
.carosueltxt{
font-family:helvetica;
text-align:center;
color:#222222;
}
.d4-container img {
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: 20px;
display: block;
width: 80%;
height: 400px;
object-fit: cover;
background: gray;
}
JQuery
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 8,
pagination:false,
itemsDesktop: [1199, 5],
itemsDesktopSmall: [979, 5],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
Hi can you please try with this and let me know thank you.
.prod-slider-container .item a {
display: block;
margin: 0 auto;
float: none;
text-align: center;
}
To center the texts and the images, add text-align: center; to the wrapper element which is .item in this case.
You can add this text-align: center; to the second parent .owl-carousel or the third .inner-container also, that would make all the texts and images inside centered.
And for .owl-next & .owl-prev honestly, if you can't provide the live example of this carousel, I can't be specific about the solution, this is a simple try based on your provided code, hope this would help you find the solution-
.inner-container {
position: relative;
}
.inner-container .owl-prev,
.inner-container .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.owl-prev {left: 15px}
.owl-next {right: 15px}
just use display: flex on .item class and change the value of justify-content and align items to fit your need.
like this:
.item{
display: flex;
justify-content: center;
align-items: space-around;
}
I have an image gallery that opens each image, below the image grid, as an enlargement with descriptive text. I can't seem to get the text to center and stay on the image. I have tried changing the CSS with overflow, width, etc., but I think it's in the JS code. I do not know JS, I found the code on a codepen and made changes as needed (and with some stack overflow help!). In addition, I would like the enlarged image to close and revert back to the gallery after a period of time. Is that possible?
The link to my codepen is https://codepen.io/Ovimel/pen/YgzVeg The first image shows the issue I am having.
I'm a coding novice, and I'm not sure that I posted the code here correctly. Actually, I know it's not correct as the images are not aligned and standard sizes and the enlargements don't load, but do I need to post everything? The codepen is where you'll see it actually work/not work. Thanks in advance for your help!
/*styling for gallery page images*/
* {
box-sizing: border-box;
}
/*The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
/*Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container-gallerypage {
position: relative;
display: none;
padding: 15px;
text-align: center;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 35px;
color: red;
font-size: 20px;
text-align: center;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
/*styling for footer and footer text links*/
footer {
background-color: #6e6b5c;
color: white;
font-family: "Days One", sans-serif;
font-size: .8em;
text-align: center;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*#media only screen and (max-width: 320px) {
.footer {
background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a.footerlinks {
color: white;
font-weight: 600;
text-decoration: none;
}
a.footerlinks:link,
a.footerlinks:visited {
color: white;
}
a.footerlinks:hover,
a.footerlinks:active {
color: #194a76;
text-decoration: underline;
}
<article role="main">
<header>
<h1>THE GALLERY</h1>
<p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
</header>
<!-- slide gallery -->
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing).
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container-gallerypage">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:80%">
<div id="imgtext" style="text-align: center;width:100%;"></div>
</div>
</article>
<br>
<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
<p>This site is hosted at no cost to the public by
<a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
<a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
<a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
<p>Copyright ©2012-2019. All rights reserved. Design and website by Vivian Linderman.
<address>
<a class="footerlinks" href="mailto:vivian_lbdn#hotmail.com">CONTACT WEBMASTER</a>
</address>Created 2012, updated 2019.
</p>
</footer>
</div>
I'd personally start the whole thing again, but adding this to your CSS should help
#imgtext {
width: 70%;
display: block;
margin: auto;
position: relative;
bottom: 100px;
}
I just tested in the code pen and it requires the !important tag
#imgtext {
width: 70%!important;
display: block!important;
margin: auto!important;
position: relative!important;
bottom: 100px!important;
}
A small tweak of your css can give the desired result. Set a max-width (narrower than the full width) and a margin that will set it appropriately (in this case I gave it a max width of 75% and a margin left and right of 10% [an approximation, taking into account browser-added margins/padding], and set it to display:block with position:absolute, 20% from the top. Any of these values can be tweaked as you wish, but you get the picture. I would recommend using a smaller font size for benefit of smaller screens, by the by
Hope this helps
//Make older browsers aware of new HTML5 layout tags
'header nav aside article footer section'.replace(/\w+/g, function(n) {
document.createElement(n)
})
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
/*styling for gallery page images*/
* {
box-sizing: border-box;
}
/*The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 200px;
overflow: hidden;
}
/*Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
max-width: 100%;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container-gallerypage {
position: relative;
display: none;
padding: 15px;
text-align: center;
}
/* Expanding image text */
#imgtext {
display: block;
max-width:75%;
position: absolute;
top:20%;
text-align:center;
margin:0 10%;
color: red;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
/*styling for footer and footer text links*/
footer {
background-color: #6e6b5c;
color: white;
font-family: "Days One", sans-serif;
font-size: .8em;
text-align: center;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*#media only screen and (max-width: 320px) {
.footer {
background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a.footerlinks {
color: white;
font-weight: 600;
text-decoration: none;
}
a.footerlinks:link,
a.footerlinks:visited {
color: white;
}
a.footerlinks:hover,
a.footerlinks:active {
color: #194a76;
text-decoration: underline;
}
<body>
<article role="main">
<header>
<h1>THE GALLERY</h1>
<p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
</header>
<!-- slide gallery -->
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="row">
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing).
" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer, circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container-gallerypage">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:80%">
<div id="imgtext" style="text-align: center;width:100%;"></div>
</div>
</article>
<br>
<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
<p>This site is hosted at no cost to the public by
<a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
<a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
<a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
<p>Copyright ©2012-2019. All rights reserved. Design and website by Vivian Linderman.
<address>
<a class="footerlinks" href="mailto:vivian_lbdn#hotmail.com">CONTACT WEBMASTER</a>
</address>Created 2012, updated 2019.
</footer>
</body>
I have this above image, I need to achieve an effect with CSS and JavaScript; on my page I allow users to add up to 12 images to their account, and all the images will be displayed in the div below.
If a user has less than 5 photos the div with red border will be hidden, and when a user has more than 5 photos the div with red border will display with the 2 arrows – one on the left and the other on the right side – and clicking the right arrow the photos will move left until it get to the last photo.
How can I achieve this with CSS and JavaScript? I tried to use overflow hidden for the div, but what I got wasn't what I needed.
Any help on this from any one?
My HTML and CSS is below:
.mycarousel-container {
border: 1px solid red;
width: 650px;
min-height: 140px;
max-height: auto;
overflow-x: hidden;
position: relative;
left: 0px;
z-index: 0;
}
#carousel_control_left {
float: left;
margin-top: 60px;
color: #b0b0b0;
font-size: 18px;
}
#carousel_control_right {
float: right;
margin-top: 60px;
color: #b0b0b0;
font-size: 18px;
}
.mycarousel {
border: 1px solid #ccc;
width: 102px;
height: 102px;
margin: 15px 15px 15px 4px;
float: left;
border-radius: 2px;
}
<div class="row">
<div class="col-md-12">
<div><small class="text-muted">This listing has 6 photos. Add up to 6 more for free.</small>
</div>
<div class="mycarousel-container" style="padding-left:0;padding-right:0;">
<span id="carousel_control_left"><i class="glyphicon glyphicon-chevron-left"></i></span>
<span id="carousel_control_right"><i class="glyphicon glyphicon-chevron-right"></i></span>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
<div class="mycarousel">
<img src="1465929515_Money.png" class="img img-thumbnail">
</div>
</div>
</div>
</div>
The link to jsFiddle
Might I suggest not adding those two arrows and letting the browser do the work for you?
Just set overflow-x: auto on the containing div. This will enable scrolling, so all the native capability (such as two-finger swiping) will work in the way that the user expects it for the platform they're on. This is a much better solution than reinventing UI components in ways that users don't expect.
I've a problem with my Slidedown effect, because his animation is quite broke when i try to open the menu. This is the animation broken that it gives: https://gyazo.com/450138f37f6b8e99c1e9fc452a3108e4 As you can see, the rows appear on the left and then they move quickly to the right, and that isn't what i want. I need it to work normally like a common slidedown
Here is my code, i hope that someone will be able to help me!
$("#crystal").click(function(){
$("#crystal1").slideDown(300);
$("#eventi1").slideUp(300);
$("#stanze1").slideUp(100);
});
$("#stanze").click(function(){
$("#crystal1").slideUp(100);
$("#eventi1").slideUp(300);
$("#stanze1").slideDown(300);
});
$("#eventi").click(function(){
$("#crystal1").slideUp(100);
$("#stanze1").slideUp(100);
$("#eventi1").slideDown(300);
});
.promo2{
background: none repeat scroll 0 0 #133c54;
border: 3px solid #095a87;
border-radius: 10px;
font-size: 20px;
margin-bottom: 10px;
max-height: 320px;
max-width: 520px;
padding: 10px;
text-align: center;
width: 520px;
font-family: Ubuntu Condensed;
color: #FFF;
float: left;
}
.crystals{
background: none repeat scroll 0 0 #133c54;
border: 3px solid #095a87;
border-radius: 10px;
font-size: 20px;
height: 20px;
margin-bottom: 10px;
max-height: 320px;
max-width: 520px;
padding: 10px;
text-align: center;
width: 520px;
font-family: Ubuntu Condensed;
color: #FFF;
float: left;
position: relative;
left: -10px;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="promo2" id="crystal">
<div style="height:auto; width:96px; height:96px; background-image:url(image/crystal2.png); float:left;"></div>
<div style="font-size: 41px;">
Ricarica Crystal + <span style="color:#f7cc02;">Promotion Point</span>
<img style="position: relative;left: 55px;top: -28px;" src="image/frecciadown.png">
</div>
<div style="display:none" id="crystal1">
<div class="crystals" id="first" style="z-index:12; top:14px;">
<span style="color:#47c5ff;"> 50 Crystal</span> + <span style="color:#f7cc02;">2 Promotion Points</span>
<img src="image/frecciaright.png" style="left: 140px; position: relative;">
</div>
<div class="crystals" style="z-index:11; top:-7px;">
<span style="color:#47c5ff;"> 150 Crystal</span> + <span style="color:#f7cc02;">5 Promotion Points</span>
<img src="image/frecciaright.png" style="left: 136px;position: relative;">
</div>
<div class="crystals" style="z-index:10; top:-27px;">
<span style="color:#47c5ff;"> 400 Crystal</span> + <span style="color:#f7cc02;">10 Promotion Points</span>
<img src="image/frecciaright.png" style="left: 132px;position: relative;">
</div>
<div class="crystals" style="z-index:9; top:-47px;">
<span style="color:#47c5ff;"> 850 Crystal</span> + <span style="color:#f7cc02;">14 Promotion Points</span>
<img src="image/frecciaright.png" style="left: 132px;position: relative;">
</div>
<div class="crystals" style="z-index:8; top:-67px">
<span style="color:#47c5ff;"> 1800 Crystal</span> + <span style="color:#f7cc02;">20 Promotion Points</span>
<img src="image/frecciaright.png" style="left: 128px;position: relative;">
</div>
<div class="crystals" style="z-index:7; top:-90px">
<span style="color:#47c5ff;"> 4000 Crystal</span> + <span style="color:#f7cc02;">30 Promotion Points</span>
<img src="image/frecciaright.png" style="left: 128px;position: relative;">
</div>
</div>
</div>
After much trial and error, I managed to fix your slidedown issue with the following changes:
Turned the div beginning with 'Ricarica' into a paragraph
Changed the crystal1 id and its contents to use an unordered list instead of a div structure
Changed border properties of the .crystals class to enhance item structure
Other minor edits
In the long run, parts of your HTML and CSS needed to be rewritten in order to have a working, smooth slidedown.
Fixed code is at http://jsfiddle.net/jkantner/grkmwyav/.
This is my first question and I am a supper noobie, but am eager to learn.
I have this site http://autogoog.com/site/#about that is written & styled in html/css.
The site looks great on chrome and safari, but on firefox, the Team page is being pushed out to the right.
Here is the html portion and below is the css. Any help would be amazing and thankful.
<!-- TEAM STARTS
========================================================================= -->
<section id="team">
<div class="container">
<div class="row">
<div class="col-md-12 section-heading animated" style="text-align:center" data-animation="fadeInUp" data-animation-delay="0">
<h2>Leadership</h2>
<h1>meet the team</h1>
<p class="line"> </p>
</div>
<div class="owl-carousel" id="our-team">
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/1.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">JAY LEOPARDI</div>
<div class="designation">FOUNDER & CEO</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Jay Leopardi, lifestyle and pop culture branding expert, is the founder & CEO of Bad Boy Branding. Working with start-ups to top tier brands, he reinvents the traditional structure of brand development. Visit JAYLEOPARDI.COM to find out more detailed information.</div>
</div>
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/2.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">SHAWN C. LEOPARDI</div>
<div class="designation">COO</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Expert in marketing & business operations, Shawn brings over 20 years of expertise to Bad Boy Branding. His processes have been proven to build mega-corporations from $20-80 million in annual revenue.</div>
</div>
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/3.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">ANTHONY MARABELLA</div>
<div class="designation">VP SALES & MARKETING</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Anthony leads a team of highly skilled business professionals while maintaining a great balance of customer care and dynamic sales techniques. He has implemented custom-tailored digital strategies that power the bullets at Bad Boy Branding.</div>
</div>
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/4.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">DANIELLE BYNUM</div>
<div class="designation">VP BUSINESS DEVELOPMENT</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Known in the industry as “The Business Development Shark”, Bad Boy Branding depends on Danielle’s efficient and highly seasoned business senses. Having worked directly for “The Shark” Daymond John, she has learned how to develop relationships worldwide with major corporations. Additionally, Danielle empowers BBB with an evolutionary, hyper-speed licensing model.</div>
</div>
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/8.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">BARRY SHRUM,ESQ.</div>
<div class="designation">CORPORATE LEGAL</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Barry Neil Shrum, Esquire, aka “The Bad Boy of Legal”, has been practicing entertainment & corporate law for over 16 years. Having represented some of the biggest names in the industry, Barry safeguards BBB and the interests of its clients. As a result of doing business with Jay Leopardi for over a decade, they formed an acquisitions corporation to purchase brands that align well with BBB’s business model.</div>
</div>
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/5.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">HUTSON MILLER</div>
<div class="designation">VP ENTERTAINMENT</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Former Atlantic Records/WEA executive & broker of the LA Lakers Owner Dr. Jerry Buss, Hutson works directly with top musicians, producers, professional athletes and celebrity entertainers. His list includes Brandy, Lil Kim, Pharrell Williams, Wyclef Jean, Jason Kidd, Desean Jackson, Tom Cruise & the list goes on. Working with Jay Leopardi for the past decade, developing a solid personal & business relationship, he now leads the entertainment division of Bad Boy Branding.</div>
</div>
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/6.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">PABLO FONSECA</div>
<div class="designation">CREATIVE DIRECTOR</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Expert TV broadcasting & creative director, Pablo has worked for major corporations such as Univision, Telemundo, and the Zimmerman agency. Leading BBB’s creative team & managing a host of dynamic designers, he creates award-winning content that brings significant value. High profile clients, such as Ashley furniture, Nissan national, and Atlantis, have all received Pablo’s creative stamp.</div>
</div>
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="0">
<div class="picture"><img src="img/team/7.jpg" class="img-responsive" alt=""><span class="zoom"><span><i class="fa fa-envelope"></i></span></span></div>
<div class="heading">MICHAEL SIEGLE</div>
<div class="designation">IA DIRECTOR</div><br>
<div class="team-social"><i class="fa fa-twitter"></i><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i></div>
<p class="smallline"> </p>
<div class="description">Well traveled & world-renowned information architect, Michael is a strategic and high level thinker autonomously managing BBB’s technical development teams.</div>
</div>
</div>
</div>
</section>
<!-- /.TEAM -->
/* ------------------------------------------------------------------------------------------ Team Section Starts */
#team {
background: url(../img/textures/zwartevilt.png);
}
#team .line {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #373737;
margin-bottom: 60px;
width: 100px;
margin-left: auto;
margin-right: auto;
}
#team .team-contents {
text-align: center;
margin-bottom: 250px;
margin-top: 25px;
}
#team .picture {
padding-left: 30px;
padding-right: 30px;
}
#team .picture img {
width: 100%;
height: auto;
background: transparent;
position: relative;
margin-bottom: 25px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
#team .heading {
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
}
#team .designation {
font-size: 18px;
text-transform: uppercase;
font-weight: 300;
line-height: 3px;
}
#team .smallline {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #373737;
margin-top: -20px;
margin-bottom: 20px;
padding-bottom: 10px;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.team-contents .icon {
width: 60px;
height: 60px;
border-radius: 60px;
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: #fff;
color: #000;
top: -60px;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
padding-top: 12px;
padding-bottom: 12px;
line-height: normal;
margin-bottom: -60px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#team .description {
margin-bottom: 20px;
text-align: left;
padding-right: 10px;
height: 150px;
color: gray;
}
#team .team-social a {
text-align: center;
margin-left: 6px;
margin-right: 6px;
color: #d0d0d0;
}
#team .team-social a i {
}
/* Team Overlayzoom Starts */
.teamoverlayzoom {
position: relative;
display: block;
margin: 0;
text-decoration: none;
}
.teamoverlayzoom span i {
color: #000;
}
.teamoverlayzoom span.zoom {
position: absolute;
nowhitespace: afterproperty;
nowhitespace: afterproperty;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 22px;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease; /* Fallback for web browsers that doesn't support RGBa */
background: rgb(256, 256, 256); /* RGBa with 0.6 opacity */
background: rgba(256, 256, 256, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.teamoverlayzoom span.zoom span {
position: absolute;
left: 0;
top: 0;
padding: 10px;
width: 100%;
height: 100%;
}
.teamoverlayzoom:hover span.zoom, .teamoverlayzoom:focus span.zoom {
width: 100%;
height: 100%;
background: rgb(256, 256, 256); /* RGBa with 0.6 opacity */
background: rgba(256, 256, 256, 0.4);
}
I don't currently have much time but I will let you work about with a css browser specific css "hack". I am posting this just in case you find it useful :
So, this isn't the best solution but it should work.
/* IE7, FF */
html>body #team.container {
position: relative;
right: 700px;
}
This simply targets those specific browsers. This is not a "good" solution because browser specific css is bad practice. I might look at this tomorrow. Good luck.
Ok I figured it out. There was an error in the section of #team. Was missing some necessary divs. It is all fixed now. Thank you all for your help.
<section id="team">
<div class="container">
<div class="row">
<div class="col-md-12 section-heading animated" style="text-align:center" data-animation="fadeInUp" data-animation-delay="0">
<h2>OUR TEAM</h2>
<h1>meet the team</h1>
<p class="line"> </p>
</div>
</div>
<div class="owl-carousel" id="our-team">
<div class="team-contents animated" data-animation="flipInX" data-animation-delay="200">