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;
});
});
}
Related
I have a basic show hide toggle. It works on everything but iPhone and it's driving me crazy.
Is there an alternative to the following javascript that does not use the toggle function?
Javascript
$(document).ready(function(){
$(".pic_you_click_on").on('click', function(){
$("#display").toggle();
});
});
HTML
<img class="pic_you_click_on" src="images.png"></img>
<ul id="display" class="div_to_appear">
<li>About</li>
<li>Home </li>
</ul>
CSS
#display {
display:none;
}
Okay so I know what the problem is.
Animate Css. I used it to apply an animation effect to my header that flies in. What I did not know, it that using animations can often mess with your stacking order, particularly fixed elements. See article below.
http://daneden.me/2012/04/22/css-transforms-and-z-index/
I had to strip back the whole site and place each element one by one, checking it each time.
The moment I added the effect, it turned to custard. Apparently this is common knowledge... Not to me! I've removed it and the button now functions.
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);
I bought a template to use with Bootstrap because I am kind of in a hurry, and I want to edit it a bit so it does what I want to. I created a vertical menu with tooltips, but the tooltips aren't showing. When I use the exact same code in another file it works perfectly, so I think something is blocking it but I don't know why. Does anyone have a clue?
So, apparently the way localScroll works is that you need to specify the scroll properties on the element containing the links which will scroll to the designated location. Thus, you will want your HTML to change to something like this for your dot menu.
HTML:
<ul>
<li id="dotLink1">
<h1>First manned flights</h1>
View
</li>
<li id="dotLink2">
<h1>The frameless parachute</h1>
View
</li>
<li id="dotLink3">
<h1>Over the English Channel</h1>
<a id="dotLink3" href="#Section-2">View</a>
</li>
<li id="dotLink4">
<h1>About</h1>
<a id="dotLink4" href="#foot-sec">View</a>
</li>
</ul>
Then you need to actually call the localScroll function on those container elements to tell them where the links should lead to like so:
JavaScript:
<script>
jQuery(document).ready(function(){
jQuery('#topnav, #dotLink1').localScroll(3000);
jQuery('#startbtn, #dotLink2').localScroll(5000);
jQuery('#dotLink3').localScroll(7000);
jQuery('#dotLink4').localScroll(9000);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
jQuery('#top-section').parallax("50%", 0.1);
jQuery('#Section-1').parallax("70%", 0.3);
jQuery('#Section-2').parallax("50%", 0.1);
jQuery('#foot-sec').parallax("50%", 0.1);
});
</script>
Finally, you should remove your onload attribute from the body tag and put anything you want to run upon loading of the document inside the jQuery jQuery(document).ready() function. Since you've already got one going at the bottom, we'll put the code in there.
Instead of creating a new function, all you need to do is put the window.location.hash inside there. However, that alone won't make localScroll work. Luckily, localScroll has a function prepared for listening to the hash of the URL. This is jQuery.localScroll.hash(). Thus, you'll want to change the hash first and then call that like so:
JavaScript:
<script>
jQuery(document).ready(function(){
window.location.hash = "Section-2";
jQuery.localScroll.hash();
jQuery('#topnav, #dotLink1').localScroll(3000);
jQuery('#startbtn, #dotLink2').localScroll(5000);
jQuery('#dotLink3').localScroll(7000);
jQuery('#dotLink4').localScroll(9000);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
jQuery('#top-section').parallax("50%", 0.1);
jQuery('#Section-1').parallax("70%", 0.3);
jQuery('#Section-2').parallax("50%", 0.1);
jQuery('#foot-sec').parallax("50%", 0.1);
});
</script>
Here is a JSBin to show it in action. (Don't 1:1 replace your code with the JSBin code since I had to make all the external JS/CSS/image links absolute links to resources on the web instead of keeping them relative links.)
And last but not least, to get the tooltips working, you want the h1 elements to show when you're hovered over the buttons. One might think to put the :hover on the h1; however, that won't work since its current state is hidden. Thus your mouse can never hover over it. One might then think to put it on the a tag since that's the button; however, you won't be able to use selectors to target the h1 from there since a comes after h1 instead of before. Thus you should activate the h1 when the mouse hovers over its parent element, which in this case is the li.
CSS:
nav#primary li:hover h1 {
display:block;
z-index:9999;
}
New JSBin here.
I'm quite new to this all so sorry for my lack of terminology.
I was looking at this site and I was wondering how I do the content/page change without reloading the page.
Could someone point me in the right direction? What is that JavaScript? CSS transitions? jQuery? Or could you show me some code? Any help would be amazing; I've been looking around for a while can't find anything like it...
That's a simple slider, just instead of slide images, it slide content (nested divs, img, lists). I checked the code for you and is using this jQuery plugin: SudoSlider plugin
Do not reinvent the wheel by writing your own plugin, you can see few demos here, but this one is very close to the example using auto height. This is how you can use it on your site:
Jquery
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
HTML
<div id="slider" >
<ul>
<li><div> .... </div></li>
<li>Lorem ipsum text + image</li>
<li>List, maps, ...</li>
</ul>
</div>
It's JQuery animation. It's a (very slick, but still) typical carousel effect, where you have a slider div that extends beyond the visible screen, and its left margin is animated to create the effect.
It's straightforward to create the basic effect (but of course a lot of work to create something that looks as good as the link):
Set overflow-x: hidden to a container div
Add a slider div inside the container, and slide elements within the slider
Add navigation buttons, and on click animate the slider's left offset (keeping track of the current position)
Here's a really basic example.
I could say that it's possible to use all of the mentioned options :)
Basically you can use something like http://bxslider.com/ to achieve what you want just instead using of img elements inside list items use some content items.
I have a fixed navigation at the top of the page that has links that smoothly scroll you around to different sections (IDs) of the page via jQuery.
Would there be any possible way to have a css class (e.g. .current) appended to the navigation links depending on what section of the page you're at?
For example, when I click "About", it'll scroll down to the About section and also make the navigation text orange as long as you stay in that section?
I've seen this done somewhere a while ago but I don't remember the website or even how to describe this behavior to search for it.
EDIT: Here's a link to something siliar to what I'm looking for:
http://www.fat-man-collective.com/hello.php
The icons change depending on your position on the page.
Script:
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
</script>
HTML:
About
[...]
<div id="about">
[...]
</div>
Any help is greatly appreciated.
This would be possible by examing the offset()* function of the desired element and then coding to respond accordingly. You can track the offset of an element, and depending on the resulting offset, you would apply or remove the appropriate classes accordingly.
*See the documentation for offset()
When you click on a section in the navigation, just modify the class so that the style is what you want it to be.
Secondly, you'll need to add an event handler on the scroll event that similar modifies the nav's class.
Try this:
function goToByScroll(id){
$('ul#nav li a').removeClass('active'); // elements in menu
$(this).addClass('active');
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
Four years later...for those that have the same question since hopefully the OP has solved his problem by now.
Check out Bootstrap's ScrollSpy plugin, which "is for automatically updating nav targets based on scroll position." For an example of using the ScrollSpy plugin see this detailed tutorial on how to make a floating, updating navbar (like the Bootstrap site uses).