I'm building a site using Angular 1, and am trying to do things the "proper" Angular way, without using jQuery to fill in functionality.
Right now, I'm trying to build a header/navbar that will display differently depending on the view.
My template for the header looks like this, using ng-class to apply styles for the different navbar layouts:
<header ng-controller="headerController">
<div class="row topnav-row">
<div class="navbar" id="nav-main">
<div class="navbar-inner">
<a href="home">
<img class="col-md-4" id="topnav-logo" ng-class="{$scope.where == '/' ? 'logoCenter' : 'logoLeft'}" src="media/kg-icon-placeholder.png" />
</a>
<ul class="nav">
<li class="col-xs-4 col-md-2 topnav">Contact</li>
<li class="col-xs-4 col-md-2 topnav">About</li>
<li class="col-xs-4 col-md-2 topnav">Portfolio</li>
</ul>
</div>
</div>
</div>
<hr class="topnavline">
</header>
My CSS classes look like this:
.logoLeft {
width: 100px;
float: left;
}
.logoCenter {
width: 300px;
}
As you can see, I want to display an image at width: 300px when the homepage "/" is loaded, and make it 100px wide and float left otherwise. I've been wrestling with this for awhile, and can't find anything written that indicates how this should be done properly. What am I doing wrong?
Related
Pretty simple question, but I've been staring at this code for way too long that I've become code blind and can't see what I'm doing wrong here.
I'm simply trying to make a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here is the HTML for it:
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form name="socreForm">
<div ng-hide="hasScreenshot === true"></div>
<h3>Screenshots</h3>
<ul class = "imgList">
<li ng-repeat="item in screenshots">
<div style="text-align: center;">User: {{item.user}}</div>
<img class="thumbnail" ng-src = "{{item.imageURL}}">
</li>
</ul>
<h3>Outcome</h3>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'1'">
<label>Win</label>
</div>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'2'">
<label>Lose</label>
</div>
</form>
</div>
</div>
</div>
And here is the CSS I'm trying to use:
.imgList {
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
}
.thumbnail {
width: 40%
}
I've been fiddling with this for a while now and I simply cannot make it appear horizontally. This is what it looks like when it renders:
What silly CSS thing am I missing? Thank you in advance for any help!
Replace <div style="text-align: center;">User: {{item.user}}</div> with <span style="text-align: center;">User: {{item.user}}</span>
or add CSS rule like:
.imgList div {
display: inline; //or inline-block
}
Divs are display: block by default (user agent stylesheet)
I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.
I have done the following:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>EVENTS</li>
<li>SPONSORS</li>
<li>DASHBOARD</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
EDIT DETAILS
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
With this little JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
Here's some relevant CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
What happens is this:
As you can see the text "fixed sidebar" is going behind the fixed div(#head-section). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.
What am I doing wrong and how should I solve it?
Here's the bootply: http://www.bootply.com/0xIGx67IzM
Ok so there are two way to resolve your problem
JQuery Solution
Change the width with outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS Solution
just replace width:100% width width:inherit in #head-section
#head-section {
width: inherit;
}
JQuery Example
CSS Example
You're setting your #head-section width equal to the width of the parent and then you're adding 100px of padding to it (50px to each side).
See this link for more info: http://quirksmode.org/css/user-interface/boxsizing.html
With standard positioning (position:static; or position:relative;) if you were to set your #head-section to {display:block;} (omitting the width:100%) that would automatically set it to fill 100% of the available horizontal space, and then your padding would push in instead of out.
In this case, however, because you're using position:fixed, your easiest solution would be to use your existing javascript and html (still removing the width:100% from your #head-section properties), but wrap the #head-section in another container element (perhaps an article for the sake of code legibility?)
From there you can update your javascript to:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
See fiddle: https://jsfiddle.net/znhws64p/1/
I tried to create a full page horizontal slider by using fullpage.js plugin. I use only one section with 3 slides.
I tried to add a fixed navigation to slides in the top of page, so user can open the slides directly from the top navigation, but it doesn't work. Can anyone help me how to make it works?
HTML:
<div id="header">
Link to slide 1
Link to slide 2
Link to slide 3
<div>
<div class="section" id="section0">
<div class="slide" data-anchor="slide1">
<h1>Slide 1.js</h1>
This is slide 1
</div>
<div class="slide" data-anchor="slide2">
<h1>Slide 2</h1>
this is slide 2
</div>
<div class="slide" data-anchor="slide3">
<h1>Slide 3</h1>
</div>
</div>
Javascript:
$.fn.fullpage();
CSS
body{
color: #fff;
}
h1{
font-size:3em;
}
.section {
text-align: center;
}
#section0{
background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
background: linear-gradient(#4BBFC3,#7BAABE);
}
#header{
position:fixed;
height: 50px;
display:block;
width: 100%;
background: #333;
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 20px 0 0 0;
}
#header{
top:0px;
}
Here's the jsfiddle
Thank you!
Download the last version of the plugin (2.0.7) and use the new HTML markup which uses a wrapper for the plugin:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
Then initialize it this way:
$('#fullpage').fullpage();
And then to create a fixed element just put it outside the plugin wrapper like you can see in this live example sourcecode.
In order to create the links, don't use toSlide, use a normal URL link in case you are using anchors. (such as /#section/slide, for example: http://alvarotrigo.com/fullPage/#secondPage/2)
If you don't want to update your fullpage version for whatever reason, just use the option fixedElements as detailed in the documentation.
I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!
<div class="wrap">
<nav class="nav">
<ul>
<li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
<li><a class="nav__item" href="#firstPage/slide2">2</a></li>
<li><a class="nav__item" href="#firstPage/slide3">3</a></li>
<li><a class="nav__item" href="#firstPage/slide4">4</a></li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"></div>
<div class="slide" data-anchor="slide2"></div>
<div class="slide" data-anchor="slide3"></div>
<div class="slide" data-anchor="slide4"></div>
</div>
</div>
Don´t forget to give the active class to the first anchor.
Note that if you want to set position:fixed; on the navigation outside you probably want to adjust your z-index (I set the z-index:1000; for the the wrap but do as you like)
And for .js I just used what already comes along with the FullPage.js
$('#fullpage').fullpage({
anchors: ['firstPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
$('.nav__item.active').removeClass('active');
$('.nav__item').eq(slideIndex).addClass('active');
}
});
Now our navigation anchors have an active class depending on the current slide
though I´m not sure if the href targets are best practise yet it works.
Of course you could just initalize the FullPage given navigation but this gives you full control over the markup.
I wan to know if it's possible to re-order vertical columns on Bootstrap 3.
.col-xs-8 {
background: magenta;
}
.col-xs-4 {
background: cyan;
}
.col-xs-12 {
background: yellow;
}
<div class="container">
<div class="row">
<div class="col-xs-8">Content</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12 col-xs-push-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<div class="col-xs-12">D</div>
</div>
</div>
</div>
</div>
JSFiddle
What I want it's to move the items on the sidebar from ABCD to BCAD
What you want to achieve can not be done for responsive layout.....but assuming you have static content then, it can be done using margins :
Here is a demo
Wrap your ordering divs in some parent div and apply responsive layout to it....in the demo, i have dome that through abcd class ( its not responsive though since its in pixels)
HTML
<div class="abcd">
<div class="col-xs-12 " style="margin-top:-110px;color:#000">A</div>
<div class="col-xs-12" style="margin-top:-150px;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-130px;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-90px;color:#000">D</div>
<div>
EDIT :
demo with percentage value
In %ge, you can vreate something like :
<div class="abcd">
<div class="col-xs-12" style="margin-top:-13%;color:#000;">A</div>
<div class="col-xs-12" style="margin-top:-33%;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-23%;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-3%;color:#000">D</div>
<div>
CSS
.abcd {
margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}
Assuming you have to insert first child just before the last child.
You can do it with jquery. See Demo
$( ".flexbox div:first" ).append().insertBefore( ".flexbox div:last" );
This question already has answers here:
Keep toggle state on divs using cookie.js after page refresh view jsFiddle
(2 answers)
Closed 9 years ago.
I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :
$(function(){
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
});
});
What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.
The html is this:
<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->
<div id="sub-nav-wrapmin" class="snWrap divone">
<div id="sn-contentmin">
<div id="sn-likemin"></div>
<div id="sn-coffeesml"></div>
<div id="sn-sharemin"></div>
<div id="sn-commentsml"></div>
<div id="toggle-barmin">
<div id="sn-sidebrdrmin"></div>
<div class="sn-toggle button"></div>
</div>
<ul class="sn-comicsmin menu">
<li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="sn-archive" href="#archive.html">Archive</a></li>
<li><a class="sn-vote" href="#vote.html">Vote</a></li>
<li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
<div id="sub-nav-container">
<div id="sub-nav-content">
<div id="sn-bnrlft"></div>
<div id="sn-bnrrgt"></div>
<div class="sn-dividelft"></div>
<div class="sn-dividergt"></div>
<div id="sn-likebg"></div>
<div id="sn-coffeebtn">
</div>
<div id="sn-sharebtn"></div>
<div id="sn-commentbtn"></div>
<div id="toggle-bar">
<div id="sn-sidebrdr"></div>
<div class="toggle button"></div>
</div>
</div>
<div id="sub-nav-brdr">
<ul class="sub-nav-comics menu">
<li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="archive" href="#archive.html">Archive</a></li>
<li><a class="vote" href="#vote.html">Vote</a></li>
<li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
</div>
The CSS is this:
#sub-nav-wrap {
display: none;
}
This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working.
Please help...
you're almost done everything right only have written a lot of superfluous :)
$(function(){
if($.cookie('submin_visible') == 'true') {
$('#sub-nav-wrapmin').show();
$('#sub-nav-wrap').hide();
} else {
$('#sub-nav-wrapmin').hide();
$('#sub-nav-wrap').show();
}
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
var isVisible = $('#sub-nav-wrapmin').is(':visible').toString();
$.cookie('submin_visible', isVisible);
});
});