|
JavaScript - Need To Add Margin To Top Of Js Drop Down Panel Content
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?
})
Similar Tutorialshi 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. helo, i just want to know how to add the same panel by clicking on a button right below the button.. 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, 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 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 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 First, here's the URL of the site I'm working on: http://www.georgiadogs.com/fls/8800/meetcentral2010/ Each week, I'd like to be able to have that page load a different tab/panel onload according to who the opponent is that week. For example: this week I want the second tab, Alabama, to load first. I'm using one of the many iterations of the coda slider script (see coda-slider.js). However, I can't seem to get it to cooperate. I found a solution for a similar coda slider, but it won't match with the one I'm using (because the naming conventions for the "panels" are not the same I assume). Here's what that solution was: Code: $().ready(function() {
$('#coda-slider-6').codaSlider({
crossLinking: false,
firstPanelToLoad: 3
});
});
Anyone got any ideas? It doesn't matter to me if the panel just loads from the get-go, or if it loads the first one and then automatically slides to the one I want. Thanks for the help! 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 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 friends, Am customizing a Joomla website and i need to know how to get a nice and fine javascript accordion horizontal panel which is so smooth and good looking to add in Joomla Home page. Please suggest me some horizontal javascript accordion with images and link to another page. Thanks in Advance. Hi, I am using a wordpress jquery based plugin. TheThe Sliding panels. You can see the jquery he - http://www.get-me-heard.com/wp-conte...jquery.ttsp.js The panel currently auto-opens when the page loads. Which is what I want, however I would like it so that once a user has clicked to close the panel, for it to stay closed even when navigating pages, until they decide to click open again. I would also need the cookie flushed when they leave the website so that the next time they return the panels auto open again. Essentially I just dont want the users to have to click close every time they navigate throughout the website if they don't want to see the panels. NOTE: The plugin has several panels which you can choose from. I am only using the left panel and the right panel. They are all controlled within the jquery. Thanks! I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now 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 have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions: http://www.sohtanaka.com/web-design/examples/toggle/ But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task? Here is the jQuery file link: http://code.jquery.com/jquery-latest.js I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated. Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! Hello everyone! So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it! Code: // JavaScript Document
var posX;
var posY;
var element;
function drag(event) {
element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;
element.addEventListener("mousemove", move, false);
}
function move(event) {
if (typeof(document.getElementById("square").mouseup) == "undefined")
element.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
the html is a simple (position is set to relative): <p id="square" onmousedown="drag(event)">meep</p> Lastly, and most importantly, thank you all for your time =] EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library. I need to set a divs margin-left value into a var, ive tried a few different ways and i always get undefined, anyone able to help me? Ideally id like it without the px too but thats not essential.
Hey all, for some reason, I can't get the margin-top property to change using Code: jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);
also tried
jQ(this.centerPiece).attr('margin-top', this.imgSrcs[ this.srcs[5] ].top);
any help would be great townsendwebdd.com is the site Code: /**Scroller*/
function Scroller(){
//grab the img elements
//this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#img4', '#centerImg', '#img5', '#img6', '#img7', '#img8', '#img9' );
this.imgs = new Array( '#img0', '#img1', '#img2', '#img3', '#centerImg', '#img6', '#img7', '#img8', '#img9' );
this.centerPiece = '#centerImg';
this.centerPieceLink = '#centerA';
//set the image locations
this.imgSrcs = new Array();
this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com', 100 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedChess.png', 'gx/tiltedChessRight.png', 'gx/chess.jpg', 'http://townsendwebdd.com/chess', 200 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedFiveInARow.png', 'gx/tiltedFiveInARowRight.png', 'gx/fiveInARow.jpg', 'http://fiveinarow.townsendwebdd.com', 0 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedGaelsong.png', 'gx/tiltedGaelsongRight.png', 'gx/gaelsong.jpg', 'http://gaelsong.townsendwebdd.com', 100 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedGreenBay.png', 'gx/tiltedGreenBayRight.png', 'gx/greenBay.jpg', 'http://townsendwebdd.com/gx/GreenBaySite.jpg', 0 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedMillarSmith.png', 'gx/tiltedMillarSmithRight.png', 'gx/millarSmith.jpg', 'http://townsendwebdd.com/gx/millarSmith.jpg', 100 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg', 0 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedAlegro.png', 'gx/tiltedAlegroRight.png', 'gx/alegro.jpg', 'http://townsendwebdd.com/gx/alegro2.jpg', 300 ) );
this.imgSrcs.push(new imgSrc('gx/tiltedApnm.png', 'gx/tiltedApnmRight.png', 'gx/apnm.jpg', 'http://townsendwebdd.com/gx/apnm.jpg', 0 ) );
//this.imgSrcs.push(new imgSrc('gx/tiltedNanoMeds.png', 'gx/tiltedNanoMedsRight.png', 'gx/nanomeds.jpg', 'http://townsendwebdd.com/gx/nuBots2.jpg') );
//this.imgSrcs.push(new imgSrc('gx/tiltedNMInvestigates.png', 'gx/tiltedNMInvestigatesRight.png', 'gx/nmInvestigates.jpg', 'http://nminvestigates.townsendwebdd.com') );
//which srcs are currently in use
this.srcs = new Array();
for(var i = 0; i < this.imgSrcs.length; i++){ this.srcs.push(i); }
}
/** reset the current images*/
Scroller.prototype.populate = function(){
//populate imgs
for(var i = 0; i < 4; i++){
jQ( this.imgs[i] ).attr('src', this.imgSrcs[ this.srcs[i] ].left );
jQ( this.imgs[i + 5] ).attr('src', this.imgSrcs[ this.srcs[i + 5] ].right);
}
//set the centerPiece
jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[i] ].center);
jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[i] ].href);
jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[i] ].top);
}
/** move everything to the Left*/
Scroller.prototype.moveLeft = function(){
//increment srcs
this.incrementSrcsUp();
//animate
for(var i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
animate(this.imgs[i], -30);
}
//set the centerPiece
jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
//move back
for(i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
move( this.imgs[i], 30);
}
//repopulate
this.populate();
}
/** move everything to the right*/
Scroller.prototype.moveRight = function(){
//increment srcs
this.incrementSrcsDown();
//animate
for(var i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
animate(this.imgs[i], 30);
}
//set the centerPiece
jQ(this.centerPiece).attr('src', this.imgSrcs[ this.srcs[5] ].center);
jQ(this.centerPieceLink).attr('href', this.imgSrcs[ this.srcs[5] ].href);
jQ(this.centerPiece).attr('marginTop', this.imgSrcs[ this.srcs[5] ].top);/** here is the stumper*/
//move back
for(i = 0; i < this.imgs.length; i++){
if(this.imgs[i] != this.centerPiece)
move( this.imgs[i], -30);
}
//repopulate
this.populate();
}
Scroller.prototype.incrementSrcsUp = function(){
for(var i = 0; i < this.srcs.length; i++){
this.srcs[i] += 1;
if(this.srcs[i] >= this.srcs.length)
this.srcs[i] = 0;
}
}
Scroller.prototype.incrementSrcsDown = function(){
for(var i = 0; i < this.srcs.length; i++){
this.srcs[i] -= 1;
if(this.srcs[i] < 0)
this.srcs[i] = this.imgSrcs.length - 1;
}
}
Scroller.prototype.preload = function(){
try{
for(var i = 0; i < this.imgSrcs.length; i++){
jQ('#container').append("<img src='" + this.imgSrcs[i].center + "' style='display:none;'/>");
}
}catch(err){alert(err.message);}
}
/**the sources of the piece*/
function imgSrc(leftSrc, rightSrc, centerImg, location, topped){
this.left = leftSrc;
this.right = rightSrc;
this.center = centerImg;
this.href = location;
this.top = topped;
}
function animate(imgId, offsetX){
var x = jQ( imgId ).offset().left;
var y = jQ( imgId ).offset().top;
jQ( imgId ).offset({left: x + offsetX, top: y});
}
/**
function animate(imgId, offsetX){
var startLeft;
var timer = setInterval(function() {
imgId.style.left = ( imgId.style.left + offsetX / 10 ) + "px";
if ( imgId.style.left == startLeft + offsetX ) {
clearInterval( timer );
}
}, 1000);
}*/
function move(imgId, offsetX){
var x = jQ( imgId ).offset().left;
var y = jQ( imgId ).offset().top;
jQ( imgId ).offset({left: x + offsetX, top: y});
}
|
|||||||