I am working on a Bootstrap-project with some anchors-links. After clicking them my css doesn't work anymore.
HTML:
<a class="navbar-brand" href="#SectionID">GoToSection</a>
<div class="jumbotron">
<div class="container">
<h3 id="SectionID">Section With ID</h3>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
CSS:
.jumbotron::before {
margin-top: -13.4505%;
top: 0;
transform: rotate(-7.73deg);
transform-origin: 100% 100% 0;
}
.jumbotron::before, .jumbotron::after {
background: white none repeat scroll 0 0;
content: " ";
display: block;
height: 0;
padding-top: 13.4505%;
position: absolute;
right: 0;
width: 100.917%;
}
*::before, *::after {
box-sizing: border-box;
}
.jumbotron::after {
top: 100%;
transform: rotate(7.73deg);
transform-origin: 100% 0 0;
}
.jumbotron {
overflow: hidden;
position: relative;
}
You can see it in this fiddle.
Afer clicking on 'GoToSelection' the .jumbotron looses it's padding-top. When I disable and then enable the property with firebug it woks again.
There is nothing wrong with CSS or HTML.
The jumbotron is not loosing its padding either. What's actually happening here is that. when you click on the link "GoToSection" which has a href value "#SectionID", it is actually scrolling to the
<h3 id="SectionID">Section With ID</h3> .
Related
I am frustrated. Really frustrated fighting the issue of background scrolling when a modal is open on mobile.
Scenario
I open a modal on mobile.
Add a .noScroll class to the body in order to prevent background scrolling. Alas, the body in the background scrolls when a modal is open. Trying to tap/move slowly on the modal sometimes starts the scrolling in the modal, which is the desired result.
I need the body to stay in position, so no positon: fixed or absolute
I have <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
I have tried setting top: document.body.getBoundingClientRect().top+"px" i.e. resolving the issue via JS
CODE:
HTML
<div id="galleryItem" class="modal_menu_item flexCenterX flexCenterY" style="display: flex;">
<div class="modal_overlay"></div>
<div class="modal_food_inner flexParent flexColumn">
<span class="modal_close"><i class="fa fa-times" aria-hidden="true"></i></span>
<div class="modal_food_info flexParent flexColumn flexCenterY">
<h2 class="modal_food_info_title noMargin noPadding text-center">Keema Samosa</h2>
<hr>
<p class="modal_food_info_body noMargin">Crisp pastry filled with minced lamb, potato and peas served with homemade chutneys</p>
<hr class="optional" style="display: block;">
<span class="menu_food_item_priceContainer text-muted flexOne noPadding">€5.50</span></div>
<img src="/pictures/55/vzrw5siuzogdeul8yaznqq4f.jpg" class="img-responsive modal_food_poster"></div>
</div>
CSS
body.noScroll {overflow: hidden;}
.modal_menu_item {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
z-index: 9999999;
-webkit-overflow-scrolling: touch;
}
.modal_overlay {
background-color: rgba(0, 0, 0, .6);
position: fixed;
width: 100%;
height: calc(100vh + 80px);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.modal_food_inner {
position: absolute;
top: 10%;
left: 0;
right: 0;
margin: 0 auto;
}
This issue seems a common one for mobiles. Though, at this point I'm somewhere between misery and desperation.
Help a programmer – Save a life
When you adding this class .noScroll try to add in css when you adding this class when open modal
body.noScroll {
overflow:hidden;
}
I am writing a bootstrap site, and want to make a sort of pop out menu from the right of the screen. This menu needs to be hidden' and when a button "Menu" is clicked it pops out of screen right, and covers whatever is on screen right. it does not push the content out of the way. Kind of like the windows 8 menu when you slide your finger from screen right.
I've thought of making a dropdown menu, since it behaves almost like I want, except for it's position. But I need to change the dropdown behaviour, So that instead of the dropdown menu popping out attached to the dropdown button, it pops out of screen right, but I can't find out how to do this.
<head>
...
<link href ="CSS/Bootstrap.min.css" rel ="stylesheet"/>
</head>
<div class="col-xs-3">
<!--some side content-->
</div>
<div class="col-xs-9">
<!--some side content-->
</div>
<div class="col-xs-12">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<li class="dropup">
<a class="dropdown-toggle" data-toggle="dropdown">Menu
<ul> class="dropdown-menu">
<li>
</li>
<li>
</li>
</ul>
</a>
</li>
</div>
</nav>
</div>
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
I have three folders in my project:
Css with bootstrap css files(bootstrap-theme, bootstrap-theme min, bootstrap, bootstrap min)
Fonts
JS with bootstrap.js and bootstrap.min.js
Please show me how to do this.
If you know of a different way of making the menu I want in bootstrap I'd love to hear it as well.
Here is a simple example to get you going:
jsFiddle Demo
Note that an id was added to the a tag that opens the menu, to make it easy for jQuery to capture the click event on that element.
In the jQuery, we are using a variable mnuOut to keep track of whether the menu is IN or OUT (visible or hidden).
Also, we use the .animate() method to animate the slide out from the right. This works by changing the css attribute right:
FROM right:-80px (slid 80px beyond the right side of the screen)
TO right:0 where the right-most edge of the myMenu DIV is flush against the right side of the screen.
HTML:
<div id="myMenu">
<div id="item1" class="submenu">Item 1</div>
<div id="item2" class="submenu">Item 2</div>
<div id="item3" class="submenu">Item 3</div>
</div>
<a id="menuTrigger" class="dropdown-toggle" data-toggle="dropdown">Menu
CSS:
#myMenu{position:fixed;top:20px;right:-80px;width:80px;height:300px;background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}
jQuery:
mnuOut=false;
$('#menuTrigger').click(function(){
if (mnuOut){
//Menu is visible, so HIDE menu
$('#myMenu').animate({
right: '-80px'
},800);
mnuOut = false;
}else{
//Menu is hidden, so SHOW menu
$('#myMenu').animate({
right: 0
},800);
mnuOut = true;
}
})
If you want your menu to cover the content make sure you add
position: absolute;
Or
position: fixed;
Then after that give it
right: 500px;
But instead of 500px use the width of your menu
And to make it popout just override the
right: 0;
Making it 0 will make it stick to the right back to its original position
What you want requires a little more than just a couple of lines of css but I think this will give you a good start. Just style according to your theme:
HTML
<div id="oneout">
<span class="onetitle">
menu
</span>
<div id="oneout_inner">
<center>
menu info here
<br>
</center>
</div>
</div>
CSS
#oneout {
z-index: 1000;
position: fixed;
top: 64px;
right: 1px;
width: 18px;
padding: 40px 0;
text-align: center;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#oneout_inner {
top: 60px;
right: -250px;
position: fixed;
width: 230px;
padding: 10px;
background: #FFFFFF;
height: auto;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
border:1px solid #333;
}
#oneout:hover {
z-index: 1000;
right: 250px;
}
#oneout:hover #oneout_inner {
z-index: 1000;
right: 0px;
}
.onetitle {
display: block;
writing-mode: lr-tb;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
right: -11px;
top: 3px;
font-family: Lucida Sans;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
}
Here is a working DEMO
I want to create a black curtain on my site, but I want it to appear only when someone click in this button:
<a href="#dailyBriefOverlay" id="dailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
</a>
I'm having trouble creating the effect that will cause it to appear only when clicked.
I created the div
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
</div>
and set the css:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
}
There is any jquery that help with that?
http://qz.com/ this site has this effect, if you click on the message icon, the window will appear.
Any help is very appreciated.
You can achieve this task with pure CSS. Use :target pseudo class for .overlay to show up only when it's targeted with URL hash.
For this you should hide .overlay initially and then use .overlay:target selector to show it. Also make sure you remove duplicated id="dailyBriefOverlay" from the link.
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
display: none; /* hide it */
}
.overlay:target {
display: block; /* show it if it's a target */
}
<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
Click
</a>
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
</div>
With this pure CSS approach it's also easy to add some nice CSS transitions. For example like in below demo.
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
transition: height .4s ease;
}
.overlay:target {
height: 100%;
}
<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
Click
</a>
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
<p>Close</p>
</div>
I assume it always shows right now.
Change your css to have the following line also:
display:none;
Now, use jQuery to show it when you click the button:
<script>
$("#dailyBriefOverlay").click(function() {
$(".overlay").show();
});
</script>
It first checks on the id (dailyBriefOverlay) of the button if it gets clicked. When it does, it sets the display:none; property to display:block of the class (overlay)
$('.btn-reservar').on('click',function(){
$('.overlay').animate({
top: 10px, // or any value you want it to go to.
display: block,
atr: val// Any other value to change to.
}, 2000); // time in MS how long the animation lasts.
});
Think that'll do the trick
$(document).ready(function () {
$("div#dailyBriefOverlay").hide();
$("a#daailyBriefOverlay").click(function(){
$("div#dailyBriefOverlay").show();
});
});
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.85);
z-index: 99999;
overflow-y: auto;
overflow-x: hidden;
padding: 0 8%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" id="dailyBriefOverlay">
<p>test</p>
</div>
<a href="#dailyBriefOverlay" id="daailyBriefOverlay" class="pull-right btn-reservar">
<span class="fa fa-ticket"></span>
Click Me
</a>
You should use JQuery to it. See running example!
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle
I'm using bootstrap's carousel ( http://twitter.github.com/bootstrap/javascript.html#carousel ) to show a user submited gallery. Because it's user submited, it doesnt look very good with the rest of my website design thats why i want to add a layer mask on top off everything
Here is the mask : http://img52.imageshack.us/img52/2659/degrade.png
Unfortunatly, I'm unable to show that particular div...
It has to be non clickable because when a user click on a picture of the carousel, it opens modal popup with the full sized picture.
My css (its using less but you get the idea):
.carousel {
width: 292px;
height: 163px;
.carousel-inner {
width: 292px;
height: 163px;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-control {
margin-top: 0;
top: 0;
right: 0;
background: none;
border: 0;
width: 60px;
height: 163px;
opacity: 0.65;
background-repeat: no-repeat;
&:hover.right {
background-image: url('/assets/index/r_arrow.png');
}
&:hover.left {
background-image: url('/assets/index/l_arrow.png');
}
}
heres is my html:
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="thumbnail1.jpg" />
</div>
<div class="item">
<img src="thumbnail2.jpg" />
</div>
<div class="item">
<img src="thumbnail3.jpg" />
</div>
</div>
<a class="carousel-control left" href=".carousel" data-slide="prev"> </a>
<a class="carousel-control right" href=".carousel" data-slide="next"> </a>
</div>
Depending on your cross-browser support needs, you could try giving the overlay pointer-events: none. Here's an example of that.
If you insert <div class="overlay"></div> into .carousel-inner, give .carousel-inner {position: relative;} and
.overlay {
background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
There's an answer here that gives information and links to solutions using javascript. Unfortunately, the resources for the accepted answer to the linked question have gone offline, but there is a fairly simple demonstration here: http://jsbin.com/uhuto