Learn VBA & Macros in 1 Week!

HTML - Sliding In?

Full Excel VBA Course - Beginner to Expert

Sliding In?	View Content

Goodafternoon,

How can I make pictures slide in, when you open the page?

Full Excel VBA Course - Beginner to Expert

Sliding Div

Similar Tutorials

View Content

Hi all - I have created an entry page for my site allowing visitors to decide which section to enter. I have two images that slide on mouse over using javascript.

http://www.colletts.co.uk/dolomites_pyrenees.html

I used a lightweight Javascript Accordian to accomplish this from

http://www.leigeber.com/2008/05/hori...ccordion-menu/

What I want to do is accomplish the same thing with a div and not an image allowing to ramp up the SEO involved, make the entry button a rollover and separate pictures and text rather than just two images. Any ideas?

Any experience of this?

please help,

Mas

Sliding Images

Similar Tutorials

View Content

Hi,

can you suggest me where I can find a snippet do to these kind of animations (sliding images) ?

I would like to integrate it in a Joomla website.

http://wearebuild.com/

thanks

Sliding Navigation Menu

Similar Tutorials

View Content

Hi,

Can anybody tell me how to code a sliding navigation bar? By sliding navigation menu i mean that when the user scrolls down the page, the navigation menu follows the screen down and vice versa.

Below I have pasted my code for my navigation menu.

Cheers,

<div id"quicklinks">
<p id="quicklinks">

<img src="images/greekflag.jpg" alt="Greek Flag"><br>
<br>
<a href="index.html">Home</a><br>
<br>
<a href="pages/apartment.html">Apartment Details</a><br>
<br>
<a href="pages/kassiopi.html">Kassiopi</a><br>
<br>
<a href="pages/corfu.html">Corfu</a><br>
<br>
<a href="pages/corfutimeline.html">Corfu Timeline</a><br>
<br>
<a href="pages/gallery.html">Gallery</a><br>
<br>
<a href="pages/quiz.html">Corfu Quiz</a><br>
<br>
<u><b>External Links</b></u><br>
<br>
<a target="_blank"href="http://www.kassiopi.info">Kassiopi Experience</a><br>
<br>
<a target="_blank" href="http://www.kassiopi.org">Kassiopi</a><br>
<br>
<a target="_blank" href="http://www.greeklandscapes.com/greece/corfu.html">Hydropolis Water<br> Park</a><br>
<br>
<a target="_blank" href="http://www.agni.gr">Agni</a><br>
<br>
<a target="_blank" href="http://www.kassiopi-cosmic.com">Kassiopi-Cosmic</a><br>
<br>
<a target="_blank" href="http://www.aqualand-corfu.com">Aqualand</a><br>
<br>
<a target="_blank" href="http://www.yannisrentacar.gr">Yannis Rentacar</a><br>
<br>
<img src="images/greekflag.jpg" alt="Greek Flag">
</div>
</p>

Naive Newbie Needs Help With Sliding Panel Asap!

Similar Tutorials

View Content

Hey there,
I'm feeling my through the dark trying to put an animated sliding panel on my site.
It works, but its initial state is open, which defeats its purpose.
Will someone please look at this short code and let me know what to do?
Thanks!

Here's the HTML, followed by the CSS, followed by the javascript:

<html>
<head>
<link type="text/css" rel="stylesheet"
href="Animated-Collapsible-Panel-5.css" />
<script language="javascript" type="text/javascript"
src="Animated-Collapsible-Panel-5.js"></script>
</head>
<body>

<div style="width:470px;">
<div class="squarebox"><div
class="squareboxgradientcaption"
style="height:20px; cursor: pointer;"
onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div
style="float: left">I bequeath myself to the dirt to grow from the grass I love...</div><div
style="float: left; vertical-align:left"><img
src="../images/collapse.gif"
width="25" height="5" border="0"
alt="Show/Hide" title="Show/Hide"/></div>
</div><div class="squareboxcontent">
<img width="150" height="150"
src="http://www.lesliehawes.com/wordpress/wp-content/uploads/2008/09/chief-joseph-pendleton-blanket-pattern.jpg"
alt="This is an image" title="This is an image" /><br />Content goes here...</div>
<img width="170" height="0" alt="" src="../images/shadow.gif"/>
</div>
</body>

</html>

.squarebox {
width: 215%;
text-align: center;
overflow: hidden; }
.squareboxgradientcaption {
color: #ffffff;
padding: 5px;
background-image: url( );
background-repeat: repeat-x; }
.squareboxcontent {
background-color: #f5f5f5;
padding: 10px;
overflow: hidden;
border-top: solid px #336699; }

// not animated expand/collapse
function togglePannelStatus(content)
{
var expand = (content.style.display=="none");
content.style.display = (expand ? "block":"none");
toggleChevronIcon(content);
}

// current animated collapsible panel content
var currentContent= null;

function togglePannelAnimatedStatus(content, interval, step)
{
// wait for another animated expand/collapse action to end
if (currentContent==null)
{
currentContent = content;
var expand = (content.style.display=="none");
if(expand)
content.style.display = "block";
var max_height = content.offsetHeight;

var step_height = step + (expand ? 0 : -max_height);
toggleChevronIcon(content);

// schedule first animated collapse/expand event
content.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ interval + "," + step
+ "," + max_height + "," + step_height + ")", interval);
}
}

function togglePannelAnimatingStatus(interval,
step, max_height, step_height)
{
var step_height_abs = Math.abs(step_height);

// schedule next animated collapse/expand event
if (step_height_abs>=step && step_height_abs<=(max_height-step))
{
step_height += step;
currentContent.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ 2 + "," + 2
+ "," + max_height + "," + step_height + ")", interval);
}
// animated expand/collapse done
else
{
if (step_height_abs<step)
currentContent.style.display="none";
currentContent.style.height = "";
currentContent = null;

}
}

// change chevron icon into either collapse or expand
function toggleChevronIcon (content)

{
var chevron=content.parentNode
.firstChild.childNodes[1].childNodes[0];
var expand=(chevron.src.indexOf("collapse.gif")>0);
chevron.src=chevron.src
.split(expand ? "expand.gif" : "collapse.gif")
.join(expand ? "collapse.gif" : "expand.gif")
}