JavaScript - First Panel To Load - Coda Slider

Hey all-
I've gotten accustomed to using coda slider 2.0 to do some cool interactive sliding elements on my pages. However, i need something similar that will fade instead of slide. I've searched all over their home forums and it seems like no one there has an answer for how to implement the change in the current codaslider infrastructure. (http://www.ndoherty.biz/demos/coda-slider/2.0/)

I need something that has all the functionality of coda slider (easy transitions, div's containing lots of content- both images and text, forward/back buttons, autoplay) but with a fade transitions

any ideas?

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

I am using a JQuery Slider function in one of my forms that has the folowing code:

Code:

<script>
	$(function() {
		$( "#slider" ).slider({
			value:100,
			min: 0,
			max: 100,
			step: 1,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value + "% Clear" );
			}
		});
		$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
	});
</script>

And the form looks like:
Code:

<form method=POST etc...>
<div id="slider"></div>
      <span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>

Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again.

However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks!

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

helo,
i just want to know how to add the same panel by clicking on a button right below the button..

Hello.
I've created this sliding panel where I click the Sidebar button and it slides out or in. But I would like to make it run more smoothly. I tried storing references to the elements within the MoveSidebar() as this.variables, so that they wouldn't be re-defined each time, but then FF spits out that 'this.sidebar.style' is undefined?!

How can I make it run more smoothly, or get FF to recognise 'this.sidebar.style' please (once I reinstate all the this.references)? Here's the whole page and the button is also attached for ease of testing. Andy.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Sidebar Panel</title>
    <style type="text/css">
        #sidebar {
            display: inline-block;
            position: fixed;
            top: 200px;
            right: -100px;
        }
        #sidebar img {
            cursor: pointer;
        }
        #sidebar ul {
            display: inline-block;
            list-style-type: none;
            padding: 0; margin: 0;
            background: lightgrey;
            margin-left: -4px;
            height: 97px;   /* same as the image */
        }
        #sidebar li {
            display: inline;
        }
        #sidebar a {
            float: left;
            clear: left;
            width: 90px;
            text-decoration: none;
            padding: 2px 5px;
        }
    </style>
    <script type="text/javascript">
        var theTimer;
        function MoveSidebar() {
            var sidebar = document.getElementById('sidebar');
            var sideRight = parseInt(sidebar.style.right || "-100px");
            var out = document.getElementById('sideImage').out;
            if ( out && sideRight <= 0 ) {
                sidebar.style.right = (sideRight + 2) + 'px';
            }
            else if ( !out && sideRight >= -100 ) {
                sidebar.style.right = (sideRight - 2) + 'px';
            }
            else {
                clearInterval(theTimer);
            }
        }
        function InitSide() {
            document.getElementById('sideImage').onclick = function () {
                this.out = ( this.out ) ? false : true;
                clearInterval(theTimer);
                theTimer = setInterval(MoveSidebar,10);
            }
        }
        window.onload = InitSide;
    </script>
</head>
<body>
    <h1>Creating a Sidebar Panel Button</h1>
    <div id="sidebar">
        <img src="images/sidebar.png" id="sideImage">
        <ul>
            <li><a href="#home">Home</a></li>  
            <li><a href="#about">About</a></li>
            <li><a href="#further">Further Info</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>

hi
i was wondering if anybody outhere could refer me to a tut that show how to create a drop down login panel.I've read any tut about drop down from DynamicDrive.com but it's not really what i'm looking forward.I try to change the content in "Drop Down Panel" script released into the relevant tut but it's not working.So help will be welcome.

Hello,

trying to cooperate with Spry atm, and its going fairly ok..
Its just one thing, i would like it when you open one spry panel,
the rest of them would close. Anyone know how to do that?

Thanks

I'm trying to create a menu navigation system from the top of the page.
I want it so when I hover over the link, it drops down (the link drops down; so it'd be as if there was a whole field being hidden beyond the 0px mark) with the related field.

I've gotten it to work, somehow but it still isn't right.
A few issues a

- when I hover over .drop_slide and then if I choose to close it by hovering back over the .drop_slide it does as it's told, which is "slide, slide". I'm interested in rectifying this issue so it doesn't do that, however I just don't know how.

- The idea is to have multiple links in the .slide, so I need it to be constantly open while the user mouses over the other links. Should this be created in one field? If so, how would I do that with a drop down in mind?

- Am I approaching this completely wrong? Lol. Should I be researching into .animate? I've been looking at it actually, but I can't get anything to grow negatively. Say; marginTop: -85px or something.

ANY help is appreciated, thanks!

Code:

<html>
<head>
<title>test slide panel</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        $(document).ready(function(){

        function slide() {
        $("#panel").slideToggle("slow");
        }

        $(".drop_slide").hover(slide, stop);
        $("#panel").hover(stop, slide);
         
});
</script>

<style type="text/css">
body {
        margin: 0 auto;
        padding: 0;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
        outline: none;
}
#panel {
        background: grey;
        height: 200px;
        display: none;
}
.slide {
        margin: 0;
        padding: 0;
        background-color: red;
}
.drop_games {
        width: 200px;
        height: 31px;
        padding: 10px 10px 0 0;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
}
</style>
</head>

