I have got a div [projItemsContent] that varies in height based on the contents,the problem i have got is that there are two other divs [projItemsLeft,projItemsRigh] that i want to have the same height as projItemsContent div. Any suggestions please?
div.projItems{width:360px;min-height:200px;_height:200px;background:#000}
div.projItemsLeft{float:left;width:30px;background:#990}
div.projItemsRight{float:left;width:30px;background:#900}
div.projItemsContent{float:left;width:300px;background:#ccc}
<div class="projItems">
<div class="projItemsLeft"> </div>
<div class="projItemsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
</div>
<div class="projItemsRight"> </div>
</div>
Encapsulate the divs:
div.projItems{width:360px;min-height:200px;_height:200px;background:#000}
div.projItemsLeft{float:left;width:360px;background:#990}
div.projItemsRight{float:right;width:330px;background:#900}
div.projItemsContent{float:left;width:300px;background:#ccc}
<div class="projItems">
<div class="projItemsLeft">
<div class="projItemsRight">
<div class="projItemsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
</div>
Right column content
<br style="clear:left;" /></div>
Left column content
<br style="clear:right;" /></div>
</div>
Google turned up this: http://matthewjamestaylor.com/blog/perfect-3-column.htm
I once used this as a guide: http://bluerobot.com/web/layouts/layout3.html
And this too is a good resource: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Related
I'm trying to get a row of 3 cards, whereby the row extends to the max-height of card #1 or card #2 based on their content, and the third card to also get the same max height but overflow-y:scroll even when the content is longer than cards 1 & 2.
I can get the first two cards extending to the tallest of either, but can't seem to limit the third card to this height.
EDIT: Solved with JS > https://codepen.io/chrisj75/pen/jOmbEEQ
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title> <body>
<div class='container'>
<input type='button' value='Fix Height' onclick='fixHeight();' />
<div class='row'>
<div class='card-group col-md-12'>
<div class='card col-md-4'>
<div id='card1'>
Card #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id mollis tellus. Proin faucibus mauris non felis placerat, non posuere nibh tristique. Quisque elementum quam urna, tempus iaculis augue convallis ullamcorper. Proin ac laoreet augue. Morbi quis ipsum turpis. Nullam finibus blandit sem, fringilla semper diam tincidunt quis. Nam venenatis dictum eleifend. Donec rutrum non lectus et lobortis. Donec congue, nunc eget consectetur tempus, massa arcu ornare eros, ac scelerisque mauris velit ut libero.
</div>
</div>
<div class='card'>
<div id='card2'>
Card #2
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenxatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
</div>
</div>
<div class='card col-md-4'>
<div id='card3'>
Card #3
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
</div>
</div>
</div>
</div>
CSS
#card1, #card2, #card3 {padding:2rem;}
#card3 {overflow-y:scroll;}
.hidden {display:none !important;}
JS
function fixHeight() {
$('#card3').addClass('hidden');
var card1 = $('#card1').height() ;
var card2 = $('#card2').height() ;
h = Math.max(card1,card2) ;
//window.alert(h);
$('#card3').height(h).removeClass('hidden')
}
I am creating a html/Angular app.
I am using Twitter bootstrap 4 for layout.
I got three columns 1-2-9 and I need them all to be 1) Same height 2) Always full height of the window.
This I solve with 100vh and it looks good BUT the problem is that since my app can add dynamic content in a long list the columns "stop" being the full height of the screen (since 100vh calculates height when first loading the page).
How can I make sure my columns always adjusts automatically to the full height of the window/browser no matter how much dynamic content I add to it?
I think you want to scroll the dynamic content within the fixed 100vh columns. If so, you can wrap the inner dynamic content within a div and use overflow properties for larger data.
Example:
HTML:
<div class="row">
<div class="col-md-1 col-lg-1 col-xl-1 column column-first">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 column column-second">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-9 col-lg-9 col-xl-9 column column-third">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
</div>
CSS:
.column{
height: 100vh;
overflow-x: hidden;
}
.scrollable-text{
width: calc(100% + 30px);
overflow-y: scroll;
box-sizing: border-box;
height: 100%;
}
.column-first{
color: #fff;
background-color: #02547D;
}
.column-second{
color: #fff;
background-color: #0285A8;
}
.column-third{
color: #fff;
background-color: #02BEC4;
}
CodePen:
https://codepen.io/debrajr/pen/gqZbpx
I'm attempting to have text flow around images in the following fashion:
eg, images in two columns, with one image in the "center" column and a number of them in the right column. I tried "floating boxes" via display:inline-block; and I tried a table-like config using display:table/display:table-cell, but I was unable to provide the correct (changing) width for the text on the left.
(The apparent alignment of the 2nd parag of text with the bottom of the center image is not necessary.)
Appreciation for your assistance!
Here's a demo using float - does this accomplish what you want?
.column {
float: right;
}
.column img {
clear: both;
float: right;
margin: 5px;
}
<div class="column">
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
</div>
<div class="column">
<img src="http://via.placeholder.com/200x200" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
Goal:
Make the candy picture as a link that the user can press them.
Problem:
I don't know how to do it based on the code below.
Info:
*Please remember that the link is a actionlink from asp.net mvc.
*Please remember that it is the candy picture should be the link, not the text.
*Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<a href="#" id="foo">
<span>aaa</span>
</a>
<a href="" id="fooo">
<span>bbb</span>
</a>
You would need to use Url.Action to get the URL corresponding to the relevant action. The following code snippet would map to the "Foo" and "Fooo" actions of your controller.
<a id="foo" href='#Url.Action("Foo", "ControllerName")'>
<span>aaa</span>
</a>
<a href='#Url.Action("Fooo","ControllerName")' id="fooo">
<span>bbb</span>
</a>
seeing the containing div is position fixed, you can make the a tag absolute and define left, right, top and bottom...
#foo a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px
}
I bet that's the shortest way. But i really don't like inline js...
Still:
<div
onclick="javascript:window.location.href='#Url.Action("Foo", "ControllerName")';
return false;"
id="foo">
</div>
Also it's better to add div { cursor: pointer; } to your css, if you want to show that's the href.
I am trying to get a basic bootstrap scroll spy working on a simple page.
I have a plunk setup showing my code (and issue): http://plnkr.co/edit/qh4jJiCWY7nb7KFEE12R?p=preview
Basically I have this in my body tag.
<body data-spy="scroll" data-target="#sidebar">
<div class="container">
<div class="row">
<div class="col-xs-9">
<h2 id="section1-1">1.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section1-2">1.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section1-3">1.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-1">2.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-2">2.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-3">2.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
</div>
<div class="col-xs-3" id="sidebar">
<ul class="nav nav-tabs nav-stacked affix-top" id="mynav0" data-spy="affix">
<li class="active">1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</div>
</div>
</div>
</body>
Things are working for the most part. However, the scrolling jumps from the current top bookmark to the last the second the last bookmark shows on the screen. It depends on the screen size, but on my monitor when I scroll from 1.3 to 2.1, the highlighted/active li in the nav jumps to 2.3. Even if I manually select 2.1 or 2.2 the class on the li is never changed to 'active', even if 2.3 is not viewable on the screen. If I add text to the paragraphs to make them longer then things work like expected.
How do I tell scrollspy to highlight the bookmark that is at the top of the page, rather than the bottom most bookmark? Also, why do 2.1 and 2.2 never get the 'active' class added?
I am sure its something simple but I cannot for the life of me figure out what is causing this. Any insight would be most helpful.