I am using bootstrap 3 for my mobile project . I am designing an header . Like
Block1 Block2 Block3
I want block 1 to be left aligned always on all screen size . Similarly the position of block2 and block3 needs to be in same position .
I don't want to collapse my header.
An Header bar like http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_header
in Bootstrap3
Update
<div class="row">
<div class="col-xs-4">
<input type="checkbox" name= "my-checkbox" style="width:100%" checked>
</div>
<div class="col-xs-4">
<h4 class="ag-top-bar-text rm-dots" style="padding:7px">Header Text</h4>
</div>
<div class="col-xs-4 pull-right">
<input type="checkbox" name= "my-checkbox" style="width:100%" checked>
</div>
</div>
</div>
</div>
</nav>
Try this,
HTML
<nav class="navbar navbar-default">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="pull-left">Block 1</li>
<li>Block 2</li>
<li class="pull-right">Block 3</li>
</ul>
</div>
</nav>
Add some CSS
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
Demo
If you are using a 12 grid column you should be able to do something like this:
<div class="row">
<div class="col-xs-4">
Block 1
</div>
<div class="col-xs-4">
Block 2
</div>
<div class="col-xs-4">
Block 3
</div>
</div>
Related
So basically I'm using a template for my site and adjusting accordingly. The site defines the menu-bar to be hidden on start and it appears on scroll down.
The text and menu button however, always appear on start. I cant understand how I can also tell the text (email and phonenumber) to stay hidden with the rest of the menu-bar.
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
/* menu last class added */
$('ul.basic-menu>li').slice(-2).addClass('menu-p-right');
/* TOP Menu Stick */
win.on('scroll',function() {
if ($(this).scrollTop() > 1){
$('#sticky-header').addClass("sticky");
}
else{
$('#sticky-header').removeClass("sticky");
}
});
/* meanmenu */
$('#mobile-nav').meanmenu({
meanMenuContainer: '.basic-mobile-menu',
meanScreenWidth: "767"
});
/* hamburgers menu option */
$('.hamburger').on('click', function() {
$(this).toggleClass('is-active');
$(this).next().toggleClass('nav-menu-show');
});
$(document).on('scroll',function(){
$(".hamburger-menu").slideDown(); //i have used slide down function for animation, you can change class or add css display type changing properties
})
.makescroll{height:1000px;}
.hamburger-menu{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
<div class="makescroll">Extended scroll</div>
</div>
</div>
</div>
</div>
</div>
</header>
JSFiddle here.
I have an HTML page where the body consists of a <header> element followed by a <main> element. The problem is that there is a gap/empty-horizontal-space between the <header> and <main> elements, which is neither any padding nor any margin.
I need to get rid of this gap. How do I do that?
body {
background-color: black
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<header class="light-blue darken-4">
<div class="row section">
<div class="col s12">
<i class="material-icons">menu</i>
<span class="container">
Logo
</span>
</div>
<!-- .col -->
</div>
<!-- .row -->
<ul id="side-drawer-container" class="side-nav ">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<div class="row">
<div class="col s12">
<ul class="tabs tabs-transparent center">
<li class="tab">All</li>
<li class="tab">ONE</li>
<li class="tab">TWO</li>
<li class="tab">THREE</li>
</ul>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col s12">
<section id="all"></section>
<section id="One">
<div class="row hoverable lime lighten-3">
<div class="col s12">
<ul class="tabs tabs-transparent center lime lighten-3">
<li class="tab">Amy</li>
<li class="tab">Bob</li>
<li class="tab">Anna</li>
<li class="tab">Liv</li>
</ul>
</div>
<!-- .col -->
</div>
<!-- .row -->
<div id="amy">Amy amy</div>
<!-- #amy -->
<div id="bob">Bob bob</div>
<!-- #bob -->
<div id="anna">Anna anna</div>
<!-- #anna -->
<div id="liv">Liv liv</div>
<!-- #liv -->
</section>
<section id="Two">2
</section>
<section id="Three">3
</section>
</div>
</div>
</main>
It's the margin-bottom: 20px on .row creating that gap. It's the result of "margin collapse" because that .row is the last child of header and has a margin that is collapsing outside of header
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
You can either just remove that, or add overflow: hidden to header if you want the margin to show up inside of header instead of outside of it.
I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>
Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})
try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic
I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?
main.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I think this an HTML problem. Try to add this CSS to your code:
.panel-body {
overflow: scroll;
height: 100px;
}
overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.
I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.
<style>
.conditionalScroll{
width: 100%;
height: 225px; /*change to your liking*/
overflow: scroll;
}
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:
CSS
.panel-body {max-height:400px;overflow:scroll;}
or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body panel-scroll">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.panel-scroll {max-height:400px;overflow:scroll;}
I am having an issue with my sticky nav. The problem seems to be that my JS is not applying the class I have told it to. you can view it live here http://test.makx.ca
Here is my code.
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
$('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>
the HTML
<div class="row nav-row">
<div id="nav-bar" class="medium-12 column nav-bar">
<ul class="links">
<li>home</li>
<li>about us</li>
<li>pricing</li>
<li>contact</li>
</ul>
<ul class="links-right">
<li class="has-form">
<div class="row collapse">
<div class="large-7 small-7 columns">
<input type="text" placeholder="enter text">
</div>
<div class="large-3 small-4 pull-2 columns">
<a href="#" class="search button expand" style="padding-top: 0.6rem;
padding-bottom: 0.6rem;">Search</a>
</div>
</div>
</li>
</ul>
</div>
</div>
the CSS
.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}
any feedback would be most welcoming. This has me and a friend completely stumped.
You're using the wrong selector. .nav-bar is a class selector, but you want to select the element with the id nav-bar, not the class nav-bar. Use #nav-bar as the selector instead.
Unrelated to your question, but FYI: Your use of toggleClass is going to have some odd results; it will constantly be toggling the class on and off while the user scrolls.