<body>

<div id="panel">
additional links here...or information
</div>

<p class="slide"><a href="#" class="drop_slide">test link</a></p>


</body>
</html>

Hello,

I am trying to get this sliding panel to automatically be open when the page loads. Right now it is closed and I need to click it to open. I would like for it to be automatically opened when the page first loads and click to close it. Can anyone help me with the coding?

Here is 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=utf-8" />
<title>Demo</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="javascript.js" type="text/javascript"></script>

</head><body>
<center>
<div class="contenta"><img src="4.jpg" /></div>

<div id="header">
<img src="2.jpg" width="938" height="68" border="0" />
</div>

<div id="page_container">

<div id="toppanel">

<div style="height: 0px; display: block;" id="panel"><img src="1.jpg" width="938" height="583" /></div>

<div class="panel_button" style="display: block;"><a href="#">Expand</a></div>
<div class="panel_button" id="hide_button" style="display: none;"><a href="#">Close</a></div>
</div>

<div id="content"><img src="5.jpg" /></div>

</div>
</center>
</body></html>

and javascript.js
$(document).ready(function() {
$("div.panel_button").click(function(){
$("div#panel").animate({
height: "400px"
})
.animate({
height: "300px"
}, "fast");
$("div.panel_button").toggle();

});

$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "fast");


});

});

and css:
body {
text-align: center;
margin: 0px;
background: #000;
}
#page_container {
position: relative;
margin-left: 0px;
margin-right: 0px;
width: 938px;
}
#header {
margin-left: 0px;
margin-right: 0px;
width: 938px;
background: #111;
}
.panel_button {
margin-left: 0px;
margin-right: 0px;
position: relative;
top: -25px;
padding-top: 5px;
width: 100px;
height: 22px;
background: url(images/panel_button.png);
z-index: 20;
filter:alpha(opacity=70);
-moz-opacity:0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
cursor: pointer;
}
.panel_button img {
position: relative;
top: 10px;
}
.panel_button a {
text-decoration: none;
color: #FFF;
font-size: 12px;
font-weight: bold;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}
#wrapper {
margin-left: 0px;
margin-right: 0px;
width: 100%;
text-align: center;
}
#toppanel {
width: 100%;
left: 0px;
top: 0px;
z-index: 25;
text-align: center;
}
#panel {
width: 938px;
position: relative;
top: 1px;
height: 0px;
margin-left: 0px;
margin-right: 0px;
z-index: 10;
overflow: hidden;
text-align: left;
}
#panel_contents {
background: black;
filter:alpha(opacity=70);
-moz-opacity:0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
height: 100%;
width: 938px;
position: relative;
z-index: -1;
}
#content {
margin-left: 0px;
margin-right: 0px;
width: 100%;
position: relative;
text-align: left;
color: #545454;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
div.contenta {
width: 938px;
margin-left: 0px;
margin-right: 0px;
}

Thank you.

I'm using a script for a drop down panel and it works fine, however I need to add a bit of a margin for the inner content but the script seems to be stripping it out in firefox, it works fine in ie and chrome. I've tried every trick in the book outside of editing the actual js file. I currently have a transparent image as a spacer at the top and it even ignores that. It seems that firefox just wont display anything above the first form field for some reason. Could someone take a look at this script quick and give me an idea on what to change to I can add like a 5px margin to the top of the content?
Code:

//** DD Drop Down Panel- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Oct 21st, 08'- Script created
//** March 23rd, 09' v1.01- Arrow images now preloaded

