|
|
Post by Streamstrider on Oct 16, 2011 20:08:06 GMT -8
Like the one seen here (the first example). Except that I would like them to be tables I can actually insert information into, rather than just images. XD I believe I've seen something like this on another forum, but I can't seem to find it. Haha. |
|
|
|
Post by Wormopolis on Oct 16, 2011 21:21:45 GMT -8
that is going to take a while to sort out...[MÜD:sad]
|
|
|
|
Post by Streamstrider on Oct 17, 2011 4:32:07 GMT -8
I'm sorry. XD If I find that forum, I'll link you to it. XD |
|
|
|
Post by Streamstrider on Nov 1, 2011 23:04:03 GMT -8
I found an example, I believe. Something similar to this. |
|
|
|
Post by Streamstrider on Nov 1, 2011 23:08:02 GMT -8
Also, here. I think I might try to make it myself if I get the chance, but I will likely get confused. XD We'll see after class today! |
|
|
|
Post by Streamstrider on Nov 2, 2011 1:21:45 GMT -8
Nevermind. I have no earthly idea how to combine the javascript, CSS, and HTML into one code. XD |
|
|
|
Post by Wormopolis on Nov 2, 2011 15:03:12 GMT -8
you are wanting all sorts of stuff in that that is written with jQuery. writing something from scratch that jQuery already does is sorta like asking to have a car build from spare parts so save a trip to the used car dealer.
at that point you might as well just use jQuery and save yourself the time.
|
|
|
|
Post by Streamstrider on Nov 2, 2011 18:50:59 GMT -8
Do you know how the table is put together using the jquery? I'm just asking for a specific code with an explanation on how to add data. I have no earthly idea how to use jquery. XD I don't understand how to add any of that stuff to the forum.
|
|
NetMaster
Code Helper 
"Get caught in my web!"
Posts: 305
NetMaster said 0 great things
|
Post by NetMaster on Nov 3, 2011 10:34:40 GMT -8
Stream: Here is the coding they used on that first one that you liked: This is the javascript
<script type="text/javascript>
<!--
var slideMenu=function(){
var sp,st,t,m,sa,l,w,sw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}},
slide:function(s){
var cw=parseInt(s.style.width);
if(cw<st){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
owt=owt+(ow-oi)}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer)}
}
};
}();
-->
</script>
This is the CSS
<style type="text/css">
<!--
* {margin:0; padding:0}
.sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
-->
</style>
And this was the actual HTML of the page
<body onload="slideMenu.build('sm',200,10,10,1)">
<ul id="sm" class="sm">
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>
Anything you put between the LI tags will appear in the corresponding portion. I didn't find any disclaimers but you might just add your own: Taken from: www.scriptiny.com/2008/05/horizontal-javascript-accordion-menu/body onload="slideMenu.build(' sm', 200, 10, 10, 1)" The first parameter is the id of the unordered list you would like to bind the accordion to.The second is the width you would like the accordion selection to expand to. The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest. The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded. |
|
NetMaster
Code Helper
"Get caught in my web!"
Posts: 305
NetMaster said 0 great things
|
Post by NetMaster on Nov 3, 2011 10:54:59 GMT -8
And maybe Wormo can help put this bit of coding together with the other so it will automatically load (since we can't add the onLoad function to the body tag.)
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
|
|
|
|
Post by Wormopolis on Nov 3, 2011 16:54:18 GMT -8
that last line just needs to be
addLoadEvent(slideMenu.build('sm',200,10,10,1));
so putting what netmaster brilliantly extracted together...
<script type="text/javascript>
<!--
var slideMenu=function(){
var sp,st,t,m,sa,l,w,sw,ot;
return{
build:function(sm,sw,mt,s,sl,h){
sp=s; st=sw; t=mt;
m=document.getElementById(sm);
sa=m.getElementsByTagName('li');
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
},
timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)} },
slide:function(s){
var cw=parseInt(s.style.width);
if(cw<st){
var owt=0; var i=0;
for(i;i<l;i++){
if(sa[i]!=s){
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
owt=owt+(ow-oi)}}
s.style.width=(w-owt)+'px';
}else{clearInterval(m.timer)}
}
};
}();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(slideMenu.build('sm',200,10,10,1));
//-->
</script>
<style type="text/css">
<!--
* {margin:0; padding:0}
.sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
-->
</style>
<ul id="sm" class="sm">
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>
see if that works
|
|
|
|
Post by Streamstrider on Nov 4, 2011 17:47:14 GMT -8
Does the content between the list tags have to be images?
EDIT: Shall test at some point today and let you guys know how it went. XD
EDIT AGAIN: Okay, that scared me. It removed my options to do pretty much anything on the forum and contorted it like crazy. Luckily, I back-tracked and removed it. I'll try again later, and we'll see. |
|
NetMaster
Code Helper
"Get caught in my web!"
Posts: 305
NetMaster said 0 great things
|
Post by NetMaster on Nov 4, 2011 17:49:25 GMT -8
It doesn't have to be images. It can include any HTML elements you want including links, text, scripts and even images if you want.
|
|
|
|
Post by Streamstrider on Nov 4, 2011 17:51:10 GMT -8
It obviously hates me. XD |
|
NetMaster
Code Helper
"Get caught in my web!"
Posts: 305
NetMaster said 0 great things
|
Post by NetMaster on Nov 4, 2011 17:56:43 GMT -8
Its not you Stream. Something is missing and I'm looking for what it is.
|
|