|
HTML - Help! Sexy Spry Effect Doesn't Work
i think this is an easy one.....
i am using 2 identical spry cluster effects - but two links to two slides i have problem - the spry slide effect works fine for the first instance - but not for the second instance. what changes need to be made to the Cluster call to get it to work?!?! here is a snippet of my source code to reveal the problem.... ///////////////////////////////////////////////////////////////////////////////////////// <!-- WORDSFORMS --> <Div id="sec1" style="display: none;" class="sec1"><strong>Wordsforms</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --> </a> <div id="first_cluster" class="wordsforms" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> <!-- GIRLSBOYS --> <div id="sec2" style="display: none;" class="sec2"><strong>GirlBoys</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --></a> <div id="second_cluster" class="girlsboys" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> ///////////////////////////////////////////////////////////////////////////////////////// can somebody help????? ben www.d-e-p-i-c-t.com Similar TutorialsAfter the "marital status" and "sex" are selected, I want to assign a default value to the "Title" field. I think I am calling the function DefaultTitle incorrectly because I am not even seeing the initial alert box. Any suggestions? function DefaultTitle(strng,x) { alert("Checking Title."); var Sex=documet.PatientEntry.personal_sex.value; var MaritalStatus=strng; if (Sex=="Female" && MaritalStatus=="Married") {document.PatientEntry.personal_Title.value="Mrs."; HighlightWhite(x); Return; } if (Sex=="Male") {docment.PatientEntry.personal_Title.value="Mr."; HighlightWhite(x); Return; } if (Sex=="Female" && MaritalStatus=="Single") {document.PatientEntry.personal_Title.value="Miss"; HighlightWhite(x); Return; } if (Sex=="Female") {document.PatientEntry.personal_Title.value="Ms."; HighlightWhite(x); Return; } } Sex: <SELECT name="personal_sex" id="personal_sex" tabindex=7> <OPTION>Male</OPTION> <OPTION>Female</OPTION> </SELECT> Marital status: <SELECT name="personal_MaritalStatus" id="personal_MaritalStatus" onmouseout="DefaultTitle(this.value,this.id)" tabindex=8> <OPTION>Married</OPTION> <OPTION>Single</OPTION> <OPTION>Separated</OPTION> <OPTION>Divorced</OPTION> <OPTION>Widow(er)</OPTION> </SELECT> Title: <SELECT name=personal_Title tabindex=9> <OPTION>Mr.</OPTION> <OPTION>Mrs.</OPTION> <OPTION>Ms.</OPTION> <OPTION>Miss</OPTION> <OPTION>Dr.</OPTION> </SELECT><BR> Hi, I need help I tried to check the code of my website it works perfectly well in google chrome and firefox but not in Internet explorer. i tried your suggestions but still it doesn't work. Hey all, I just heard from a visitor of my page http://www.randypauschsubtitles.de that the page doesn't work in IE and does only display the top frame with the title of the page. As a Firefox user, this problem is new to me. Unfortunately, I created the page with Dreamweaver/Frontpage and don't know much about HTML etc. What can I change to make my page work in IE too? Thanks for your help! Okay, I received some pictures from a fashion designer to use for her Web site. I first tested the code by using a different image that I found on Google and it worked. However, when I used her image it was broken. The next option I tried was I used my photobucket account and make an HTML reference to the image. Even when I upload it to photobucket it gives me an error. So...I don't know if it's still my problem or possibly she gave me the wrong product. The images were .jpg. Here's the image code I tried: <img src="/pictures/ct1.jpg"/> If it's not the code, then what can I do to make sure she gives me pictures that work? I made two style sheets for my project. First one is style.css, and the scond one is ie6.css which is intentionally left blank. This latter (ie6.css) is, ofcourse, made specialy for IE6 and in HTML head section I put
Code: <!--[if lt IE 7.0]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
I can't realise what's wrong, since when I preview site in IE6 it acts like conditional statement is not there. It should display page with no style, but still the page is displayed with style.css styling. You can check it out on: http://www.byethost.com/ for page is very simple. Thank's in advance! EDIT: I fixed it all! I just had unnecessary table indications. duuuhhhh. Hopefully my fix will help someone else with the same problem, though? Hi everyone! I am new here, so please bear with me! I found a few posts about this, but none seemed to fix my problem. First off, my website is he http://www.ashleywilliamsflute.com My problem is that the banner on top is set to be at 65% width. This works great in firefox and safari, but the image won't resize in IE. So, I tried using a css tag, too, and that didn't work. Here's the code I have: Code: <!DOCTYPE html>
<html>
<head>
<title>Ashley Williams: Flutist</title>
<body bgcolor="#000000">
<style type="text/css">
A:link {background: #000000; font-weight: bold; text-decoration: none; color: #c4eaef; letter-spacing: 3px;}
A:visited {background: #000000; font-weight: bold; text-decoration: none; color: #c4eaef; letter-spacing: 3px;}
A:active {background: #c4eaef; font-weight: bold; text-decoration: none; color: #000000; letter-spacing: 3px;}
A:hover {background: #c4eaef; font-weight: bold; text-decoration: none; color: #000000; letter-spacing: 3px;}
h2 {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #c4eaef; }
p {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #f1ebf1; size: 11pt; letter-spacing: 2px; line-height: 20pt; strong: 15pt; text-align: justify; margin-left: 25%; margin-right: 25%; text-indent: 30px; }
#banner {
float:center;
width:65%;
}
</style>
</head>
<body>
<div align="center" width=65%>
<table border="0" width=65%>
<tr>
<img id="banner" src="topbanner.jpg" width=65%>
</tr>
</div>
<tr>
<h2>
<div align=center width=65% style="background-color: "#000000">
| <a href="index.html"> HOME </a> |
<a href="resume.html"> RESUME </a> |
<a href="teaching.html"> TEACHING </a> |
<a href="replist.html"> REPERTOIRE LIST </a> |
<a href="programs.html"> PROGRAMS </a> |
<a href="art.html"> ART </a> |
<a href="contact.html"> CONTACT </a> |
<a href="links.html"> LINKS </a> |
</div>
</h2>
</tr>
<P>
IE also doesn't use my text settings, like the margins I chose. I'm not sure how to fix this. I used to make websites a lot, but haven't in a few years, not since CSS was just starting to be popular, and I feel quite lost! I hope someone will be able to help me-you all seem very knowledgeable and helpful so I will cross my fingers. Thanks a lot, everyone! -Ashley Okay I have tested the following code in all browsers and IE is the only one that it doesn't work for for .html pages. It does work for .asp pages though. I do not want to use iframes. Any suggestions? <object type="text/html" height="100%" width="100%" data="http://www.websitename.com"> </object> I have this code in my website: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>PinkuHaruKoneko</title> </head> <body text="#ffffff"> <font face="arial"> <style> <!-- A{height:1px;behavior:url(linkhilight.htc);filter:progid:dximagetransform.microsoft.gradientwipe duration=1)} A:link { text-decoration: none; color:#ffffff;} A:visited { text-decoration: none; color:#ffffff; } A:hover { text-decoration:line-through; cursor: crosshair; color:#ffffff;} body { scrollbar-arrow-color: #CEE0F6; scrollbar-darkshadow-color: #090E3C; scrollbar-track-color:#090E3C; scrollbar-face-color: #275674; scrollbar-shadow-color:#CEE0F6; scrollbar-highlight-color:#CEE0F6; scrollbar-3dlight-color: #090E3C; text-align:justify} h1 { border: 1px solid #000000; background-color:#0000ff; font-size:14px; text-align:center; } --> </style> With that code, text align justify -elements doesn't work and h1 doesn't work at IE. If I take away that thing before <html>, it works but in IE bg isn't transparent anymore. Is there anything what I can replace that doctype-thing and get that code work in Mozilla and IE? I'm completely baffled. I have a contact form on this website: http://www.waldronforest.com/ that works just fine when I test it in FireFox, but when I try to use it in internet explorer I can't even click on the fields. Anyone have any idea why? Thanks! Hi guyz, I have created my first site for a school project. The site has been validated, does work properly on IE but it doen't work well in FF. Please have a look and try to find out the errors. Thanks, the html code is: HTML Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><link rel= "stylesheet" type="text/css" href="external.css" /> <title>Business Environment Study Support</title> </head> <body> <div id="header"> <h1><img src="logo3.jpg" alt="" /></h1> </div> <div id="mainmain"> <div id="navcontainer"> <ul id="navlist"> <li><a href="lessonone.html">lesson one</a></li> <li><a href="#">Topic name I</a></li> <li><a href="#">Topic name II</a></li> <li><a href="#">Topic name II</a></li> <li><a href="#">Topic name IV</a></li> <li><a href="#">Topic name IV</a></li> </ul> </div> <!--main navigation menu elements--> <div id="bannerbox"> <p><a href="http://www.independent.co.uk/" target="_blank"><img src="independent.jpg" alt="The Independent Magazine"/></a></p> <p><a href="http://http://www.bton.ac.uk/" target="_blank"><img src="brighton-logo.jpg" alt="University of Brighton"/></a></p> <p><a href="http://www.theguardian.co.uk/" target="_blank"><img src="guardian-logo.jpg" alt="The Guardian"/></a></p> <p><a href="https://studentcentral.brighton.ac.uk/" target="_blank"><img src="studentlogo.jpg" alt="Blackboard"/></a></p> </div> <!-- right side banners--> <div id="mainbody"> <h3>Lore Ipsum</h3> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p><p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <br /> <p><a href="index.html" target="_top">-top-</a></p> </div> <!-- main body elements--> </div> <div id="footr"> <div id="footer"> <ul id="navilist"> <li><a href="mailto:o.szotyori@brighton.ac.uk?cc=dn36@brighton.ac.uk">contact Us</a></li> <li><a href="#">about the project</a></li> <li>made by: Dumiso and Oliver</li> <li>December, 2009</li> </ul> </div> <div id="w3valid"> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p> <!-- shows current validation of the homepage--> </div> </div> <!-- the footer is separated from the main body so it can be manipulated separety--> </body> </html> and the CSS code is: Code: body {background-color: #CCCCCC;}
/* this sets up the background of the page */
h3 { font-family: verdana; color: #FF6600; }
p { font-family: verdana; color: #000000; font-size: 12px;}
/* these set up the font families of the header and paragraph behavors */
a {text-decoration:none; font-family: verdana;}
a:link {color: #FF6600}
a:visited {color: #993300}
a:hover {color: #FF6600; font-weight: bold;}
a img {border: 0;}
/* these set up the font families of the links behavors */
#header{
width: 800px;
height: 200px;
text-align: center;
margin: auto;
padding-bottom: 5px;
}
#mainmain{
background-color: #ffffff;
text-align: center;
width: 1024px;
margin: auto;
border-bottom: 2px solid #FF6600;
}
#navcontainer ul
{
text-align: center;
margin: auto;
background-color: #FF6600;
color: White;
float: left;
width: 1024px;
font-size: 11px;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1.5em;
background-color: #FF6600;
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #993300;
color: #CCCCCC;
font-weight: bold;
}
#bannerbox{
float: right;
margin-top: 60px;
min-height: 700px;
min-width: 180px;
text-align: center;
}
#mainbody{
float: left;
padding: 20px;
width: 804px;
min-height: 700px;
margin-top: 20px;
background-color: white;
}
#footer{
position: relative;
float: left;
height: 20px;
overflow: hidden;
width: 500px;
}
#navilist{
list-style-type: none;
margin: 0;
padding: 0;
}
#navilist li{
border-left: 1px solid #000;
float: left;
line-height: 1.1em;
margin: 0 .5em 0 -.5em;
padding: 0 .5em 0 .5em;
font-size: small;
color: #FF6600;
}
#w3valid{
float: right;
position: relative;
width: 88px;
height: 31px;
}
#footr{
text-align:center;
width: 1024px;
margin: auto;
padding-top:10px;
}
Hi all, Before I pour cold water onto Mozilla's FireFox to melt it's flames and kill it, I've a question : Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Tables 14</title> </head> <body> <table border="1" width="80%"> <colgroup span="3" align="right" /> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </table> </body> </html> As you can see, there's 3 columns and I'm using <colgroup span..../> to mass-align the cells to the right. However, when I preview it in FireFox, there's no effect. In Internet Explorer, the cells are right-aligned(which is correct). I also tried doing the CSS equivalent, but FireFox still fails. When I tried changing some other settings, like : <colgroup span="3" style="background-color:red;" />, FireFox renders the code correctly. Seems that FireFox doesn't like to right-align text in columns, eh? Thanks! Xeon. I made a custom 404 error page and edited my .htaccess file with this Code: ErrorDocument 404 /error.html I've followed many different tutorials for this and nothing seemed to work. It still shows the default apache 404 page. Any suggestions? -Hartless Hi Guys, I hope someone can help me out with this. I have a salespage at: http://www.conqueryourpart3.com I want to add a countdown timer to the top of this salespage. I have designed it and it works fine he http://www.conqueryourpart3.com/countdown1.htm I have copied the code from the countdown timer page and inserted it at the top of my salespage. However, the countdown timer doesn't work, it's no longer in the middle of the page and the text lower down the page now goes too close to the margins! See he http://www.conqueryourpart3.com/combined.htm Can anyone help me with this as I can't figure out what I've done wrong. Thanks, Simon I am using firefox version 3.0. I want to update it but i facing one problem after updating. I want to use some google toolbar but updated version doesn't sport it. Some one help me in this problem. Hi, I'm not very advanced or anything, but I've coded websites before from scratch using Text Edit and an FTP client. I haven't done it for a few years and recently made a website with Cyber duck as the FTP client and SubEthaEdit as the external editor. I made a simple code for frames, and the site looks terrific on my Mac's Safari and Internet Explorer. When I checked it out on my friend's PC, it's just one big color background and nothing else. It also doesn't work on Mac's Firefox. I don't know what I did wrong, and how to fix the code to make it work on PCs or Firefox. Do PCs not recognize code that Macs do? Is there a way to change it? It's probably my fault, I just don't know what it's missing. I'd appreciate any help anyone has to offer, because I'm clueless and disappointed about it. Thanks, Jenny The code like: bgcolor="rgb(255,255,0)" is working well in IE but not in Opera. Is it exsist a method to create a color multibrowserly? I am writing an application that creates html page with Javascript game and I can't write color like usualy "#FD3800" Hi, I was hoping someone could work out why when i assign text-align:right to a col element it doesn't align all the text in that column to the right. I've called the column col1, and in the css have put col1 { text-align:right }. Any ideas why this doesn't work? The text-align:right does work if put it straight into all of the td's within that column. Thanks, Matthew Millar Hey guys, What I am trying to do is align a whole table to the right inside of a td tag of another table. It looks fine in IE, but in firefox it comes out wrong. Any idea what I can do? Here is the code: Code: <table border="1px" style="width: 100%;" id="rptPrintform:alignBtn_pg_id">
<tbody>
<tr>
<td class="alignRight">
Correct
</td>
</tr>
<tr>
<td class="alignRight">
<table border="1px">
<tr>
<td class="alignRight">
Text
</td>
<td class="alignRight">
Text 2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alignRight">
Correct
</td>
</tr>
</tbody>
</table>
What I would like is for it to work in firefox the exact same way it works in IE. Thanks, Grae Hi! I have created a simple site that I uploaded on freespacia.com and then used co.cc to give it a shorter name. I have a form on my site, on the first page. When I load the site directly from freespacia the submit button works, but when I access the site on .co.cc, the submit button does not work. What could be the problem? hi, I don't get why the onclick event is not handled by IE. But it perfectly works in Firefox and Safari. http://milcom.lu/mil/index.php?optio...t&directory=61 This is the code: Quote: <img width="300" src="http://milcom.lu/mil/plugins/content/plugin_jw_sig/showthumb.php?img=Agua/Gallery/teddy_53.jpg&width=300&height=200&quality=100" onclick="enlarge(this)"/> thanks Patrick |
|||||||