function ddpanel(setting){
	setting.dir="up" //initial state of panel (up="contracted")
	if (setting.stateconfig.persiststate && ddpanel.getCookie(setting.ids[0])=="down"){
		setting.dir="down"
	}
	if (setting.dir=="up"){ //if "up", output CSS to hide panel contents
		document.write('<style type="text/css">\n')
		document.write('#'+setting.ids[1]+'{height:' + parseInt(setting.stateconfig.initial) + 'px; overflow:hidden}\n')
		document.write('</style>\n')
	}
	setting.stateconfig.initial=parseInt(setting.stateconfig.initial)
	this.setting=setting
	if (setting.pointerimage.enabled){ //preload images
		var img1=new Image(), img2=new Image()
		img1.src=setting.pointerimage.src[0]
		img2.src=setting.pointerimage.src[1]
	}
	var thispanel=this
	if (window.addEventListener) //if non IE browsers, initialize panel window.onload
		ddpanel.addEvent(window, function(e){thispanel.initpanel(setting)}, "load")
	else //else if IE, add 100 millisec after window.onload before initializing
		ddpanel.addEvent(window, function(e){setTimeout(function(){thispanel.initpanel(setting)}, 100)}, "load")
	ddpanel.addEvent(window, function(e){thispanel.uninit(setting)}, "unload")
}

ddpanel.events_array=[] //object array to contain events created by script

ddpanel.addEvent=function(target, functionref, tasktype){
	var evtmodel=target.addEventListener? "w3c" : "ie"
	var evtaction=evtmodel=="w3c"? "addEventListener" : "attachEvent"
	var i=this.events_array.push({ //store event info in ddpanel.events_array[] and return current event's index within array
		target: target,
		tasktype: (evtmodel=="ie"? "on" : "")+tasktype,
		listener: evtmodel=="ie"? function(){return functionref.call(target, window.event)} : functionref
	})-1
	target[evtaction](this.events_array[i].tasktype, this.events_array[i].listener, evtmodel=="w3c"? false : null)
}

ddpanel.removeEvent=function(target, functionref, tasktype){
	var evtmodel=target.removeEventListener? "w3c" : "ie"
	var evtaction=evtmodel=="w3c"? "removeEventListener" : "detachEvent"
	target[evtaction](tasktype, functionref, evtmodel=="w3c"? false : null)
}

ddpanel.getCookie=function(Name){ 
	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return null
}

ddpanel.setCookie=function(name, value){
	document.cookie = name+"=" + value + ";path=/"
}

ddpanel.addpointer=function(target, className, imagesrc){
	var pointer=document.createElement("img")
	pointer.src=imagesrc
	pointer.className=className
	pointer.style.borderWidth=0
	target.appendChild(pointer)
	return pointer
}

ddpanel.prototype={

togglepanel:function(dir){ //public function that toggles the panel's state. Optional dir parameter ("up" or "down") to explicitly set state.
	var setting=this.setting
	setting.dir=dir || ((setting.dir=="up")? "down" : "up")
	var pcontent=setting.pcontent, dir=setting.dir
	pcontent._currentheight=(dir=="down")? pcontent._actualheight : setting.stateconfig.initial
	pcontent.style.height=pcontent._currentheight+"px"
	if (setting.pointerimage.enabled){
		setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
		setting.arrow.style.visibility="visible"
	}
	ddpanel.setCookie(setting.ids[0], setting.dir)
},

togglepanelplus:function(dir){ //public function that toggles the panel's state w/ animation. Optional dir parameter ("up" or "down") to explicitly set state.
	var setting=this.setting
	setting.dir=dir || ((setting.dir=="up")? "down" : "up")
	if (setting.pointerimage.enabled)
		setting.arrow.style.visibility="hidden"
	clearTimeout(setting.revealtimer)
	this.revealcontent()
},

revealcontent:function(){
	var setting=this.setting
	var pcontent=setting.pcontent, curH=pcontent._currentheight, maxH=pcontent._actualheight, minH=setting.stateconfig.initial, steps=setting.animate.steps, dir=setting.dir
	if (dir=="down" && curH<maxH || dir=="up" && curH>minH){
		var newH = curH + (Math.round((maxH-curH)/steps)+1) * (dir=="up"? -1 : 1)
		newH=(dir=="down")? Math.min(maxH, newH) : Math.max(minH, newH)
		pcontent.style.height=newH+"px"
		pcontent._currentheight=newH
	}
	else{
		if (setting.pointerimage.enabled){
			setting.arrow.src=setting.pointerimage.src[(setting.dir=="down")? 1 : 0]
			setting.arrow.style.visibility="visible"
		}
		return
	}
	var thispanel=this
	setting.revealtimer=setTimeout(function(){thispanel.revealcontent()}, 10)
},

initpanel:function(){
	var setting=this.setting
	var pcontainer=setting.pcontainer=document.getElementById(setting.ids[0])
	var pcontent=setting.pcontent=document.getElementById(setting.ids[1])
	var tdiv=setting.tdiv=document.getElementById(setting.ids[2])
	pcontent.style.overflow="scroll"
	pcontent._actualheight=pcontent.scrollHeight
	setTimeout(function(){pcontent._actualheight=pcontent.scrollHeight}, 100)
	pcontent.style.overflow="hidden"
	pcontent._currentheight=(setting.dir=="down")? pcontent._actualheight : setting.stateconfig.initial
	var thispanel=this
	ddpanel.addEvent(tdiv, function(e){ //assign click behavior when toggle DIV tab is clicked on
		if (setting.animate.enabled)
			thispanel.togglepanelplus()
		else
			thispanel.togglepanel()
		if (e.preventDefault) e.preventDefault()
		return false
	}, "click")
	if (setting.pointerimage.enabled){
		var pointer1=new Image(), pointer2=new Image()
		pointer1.src=setting.pointerimage.src[0]
		pointer2.src=setting.pointerimage.src[1]
		setting.arrow=ddpanel.addpointer(tdiv.getElementsByTagName("span")[0], "pointerimage", setting.pointerimage.src[setting.dir=="down"? 1:0])
	}
	if (setting.closepanelonclick.enabled){ //assign click behavior when panel content is clicked on (links within panel or elements with class "closepanel"
			ddpanel.addEvent(pcontent, function(e){
				var rel="nofollow" target=e.srcElement || e.target
				if (/(^|\s+)closepanel($|\s+)/.test(target.className) || target.tagName=="A" || (target.parentNode && target.parentNode.tagName=="A")){
					thispanel.togglepanel("up")
				}
			}, "click")
	}
},

uninit:function(){
	var setting=this.setting
	if (setting.stateconfig.persiststate){
		ddpanel.setCookie(setting.ids[0], setting.dir)
	}
	for (prop in setting){
		setting[prop]=null
	}
}



} //end of ddpanel object


