Today I was trying to add a simple Spry slide effect to some text on one of my web sites, however the text dissapears in IE7. I managed to cut it down to the most basic code where the problem occurs and it turns out to be a table cell. I took the slide example and cut it down until it doesn't work. This code works fine in Firefox. If you remove the table tags, it also works in IE7. However, with the table tags present, the text doesn't show up at all in IE7 (although the background color does slide up and down). This is using Spry 1.6 prerelease.
Here's the code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Slide Effects Sample</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<script src="../../includes/SpryEffects.js" type="text/javascript"> </script>
<style type="text/css">
.animationContainer
{
height: 220px;
}
.demoDiv
{
background-color: #CCC;
height: 200px;
overflow: hidden;
}
.hideInitially
{
visibility: hidden;
}
</style>
</head>
<body>
<table><tr><td>
<form method="get" action="grow_sample.html"><input type="button" onclick="slide_hidden.start();" value="Slide Example" /></form>
<div class="animationContainer">
<div class="demoDiv hideInitially" id="example5">
<p><strong>Example - Slide from 0% to 100% in 2 seconds</strong>
<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiam nonumy eirmod tempor invidunt ut labore et dolore magnaaliquyam erat, sed diam voluptua. At vero eos et accusam etjusto duo dolores et ea rebum. Stet clita kasd gubergren, nosea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<script type="text/javascript">
var slide_hidden = new Spry.Effect.Slide('example5', {duration: 500, from: '0%', to: '100%', toggle:true});
</script>
</td></tr></table>
</body>
</html>
It turns out, if you put the <script> tag below the </table>, everything works fine.
Wacky...
By the way, also if you set the .hideInitially div to "display: none" instead of "visibility:hidden", the same error occurs (in IE7 only). In my opinion, display: none would be much more useful than visibility: hidden. I was able to work around it by using two Spry slide effects - one that only happens when the page loads and initially closes the text (setting it to display:none) and the other that the user clicks on to open and close the text after that.
Hopefully they'll get these issues fixed in the next release of Spry.
Wednesday, October 17, 2007
Wednesday, October 10, 2007
Community Server Blog Post Approval Process
One thing glaringly absent in Community Server is the ability to have multiple blog authors with an approval process. The idea would be to have a blog writers who must submit their blog posts to a blog administrator for publishing. I've been looking into a solution for this and came up with one that should meet our needs for now.
My idea was to add a new role that would be able to save a blog post, but wouldn't have access to the publish button. To do this, I modified the CreateEditBlogPost.ascx file in \ControlPanel\Blogs\ to hide the publish button for everyone except a specific blog administrator role. Here's the code:
<CSControl:ConditionalContent runat="server">
<ContentConditions>
<CSControl:UserInRoleCondition Role="Solutions Blog Administrator" UseAccessingUser="true" runat="server" />
</ContentConditions>
<TrueContentTemplate></TrueContentTemplate>
<FalseContentTemplate><div style="display: none"></FalseContentTemplate>
</CSControl:ConditionalContent>
<strong><CP:resourcelinkbutton id="PostButton" runat="server" resourcename="CP_Blogs_CreateEditBlogPost_Post" CssClass="CommonTextButtonBig" /></strong></div>
This code would go at the bottom of the CreateEditBlogPost.ascx file where the publish button is now. As you can see, I just hid the publish button using a div with display:none in every case except when the user's role is "Solutions Blog Administrator". This allows me to specifically set who can publish to the blog while still allowing everyone else to write to the blog. Now I should be able to write a csmodule that will send an e-mail to the administrator(s) whenever a new blog is posted so they know they need to review the post and publish it.
Ideally there would be a permissions set into Community Server so I wouldn't have to hardcode the admin role. I'm also not sure how it will hold up once we have multiple blogs (and different administrators for each). But, this should work for now.
My idea was to add a new role that would be able to save a blog post, but wouldn't have access to the publish button. To do this, I modified the CreateEditBlogPost.ascx file in \ControlPanel\Blogs\ to hide the publish button for everyone except a specific blog administrator role. Here's the code:
<CSControl:ConditionalContent runat="server">
<ContentConditions>
<CSControl:UserInRoleCondition Role="Solutions Blog Administrator" UseAccessingUser="true" runat="server" />
</ContentConditions>
<TrueContentTemplate></TrueContentTemplate>
<FalseContentTemplate><div style="display: none"></FalseContentTemplate>
</CSControl:ConditionalContent>
<strong><CP:resourcelinkbutton id="PostButton" runat="server" resourcename="CP_Blogs_CreateEditBlogPost_Post" CssClass="CommonTextButtonBig" /></strong></div>
This code would go at the bottom of the CreateEditBlogPost.ascx file where the publish button is now. As you can see, I just hid the publish button using a div with display:none in every case except when the user's role is "Solutions Blog Administrator". This allows me to specifically set who can publish to the blog while still allowing everyone else to write to the blog. Now I should be able to write a csmodule that will send an e-mail to the administrator(s) whenever a new blog is posted so they know they need to review the post and publish it.
Ideally there would be a permissions set into Community Server so I wouldn't have to hardcode the admin role. I'm also not sure how it will hold up once we have multiple blogs (and different administrators for each). But, this should work for now.
Tuesday, October 09, 2007
Extending content to the bottom of the window
Here's a nifty little bit of javascript that extends the content of a container (in this case, a td with id "shadow" and a div with id "contentarea") to the bottom of the browser window, regardless of the height of the window. The first function gets the height of the browser and the second function does the extending.
You can see it in action at http://www.equitiesfirst.com.
//Gets the height of the browser window
function getheight() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
//Extends the content to the bottom of the browser window
function adjustHeight()
{
if (document.getElementById) {
var targetElement=document.getElementById('shadow');
//extend the shadows
targetElement.style.height=String(getheight())+'px';
//extend the content area (minus the header area)
targetElement=document.getElementById('contentarea');
targetElement.style.height=String(getheight()-413)+'px';
}
}
window.onresize=adjustHeight;
window.onload=adjustHeight;
You can see it in action at http://www.equitiesfirst.com.
//Gets the height of the browser window
function getheight() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
}
else if( document.documentElement && ( document.documentElement.clientWidth document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
//Extends the content to the bottom of the browser window
function adjustHeight()
{
if (document.getElementById) {
var targetElement=document.getElementById('shadow');
//extend the shadows
targetElement.style.height=String(getheight())+'px';
//extend the content area (minus the header area)
targetElement=document.getElementById('contentarea');
targetElement.style.height=String(getheight()-413)+'px';
}
}
window.onresize=adjustHeight;
window.onload=adjustHeight;
Subscribe to:
Posts (Atom)