I am setting up a web page. I am not a programmer but have been able to navigate through it with a reasonable amount of success. My problem is this - I have a portion of a web page ( a Div) that has scrollable text using the Overflow property. I am able to have the text return to the top with an anchor link to the top of the page, however when I click the link I have set up to return to "Home" it does so but does not reset the scroll bar to the top. Can someone tell me how to enable the page so I can click "Home" AND have it reset the scrollbar to the top? Thanks.
Here is the code I am using.
Anchor to top of page =
<a name="pgtop"></a>
Div referencing the anchor including styling =
<div class="rtop">Return To Top</div>
Link at bottom of page selecting "Home" - pretty standard stuff =
<div class="footerlinks">Home</div>
Thanks in advance.
Try adding a javascript click function to your link. Note my link in this sample called "scroll up". It calls a function called "scrollUp()". That function grabs your div by ID and sets the scroll to the top.
Simply add this script to your page and change the ID to match the ID of your div. Then add an "OnClick" to your anchor link. I edited the answer to match the code you posted.
<html>
<head>
<style type="text/css">
div.rtop {
width:100px;
height:100px;
overflow:scroll;
}
</style>
</head>
<body>
<a name="pgtop"></a>
<div class="rtop" id="somediv">You can use the overflow property when you want to have better control of the layout. The default value is visible.
Return To Top
</div>
</body>
</html>
<script>
function scrollUp(){
var myDiv = document.getElementById('somediv');
myDiv.scrollTop = 0;
}
</script>
as i mentioned in the comment:
in your link at the bottom href="#" means current pages top (it won't slide your divs scroll - only documents scroll)
...try href="?" to reload current page or href="http://url.to.your.home.page" to put a link that loads your homepage if your current page is not a homepage which you want to navigate to.
here is some referencing document if you want to learn more
http://www.w3schools.com/html/html_links.asp
just add this jquery and you are done.
$('html, body').animate({
scrollTop: $("pgtop").offset().top
}, 2000);
Related
I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.
May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.
http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold
I have 4 different html web pages. Each contains only a background photo. I want to make a site with the following:
An index page
Buttons to access the other pages
However, I need the browser view to slide horizontally upon navigation to the next page. How can I do this?
Additionally, all my images are 1280x800, and I am worried about them fitting inside browser windows with low resolutions, since I do not want to have a scroll bar.
Updated answer with a script!
I made this a while ago and figure it could help you out greatly and give you an idea.
What I am doing is fading in and out the main divs based on which nav link is clicked. It acts as if it was a multi-page website but in reality it is just fading one in and the other out.
Here is how the html structure should look:
<nav>
<ul class="mainNav">
<li class="active">Home</li>
<li>About Us</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div id="wrapper-home" class="body active">
<p>Here is some content!</p>
</div>
<!-- Etc, etc, etc -->
Now the script that makes this happen, with the use of css:
$('ul.mainNav li a').on('click', function() {
$('ul.mainNav li a').parent().removeClass('active');
$(this).parent().addClass('active');
var id = $(this).attr('id');
var wrapper = $('#wrapper-' + id);
$('.body').removeClass('active');
$(wrapper).addClass('active');
});
finally, a fiddle: Demo
-1. You can set the image as a background-image. Then in your css you can add the follow:
background-image: url("yourImageUrl.jpg");
background-size: cover;
background-position: center center;
That will allow the image to fit the entire page and keep the images proportions.
-2. The best option, in my eyes, is to make everything on one page. Then you hide and show the divs that contain the info while adding a transition effect.
You could remove the href target of your links and replace with a javascript function which performs a transition and then page change
Old link:
link to next page
New link:
link to next page
Then with some javascript:
function transitionToPage(sNewPage){
// insert your transition out fade effect code here
window.location = sNewPage;
}
If you also want to handle transitioning into a page, then I recommend having a default blank type look for the page, then onload transition from that to the content
$(document).ready(function(){
// insert your transition code from blank page or whatever default to desired look
});
This will however only be JS compatable, and not work in ~1.5% of browsers. So I recommend actually using a lazy link load technique:
<a class="lazy_load_link" href="page.html">link to next page</a>
$(document).ready(function(){
var sTarget = $(".lazy_load_link").attr("href");
$(".lazy_load_link").attr("javascript:transitionToPage('"+sTarget+"');');
});
Nr 1. Place a background using CSS and set background-size to cover.
Nr 2. Make an onclick on a span. And style it as a button.
<span onclick="goToPage('home.html')">Home</span>
Javascript:
function goToPage(page){
$(document).ready(function(){
$('body').fadeOut(2000, function(){
window.location=page;
});
});
}
I have a series of expandable content DIVs that are collapsed initially and expands upon clicking on another DIV with a heading text. See the code sample below.
<div id="post">
<div class="heading" onclick="opendiv()">...Heading...</div>
<div class="body">.....Lengthy content.....</div>
</div>
....
....
'body' class initially hides the 'body' DIV having a 'lengthy content'.
When clicked on the 'heading' DIV, 'body' DIV expands making the web page scrollable.
Remember that there are 5 or more such expandable DIV sets above and below this set.
When the 'body' section is clicked, the page must scroll back to its 'heading' DIV location.
Here is the js script I use to expand and collapse above DIVs. But this scrolling back to a given DIV does not work.
function opendiv() {
$('html,body').animate({scrollTop: $("div#post div.heading").offset().top});
if ($("div#post div.body").css("display") == "block") {
$("div#post div.body").hide();
} else {
$("div#post div.body").show();
}
}
You didn't add any event listeners to the .body div
<div class="body" onclick="gotoHead()">.....Lengthy content.....</div>
then your gotoHead() function might look like this
function gotoHead() {
document.body.scrollTop = $('#post .heading').offset().top;
}
Based on your description there are a few issues with the way you coded the script. One is that there is no click event for the .body div. The second is that you are coding your javascript click events directly in to the HTML. Typically unless it must be done this way it is better to declare your events in your JavaScript, which is generally easier to go back and edit for new functionality.
Here is a refresh of what you did:
$('.heading').click(function(e){
// hide or show the corresponding .body div
$(this).parent().children('div.body').toggle();
});
$('.body').click(function(e){
// scroll to the corresponding .heading div
$('html,body').animate({
scrollTop: $(this).parent().children('div.heading').offset().top
});
});
You can also see this in action here:
http://jsfiddle.net/joncox/pmeEs/
My page has a popup window that should enable searches:
The problem is that the popup is located at a scrolled down part of the page, and when reloading the page with the search results the popup is "open" but the entire page begins at the top again since it was a new hit. How do I make the page go directly "halfway" scrolled down so that the results view matches the window? Should I use some kind of anchor?
You have two choices here:
A) Use an anchor. Give an ID to the div that has your searchbox (let's suppose it's searchdiv), and then http://yoursite.com/page.html#searchdiv would automatically scroll to searchdiv. Here's a little demo to elaborate this: little link. (Notice the URL in your browser's location bar).
B) If you want to be a bit more fancy and animate the scroll, use jQuery
var tp = $("#searchdiv").offset().top; //get the element's top
$('html, body').animate({scrollTop: tp}, 500); //animate for 500ms
A little demo of this method: little link.
I hope that helped!
You can use the #tag
so it goes <a name="xyz"></a> at the position to want to display
redirect to
index.php#xyz
I am loading an IFrame containing a page with a long list of dynamic data into a site. It takes a few seconds to load depending on the broadband speed and needs to be iframed due to the setup.
I would like to show a loading GIF so the user knows something is happening, but I'm struggling to make it appear as a background image in either the parent page container or the div surrounding the content within the iframed page.
<head>
<script>
var foo = function(){
var a = document.getElementById('content');
var b = document.getElementById('loading_img');
a.style.top='';
a.style.left='';
a.style.position='';
b.style.display='none';
};
</script>
</head>
<body onload="foo();">
<img id="loading_img" style="display:block;margin:20px auto;" src="loading.gif" />
<div id="content" style="position:absolute;left:-8000px;top:-20000px;">
.. table .. and stuff
</div>
</body>
not tested, but should work :)
You could add the image as a background of the body element inside the iframe, with a position near at the top and centered. E.g. background-position: center 30px
When table rendering starts, the image will be overlapped, so it's not even necessary to remove it via javascript.