Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

172 lines (167 sloc) 4.333 kb
<style>
#foo-container {
top: 50px;
left: 450px;
position: absolute;
}
#foo {
width: 200px;
height: 200px;
border: 2px solid black;
padding: 10px;
}
.blackText {
color: #000;
}
.blueText {
color: #00f;
}
#logContaner {
position: absolute;
left: 450px;
top: 280px;
}
#hidden_foo {
display: none;
width: 200px;
height: 40px;
border: 2px solid black;
padding: 10px;
margin-top: 10px;
}
</style>
<div id="foo-container">
<div id="foo" class="blackText">
This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text.
</div>
<div id="hidden_foo">I am hidden by CSS.</div>
</div>
<div id="logContaner" class="blueText"></div>
<script src="/depender/build?require=More/Element.Shortcuts,Core/Element.Event"></script>
<script>
var log = function(msg){
$('logContaner').adopt(new Element('p', {text: msg}));
};
var reset = function(element){
element.eliminate('element:_originalDisplay');
};
makeActions([
{
title: "Element.hide",
description: "Switches an element from display:block|inline|etc to display:none",
fn: function(){
$('foo').setStyle('display','block');
$('foo').hide();
}
},
{
title: "Element.show",
description: "Switches an element from display:none to display:block",
fn: function(){
$('foo').setStyle('display','none');
$('foo').show();
}
},
{
title: "Element.hide twice",
description: "Hides an element twice and then shows it after a pause",
fn: function(){
$('foo').show();
reset($('foo'));
$('foo').hide();
$('foo').hide();
(function(){
$('foo').show();
}).delay(250);
}
},
{
title: "Element.show: show an element hidden by css",
description: "Takes an element with a css class that has a display:none definition and shows it to display:block.",
fn: function(){
$('hidden_foo').show();
}
},
{
title: "Element.show(type)",
description: "Switches an element from display:none to display:inline. (It switches back after a second.)",
fn: function(){
$('foo').hide();
$('foo').show('inline');
(function(){
$('foo').setStyle('display', 'block');
}).delay(1000);
}
},
{
title: "Element.toggle",
description: "Toggles between display:none and block.",
fn: function(){
$('foo').toggle();
}
},
{
title: "Element.isDisplayed",
description: "Returns true if the element's display is not = none. (See log message displayed below after you click).",
fn: function(){
$('foo').hide();
if (!$('foo').isDisplayed()){
log('hide successful; foo is not visible');
} else {
log('either hide or isDisplayed failed');
$('foo').visTest = false;
}
$('foo').show();
$('foo').visTest = false;
if ($('foo').isDisplayed()){
log('show successful; foo is visible');
$('foo').visTest = true;
} else {
log('either show or isDisplayed failed');
$('foo').visTest = false;
}
}
},
{
title: "Element.isVisible",
description: "Returns true if the element is visible. (See log message displayed below after you click).",
fn: function(){
$('foo-container').hide();
if (!$('foo').isVisible()){
log('hide successful; foo is not visible');
} else {
log('either hide or isDisplayed failed');
}
$('foo-container').show();
if ($('foo').isVisible()){
log('show successful; foo is visible');
} else {
log('either show or isDisplayed failed');
}
}
},
{
title: 'Element.swapClass (blue)',
description: "Changes the text from black to blue.",
fn: function(){
$('foo').show();
$('foo').swapClass('blackText', 'blueText');
}
},
{
title: 'Element.swapClass (black)',
description: "Changes the text from blue to black.",
fn: function(){
$('foo').show();
$('foo').swapClass('blueText', 'blackText');
}
},
{
title: 'Document.clearSelection',
description: 'Run this function. You have 3 seconds to select some text. Then it should clear the selection',
fn: function(){
document.clearSelection.delay(3000, document);
}
}
]);
</script>
Jump to Line
Something went wrong with that request. Please try again.