|
HTML - Stacking Pages Together Then Fade In/out
Hi everyone,
I'm building a webpage with the center portion as the content area. I have a background image for the entire page, then another background image for the content area, then more image links stacked on top of the content area. What I want to do is for the content area to fade in/out to different pages depending on which image link I click. What I did is have all the "pages" in one html file, separated by div containers. Clicking a link will navigate to that div container. Since each "page" is essentially just a background image with some content on it, I tried to stack all of them into the exact same spot, but I'm having trouble with this as all the pages currently are lined up vertically, going below my screen hidden from view. Here's an illustration of what it looks like: I got everything working now except for two annoying problems: - The fade out animation does not play when navigating to any page except the home page (navigating to home page the animation will play) - When I go to any page except home page, all the images will appear lined up vertically, causing the scroll bar at the side to appear briefly before disappearing, since having each page stacked and all visible will go beyond bottom of my screen, which is very unappealing Here is my code so far: I've simplified it to two content pages so it's easier to read. HTML: Code: <meta charset="utf-8">
<title>The Elements of Go</title>
<!--jQuery library-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<!--CSS for html-->
<link href="css/ElementsOfGo.css" rel="stylesheet" type="text/css">
<!--<link href="css/ElementsOfGoFonts.css" rel="stylesheet" type="text/css">-->
<!--FADE-->
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() { showWindow("mainpage") }, 2000);
$('.aboutbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("aboutpage"), 2000);
} );
$('.mainbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("mainpage"), 2000);
} );
function hideAllWindows() {
$('#mainpage').fadeOut();
$('#aboutpage').fadeOut();
$('#historypage').fadeOut();
$('#referencespage').fadeOut();
$('#strategiespage').fadeOut();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
</script>
</head>
<body>
<div id="backgroundcontainer">
<div id="mainpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head to about page-->
<a class="transition aboutbutton"><img src="some image">
</a>
</div>
<div id="aboutpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head back to main page-->
<a class="transition mainbutton"><img src="some image">
</a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
/*The webpage background image*/
body {
background-image:url(../pictures/menubackgroundbubbles.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
#backgroundcontainer {
display:block;
margin-left:auto;
margin-right:auto;
}
/*background image for the content pages*/
#mainpage,#aboutpage {
background-image:url(../pictures/background.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
overflow:hidden;
display: none;
margin-left: auto;
margin-right: auto;
position: relative;
width:800px;
height:570px;
}
#mainpage img,#aboutpage img {
position: absolute;
border:none;
width: 119px;
height: 119px;
}
Thanks for any help! Similar Tutorialspretty basic question, never had trouble with this before.. but on my page http://nativboardriding.com/company.htm i would like the 3 div sections, ABOUT, CONTACT, and INTERNATIONAL DISTRIBUTORS to be stacked horizontally. they are all divs with width 200px styled to float left, and the sum of their widths is 600px (3 x 200px) which is well below the width of the div they are nested in (800px).. however the last 2 divs still drop down to the next line.. WHY!?? thanks in advance for the help Hi Guys: I am editing a html page for my boss but am having problems with the images stacking instead of being properly aligned. I can't figure it out for the life of me: http://www.nyu.edu/fas/dept/chemistr.../testpage.html Can anyone provide any advice on how to fix this? I am editing this page with Adobe Golive. Thanks! Hi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. So the plan is to play this sound MP3 as soon as the site gets entered. I also need it to loop untill the person clicks on either Dutch or English.. and gets directed towards the destined homepage where the MP3 file fades out within about 10 seconds. My question.. can I do all the above with HTML? I thought about editing the last part of the mp3 file manually so ill make it fade and then just play that faded mp3 as soon as the destined homepage gets entered.. but that wont be possible, since i dont know at which point the user clicks on Enter site... At the moment I have a color fade on the left side of our website behind the links. I am using the onmouseover and onmouseout commands to change the color when someone puts their cursor over the link. I have no problem changing the background color when the mouse is over the link, but I can't find a way to return it to the color fade background after someone removes their mouse. Any ideas as to what I should put in the onmouseout spot to get it to return to the original fading background? <tr> <td width="200" valign="top" style="filter:progidXImageTransform.Microsoft.Gradient(endColorstr='#F5F5F5', startColorstr='#CAF0F7', gradientType='1'" ><table width="87" height="155" border="0"> <tr> <td><table width="200" height="229" border="0" cellpadding="0" cellspacing="0" bordercolor="#F5F5F5" id="navigation"> <tr> <td width="200"><div align="center"><a href="Homepage.html" class="navText style3" onmouseover="style.backgroundColor='#CAF0F7';" onmouseout="????????" ><font color="#5A434A"><span class="style5">Home</a></div></td> </tr> thanks Hi guys, we're using a WordPress theme for a clients site and we'd like to know how to make the hero banner on the home page automatically rotate? http://www.anchorhotelhaydonbridge.com/newsite/ Thanks in advance, Paul Hello, I am trying to achieve something in html that im not sure is possible, but i have been told it is. If I have a line of text with a link, is it possible when someone clicks the link, the line of text changes out and a new line of text pops up? for example. if i have this: <p>hello, please click <a href="#">here</a> to change this text</p> when the user clicks the link, the line pops out and the following line pops in in its place: <p>hello, this is the new text, please click <a href="#">here</a> to change back to the old text</p> Is this possible to do with just html (html5?) and css/javascript? if so, how would i go about doing it? I appreciate any help. thank you. Ben. edit: i no longer need the text to fade, it just has to swap the lines of code on click. So I need to make a background to a <div> with a color fade in it. Here's the catch: The application is a Joomla template, so the <div> height will be very variable, and will always be getting longer as additional content is added, so the standard trick of just making a gradient image and setting repeat x won't work. So what I need is a way to basically have two different colors (the starting and ending colors for the gradient) and have the browser always render that gradient regardless of the element height, 1000 px, or 10000 px. Is this possible? This will be hard for me to explain so I will add an image: http://img75.imageshack.us/my.php?image=examplexu6.gif How do I go about loading a page within a page. For example, in the pic, if you clicked Cost it would load a page within the loading area without taking off to another location. I seen it on a site before, i remember the links were something like "/?p=cost" or something like that. And the page appeared to not navigate elsewhere, the cost page was just loaded within the page i was on. hope that makes sense, if so any examples on this? is it hard to do? messy? safe with most browsers? thanks ok so I found this code online: HTML Code: <div class="one"><a class=one-link href="http://benjaminpotter.org"><span class=one-span
onmouseover="if (window.Station) { Station.run(this, 'opacity', {from:Station.read(this, 'opacity') || 0, to: 1, time: 300, f: Interpolators.sineCurve}); }"
onmouseout="if (window.Station) Station.run(this, 'opacity', {from:Number(Station.read(this, 'opacity')) || 1, to: 0, time: 300, f: Station.f.inversion(Interpolators.sineCurve)})"
></span></a></div>
</div>
can someone help me understand it and potentially get it to work? I have a page with a black background, and a script so that when a link is clicked the page fades out and then redirects to the link location. Since the background is black, the page fades to black before redirecting. How can I have it fade to white and then redirect? Hello, I am using some Jquery code + CSS to display fade in and out text above each image. However, i can't figure out what I am doing wrong and the text is not being displayed when the user hovers the mouse over each image.. http://www.greekconcierge.com/group.php Any ideas? best regards, Andy If this is in the wrong section sorry, i have been thinking of adding a new page to my site and added sky sports, but how do i set up a page that opens another web page right away? I'm currently making a new layout for my site and before it will go online, I want to set all my pages on a BRB page/status (customized with my own brb logo+text etc.. Anyway I can do this? How do I make variable pages? EG: ../showgame?id=10 So multiple pages can begenerated from one document. Ok. I know that there are codes for fading between pages, I used to use them ALL THE TIME when I used Piczo (blech!). My question is, do all or at least most browsers support that sort of code, and can I use it in a valid XHTML page? Or is it done with JavaScript? The only reason I'm asking is because I'm making a new site for my drum videos, and the welcome page has a really nice picture of a drum set (in black and white with a slight glow) with a white background, and if I faded to a blank page, then the homepage, I think it would look really nice. So again, is it valid XHTML, and do most browsers support it? Hi I am looking at a frame site and the right frame is browsable but not saveable. How can I save the right hand frame? Right click is not allowed. Thanks Art Hey guys I have made a site but I have noticed a potential problem. I have about 10 pages and each page has the menu coded on it using css. If I wanted to change the style of the menu then thats easy as I have a external style sheet. If I want to add a link I would have to open up every page and add the link to each file. Is there a way I can create the menu in one file and include it in each page. So if I want to add a link I just add it to the one file and it would be updated on every page. Cheers Matt Hi Guys, i just found this great forum, i cant find any answer to my question so i startet this new thread. I have a problem i created a page, like a blog. i will post information on it, like some pictures and text information (all posts have the same measures, like a mask). At the moment i can post hundrets of posts and the site gets bigger and bigger and the scrollbar gets thinner and thinner. Is it possible that only the 10 newest posts will be shown and the older ones will be postet on site 2, like in an forum where u can jump to site 1,2 or 3 ... to watch older posts. (man its really hard to explain it, sorry 4 my bad english). Thanks in advance. greets, Alex Ok I'm really new to this so bear with me.. I just started my file hosting website, and I have a ****ton of videos.. I really don't want to create thousands of individual pages so that users could view the videos. Is there a simple way to view each video in a page with my logo on top, tabs on the side, etc. without creating tons of individual pages? (NSFW!) ex: - family unfriendly link removed - |
|||||||