//initialize instance of DD Drop Down Panel:

var defaultpanel=new ddpanel({
	ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
	stateconfig: {initial: "0px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
	animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
	pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
	closepanelonclick: {enabled: true} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})

I don't know Jquery/Javascript too well at all but I can look at this code and see its pretty simple..

jQuery Panel:
Code:

$(document).ready(function() {
	
	// Expand Panel
	$(".open").click(function(){
		$("div#panel").slideDown("slow");
	
	});	
	
	// Collapse Panel
	$(".close").click(function(){
		$("div#panel").slideUp("slow");	
	});		
	
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		
		
});

and to trigger it from any link on the page it would need somethin like
Code:

$(".contact").click(function(){contactPanel()});

but I dont know how to give Panel code the name "contactPanel".. so this is where I'm stuck. how do i do this?

also I have a "Open Contact Form" at the top of the page but I want to put a contact link at the very bottom and after the link is clicked i would like for the website to scroll up before the panel drops down.. is that possible?

Hi everyone,

So basically what I am trying to do here is make a navigation system for a website. I want to have a series of buttons that drop down a large panel with info and furhter links when you mouseover them, kind of like the Unilever site: http://unilever.com/ (mouseover the arrows to the side of "About us", Our Brands", etc).

So I followed WebDesignerWall's Simple slide panel tutorial (http://www.webdesignerwall.com/tutor...for-designers/, which is basically exactly what I am after - except that I want to have the slide out/slide back happen on a mouseover/mouseout.

The code I used looks like so:

Code:

$(document).ready(function(){

	$(".btn-slide").mouseover(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	$("#panel").mouseout(function(){
		$("#panel").slideToggle("slow");
		$(".btn-slide").toggleClass("active"); return false;
	});
	
	 
});

It kind of works but is pretty easily broken in a way that you couldn't just put up with. The slider sometimes repeatedly slides in and out, apparently all by itself, and the panel is sometimes stuck open when the mouse is nowhere near it - and therefore technically should be be hidden.

I also tried the same thing using hover rather than mouseover, but unfortunately that breaks it even worse, since I want the panel to stay open when the user's mouse is within the panel area, not just within the button.

So I'm wondering if anyone can offer me any suggestions as to how to get this to work, or even just an alternative way to achieve a simliar effect? I do like the sliding animation but I'm willing to forgo that for reliable functionality.

Thanks in advance for any help!

Hi,

I was wondering if anyone knew how I can close an accordian panel by clicking on it. In more detail, when the user clicks the panel title, it opens it, i want it to close if they click the title again.

Im using Adobe's Spry framework.

Any help would be great.

-M