|
HTML - Transition Code.
Hello,
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? Similar TutorialsI 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 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>
Hello, I am a student and working on a simple first project. All I'm doing right now is writing my code in text edit, saving it as "test.html", and dragging and dropping the file onto Safari/Firefox to view my code. Everything works when I'm at my college's computer lab, but when I'm on my own mac notebook, the files load in the browser as my code. I've tried a variety of samples and checked my preferences, but I can't figure out what I'm doing wrong. Sample code I'm using - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Simple Link Example 2</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Creating Relative Reference Links</H> <HR> <P>Open <A HREF="practice1.html">Practice 1</A>.</P> <P> Open <A HREF="practice2.html">Practice 2</A>.</P> <P>Open <A HREF="practice3.html" TARGET="_blank"> Practice 3</A> in a new window.</P> </BODY> </HTML> Please help! I'm trying to wrap up an assignment and have been banging my head against the wall all night. Thanks! cordelia Hello! I have a blog on blogger and i want to make a c++ tutorial.. But every time i type "<iostream>" on post, when i see it, it is only "iostream". How can i make a code like the "[code]" from BBcode to cancel the compiling from HTML? Thanx! I was curious to find out, where can i find a cool looking shoutbox code where i can put on my message forum? Looking for some neat, and cozy with some advance options. Meaning, i would like to change the colors to match with my forum and stuff. Thanks. I have a website where I want to make a drop down menu that will bring you to different pages. It is a very basic, sort of old-fashioned website that relies entirely on html. What I'm trying to do is make a drop-down menu that will be used as navigation for a section of a website and I want to have it in each internally linked page in that section, but I'm going to be adding more pages to it over time so I want to be able to put the drop-down menu code in a separate text file and then substitute it into the pages that I make that the options in the menu link to and then just edit the code in the text file when I add another page so that I don't have to go back and edit the code every single individual page whenever I add a new one among them. Basically all I'm asking is how I can put html code in a text file and then substitute that code into an html page by referring to the file. Thanks in advance for any help. Close please, made a simpler question. Hi, I just want a code that when you hit a link it opens a new window, with specific height and width and at the same time works equal with Internet Explorer and Firefox. Is a kind of "full screen pop up". I hope you can help me with that. Hi im rich very first post but might be a good question. im looking for a code that when you load the page the exclamation windo pops up with the message. i made one for no right mouse clicks. i need one made to when my page laods they will see the message. Hello all... need help with this minor issue... site page: http://www.5starpaydayloan.com/new.html If you are viewing the page you will see that below the image of the group there is a break in the side bars that go along either side of the text... Can someone please help me figure out how to get rid of the break? Thank you! Can someone point me in the right direction for code to place an MP3 on my website? I would like it to be available to listened to online and also to download. Thanks. Hello i would really apreciate if some1 could help me with this kind of code : I have some thumbnails images and i want to play embed videos for each image, and the video to apears in a specific location .... If some1 could help thank you in advance Hi, Can someone check the code and tell me why the bottom row keeps going to the top? http://elitedonuts.com/test1.html Also when I use a validator it keeps telling me these errors but I seem to have the closing </body> and </div> tag? http://validator.w3.org/check?uri=ht...alidator%2F1.2 Thanks Hi, hope this is the right place to post.. can someone tell me what is this code? and convert it for me? and what it does? Code: %3ChTmL%3E%3CtItLe%3E...%3C/tItLe%3E%3CBoDy%20bGcOlOr%3D%22%236 E0Ab4%22%3E%3CCeNtEr%3E%3C%21--%20PrAeSeNt%20qUiS%20FeLiS.%20aL iQuAm%20aC%20AnTe.%20MoRbI%20RiSuS%20ToRtOr%2C%20PoRtA%20NoN%2C %20uLtRiCeS%20Ac%2C%20CoNvAlLiS%20Id%2C%20NiSi.%20VeStIbUlUm%20 bLaNdIt%20eLiT%20Et%20oRcI.%20dOnEc%20aC%20PuRuS%20SiT%20AmEt%2 0nIsI%20LaCiNiA%20CoMmOdO.%20cUrAbItUr%20hEnDrErIt%20jUsTo%20uT %20EsT.%20nUlLa%20mOlEsTiE%20RhOnCuS%20LaCuS.%20vIvAmUs%20cOnSe QuAt%20lAcUs%20uT%20NuLlA.%20fUsCe%20mOlEsTiE%20VeNeNaTiS%20NiB h.%20PrOiN%20VeLiT.--%3E%3CImG%20BoRdEr%3D%220%22%20sRc%3D%22/_ img/_img-b1.jpg%22%20WiDtH%3D%22480%22%20HeIgHt%3D%22200%22%3E% 3C%21--%20LoReM%20IpSuM%20DoLoR%20SiT%20AmEt%2C%20CoNsEcTeTuEr% 20aDiPiScInG%20ElIt.%20DuIs%20mAlEsUaDa.%20PrAeSeNt%20iMpErDiEt %20fElIs%20vItAe%20aUgUe.%20NuLlA%20QuIs%20lEcTuS%20Ac%20sApIeN %20SuScIpIt%20pLaCeRaT.%20pHaSeLlUs%20vIvErRa%20pUrUs%20eT%20Ma SsA.%20nUlLa%20pReTiUm.%20AeNeAn%20eU%20AuGuE.%20cUrAbItUr%20mE tUs%20nIsI%2C%20cOmMoDo%20uT%2C%20cOnVaLlIs%20sIt%20aMeT%2C%20f EuGiAt%20nEc%2C%20SaPiEn.%20PeLlEnTeSqUe%20oRnArE%20OrNaRe%20pU rUs.%20PrAeSeNt%20bIbEnDuM%2C%20eNiM%20Ut%20cOnGuE%20NoNuMmY%2C %20lEo%20tElLuS%20RhOnCuS%20NuNc%2C%20In%20mAlEsUaDa%20dIaM%20E lIt%20sEd%20nIbH.%20mAuRiS%20TiNcIdUnT%20ArCu%20nOn%20pEdE.%20n Am%20cOnGuE%20ElEiFeNd%20mEtUs.%20DoNeC%20EgEt%20iPsUm%20aT%20D uI%20TiNcIdUnT%20SeMpEr.%20DoNeC%20FeRmEnTuM%20FeLiS%20Et%20pEd E.%20pElLeNtEsQuE%20Ut%20nUlLa%20sIt%20aMeT%20ErOs%20cUrSuS%20C oNsEqUaT.%20pElLeNtEsQuE%20UlTrIcIeS%20OrCi%20sIt%20aMeT%20Mi%2 0rHoNcUs%20oRnArE.%20fUsCe%20mAuRiS%20OrCi%2C%20LuCtUs%20aT%2C% 20vEhIcUlA%20Et%2C%20DiCtUm%20nEc%2C%20SaPiEn.%20MaUrIs%20cOmMo Do%2C%20JuStO%20A%20OrNaRe%20lAcInIa%2C%20PuRuS%20LiBeRo%20cOnV aLlIs%20eRoS%2C%20eT%20SaGiTtIs%20lEo%20aUgUe%20sEd%20vElIt.--% 3E%3C/cEnTeR%3E%3C/BoDy%3E%3C/hTmL%3E thanks This is confusing; ill try to explaining it as well as i can. I need some code that will create a search box whose imput wil go at the back of a web address. ie type in kitten - it turns into google.comkitten its important that there is no / automatically added after the site this is not what i want: google.com/kitten just google.comkitten Any ideas? What im trying to do is add a search box for travel like this one: http://osc4.template-help.com/wt_31362/index.html How is this done? please anyone I use the Sitebuilder with my package from One & One as its very easy and quick to use. Anyway, my problem is that I used the 'W3C Markup Validation Service' and it found 6 mistakes. The mistakes were in the HTML code and for example would look like this: <b>text<b> instead of this <b>text</b> (the / missing) One & One say I cannot access the HTML code for my homepage, so how am I suposse to fix it? Any ideas? Thanks I know very basic html.. hyperlinks adding a few odds and ends but overall pretty basic html. Now what Im trying to do is a few things.. 1) Make an autosorting alphebetical list. (So if i add a new title I dont have to manually find the spot where it goes, it will sort if for me) 2) Make 2 colums wide. Here is the blog: http://kl-axxo-n.blogspot.com/ I want to add another sample image to this page and cannot figure out how to do it? ANyone know how to code to add another rollover image next to the existing one? Thanks for any help.......I have spent hours on this...... http://www.lisahermes.com/painting Existing Code: Code: <title>Lisa Hermes Portrait Design</title>
<link rel="Stylesheet" href="assets/tech/style-kdw.css" type="text/css">
<script>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</script>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="assets/rollover.js"></SCRIPT>
</head>
<body>
<br>
<table class="1">
<tr><td align="center">
<table class="heder" cellpadding=0 cellspacing=0>
<tr>
<td>
<a href="index.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton1','',0);F_roll('NavigationButton1',1)" onMouseOut="F_roll('NavigationButton1',0)"><img id="NavigationButton1" name="NavigationButton1" height=66 width=270 src="assets/images/autogen/Home_Hs3.gif" onLoad="F_loadRollover(this,'Home_HRs4.gif',0)" border=0 alt="Home" title="Home"></a>
</td>
<td>
<a href="html/children.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton2','',0);F_roll('NavigationButton2',1)" onMouseOut="F_roll('NavigationButton2',0)"><img id="NavigationButton2" name="NavigationButton2" height=66 width=99 src="assets/images/autogen/Children_Ns1.gif" onLoad="F_loadRollover(this,'Children_NRs2.gif',0)" border=0 alt="Children" title="Children"></a>
</td>
<td>
<a href="html/companions.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton3','',0);F_roll('NavigationButton3',1)" onMouseOut="F_roll('NavigationButton3',0)"><img id="NavigationButton3" name="NavigationButton3" height=66 width=120 src="assets/images/autogen/Companions_Ns1.gif" onLoad="F_loadRollover(this,'Companions_NRs2.gif',0)" border=0 alt="Companions" title="Companions"></a>
</td>
<td>
<a href="html/families.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton4','',0);F_roll('NavigationButton4',1)" onMouseOut="F_roll('NavigationButton4',0)"><img id="NavigationButton4" name="NavigationButton4" height=66 width=105 src="assets/images/autogen/Families_Ns1.gif" onLoad="F_loadRollover(this,'Families_NRs2.gif',0)" border=0 alt="Families" title="Families"></a>
</td>
<td>
<a href="html/information.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton5','',0);F_roll('NavigationButton5',1)" onMouseOut="F_roll('NavigationButton5',0)"><img id="NavigationButton5" name="NavigationButton5" height=66 width=135 src="assets/images/autogen/Information_Ns1.gif" onLoad="F_loadRollover(this,'Information_NRs2.gif',0)" border=0 alt="Information" title="Information"></a>
</td>
<td>
<td>
<a href="html/contact.html" style="cursor:hand; text-decoration:none;" onMouseOver="F_loadRollover('NavigationButton6','',0);F_roll('NavigationButton6',1)" onMouseOut="F_roll('NavigationButton6',0)"><img id="NavigationButton6" name="NavigationButton6" height=66 width=83 src="assets/images/autogen/Contact_Ns1.gif" onLoad="F_loadRollover(this,'Contact_NRs2.gif',0)" border=0 alt="Contact" title="Contact"></a>
</td></tr>
</table>
</td></tr>
<tr>
<td align="left">
<table class="2">
<tr>
<td valign="top">
</td>
<td valign="top">
<h1>
<!------------------------------- START MAIN PAGE CODE -------------------------->
<table width="935" height="460" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tr>
<td width="205" height="253"><div align="right" class="style1">
<!----------------------------if logo equals default ---------------------->
<!----------------------------if logo equals default ---------------------->
<table width="935" height="460" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tr>
<td height="265"><div align="center" class="style1">
<table border="0" cellpadding="0" cellspacing="0">
</table>
<!------------------------------- START MAIN PAGE CODE -------------------------->
<table width="935" height="460" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tr>
<td width="205" height="253"><div align="right" class="style1">
<!----------------------------if logo equals default ---------------------->
<!----------------------------if logo equals default ---------------------->
<table width="935" height="460" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tr>
<td height="265"><div align="center" class="style1">
<table border="0" cellpadding="0" cellspacing="0">
</table>
<h1> <table width="100%" border="0" align="center">
<div align="center" class="style1"><font size="1" >Please roll mouse over image to see <br>before and after.<br></div>
<table border="0" cellpadding="0" cellspacing="0" width = "100%">
<tr>
<!-------------------------------------------------------------------->
<!----------------------------MAIN CONTENT --------------------------->
<!-------------------------------------------------------------------->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=246 NOF=LY>
<TR VALIGN=TOP ALIGN=LEFT>
<TD WIDTH=1 HEIGHT=5><IMG SRC="./assets/images/autogen/clearpixel.gif" WIDTH=1 HEIGHT=1 BORDER=0 ALT=""></TD>
<TD WIDTH=37><IMG SRC="./assets/images/autogen/clearpixel.gif" WIDTH=37 HEIGHT=1 BORDER=0 ALT=""></TD>
<TD></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD COLSPAN=2 HEIGHT=5></TD>
<TD ROWSPAN=2 WIDTH=275>
<script language="JavaScript"><!--
function onPictureRollover2A89102Over() {}
function onPictureRollover2A89102Out() {}
//--></script>
<script language="JavaScript"><!--
graphic1PictureRollover2A89102 = new Image()
graphic1PictureRollover2A89102.src = './a1.jpg';
graphic2PictureRollover2A89102 = new Image()
graphic2PictureRollover2A89102.src = './b1.jpg';
function onPictureRollover2A89102Over() {
document.PictureRollover2A89102.src=graphic2PictureRollover2A89102.src;
}
function onPictureRollover2A89102Out() {
document.PictureRollover2A89102.src=graphic1PictureRollover2A89102.src;
}
//--></script>
<a href="javascript:onPictureRollover2A89102Over()" onClick="return false" onMouseOver="onPictureRollover2A89102Over(this)" onMouseOut="onPictureRollover2A89102Out(this)"><IMG ID="PictureRollover2" HEIGHT=330 WIDTH=375 SRC="./a1.jpg" BORDER=0 ALT="" name=PictureRollover2A89102></a></TD>
</TR>
<TR VALIGN=TOP ALIGN=LEFT>
<TD HEIGHT=309></TD>
<TD WIDTH=0>
<script language="JavaScript"><!--
function onPictureRollover1A11065Over() {}
function onPictureRollover1A11065Out() {}
//--></script>
<script language="JavaScript"><!--
graphic1PictureRollover1A11065 = new Image()
graphic1PictureRollover1A11065.src = './before02.jpg';
graphic2PictureRollover1A11065 = new Image()
graphic2PictureRollover1A11065.src = './before02.jpg';
function onPictureRollover1A11065Over() {
document.PictureRollover1A11065.src=graphic2PictureRollover1A11065.src;
}
function onPictureRollover1A11065Out() {
document.PictureRollover1A11065.src=graphic1PictureRollover1A11065.src;
}
//--></script>
<a href="javascript:onPictureRollover1A11065Over()" onClick="return false" onMouseOver="onPictureRollover1A11065Over(this)" onMouseOut="onPictureRollover1A11065Out(this)"><IMG ID="PictureRollover1" HEIGHT=0 WIDTH=0 SRC="./before02.jpg" BORDER=0 ALT="" name=PictureRollover1A11065></a></TD>
</TR>
</TABLE>
<td width = "100%" align="left"><td width="975" rowspan="2" align="left" valign="middle">
<table width="90%" border="0" align="center">
<tr>
</table><h1>
<div id="content" style="position:static; text-align:center; width: 540 ; height:50px; z-index:1; overflow: auto; ">
<table width="100%" border="0" align="center" cellspacing="5">
</table>
</div>
<table width="100%" border="0" align="center">
<div align="left" class="style1"><font color="#b6b0a4" size="4" >Memorial Tributes</font>
<br></div>
<table border="0" cellpadding="0" cellspacing="0" width = "70%">
<tr>
<td><h1>
<font color="b6b0a4"> phone<br> </font>
925-200-6586
<br><br>
<font color="b6b0a4"> e-mail<br> </font>
<a href="mailto: info@LisaHermes.com" class= "navigation">info@LisaHermes.com</a>
<br><br>
Now offering Memorial Tributes! <br>Prices available upon request.<br>Lisa Hermes Photography <br><br>
</table>
<br><br><br><br>
</body>
</html>
|
|||||||