I have a deck of cards in my Bootstrap 4 page. I want to align these button to have a nicer look. How can we do that?
Here is an image:
And here is the demo : http://7freres.com/new
The table dosen't seem to works, as they are separated.
Thanls
You can make all the card-text elements to have the same height.
One way to do it can be through javascript. Write a function like this:
document.addEventListener("DOMContentLoaded", function(event) {
adjustCardTextHeights();
});
function adjustCardTextHeights() {
var heights = $(".card-text").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".card-text").height(maxHeight);
}
Or with jQuery:
$( document ).ready(function() {
adjustCardTextHeights();
});
function adjustCardTextHeights() {
var heights = $(".card-text").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".card-text").height(maxHeight);
}
This gets you:
You could set position: absolute; bottom: 20px; for the buttons and add an extra padding-bottom: 50px; to the card-block
Related
I have this code. I print the content of a DIV via its ID, but omit an image. I would like your support to know how to make that image be included. (the image is also inside the DIV)
impresion = The DIV to print
function printDiv(impresion) {
var contenido= document.getElementById(impresion).innerHTML;
var contenidoOriginal= document.body.innerHTML;
document.body.innerHTML = contenido;
window.print();
document.body.innerHTML = contenidoOriginal;
}
I have tried many things and nothing works
Here is a simple solution using just CSS:
#media print {
body * {
visibility: hidden;
}
#impresion, #impresion * {
visibility: visible;
}
#impresion {
position: absolute;
left: 0;
top: 0;
}
}
Try this, using a div with id="impresion":
function Print() {
let data = document.getElementById("impresion").innerHTML;
let mywindow = window.open('', 'new div', 'height=400,width=600');
mywindow.document.write('<html><head><title></title></head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
setTimeout(function(){mywindow.print()},1000);
return true;
}
var images = ["https://dummyimage.com/600x400/c4c4c4/0011ff.jpg&text=Image+1", "https://dummyimage.com/600x400/c4c4c4/ff0000.jpg&text=Image+2", "https://dummyimage.com/600x400/c4c4c4/fffb00.jpg&text=Image+3"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 2000);
});
p {padding: 75px 15px 15px 15px;text-align: center;}
#dvImage {background-size:cover;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvImage" style="width: 600px;height: 400px;">
<div id="text">
<p>How do I get this text to stop fading?</p>
</div>
</div>
I'm trying to create a background image rotator, that changes images and fades between each image. I've almost got it, but on the site that I'm using it, has a nested image and text, which is also fading. I only want it to fade the background images and not any of the nested div's.
I created an example here with a nested div (and paragraph tag with text).
https://jsfiddle.net/bobthegoat2001/3hrgua82/6/
Does anyone know how I could fix this? Any help would be great. Thanks!
<p style="display:none">I guess Stack Overflow wanted some code, so I just put some random here. The jsfiddle will make more since.</p>
You can use position absolute and then set z-index to -1 but you need to move nested div's out of your div #dvImage
var images = ["https://dummyimage.com/600x400/c4c4c4/0011ff.jpg&text=Image+1", "https://dummyimage.com/600x400/c4c4c4/ff0000.jpg&text=Image+2", "https://dummyimage.com/600x400/c4c4c4/fffb00.jpg&text=Image+3"];
$(function () {
var i = 0;
$("#dvImage").css("background-image", "url(" + images[i] + ")");
setInterval(function () {
i++;
if (i == images.length) {
i = 0;
}
$("#dvImage").fadeOut("slow", function () {
$(this).css("background-image", "url(" + images[i] + ")");
$(this).fadeIn("slow");
});
}, 2000);
});
p {padding: 75px 15px 15px 15px;text-align: center;}
#dvImage {position:absolute; z-index:-1;width:600px; height:400px; background-size:cover;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvImage"></div>
<div id="text">
<p>How do I get this text to stop fading?</p>
</div>
I have made this:
https://jsfiddle.net/f69gu8ss/2/
When I do position:fixed the header goes outside the parent. And also when I scroll it goes to the top of the page. I want it to stick below the image. What do I give to top to make it stick below the image.. relative to its sibling?
In your css, add this:
.sticky {
position: fixed;
width: inherit;
}
Also, jQuery is used here:
$(document).ready(function() {
var stickyNavTop = $('.header').offset().top;
var stickyTopNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
} else {
$('.header').removeClass('sticky');
}
};
stickyTopNav();
$(window).scroll(function() {
stickyTopNav();
});
});
See this: https://jsfiddle.net/f69gu8ss/5/
Tough this issue is similar to many others I found here,I cannot find a proper answer that can work to me.
All of my content is loaded using .ajax() method, and events are handled using .on().
First I've tried to stop the propagation of the function using .stopPropagation(),it works in a way.Its closing the div,but after that any element I press it still using the closing function.I've found out by searching on the web that I need to use .off() method.
Here is the code(made it shorter):
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").css({"display":"block"});
$("html").on("click",function(){
$(".cautareProdNouNC").css("display","none");
});
});
$(".cautareProdNouNC").click(function(e){
e.stopPropagation();
});
$("#pnNotaCom").click(function(e){
e.stopPropagation();
});
The div I am showing/hiding is .cautareProdNouNC
This is how I would do it. When you activate your div, you activate invisible div that fulfills whole body. Clicking on that div hides them both.
HTML
<div class="cautareProdNouNC display_none"></div>
<div class="overlay display_none"></div><!--place it in body-->
CSS
.cautareProdNouNC {
position relative; /*this div needs to be above overlay so needs z-index*/
z-index: 200;
}
.display_none {
display: none;
}
.overlay {
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
jquery
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").removeClass('display_none');
$(".overlay").removeClass('display_none');
});
$(".overlay").on("click",function(){
$(this).addClass('display_none');
$(".cautareProdNouNC").addClass('display_none');
}
$(document).delegate('click', function(){
if($('#Div2Hide').get(0) != $(this).get(0)){
$('#Div2Hide').hide();
e.stopPropagation();
}
});
try this
$(document).mouseup(function (e) {
var container = $(your hiding div selector here);
if (!container.is(e.target) // if the target of the click isn't the container...
&&
container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
I hope I understand your question right!
What about this DEMO:
$(document).ready(function() {
var div_hide = false;
$("#one").on("click",function(e){
e.stopPropagation();
alert("You click the div");
$(document).on("click",function(){
if (div_hide === false) { // You can click once after that
// we set "div_hide" to "true"
$(".hide_me").hide();
div_hide = true;
}
return false;
});
});
});
I have a div containing simple text. I should show only 3 lines of that text with showMore link. on clicking of showMore link I need to show all the text inside it with showLess link. Right now I am using overflow property to achieve this. But have a small problem that I should show "showMore" link immediately after the text. So how can I position the hyperlink inside the text?
My Code
jQuery(document).ready(function () {
jQuery('.showMore').click(function (event) {
var contentDiv = jQuery('.contentDiv');
contentDiv[0].style.height = 'auto';
jQuery(event.target).hide();
jQuery('.showLess').show();
});
jQuery('.showLess').click(function (event) {
var contentDiv = jQuery('.contentDiv');
var lineHeight = getLineHeight(contentDiv[0]);
contentDiv[0].style.height = lineHeight * 3 + 'px';
jQuery(event.target).hide();
jQuery('.showMore').show();
});
});
<!doctype html>
<html>
<body >
<div>
<div class = "contentDiv">
some content <br r1<br> r2<br> r3 <br> r4<br> r5
</div>
Show More
Show Less
</div>
</body>
</html>
.contentDiv a {
float : right;
}
.contentDiv {
overflow: hidden;
height:3.6em;
background:#ccc;
font-size : 12pt ;
font-family :Courier;
}
.showMore {
float: right;
}
.showLess {
position: relative;
float: right;
display : none;
margin-bottom : 5px
}
Just one of the million ways you could achieve this: fiddle
HTML
<div id="text">Lots of text..</div>
Show More
Show Less
CSS
#text {height:55px;overflow:hidden;}
#showless {display:none;}
jQuery
$('#showmore').on('click', function(e){
$('#text').css('overflow', 'visible').css('height', 'auto');
$('#showless').show();
$(this).hide();
e.preventDefault();
});
$('#showless').on('click', function(e){
$('#text').css('overflow', 'hidden').css('height', '55px');
$('#showmore').show();
$(this).hide();
e.preventDefault();
});
To position the 'show more' in the bottom right (as requested in your follow-up comment), put the <a> tag inside the div and position it absolutely. Fiddle
HTML
<div id="text">Lots of text..
Show More
</div>
Show Less
CSS
#text {height:55px;overflow:hidden;position:relative;}
#showmore {position:absolute;bottom:0;right:0;background:#fff;padding-left:10px;}
#showless{display:none;}