Using Bootstrap 4. Essentially, I have a carousel that is cycling through a bunch of different project features (GIFs with captions). I have the captions below it based on some code from elsewhere on SO.
Works perfectly on medium/large screens but once I get too small, the captions just disappear altogether. How can I keep the captions on smaller screens?
<div class = "carousel-inner">
<div class = "carousel-item active">
<img class = "d-block carousel-image" src = "assets/translate-trimmed.gif" alt = "GIF of Sketchy translating objects.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">Translate</h5>
<p class = "feature-detail">
Using the "Select Shape" option, user can move shapes around the canvas. Translation is controlled by dragging the mouse across the screen.
</p>
</div>
</div>
<div class = "carousel-item">
<img class = "d-block carousel-image" src = "assets/raise-lower-trimmed.gif" alt = "GIF of Sketchy raising/lowering layers.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">
Raise/Lower
</h5>
<p class = "feature-detail">
The "Raise" and "Lower" buttons can move shapes up or down in the list of layers. Layers are preserved even after saving/loading.
</p>
</div>
</div>
For CSS, I'm using the following relevant stuff:
.carousel-item .carousel-caption {
position: static;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
margin-bottom: 10px;
}
Any ideas? I can provide more code but the project is pretty long and I don't think anything else is messing with it.
Answered my own question! Needed to remove d-md-block and d-none from each of the div of class "carousel-caption". See here for more info.
Related
I'm a beginner web developer learning front end development. Recently I was working on a project from front end mentor, It has a functionality which, if the name of a tab is clicked the content will be updated. I tried, But it's not working.
<section class="features">
<div>
<h2>Features</h2>
<p>Our aim is to make it quick and easy for you to access your favourite websites.
Your bookmarks sync between your devices so you can access them on the go.</p>
</div>
</section>
<section id="allTabs" class="allTabs">
<div class="btn-container">
<button class="tab-btn active" id="tab1">Simple Bookmarking</button>
<button class="tab-btn" id="tab2">Speedy Searching</button>
<button class="tab-btn" id="tab3">Easy Sharing</button>
</div>
<div class="tab active" id="tab1">
<img class="tab-img" src="./images/illustration-features-tab-1.svg" alt="">
<article>
<h3 class="tab-title">Bookmark in one click</h3>
<p class="tab-text">Organize your bookmarks however you like. Our simple drag-and-drop interface
gives you complete control over how you manage your favourite sites.</p>
<button class="tab-btn-more-info">More Info</button>
</article>
</div>
<div class="tab" id="tab2">
<img class="tab-img" src="./images/illustration-features-tab-2.svg" alt="">
<article>
<h3 class="tab-title">Intelligent search</h3>
<p class="tab-text">Our powerful search feature will help you find saved sites in no time at all.
No need to trawl through all of your bookmarks.</p>
<button class="tab-btn-more-info">More Info</button>
</article>
</div>
<div class="tab" id="tab3">
<img class="tab-img" src="./images/illustration-features-tab-3.svg" alt="">
<article>
<h3 class="tab-title">Share your bookmarks</h3>
<p class="tab-text">Easily share your bookmarks and collections with others. Create a shareable
link that you can send at the click of a button.</p>
<button class="tab-btn-more-info">More Info</button>
</article>
</div>
</section>
.tab {
display: none;
}
.tab-btn.active {
border-bottom: 3px solid hsl(0, 94%, 66%);
}
.tab.active {
display: flex;
margin-left: 4.2rem;
margin-right: 4.2rem;
}
const allTabs = document.querySelector(".allTabs");
const btnsAll = document.querySelectorAll(".tab-btn");
const articles = document.querySelectorAll(".tab");
allTabs.addEventListener("click", function (e) {
const id = e.target.dataset.id;
if (id) {
// remove active from other buttons
btnsAll.forEach(function (btn) {
btn.classList.remove("active");
e.target.classList.add("active");
});
// hide other all articles
articles.forEach(function (article) {
article.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
}
});
This is the code. Can anyone fix this.This CSS code adds styles to the active tabs and their corresponding articles. When a tab is clicked, the .active class is added to both the .tab-btn button and the .tab article, which triggers the styles specified in this CSS code.
The styles included in this code are:
border-bottom: 3px solid hsl(0, 94%, 66%);: Adds a colored bottom border to the active tab button to indicate which tab is currently selected.
margin-left: 4.2rem; margin-right: 4.2rem; display: flex;: Adds some margin to the left and right of the active tab article, and sets its display to flex to allow for more flexible positioning.
display: block; justify-content: left;: Sets the display to block for the active article and aligns its content to the left.
text-align: left; display: block; margin-top: 6rem; padding-left: 3rem;: Adds some margin and padding to the left of the active article's title and aligns it to the left.
text-align: left; padding-left: 1.4rem;: Aligns the active article's text to the left and adds some padding to its left.
display: block; margin-left: 3rem; margin-top: 2rem;: Positions the "More Info" button for the active article by adding some margin to its left and top.
This is a piece of HTML code that defines a section with the id "alltabs" and the class "allTabs". Inside this section, there is a container with three buttons that have the class "tab-btn" and the ids "tab1", "tab2", and "tab3". The first button has the class "active" which indicates it is the default active tab.
Each button represents a feature and when a user clicks on one of them, it activates the corresponding tab, which has the same id as the button. The tab contains an image and an article with a title, a paragraph of text, and a button with the class "tab-btn-more-info".
The purpose of this code is likely to create a user interface for a website or application that allows users to manage their bookmarks by providing features such as one-click bookmarking, intelligent search, and easy sharing. The tab system provides a way to present and switch between different features without cluttering the interface.
The only mistake that you are doing is you are using id instead of data-id on the buttons so it should be
CODESANDBOX DEMO
<div class="btn-container">
// CHANGE data-id instead of id
<button class="tab-btn active" data-id="tab1">Simple Bookmarking</button>
<button class="tab-btn" data-id="tab2">Speedy Searching</button>
<button class="tab-btn" data-id="tab3">Easy Sharing</button>
</div>
Here is a picture of my Title and Image. As you can see, there is space above the Title and the blue line. However, if there is no Title, then the space above the Title is gone and the images are now closer to the blue line, example here. How can I still keep the space above the title, even if there is no title? Basically, I don't want my images to move up closer to the blue line, even if there is no Title, I want that space to remain in place.
I tried applying min-height on the title class, but still there is no space, when there is no header
Here is my HTML:
<div class = "myComponentWrapper">
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
First of all, you need to be careful with your code:
Use kebab-case for CSS class names
Use double space for indentation
Don't add spaces around = when setting an attribute
Now, to solve your problem, I think all you need to do is to reset the margin for the h2 element to make sure that the total height h2 + margin is smaller than the min-height you set for the title container.
Try this and see if it solves your problem:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="my-component-wrapper">
<div class="my-container">
<div class="title">
<h2 class="head-title">This my Header</h2>
</div>
</div>
<div class="image">
<img
class="my-image"
src="https://via.placeholder.com/800x200"
alt=""
/>
</div>
</div>
</body>
</html>
/* style.css */
body {
margin: 0;
padding: 0;
background-color: aqua;
}
.my-image {
width: 100%;
}
.title {
min-height: 60px;
}
.head-title {
margin: 0;
padding: 10px 0;
}
There could be multiple ways to do it. I am going to describe one that I find simple.
Use conditional margins
You can find out(by inspecting) how much height the header takes plus the gap between the header and the image and then what you can do is apply conditional margin top to the .image class to achieve it.
Assuming the height of header + gap is 40px and the gap itself is 20px, here's what you can do.
/* We give this margin-top by default. This includes header height + gap*/
.image {
margin-top: 40px;
}
/* If there's myContainer div, which i am assuming only comes in when you have the header, we reduce that margin top to 20px to compensate for the header that exists.*/
.myContainer + .image {
margin-top: 20px;
}
You could also give a specific height to your header element and then this calculation would become a little easier for you instead of finding the taken up vertical space by inspecting.
NOTE: you also need to worry about the line-height of the h2 element if you aren't specifying a particular height for it. In that case, you need to add the computed line-height along with the gap between the header and the image and then use that as the margin-top instead of 40px as shown above.
Update:
If the assumptions I made are wrong, then you can't use the sibling selector to apply those rules. In that case you need to either change your markup to make the header and the image as siblings or may be choose a more complicated route and use JavaScript(not preferred).
Semantically, I would like to keep them as siblings if I can(assuming I have control over the markup generation). In that scenario, it would look like this.
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
Then I would use the same sibling selector trick to get the thing done.
JavaScript Way
If you do not have control over markup generation, you can use JS to conditionally apply the margins.
// Rough example of what you can do assuming the height of header is 20px.
// If you want to find out the height of header dynamically, use
// ```header.offsetHeight``` and add that with 20px(assumed gap height) and apply that as margin top.
const header = document.querySelector(".headTitle");
const image = document.querySelector(".image");
if(header) {
image.style.marginTop = '20px';
} else {
image.style.marginTop = '40px';
}
Set min-height value for your title that would be equivalent to it's line-height value. In such a way space for your title won't collapse even without text content.
.headTitle {
min-height: 40px;
line-height: 40px; // set these values as you want, they just need to be equal
}
<div class = "myComponentWrapper">
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
https://leiacarts.github.io/index.html
https://codepen.io/leiacarts/pen/PoqRxNZ
I'm trying to get images to show in the red portions and to stay within the content div, but any time I add images, the layout breaks. I would really appreciate some help with these two things I want to achieve and thank you in advance:
1.) keep images constrained to and auto resizable within the (red) content div
2.) hide the images when the section is "shut" onclick.
HTML:
<div class="section">
<div class="bookmark">↑ ten ↔ sion ↓</div>
<div class="content"><p></p>
<!-- <div class="space"></div> -->
<!-- <img class="fit" src="images/ziptiesmall.png">
<img class="fit" src="images/ziptiesmall2.png">
<img class="fit" src="images/ziptiesmall3.png"> -->
</div>
</div>
the JavaScript:
var sections = document.querySelectorAll(".section")
sections.forEach(function(section) {
section.addEventListener("click", expandSection);
})
function expandSection(event) {
let section = (event.target.classList.contains("section")) ? event.target : event.target.parentNode;
sections.forEach(function(section) {
section.classList.remove("open")
})
section.classList.add("open");
}
I just added this class to the rest of the divs which didnt have any images on them, hence the reason for them to show the red content div. Remove the 100%, the image text in between every column as well and create ids for every column and add background image to them and you are good to go :).
.content.bg.zip {
margin-left: 40px;
/* width: 100%; */
background-color: #000;
background-image: url(images/ziptiepattern.png);
background-repeat: repeat;
}
I need help on creating a vertical thumbnail with three images on display with prev. and next buttons to display the other images. These images are looped from a database. The image below is a preview of what I would like to have. Like for example I have 5 images, my page should display 1st 2nd and 3rd images. Then by clicking next button it should hide 1st image and display only 2nd, 3rd, and 4th images. Any help would be appreciated.
so far, this is what i've accomplished.
I just hide the extra images using css "overflow:hidden". I don't know how to add previous and next buttons to bring them up.
This is some of my codes:
{foreach from=$images item=i name=images}
{if $smarty.foreach.images.iteration <= 16 }
<div class="thumbnail col-md-12 col-sm-12 col-xs-12"><a href="{$i.image_url|amp}" thumb="{$i.image_url|amp}" data-fancybox-group="gallery" class="fancybox" {if $smarty.foreach.images.iteration eq 1} id="first_icon"{/if} onclick="return {if $config.Detailed_Product_Images.is_jqzoom eq 'Y'}false{else}dicon_click({$smarty.foreach.images.iteration}, '{$config.Detailed_Product_Images.det_slideshow_delay}', '{$images_counter}');{/if}" {if $config.Detailed_Product_Images.is_rollover eq 'Y'} onmouseover="func_mouse_over(this, {$i.thbn_image_x}, {$i.thbn_image_y});"{/if} target="_blank">
<img src="{$i.image_url|amp}" alt="" >
</a></div>
{/if}
{/foreach}
This part is for displaying the thumbnail only. Don't mind the href portion.
Here's an updated answer. It's a little tricky since you have to fiddle with the DOM to get the images to scroll around in a carousel fashion. What this does is gets the thumbnail images and shows the first three, while hiding the rest.
Then, each time the next button is clicked, it removes the first image from the DOM and slams it on the end of the list, then shows the first three images while hiding the rest.
So you really don't need an array, but you kinda have the same idea going: take the first thing off, put it on the end, then show the first three and hide the rest.
EDIT: I realized we don't need to use JavaScript to show/hide the elements, it's much simpler with CSS. Just remove the first child, append him to the end and let CSS display the first 3 children.
var thumbs = document.querySelector('.thumbs');
var next = document.querySelector('button');
next.addEventListener('click', function() {
var child = thumbs.removeChild(thumbs.firstElementChild);
thumbs.appendChild(child);
});
.thumb {
width: 100px;
height: 100px;
border: 1px solid black;
font-family: sans-serif;
text-align: center;
line-height: 100px;
margin: 10px;
display: none;
}
.thumb:nth-child(-n+3) {
display: block;
}
<div class="thumbs">
<div class="thumb">
img 1
</div>
<div class="thumb">
img 2
</div>
<div class="thumb">
img 3
</div>
<div class="thumb">
img 4
</div>
<div class="thumb">
img 5
</div>
</div>
<button>
Next
</button>
Here's an example of an image gallery that was used to answer a different question, but you can see the idea with the "Next" button.
https://jsfiddle.net/subterrane/bb196sts/
button.addEventListener('click', function() {
for (var ix = 0; ix < images.length; ix++) {
images[ix].style.display = 'none';
}
index++;
if (index >= images.length) index = 0;
images[index].style.display = 'block';
});
You add an event handler to your button(s) and show/hide the images appropriately.
I want the images to slide when I move my cursor over the image. Let's say I will have 3 pictures.
The images will slide only if I am on the DIV.
I am pretty sure that this could be achieved with carousel but I am not sure if it is the best way.
My code
<div class="container products">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
<div class="col-md-4">
<!-- Reveal Up Full -->
<div class="image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3" class="img-responsive"/>
<span class="title">Caption <br / ><br / > with some more info</span>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://codepen.io/anon/pen/xbbNPM
Also I want the div to be clickable when my mouse is over.
I am pretty sure that this could be achieved with carousel but I am
not sure if it is the best way.
Why not? Because of you already use Bootstrap you should use its features in the first place.
also read http://getbootstrap.com/javascript/#carousel and find out that you can use multiple carousels on the same page:
Carousels require the use of an id on the outermost container (the
.carousel) for carousel controls to function properly. When adding
multiple carousels, or when changing a carousel's id, be sure to
update the relevant controls.
Cause you want to slide the carousal on mouseover(hover) you do not need any control, each of your carousels can code like that shown below:
<div class="col-md-4">
<!-- Reveal Up Full -->
<div id="carouse1" class="carousel slide" data-ride="carousel" data-interval="false">
<div class=" carousel-inner" role="listbox">
<div class="item active image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/1">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/2">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
<div class="item image revealUpFull">
<img src="http://lorempixel.com/360/180/technics/3">
<div class="carousel-caption">>Caption <br / ><br / > with some more info</div>
</div>
</div>
</div>
</div>
Notice that i'm not sure why you wrap your 3 md-4 columns in a md-12 column, you do not need a img-responsive class for your carousel's images.
After creating your HTML you should create a JavaScript trigger for the mouseover (i use mouse enter here):
<script>
$('.carousel').on('mouseenter',function(){ $( this ).carousel('next');})
</script>
Also I want the div to be clickable when my mouse is over.
As you can see in the above i have wrapped the images in a a tag. The only possible issue left will be that the .carousel-caption is not clickable and overlay the images. Use the following CSS code to make the .carousel-caption clickable:
<style>
.carousel-caption {
pointer-events: none;
}
</style>
Demo: http://www.bootply.com/bmLVbymbhj
update
The caption doesn't slide up anymore. Actually code has changed dramatically. I think I > need to integrate it to your code.
Yes, you should integrate the revealUpFull class. Let me know if you found any troubles by doing this, or formulate a new question on SO.
You should use something like that shown below:
.carousel-caption {
width: 100%;
height: 100%;
position: absolute;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: 5px 0 4px;
font-size: 14px;
color: white;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
/* make image clickable */
pointer-events: none;
/* override bootstrap */
left: 0;
right: 0;
}
/* REVEAL UP FULL */
div.image.revealUpFull .carousel-caption {
height: 100%;
width: 100%;
bottom: -150px;
}
div.image.revealUpFull:hover img {
top: 0;
}
div.image.revealUpFull:hover .carousel-caption {
bottom: 0;
}
.carousel-caption {
pointer-events: none;
}
The left and right arrows which helps to slide are removed. This is what I want but
their blocks remains. So there is a space on the left and right.
I expect that the above issue is not related to the removed arrows but will be due to the size of the images. You are using image with a 360px width. As mentioned before the carousal's images are responsive by default. The CSS code sets a max-width:100% for these images, which means that they should not display larger than their original size. You can solve this by using larger images or give the image a with of 100% (mostly scaling up images will have quality issues). You can use the code that shown beneath:
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
max-width: none;
width: 100%;
}
What I want is when my mouse is over the DIV, 3 pictures will slide automatically with
infinite loop. Between each of them there will be 2 secs
In fact you should be able to use the following:
$('.carousel').on('mouseenter',function(){ $( this ).carousel('cycle',{interval:2000});});
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pauze')});});
But the carsousel already pause on mouseenter. I will post a solution for that later on.
The carousel api has a pause option (hover by default), you can set this option to an empty string to prevent the carousel stop cycling on hover.
You should remove the carousel data-attribute in your HTML to enable explicit JavaScript initialization:
The data-ride="carousel" attribute is used to mark a carousel as animating starting at page >load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript >initialization of the same carousel.
After that you can use:
$('.carousel').on('mouseenter',function(){ $( this ).carousel({interval:2000,pause:''}); });
$('.carousel').on('mouseleave',function(){ $( this ).carousel('pause'); });
When putting above three point together you will get something look like that show in the following demo: http://www.bootply.com/acGNORR3it
It looks like we don't need carousel for this simple feature. Javascript way will be easiest and fastest.
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/750/375/sports/1/";
path[1] = "http://lorempixel.com/750/375/sports/2/";
path[2] = "http://lorempixel.com/750/375/sports/3/";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",3000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="" width="400" />
Demo: http://codepen.io/anon/pen/emmqYJ
Let me know if any easier solution exists.