|
HTML - Page Transition
I want to open a new page from an existing one.
I'm using javascript but the result is a bit clunky. I'd appreciate any ideas. The first page is at: http://www.primrosehillca.org.uk/act...intro_new.html (This page is all .SWF, I can send the html code if required.) And the next page is: http://www.primrosehillca.org.uk/activities.html Similar TutorialsHello, I came accross these lines of code on some random webpage, and since I hadn't seen them before, I decided to experiment with them: Code: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> <meta http-equiv="Site-Enter" content="blendTrans(Duration=1.0)"> The thing is, it is a code placed in the <head> to give fading transitions between pages, and this validates as HTML, so it must be a legal way of doing it. However, it only works in IE and not in any other browser I have tried. So I guess my question is, does anyone else have any experience with this? Is this an IE only piece of code that just happens to validate? I know a lot of the normies here are probably getting tired of my posts. If so, let me know. This just seems to be the one stop place for most of the questions I have that dal with web page design. Anyways, if anyone read past the first paragraph, I have yet another question. Is the transition from HTML to CSS hard? The HTML book I am studying (which I just NOW found out is from 2003... ) teaches me a lot that I didn't know before and has really got me going with HTML more than any other book. It's teaching me HTML 4 and I realize there is now an HTML 5. The author even mentions that some of the tags it uses are deprecated (the book will later go on into CSS to replace those tags). Is it confusing to switch out tags like that when moving to CSS? I'm the kind of person who likes to stay up-to-date with stuff and HTML & CSS I want to be up to par on for sure. Am I going to have to learn HTML 4, then HTML5, then CSS since I'm pretty much just starting out? Sorry for all the questions. Just really curious and need to know ahead of time. Not that I would quit learning if it was a long process, it's just how I am . Any responses would be appreciated! Hi everyone, first post. I'm happy to have found an active forum for HTML related questions. I have a pretty simple and short HTML document I'm working on. The effect I'm looking to test out is a page turning effect. Using some examples I found on Apples Safari learning pages I put this together. It does work in Safari, it should work in Chrome, and it will not work in IE or Firefox. The question is: Why doesn't this work in Chrome? I'm using Chrome 16.0. The animation works but it flickers during the animation. This must be related to the backface-visibility css rule I have in place but I cannot figure out how or why it's messed up. Here is the code I'm working with. It's complete and you should be able to create a new html document, paste it in and open it with Safari (working) or Chrome (not working right). NOTE: this will not work in IE or Firefox as far as I know. Thanks for any help or advice anyone can offer! HTML Code: <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.Box {
position: absolute;
width: 500px;
height: 500px;
top: 10px;
right: 20px;
background-color: pink;
-webkit-perspective: 1000;
}
.Box .card {
position: absolute;
left: 10px;
top: 10px;
width: 480px;
height: 480px;
}
.card {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
-webkit-transform-origin: 0 50%;
}
.card.flipped {
-webkit-transform: rotateY(-180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
width: 100%;
height: 100%;
}
.front {
}
.back {
-webkit-transform: rotateY(180deg);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var Card = $(".card");
$(".card").on('click', function () { Card.toggleClass('flipped'); });
});
</script>
</head>
<body>
<div class="Box">
<div class='card'>
<img class="face back" src='http://i.space.com/images/i/5974/i02/050207_planet_compare_02.jpg?1294095654'
alt="Image" />
<img class="face front" src='http://mygimptutorial.com/preview/the-ultimate-gimp-planet-tutorial-preview-all.jpg'
alt="Image" />
</div>
</div>
</body>
</html>
Hi, Background: I have a small page that need to be embeded into a bounch of other html pages. Help needed: 1. Please provide the html chunk that I can use to embed the small page in to other html pages. 2. Is there a way of not using iframe? Can I use <Object> or <embed>? How? --------------------------- mba colleges in london hospitality management diploma Some mouses today have horizontal scroll, some call the tilt. It looks something like: http://www.htmlforums.com/attachment...1&d=1242556560 I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward) How do I code like that? Or any examples? Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests. Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. I believe in thread titles that get to the point. I have a basic page, when the page loads I want people to see the top of the page for a few seconds while a flash starts to load but then I want the page to scroll down a bit so the visitor can see the flash load progress status. I just want code that I can copy into my page. I don't have access to the flash code. Greg (the page under design) www.mytcanada.com/designer.html I have a programmer in the US who starts pages for me and then I much around with them until it's looks like I want. He helps me when I get stuck but he's on holidays. Any help would be great. Not even sure what to call this actually... I received this message from a friend whose site I just put up. ---------------------------- When you click on say the Home Page, and then you click on something else then go back to the prvious page, it apparently displays the previous page on the home page for example. I was not able to recreate this on my computer, but apparently, [another] web developer said this is a fairly common problem. Do you know what he is referring to, and can it be fixed? ---------------------------- Here's the site in question. Nothing fancy, just individual HTML pages. http://www.soundadviceht.com/index.html I gotta admit, I have no earthly clue what he's talking about, unless he's relaying the message wrong? Any ideas what he's talking about? I have plain HTML on the main page and <iFrame> tag on it, inside tag i have URL to other page that using some script that forces host page to reload and show page from frame instead of it. Can i somehow stop it from messing my entire main page? Hello; I have text box & submit button in page_1 & I have text box & submit button in page_2. I want when write text in text box in page_1 it go directly to text box in page_2 & I want when click on submit button in page_1 it is like click on submit button in page_2. Assume page_2 located in other site www.page_2.com. How to do that.?? I am stuck with this stupid code that i have been trying to fix for an hour! Please help. Heres my problem...: I want to embed a webpage within another and scroll it to the bottom of the page automaticly because i want the information at the bottom which is updated frequently. I also dont want a scroll bar, so all that is seen is the table. the website is www.totalfta.com. I want from below the ENTER|EXIT sign to the bottom of the table. I have attached what i have so far. ***I have the embed into another page, and the no scroll bar... i just want to make it auto scroll to the table..**** Thank you..! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-... <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tester</title> </head> <iframe height="410" width="100%" frameBorder="0" src="http://www.totalfta.com" mce_src="http://www.totalfta.com" scrolling="no" body onLoad="for (i=0;i<window.screen.availHeight;i++) {window.scroll(0,i); }"</iframe> <body> Hey all, me and my friend have a cleaning company and we deciced to make a webpage. It's been a good 6 years since i have worked on a website. My biggest accomplishment so far was getting the contact form to work properly on the site. It does, i feel like i've done alot lol. Anyway, the current design is a rough layout (suggestions are welcome). It still needs a lot of little touches to make it look more "full". My biggest concern now is when your clicking from page to page the table jumps around. In firefox, the Contact Us and Services page are perfect, nice and centered. The image i'm using where the navigation buttons are is in place as well. When you go to the other pages though the table moves a bit and it looks like the image i'm using where the navigation buttons are starts to repeat. In Internet Exploder, everything doesn't look centered. There seems to be more space on the right than on the left, but the image i'm using for the navigation buttons seems to be fine, it's not repeating. I dunno what's causing this. I know different browsers display stuff in different ways but i'm far from having a good understanding as to why (that's why i'm here). I even copied txt from one of the messed up pages and pasted it on one of the pages that is ok and that didn't work. I assume it's a CSS thing. Also, try and avoid saying things like "Table designs are for teh n00bz!11!" or "This is why CSS is better than using a table design!!!". This is how i did it. Im ok with CSS but i don't have a thorough understanding of it to design an entire website using CSS. I'm hoping this is an easy CSS fix, or maybe something else? The website is www.gocleantoday.com. Thanks. Hello, I've put the Code: <div align="center"> below the Code: <body> tag and closed it with the Code: </div> before the Code: </body> tag. The page doesn't center at all. Is looking fine in 1024x768 but in any bigger resolution, the page is aligned to the left. The page that I am talking for is this. Any idea? Why is my home page crashed every time i click the next page button at the very bottom if you look at the (FEATURED and NEWS categories) it will changes after you clicked the next page bottom Also when i click the next page bottom its not showing the right articles/posts according to the date wrote. any help of how i can fix this problem step by step will be much appreciated. Hi, Is there any possible to show a HTML or ASP page inside the table. I have tried with frames but i dont know how to execute exacltly. Thanks First let me apologize if this post has been made and/or belongs in another area but I'm not too sure even sure how to ask this. My humble site is set up like such using HTML and CSS: As of right now I have it such that when a navigation link is clicked it loads a whole new page. How can I do this such that only the "main text" area (which sits inside a table) is loaded? I hope that makes sense! Hi, I am new to HTML coding and am not aware of all the options that are available with HTML, my requirement is as below I have a page 1.html on the server to which i don't have the edit access, I have some data which I check on this page at regular intervals of 10 seconds...... Now my problem lies here since this page is not editable i cannot change the refresh settings for 1.HTML My query : Is there an option available wherein I create my own page 2.HTML on my local desktop and write a code in 2.html such that page 1.HTML is refreshed every 10 seconds and obviously 2.html being open all the while.. Any kind of suggestions will be appreciated.... Thanks, Jay On my site, I'm using a host with limited bandwidth, and only so much data can be transferred per month. (it's free). So instead of having the users re-load everything each time they open a new page, I designed the website around an iframe, so when links are clicked, the content changes, and all the large pictures don't need to be re-loaded. Now, my problem. On my index.html page i have an iframe. That iframe loads the content for my site from links on that page. Okay, so say that, in one of my content pages (in the iframe) has a link in it.. and what that link is supposed to do is to go to another page, with an iframe in it, and open itself, in that page.. so it's like a reverse link kinda.. instead of the iframe changing, the rest of the site changes.. or at least the iframe is moved to a new page... I need to know how to do this, it would help out alot with my bandwidth, and would just be alot easier. I was planing on doing this with multiple 'content' pages, and have the second page (the one that the iframe is moved to) stay the same. It would also help if i were to update the design of the site. So instead of updating a thousand pages, I'd only have to update about 4. I know there's other solutions to my updating problem, but i can't do that on a free host... and this is simpler for me.. It would be even better, if, when my 'content' page was loaded, but not in the iframe, the non-framed page would be re-directed to the framed page, this way i could easily add a site search to my web site.. Hi i work for a web design company and im new to dreamweaver and html My client needs me to create a main landing page for his site and it will say click here to enter and when i click here to enter it will require a user name and password to get into the site, how do i do that? |
|||||||