I have a hidden popout menu that toggles its visibility on the click of a button. When the popout menu becomes visible it displaces the main content to the bottom of the page. The idea would be to have the popout menu is displayed over the content div.
HTML:
<!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
<div class = "menu_nav_inner align-center pad-2">
<ul>
<li><button class="static_nav_btn">THE MISSION</button></li>
<li><button class="static_nav_btn">OUR WORK</button></li>
<li><button class="static_nav_btn">WHO WE ARE</button></li>
<li><button class="static_nav_btn">MISS ROSIE</button></li>
<li><button class="static_nav_btn">SCHOLARSHIP</button></li>
<li><button class="static_nav_btn">CONTACT</button></li>
</ul>
<div class="box">
DONATE
</div>
</div>
</div>
<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
<div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!------- Main body ------->
<main id="content" class="flex-grow">
<div id="homepage-banner">
<div class="page-banner">
<h2 class="small-hidden">
FOUNDATION
</h2>
</div>
</div>
</main>
CSS:
(Popout menu)
.popout_navbar_align_center {
background-image: url("Assets/Textures/sandpaper.png");
background-color:;
width: 240px;
height: 100%;
top: 0;
left: 0;
display: none;
overflow-x: hidden;
}
.popout_navbar_align_center .menu_nav_inner {
padding-top: 60px;
}
**JAVASCRIPT: **
$("#sideNavId").on("click", function() {
if($(".popout_navbar_align_center").is(":visible"))
{
$(".popout_navbar_align_center").hide("slow");
}
else {
$(".popout_navbar_align_center").show("slow");
}
});
I've tried manipulating the css for the main content div but everything I've tried doesn't seem to work in regards to that approach. I'm not sure which divs properties should be manipulated to get the desired effect.
You can try to use the top and left css values along with position: absolute to achieve your popup not moving the rest of the content, but instead floating in front of it
I think I am doing this a slightly silly way, and so am happy to take suggestions for a new approach.
I am creating a accordion style dropdown nav for mobile but I want the target divs to be outside of the panel group. My code is of the form:
<div class='panel-group' id='accordian'>
<div class='mystyles'>
<ul>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-one-id'>Item 1</a>
</div>
</li>
.... more list items here...
</ul
</div>
<!-- the collapsed divs start here -->
<div id='target-one-id' class='clearfix collapse panel-collapse'>
...content
</div>
... more target divs here
</div> <!-- end panel group -->
I have chosen to do this as I need to style the links differently to the collapsed divs and I want them to appear lower down the page. It does generally work, however, to make a target div collapse you have to click on it's parent link. I want the child to collapse whenever any of the list links are clicked. Or in other words I want only one target div visible at any one time.
I may just not understand bootstrap but how would I go about doing this?
EDIT: A bad solution
So I have a slightly rough solution where I add js code of the form:
$("#target-one").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-three").collapse('hide');
});
This works but the transition animation is jerky and the targets being closed appear to reopen and close as they are hidden. What is a better solution?
$("#target-one").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-three").collapse('hide');
});
$("#target-two").on("show.bs.collapse", function(){
$("#target-one").collapse('hide');
$("#target-three").collapse('hide');
});
$("#target-three").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-one").collapse('hide');
});
.mystyles ul {
list-style-type:none;
margin: 0;
padding: 0;
}
.mystyles ul li {
display:inline-block;
}
.mycontent {
background-color:orange;
}
.one {
height:300px;
background-color:pink;
}
.two {
width:200px;
height:500px;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class='panel-group' id='accordian'>
<div class='mystyles'>
<ul>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-one'>Item 1</a>
</div>
</li>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-two'>Item 2</a>
</div>
</li>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-three'>Item 3</a>
</div>
</li>
</ul </div>
<!-- the collapsed divs start here -->
<div id='target-one' class='clearfix collapse panel-collapse'>
<div class='mycontent one'>
content...
</div>
</div>
<div id='target-two' class='clearfix collapse panel-collapse'>
<div class='mycontent two'>
content...
</div>
</div>
<div id='target-three' class='clearfix collapse panel-collapse'>
<div class='mycontent three'>
content...
</div>
</div>
</div>
<!-- end panel group -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Ok so the snippet seems to work properly... I am now a little confused. My actual code is almost identical except for some dynamic content which is inserted into the target divs.
Could resizing of the hidden diff cause problems? I do not know how to simulate that in the snippet.
I am using showbiz jQuery carousel in my products page. When I clicked in view more button its showing a unwanted border on carousel in chrome only. How can I remove that??
here my code
<div style="padding:0px 0px 0px 0px;" align="center">
<div class="example-wrapper">
<div id="services-example-1" class="theme1">
<ul>
<
</ul>
<!-- ############### - TOOLBAR (LEFT/RIGHT) BUTTONS - ############### -->
<div class="toolbar">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
It's a focus element: just add it into your css:
*:focus{
outline:0px;
}
I hate this issues, xDDDDDD
An unwanted borderborder: 1px #eee solid; is applied to the div in the rendered html. It must have been generated by the jquery plugin. Search for it in the plugin and just delete it.
I have been reading through some guides and some posts on here but cant seem to put it all together for my situation, I haven't played with Jquery for such a long time ive forgotten how it all works.
I have an image .toggle-plus which when clicked should reveal the content within .hide and also change the image class to .toggle-minus.
My layout is like so
<div class="widget-header">
<h3 class="title">Header 1</h3>
<span class="toggle-plus"></span>
</div>
<address class="vcard hide">
<!--Content Here-->
</address>
<div class="widget-header">
<h3 class="title">Header 2</h3>
<span class="toggle-plus"></span>
</div>
<div class="share-items hide">
<!--content here -->
</div>
<div class="widget-header">
<h3 class="title">Header 3</h3>
<span class="toggle-plus"></span>
</div>
<ul class="opening-hours hide">
<!--content here -->
</ul>
CSS
.hide {
display:none
}
.toggle-plus {
background-image:url('/assets/toggle-open.png');
width:38px;
height:38px;
position: absolute;
right: 10px;
top: 12px;
cursor: pointer;
}
.toggle-minus {
background-image:url('/assets/toggle-close.png');
width:38px;
height:38px;
position: absolute;
right: 10px;
top: 12px;
cursor: pointer;
}
Could anyone help me on this one and explain the process, feel like im learning Jquery again
Thanks
Something similar to:
$('.widget-header').on('click', '.toggle-plus, .toggle-minus' function(e){
// you can toggle class names here
$(this).parents('.widget-header:eq(0)').next('.hide').slideToggle();
});
It would be a lot easier if you can combine your html so that there's more of a structural relationship between the hidden DIVs and the headers etc.
Please take a look at the following image, we are using bootstrap carousel to rotate the images.
However, when the window width is large, the image doesn't align with the border properly.
But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.
Can someone explain why carousel is behaving differently?
Is this anything to do with Image size or some bootstrap config is missing?
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
The solution is to put this CSS code into your custom CSS file:
.carousel-inner > .item > img {
margin: 0 auto;
}
With bootstrap 3, just add the responsive and center classes:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
This automatically does image resizing, and centers the picture.
Edit:
With bootstrap 4, just add the img-fluid class
<img class="img-fluid" src="img/....jpg">
I faced the same problem and solved it this way:
It's possible to insert non-image content to Carousel, so we can use it.
You should first insert div.inner-item (where you will make center alignment), and then insert image inside this div.
Here is my code (Ruby):
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "couples/1.jpg" %>
</div>
<% (2..55).each do |t|%>
<div class="item">
<div class='inner-item'>
<%= image_tag "couples/#{t}.jpg" %>
</div>
</div>
<% end -%>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
And my css-code(.scss):
.inner-item {
text-align: center;
img {
margin: 0 auto;
}
}
While vekozlov's answer will work in Bootstrap 3 to center your image, it will break when the carousel is scaled down: the image retains its size instead of scaling down with the carousel.
Instead, do this on the top-level carousel div:
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
This will center the entire carousel and prevent it from growing beyond the width of your images (i.e. 900 px or whatever you want to set it to). However, when the carousel is scaled down the images scale down with it.
You should put this styling info in your CSS/LESS file, of course.
In Bootstrap 4, you can add mx-auto class to your img tag.
For instance, if your image has a width of 75%, it should look like this:
<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">
Bootstrap will automatically translate mx-auto to:
ml-auto, .mx-auto {
margin-left: auto !important;
}
.mr-auto, .mx-auto {
margin-right: auto !important;
}
Does your images have exactly a 460px width as the span6 ? In my case, with different image sizes, I put a height attribute on my images to be sure they are all the same height and the carousel don't resize between images.
In your case, try to set a height so the ratio between this height and the width of your carousel-inner div is the same as the aspectRatio of your images
It could have something to do with your styles. In my case, I am using a link within the parent "item" div, so I had to change my stylesheet to say the following:
.carousel .item a > img {
display: block;
line-height: 1;
}
under the preexisting boostrap code:
.carousel .item > img {
display: block;
line-height: 1;
}
and my image looks like:
<div class="active item" id="2"><img src="rimages/2.jpg"><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>
I think I have a solution:
In your personal style sheet page, assign the width & height to match your image dimensions.
Create an additional separate "class" on that top div that appropriates the space with spans...(Shown below)
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
Without touching the bootstrap.css, in your own style sheet, call "carousel"(or whatever label you choose) to match the width and height of your original pix!
.carousel {
width: 320px;
height: 200px;
}
So in my case, I am using small 320x200 images to carousel with. There is probably preset dimensions in the bootstrap.css, but I don't like changing that so I can try to stay current with future releases. Hope this helps~~
I am facing the same problem with you. Based on the hint of #thuliha, the following codes has solved my issues.
In the html file, modify as the following sample:
<img class="img-responsive center-block" src=".....png" alt="Third slide">
In the carousel.css, modify the class:
.carousel .item {
text-align: center;
height: 470px;
background-color: #777;
}
Try this
.item img{
max-height: 300px;
margin: auto;
}
#Art L. Richards 's solution didn't work out.
now in bootstrap.css, original code has become like this.
.carousel .item > img {
display: block;
line-height: 1;
}
#rnaka530 's code would break the fluid feature of bootstrap.
I don't have a good solution but I did fix it. I observed the bootstrap's carousel example very carefully http://twitter.github.com/bootstrap/javascript.html#carousel.
I find out that img width has to be larger than the grid width. In span9, width is up to 870px, so you have to prepare a image larger than 870px. If you have more container outside the img, as all the container has border or margin something, you can use image with smaller width.
For the carousel, I believe all images have to be exactly the same height and width.
Also, when you refer back to the scaffolding page from bootstrap, I'm pretty sure that span16 = 940px. With this in mind, I think we can assume that if you have a
<div class="row">
<div class="span4">
<!--left content div guessing around 235px in width -->
</div>
<div class="span8">
<!--right content div guessing around 470px in width -->
</div>
</div>
So yes, you have to be careful when setting the spans space within a row because if the image width is to large, it will send your div over into the next "row" and that is no fun :P
Link 1
Insert this on the css parent div class where your carousel is.
<div class="parent_div">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/slider_1.png" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
CSS
.parent_div {
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}