Develop Reference

Transition between web pages

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;
});
});
}

How to do page / content transitions

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.

Scrolling to next element in container - almost there

I'm struggling with a jquery problem.
I think I am close to a solution but I keep stumbling at the moment.
So my markup (simplyfied) looks like this:
<div class="col">
Content
<div class="scroll-container">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
scroll down
</div>
Basically a .col that holds a container and a button.
The Plan:
1) After a click on the button container should scroll down to the next <li>.
2) When the last <li> is reached it scrolls to the first <li> again. So I need a loop.
3) The numbers and size of <li> may change from case to case. So basically the button should just scroll the next <li> to the top of the container.
4) The scrolled <li> needs to have a little margin to the top edge of the container.
Where I am:
I had a similar problem which got brilliantly solved by ronalchn and since the problem is somewhat similar I have created a fiddle based with his code.
Fiddle with the solved problem (To see the code in action)
Fiddle with the this problem (Obviously doesn't work with the same jquery)
I think the code basically only needs a little rearranging to work with the new situation.
I have tried for a couple of hours but it seems like this is still beyond my current level of understanding jquery.
I am very greatfull for any push in the right direction. Thank you.

Here you go: http://jsfiddle.net/UQsv9/7/
CSS changes: added position: relative to your ul
I'm using $.fn.data to store the current child, from there it's just using the difference between the two offsets to calculate the new top.

Ignore mouse interaction on overlay image

I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.

The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.

So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.

Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.

Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.

If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>

jQuery Slide Toggle Not Working - Resolved

On the first click, it works as expected:
the class is changed
and the html content is changed from 'Show...' to 'Close...'
the content area is expanded with the slideDown effect,
Good so far.
On the second click, ...
the class changes
the html content is changed from 'Close...' to 'Show...'
The content area does NOT go away as expected.
On the third click, ...
the class is changed
the html content is changed
the already-shown content is re-shown with the slidedown effect.
So everything is working except for the 2nd click when the content is supposed to be hidden again.
Here's the jQuery:
-
$('.open_user_urls').live('click', function() {
$('#user_urls').slideDown('slow');
$(this).addClass('close_user_urls');
$(this).removeClass('open_user_urls');
$(this).html('Close Search History');
return false;
});
$('.close_user_urls').live('click', function() {
$('#user_urls').slideUp('slow');
$(this).addClass('open_user_urls');
$(this).removeClass('close_user_urls');
$(this).html('Show Search History');
return false;
});
Here's the HTML it's acting on:
<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>
And the only applicable CSS:
#user_urls { display: none; }
EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...
EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.
Edit 3 - Found the source of the problem.
Inside the #user_urls div I have an series of OLs with the following css:
.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.
Removing the float: left; on these OL tags causes the problem to go away.
So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?
EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.

Perhaps something like this would be simpler?
$(".open_user_urls").toggle(
function () {
$(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
},
function () {
$(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
}
);
The toggle function is designed for precisely the scenario you're encountering.

To reiterate the problem and resolution to this question...
Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.
Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.

From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.
$('#user_urls').css('height', $('#user_urls').height() + 'px');
After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.

Since this question was opened, jQuery have put in a fix for this themselves.
Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)
Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.

I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:
http://docs.jquery.com/Attributes/toggleClass
http://docs.jquery.com/Effects/slideToggle
I could be as easy as:
$("h3.open_user_urls").click(function () {
next("div#user_urls").slideToggle();
});

I can't duplicate your bug. I used your exact code and I cannot replicate your issue.
This must be a script error from a different place in your JS code.

Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.
Another resource that really helped and explains the behavior a bit can be found
on this Google group discussion.

Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.