Hi
My name is frank, I just copied and pasted a few html files with related css file to a new place and after while the the slideshow stopped working, I don’t understand, can I get help?
software2
so I would like to fix the slideshow issue, thank you.
A link to the your site page would help members
to assess your problem and possibly resolve it. 
coothead
1 Like
Is this a pure CSS slider? There is no JavaScript in your Codepen, although you’ve tagged your topic “jquery”.
1 Like
You don’t have the relevant bootstrap css, bootstrap js or jquery files in your page.
<!-- Latest compiled and minified CSS in the head -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery first, then Bootstrap JS. at end of html before closing body tag-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Add them and it will work.
You will also need to add .carousel-caption{top:0;} or the caption won’t show.
1 Like
thank you, it is working but the previous code I placed after the second box is still not working as I expect. I don’t understand why, the heights are different. the code
<div class="clearfix visible-sm-block"></div> can you help me please?thank you
It’s working for me in clearing the floats so that they do not snag.
The boxes align 2 by 2 on that smaller screen size now as they were snagging before and the third box was stuck on the right,
They have different content so the heights will be different. Bootstrap3 does not do equal height boxes. You would need bootstrap 4 for that or write your own flexbox code for those grids which would then negate the purpose of using the framework to some extent.
The only thing you can do simply is to add a minimum height to .box and hope it fits the varying content.
.box{min-height:325px}
thank you for help. I do not want to negate the purpose of the framework but modify it. That is why I need help. If anyone can help me that is really good. I looked up on the net but it is not so simple and obvious. I try my own jquery approach, I can post it as a new thread. thank you, frank
First you need to tell us what you want help with? All other questions in this thread have been answered in full.
Then you negate its purpose :). … and you still haven’t said what you want to modify?
by default meaning the heights are considered ‘fix’ so if something changes it , it causes problem. my modification idea is to find a code that makes heights flexible and following the biggest one always in the ‘row.’, indifferent how many elements are there. with other words all heights must follow the tallest one, thank you,
That’s what bootstrap 4 does out of the box. Why implement bootstrap 3 and then try to modify it to look like bootstrap4?
You can easily make equal boxes using flexbox and without a framework but to modify a floated framework and change the floats to flex is very complicated.
Here’s your codepen with the adjustments in place but you won’t understand them as they negate a lot of the bootstrap classes to make it work.
The css additions are at the bottom of the CSS and the html has the push and pull classes removed and an extra class added to .row.
The push and pull classes in bootstrap move the order of the columns but you can do that in flexbox using the order property but I will leave that to you to research.
thank you for help. is very nice, it just works, amazing.
waiting for solution, I tried also a version but it is not working as I expect, I expect the div’s to be on the same hught I don;'t understand why not. I post the code, please help me with that,thank you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div.flexi {
position: static;
width:200px;
height:100%;
border: 3px solid #73AD21;
display:inline-block;
/* float:left;
padding-bottom:100%;
margin-bottom:-100%;*/
}
.dv {
/* display:flexl;*/
position: relative;
top:0;
min-width:200px;
height:auto;
background-color:lightgreen;
display:inline-block;
}
</style>
<script>
var x = 0;
var y = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
});
y=$('#dv1').closest('.dv').height();
z=$('#dv2').height()
$('#dv1').height(z);
$(".p1").text(z);
alert(y);
});
</script>
</head>
<body>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
<p class="p1">height</p>
<div>
1
</div>
<div class="dv">
<div id="dv1" class="flexi">
This div element has position: static;
</div>
<div id="dv2" class="flexi">
1. This div element has position: static;
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.mm
2. This div element has position: static;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Why do we use it?
</div>
</div>
</body>
</html>
just an experiment to slider to make responsive div/box heights equal indifferent from content, otherwise height difference would break relevant bootstrap rules.
An inline-block element is aligned on the baseline by default so your boxes are aligned to the baseline. If you change the vertical-alignment to top they will be level. This is basic CSS which is why I keep saying you need to study the basics first.
div.flexi {
vertical-align:top
}
Please though never ever use that js code on a real website as it is nonsense when css can make equal heights easily and without a massive performance hit on the page (such as when using resize and jquery).
It is also nonsense because you do not call the routine again when the page is resized so a fluid width element would have changed its height where content has wrapped and your layout is broken. Also the page will be broken for anyone who has enlarged their text and the fixed height breaks the layout once again. You would therefore also need to write JS code that handles font resizing, element resizing and window resizing with throttling.
None of which are needed with flexbox and can be done in a few characters.
.dv{display:flex;}
div.flexi{height:auto;}
The height:100% you have in .flexi does nothing in your example and should be removed for the flexbox example. Height:100% will do nothing for most elements unless there is an unbroken chain of heights back to root. However it will break the flexbox height stretching effect so must be removed.
Indeed if height:100% had worked in your example your boxes would go all the way down to the bottom of the viewport and not expand any more or less.
Do things properly or don’t do them at all.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.