I want to link the project class into the nav item. How can I link the class name into the href?
code of nav item
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
code of projects
<div class="projects">
<h4>--Projects--</h4>
.....
</div>
both of the codes are in the same HTML file.
In order to obtain this behavior, you're going to have to use IDs instead of classes. IDs can only be used once per page. Now from what I understand you want the nav item to jump to a particular part of the page. In this example, you would give your <a href="#projects" to where you want your page to jump. So in this example, once you click the nav item "Projects" you will jump to the div id="projects" portion of the page.
<li class="nav-item">
Projects
</li>
I want to link the project class into the nav item. How can I link the class name into the href?
code of nav item
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
code of projects
<div id="projects">
<h4>--Projects--</h4>
.....
</div>
You can set a tags to scroll to an element using IDs, like <a href="#id-of-target-element">. See example below.
.container {
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
</ul>
</nav>
<div class="container">
<h1>This is a filler container</h1>
<p>The purpose of this container is to take up space between the navbar and the element to which you want to scroll. Using an href to scroll to a specific element is called "Anchor Tags." You can google it and read more about it, but it's a pretty easy concept. Just put <code><a href="#element-id">Some Text</a></code>.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.</p>
</div>
<div class="container" style="border: 1px solid black;">
<div class="projects" id="projects">
<h4>Projects</h4>
<p>This is the container you want to scroll to.</p>
</div>
</div>
<div class="container">
<h1>This is another filler container</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.</p>
</div>
Related
Every time you click the text, it refreshes the page. It is not supposed to be a hyperlink. It is just supposed to be regular text. I have attached an image and the code below. The navigation link is correct. You are supposed to be able to click on Home, Add Inventory, & View Inventory. But everything else should not be clickable.
Picture of what I am getting
<html>
<head>
<title>Test Run</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Housing & Residence Life Inventory</h1>
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li><a class = "selected" href="index.html">Home</li>
<li><a href="addinventory.html">Add Inventory</li>
<li><a href="">View Inventory</li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<div id = "homedescription">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis mauris et lorem vestibulum dignissim. Mauris accumsan augue quis vestibulum feugiat. Donec rutrum risus risus, at posuere dolor consequat ac. Ut at nulla in felis iaculis hendrerit. Duis sit amet scelerisque tellus. Morbi et ante eget tortor tempor pulvinar pulvinar non lorem. Proin felis quam, mattis sagittis sem eu, scelerisque laoreet nibh. Nullam rhoncus a nisi id porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed in dui vel ante fringilla sodales. Quisque eu finibus ipsum. Quisque sollicitudin velit et fringilla ultrices. Nunc feugiat elit vitae mauris blandit, sed varius metus tempor. Maecenas neque dui, viverra vel egestas fermentum, mollis at ante. Vivamus ut dolor sodales, dignissim urna eget, placerat lacus. Morbi rutrum tortor ac diam convallis, non congue sem maximus. Morbi vitae posuere turpis, non vestibulum diam.</p>
<p>In ac scelerisque leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam consequat lacus ac elit dictum, at lacinia nibh interdum. In hac habitasse platea dictumst. Maecenas pretium nibh vel sodales tincidunt. Aliquam molestie, quam eleifend dignissim sagittis, nunc lorem pellentesque augue, eu euismod neque libero vitae felis. Mauris vel dui sodales, vehicula lectus vel, vestibulum sapien. Vestibulum vehicula at lectus a viverra. Aliquam semper ac elit mollis vulputate. Sed condimentum quam ac libero luctus, ut sagittis quam faucibus. Fusce eu aliquet tortor. Sed euismod mollis hendrerit. Vivamus pellentesque venenatis tortor quis blandit. Pellentesque non maximus nibh.</p>
</div>
</div>
</div>
<div id="footer">
Copyright © 2021 Keith Baker
</div>
</div>
</body>
</html>
you need a closing tag for your <a> tag like this
<li><a class = "selected" href="index.html">Home</a></li>
<li>Add Inventory</li>
<li>View Inventory</li>
Thank you so much, I solved my problem. I changed my style of calling css and javascript files from the project files.
I have a MVC5 project, I want to use some plugins but it doesn't seem working. I started a blank project to see if the plugins are working and they work perfect there. In my project, there are no css-js.
This is what my form must have look like.
And this is what is actually look like right now.
And this is the code I wrote. It works in a blank project successfully.
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>BASIC EXAMPLE - HORIZONTAL LAYOUT</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<div id="wizard_horizontal">
<h2>First Step</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas
arcu sem, hendrerit a tempor quis, sagittis accumsan tellus. In hac habitasse platea
dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus. Nam tellus
dolor, tristique ac tempus nec, iaculis quis nisi.
</p>
</section>
<h2>Second Step</h2>
<section>
<p>
Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac
ligula elementum pellentesque. In lobortis sollicitudin felis non eleifend. Morbi
tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum dictum,
nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien
a diam adipiscing consectetur. In euismod augue ullamcorper leo dignissim quis elementum
arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo
velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis
iaculis nec, malesuada a diam. Donec non pulvinar urna. Aliquam id velit lacus.
</p>
</section>
<h2>Third Step</h2>
<section>
<p>
Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo
condimentum dapibus. Fusce eros justo, pellentesque non euismod ac, rutrum sed quam.
Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui
commodo lectus sollicitudin in auctor mauris venenatis.
</p>
</section>
<h2>Forth Step</h2>
<section>
<p>
Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula
vulputate. Aliquam sed sem tortor. Quisque sed felis ut mauris feugiat iaculis nec
ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo
tortor.
</p>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="~/Contents/plugins/jquery-validation/jquery.validate.js"></script>
<script src="~/Contents/plugins/jquery-steps/jquery.steps.js"></script>
I have a div with a specific class name when a specific link is clicked I wanted to jump into the div. How can I achieve this?
HTML
<a class="my_link" href="#"> This is my link </a>
<div class="Home"> This is my target </div>
Thanks
you can do that with ids
<a class="my_link" href="#Home"> This is my link </a>
<div id="Home"> This is my target </div>
if you need you classes to stay:
<div class="Home" id="someId"> This is my target </div>
and just replace #Home in your link with #someId
just link to your page and put # behind the link
It works with Ids because the should be unique per page
Full example:
<a class="my_link" href="some-of-your-pages#Home"> This is my link </a>
You can do with this
<a class="my_link" href="#Home"> This is my link </a>
<div class="Home" id="Home"> This is my target </div>
$(".my_link").click(function() {
$('html,body').animate({
scrollTop: $(".Home").offset().top},
'slow');
});
.first {
width: 100%;
height: 1000px;
background: #ccc;
}
.Home {
width: 100%;
height: 1000px;
background: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"><a class="my_link" href="#"> This is my link </a>
</div>
<div class="Home"> This is my target </div>
Would you please check my above snippet?
try something like this, it utilizes jQuery, as an added bonus it has smooth scrolling
$(document).ready(function () {
$("a#smooth_scroll").on('click', function(event) {
var el = $(this)
var href = el.attr('href') // can be an id or a class
var nav_element_height = $(".navbar").outerHeight();
var target = $(href);
var target_offset = target.offset().top;
var offset = Math.round(target_offset - nav_element_height);
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: offset
}, 1000);
}
});
})
But as others have suggested, i would recommend utilizing ids for this purpose
An alternative would be to use jQuery, in which case you can just use classes. This would be handy if you want a nicer effect like smooth scrolling, but you should only implement once per page.
$(".origin").click(function () {
$('html,body').animate({
scrollTop: $(".destination").offset().top
}, 'slow');
})
Just give the link the class of origin, and the div you want to scroll to the class of destination. Then these can be repeated in different parts of the website (not on same page).
Give name attribute for anchor tag just above your div and mention that name in the link href
<a class="my_link" href="#home"> This is my link </a>
<a name="home"></a>
<div class="Home"> This is my target </div>
<a class="my_link" href="#home"> This is my link </a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolor faucibus rutrum. Proin porta condimentum nisl id ullamcorper. Integer in ligula in libero consectetur pharetra. Nam turpis nibh, venenatis ac accumsan ac, posuere eu arcu.
Nunc sagittis turpis quis laoreet volutpat. Donec facilisis, dui sit amet commodo porta, lorem ipsum consequat nulla, sit amet porta sem risus non sapien. Integer efficitur malesuada neque vel malesuada. Fusce non ante euismod, elementum urna tristique, molestie dolor. Nullam ipsum leo, pellentesque sit amet diam sed, lacinia bibendum magna. Maecenas ac congue dui, sit amet sagittis est. Nam eget est at tellus cursus tempus.
</p>
<a name="home"></a>
<div class="Home"> This is my target </div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam, purus sed rutrum congue, mauris diam placerat nibh, id fringilla neque mi vel elit. Nulla aliquam mauris nisl. Ut sed interdum sapien, ac tincidunt mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam eu convallis urna. Aliquam elit ipsum, tincidunt eget euismod eu, mattis feugiat magna. Sed congue mollis odio, at consequat enim interdum ac. Vestibulum iaculis, nisi a vulputate posuere, elit magna lacinia purus, sed lacinia mi massa ut neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis est, tincidunt at semper quis, faucibus nec sapien. Integer dictum malesuada lectus ac luctus. Sed vestibulum justo sed dolo Nam sit amet ex pharetra, fermentum dolor quis, posuere tortor. Sed gravida ac justo vel efficitur. Nullam ut diam nec sem imperdiet rhoncus. Ut et nisl non nisl tempor cursus. Sed tincidunt, eros quis tristique congue, augue dolor faucibus dui, a porta arcu lectus quis diam. Aenean sagittis dui quis eros fringilla, non laoreet nibh elementum. Cras porta eget mi at placerat. Maecenas non condimentum massa, eget faucibus arcu. Curabitur vel velit non velit placerat lacinia sit amet sit amet purus. Mauris id condimentum risus, ut fermentum turpis.
</p>
I have attached some content so you can view the demo
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.
I am working on a small project whose front-end is built with the latest version of Bootstrap. I have my sections of the homepage, but I am stuck on making them behave the way I want.
<body>
<div class="container-fluid max-height">
<div class="row max-height">
<div class="col-md-2 col-sm-12 col-xs-12 site-nav">
<div class="row">
<div class="brand">
<a href="index.html">
<img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
</a>
</div><!-- .brand -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
</div><!-- .row -->
</div><!-- .col-md-2 -->
<div class="col-md-10 col-sm-12 site-content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 info-bar">
<h2>SOME TITLE</h2>
</div><!-- .col-md-12 -->
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
<p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
</div><!-- .col-md-6 -->
<div class="col-md-6">
<div class="article-photo">
<img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
</div>
</div>
</div><!-- .row -->
</div><!-- .col-md-10 -->
</div><!-- .row -->
</div><!-- .container-fluid -->
</body>
Here is a JSFiddle.
I would like the title bar and sidebar to stay where they are and not scroll with the content. The only thing I want scrolling is the content (in blue).
How can I achieve this purely with CSS in Bootstrap?
If that top section is to be part of a dynamic page I would read about the Bootstrap Navbar (http://getbootstrap.com/components/#navbar). A very powerful tool that will be more dynamic than simple scroll styling for your page.
For a simple answer to your current fiddle you'll need to set the scroll to overflow and set a fixed height on the div(s) that you want to scroll. Adding these css attributes to the scrolling divs does what you describe.
style="overflow: scroll; max-height: 100px"
Fiddle here: http://jsfiddle.net/xb6k5vth/1/