Menu
I have my markup as follows:
<li><a href="#sheds_housing">Sheds & Housing</a></li>
<div id="sheds_housing">
<h1>sheds & housing</h1>
<img src="images/cattle/sheds_housing.png" width="150" height="150" alt="Sheds & Housing"
title="Sheds & Housing" />
<p>Text here</p>
</div>
to create a link to a section of the page so that when users clicks the anchor, it takes him to that section.
Is there anyway I can make sure that when a user does so, the content always shows at the top without any extra content that maybe present in the normal flow of the document above the linked div.
Can it be done with CSS alone or do I have to use JS/jQuery for this, and if yes what code?
EDIT
I was not clear before; See this Fiddle. If you click the first two links, you will be taken to the respective sections and the content will appear at the top of the window but if you click the last link, you will be taken to the respective section but the content will not appear at the top of the window and the content that sits above the respective sections is present.
827
Add the id "last_anchor" to the last link in your list and this will achieve it with jquery. How and if you decide to change the margin of the body back is up to you...
$(document).ready(function(){
$("#last_anchor").click(function(){
var content_id = $(this).attr("href");
var win_height = $(window).height();
var content_height = $(content_id).height();
var target_margin = win_height - content_height;
$("body").css("margin-bottom", target_margin)
});
});
Here is what i did:
the user scroll down the page.
nothing unusual happens (there is no change to your page).
the user click/use your anchor.
the code creates some empty space after #content, so it can place the desired part on top of the screen.
the user scroll the page up to the first div inside #content (could be any point you like) or hit the back button to go to the top of the page.
the empty space disappears (your page is back to normal).
Test online here: http://jsfiddle.net/RASG/z3q3s/
Or save this code as an HTML file to test it on your pc:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
function isScrolledIntoView(elem){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var elem_that_hides_dummydiv = $('#content div:first');
var elem_that_shows_dummydiv = $('#content div:last');
$(window).scroll(function() {
if (isScrolledIntoView(elem_that_hides_dummydiv)) { $('#dummydiv').hide() }
});
$('#gonnaclickhere').click(function() {
$('#dummydiv').css({'height':(elem_that_shows_dummydiv.offset().top)+'px'}).show()
})
});
</script>
</head>
<body>
<ul class="sub_navi">
<li><a href="#sheds_housing">Sheds & Housing</a></li>
<li><a href="#feed_fodder">Feed & Fodder</a></li>
<li id="gonnaclickhere"><a href="#med_vac">Medication & Vaccination</a></li>
</ul>
<div id="content">
<div id="content_pic">
<img src="images/cattle/cattle_main.jpg" width="400" height="300" alt="Cattle Main" title="Cattle Main" />
</div>
<p>Pak United Food Services Ltd., (PUFS) has earned a creditable name and become a major player in the animal husbandry market by building upon Pakistan's large livestock population. Introducing the concept of corporate cattle farming on scientific lines, the conglomerate uses a livestock development policy consisting of innovative strategies and action plans with the intention of bringing about a radical change in the current livestock production system. The cattle farms are established on rich and fertile acres of land and consist of an impressive and mixed herd of cows/buffalos and sheep/goats.</p>
<p>A hybrid meat breed is developed by crossing the local indigenous breeds which are predominately draught/milch animals with high meat yielding animals from other parts of the world. A herd management system is incorporated to improve record keeping and obtain information for bench marking decisions. The farms employ a state of the art feedlot design involving the integration of the standard components into a fully functional operating system. This consists of housing, feeding, watering, health-care and cattle effluent & manure management systems, making them well known across the country.</p>
<div id="sheds_housing">
<h1>sheds & housing</h1>
<img src="images/cattle/sheds_housing.png" width="150" height="150" alt="Sheds & Housing" title="Sheds & Housing" />
<p>The housing for the animals utilizes a proper lay out for the farm buildings while keeping in view the environment, climate and wind direction. Sheds, pens and paddocks are constructed according to different categories and sex groups besides other infrastructure & allied facilities. All buildings are made airy for the protection of the animals from extreme temperatures and strong winds. Adequate supply of water for drinking and cleaning is made necessary with strict maintenance of hygienic conditions. Ample sunlight and natural ventilation is assured to assist in the reduction of moisture and bacteria, offering a healthier, cleaner & drier environment while also reducing the risk of disease and mortality in the livestock.</p>
</div>
<div id="feed_fodder">
<h1>feed & fodder</h1>
<img src="images/cattle/feed_fodder.png" width="150" height="150" alt="Feed & Fodder" title="Feed & Fodder" />
<p>The farms are equipped with in-house feed formulation capabilities which produce feed of constant quality and are palatable, nutritious and free from contamination. Feed supplies are made available according to different feed formulae while keeping in view the nutrient value and energy levels. Daily requirements are worked out for each category and class to achieve improved growth & overall health. A restricted feeding regime is employed that is balanced &amp; concentrated, containing minerals & vitamins, leading to an improved feed/gain ratio. Fodder & wheat/rice straws are purchased/contracted from the nearest markets, while treating it with ammonia or urea to improve the quality and gain a marked effect on cattle weight during the fattening period.</p>
</div>
<div id="med_vac">
<div id="med_vac_title">
<h1>medication & vaccination</h1>
</div>
<img src="images/cattle/med_vac.png" width="150" height="150" alt="Medication & Vaccination" title="Medication & Vaccination" />
<p>Regular vaccination of the whole herd against contagious and infectious diseases are carried out as a prophylactic measure in order to make sure that the animals are free of diseases of digestive, respiratory, urinary, gynecological and obstetrics by a designated veterinarian. A proactive health plan in employed to improve the health, welfare and productivity of the animals. A pre-weaning vaccination program is used with correct, effective and proper vaccines, dewormers, antibiotics and other medications to prime the immune systems of the animals. Furthermore post-weaning vaccination program is used to boost the immune system of the animals and increase the passive protection against common endemic livestock diseases.</p>
</div>
</div>
<div id='dummydiv' style="bottom: 0; width: 100%;"></div>
</body>
</html>
Tested with FF13 and IE9.
25
the content always shows at the top without any extra content that maybe present in the normal flow of the document above the linked div.
Assuming this means that you want to hide all the sections on the page and just show the section corresponding to the link clicked, what you are looking for is referred to as Accordian, you can find a sample one here.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
