| Author |
 Topic  |
|
taropatch
Average Member
USA
741 Posts |
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
 Posted - 31 May 2004 : 11:21:25
|
Long time since a fiddled with that script but you should be able to do that by tinkering with the CSS for the submenus (I'm assuming it's the sunmenus you want to make 100%, if not please correct me).
|
 Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
 |
|
|
taropatch
Average Member
USA
741 Posts |
Posted - 31 May 2004 : 12:01:56
|
| Yes, it's the submenu that I want to be 100%. I'll take a look that the CSS to see if I can tinker successfully. Thanks. |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 31 May 2004 : 12:40:29
|
No problem. Lemme know if you want any further help and I'll dig me files out.
|
Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
|
|
|
taropatch
Average Member
USA
741 Posts |
Posted - 01 June 2004 : 12:47:35
|
The files may have changed slightly since you last looked METV. quote:
<script language="javascript" src="../ypSlideOutMenusC.js"></script>
<script language="javascript">
new ypSlideOutMenu("menu1", "down", 0, 90, 800, 24)
new ypSlideOutMenu("menu2", "down", 50, 300, 180, 300)
new ypSlideOutMenu("menu3", "down", 100, 300, 350, 75)
new ypSlideOutMenu("menu4", "down", 100, 50, 45, 100)
ypSlideOutMenu.writeCSS();
</script>
In the head of the document, after you've created all instances of the menu object, you call the writeCSS() method.
Since I know almost nothing about javascript, I do not know if I can set the width as a percentage. My experimental attempts to add 100% or "100%" has not worked. |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 01 June 2004 : 12:54:11
|
Ay, looks lke it's changed a bit since last I was playing with it. I'll download the updated files when I get home and post back either later tonight or tomorrow morning.
|
Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 02 June 2004 : 08:10:53
|
Turns out it's actually a hell of a lot more difficult than I originally thought. I'm nearly there though, just one last kink to work out. I just need to know what sort of layout you're planning for the menu. Is the menu menu going to be running horizontally or vertically and what direction were you planning to have the submenus slide in from?
<edit>Also, although not as crucial at this stage, are you planning on having a margin on the pages you'll be using the menu on are is it going to be running from edge to edge?</edit>
|
Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
Edited by - Shaggy on 02 June 2004 09:19:23 |
|
|
|
taropatch
Average Member
USA
741 Posts |
Posted - 02 June 2004 : 09:45:39
|
I have a horizontal nav bar, with sub menu dropping down underneath. No margin. I'm going to email you a link.
Thanks for taking a look and offering the help! |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 02 June 2004 : 11:50:46
|
 I was hoping they would be your answers!
Anyway, gonna run through the changes you need to make based on the demo you mailed through to me. Have only been able to test this in IE so far, so make a back up of your original just in case it doesn't work in other browsers.
1. In ypSlideOutMenusC.js find strCSS += 'width:' + width + 'px; ' on line 48 and remove the whole line.
2. Also in ypSlideOutMenusC.js find strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); ' on line 49 (originally 50) and remove the whole line again.
Moving on to the javascript in your ASP file now:
3. Modify the following block:new ypSlideOutMenu("menu1", "down", 0, 90, 800, 24)
new ypSlideOutMenu("menu2", "down", 50, 300, 180, 300)
new ypSlideOutMenu("menu3", "down", 100, 300, 350, 75)
new ypSlideOutMenu("menu4", "down", 100, 50, 45, 100)to look like this:var menus=[
new ypSlideOutMenu("menu1", "down", 0, 90, 0, 24),
new ypSlideOutMenu("menu2", "down", 50, 300, 0, 300),
new ypSlideOutMenu("menu3", "down", 100, 300, 0, 75),
new ypSlideOutMenu("menu4", "down", 100, 50, 0, 100)
];4. Immediately below the line that reads ypSlideOutMenu.writeCSS(); add the following block of code:menus[0].onactivate=new Function("ResizeSubs(0);");
menus[1].onactivate=new Function("ResizeSubs(1);");
menus[2].onactivate=new Function("ResizeSubs(2);");
menus[3].onactivate=new Function("ResizeSubs(3);");
window.onresize=new Function("ResizeSubs(0);ResizeSubs(1);ResizeSubs(2);ResizeSubs(3);");
function ResizeSubs(i){
menus[i].container.style.width=getWindowWidth()+"px"
}And that sould do the trick for you. Knowing me, though, despite my tests, there's probably a bug or two in there somewhere!
One thing to note is, for each menu you have you will need a line that reads: menus[x].onactivate=new Function("ResizeSubs(x);");, and you'll need a ResizeSubs(x); in the onresize function.
Also, you can remove the following lines from the stylesheet:
/* just basic text formatting - nothing special */
@import "/_common/demo.css";
|
Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
|
|
|
taropatch
Average Member
USA
741 Posts |
Posted - 03 June 2004 : 12:49:22
|
MeTV,
Did you set up a test? Mine is not working. I keep staring at the code but wonder if I must have missed something. |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 04 June 2004 : 07:35:59
|
ARGH! So sorry 'bout that, Taro'; was doing some edits before I posted and forgot to reinstate a function I'd temporarily removed! Anyway, discovered a possible bug in the ResizeSubs function so, to include the missing function and fix the bug, replace the ResizeSubs function with the following:function getWindowWidth(){
return window.innerWidth?window.innerWidth:document.body.offsetWidth;
}
function ResizeSubs(i){
menus[i].container.style?menus[i].container.style.width=getWindowWidth()+"px":menus[i].container.width=getWindowWidth();
}
|
Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
|
|
|
taropatch
Average Member
USA
741 Posts |
Posted - 04 June 2004 : 11:03:34
|
No worries. This is awesome.
Seems to be working pretty well although I have not tested on non-IE browsers yet. The width is a tiny bit off. The submenu is a touch wider than the table that is 100% wide. I'm playing around to see if I can make the adjustment but it hasn't worked yet. Any last additional advice?
[image removed]
I appreciate all the help, big time. |
Edited by - taropatch on 04 June 2004 14:30:41 |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 04 June 2004 : 12:13:35
|
Ah, yes, that will happen if you have any margins or padding in your divisions or if you don't set the body's margin to 0px. To fix it just subtract a number from both instances of getWindowWidth() in the ResizeSubs() function like so:menus[i].container.style?menus[i].container.style.width=getWindowWidth()-x+"px":menus[i].container.width=getWindowWidth()-x; You can calculate x from the padding/margins you've applied or just fiddle with x until you get it right.
Also, you're missing the onresize call to ResizeSubs (see my original posted code). If you don't include it, you will get a horizontal scrollbar when you resize the window down which will remain until you activate each menu.
|
Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
|
|
|
taropatch
Average Member
USA
741 Posts |
Posted - 04 June 2004 : 14:44:38
|
quote:
Originally posted by Shaggy
Also, you're missing the onresize call to ResizeSubs (see my original posted code). If you don't include it, you will get a horizontal scrollbar when you resize the window down which will remain until you activate each menu.
Shaggy, sorry to keep going. This is where I am:
<script language="javascript">
var menus=[
new ypSlideOutMenu("menu1", "down", 0, 90, 0, 24),
new ypSlideOutMenu("menu2", "down", 50, 300, 0, 300),
new ypSlideOutMenu("menu3", "down", 100, 300, 0, 75),
new ypSlideOutMenu("menu4", "down", 100, 50, 0, 100)
];
ypSlideOutMenu.writeCSS();
menus[0].onactivate=new Function("ResizeSubs(0);");
menus[1].onactivate=new Function("ResizeSubs(1);");
menus[2].onactivate=new Function("ResizeSubs(2);");
menus[3].onactivate=new Function("ResizeSubs(3);");
window.onresize=new Function("ResizeSubs(0);ResizeSubs(1);ResizeSubs(2);ResizeSubs(3);");
function getWindowWidth(){
return window.innerWidth?window.innerWidth:document.body.offsetWidth;
}
function ResizeSubs(i){
menus[i].container.style?menus[i].container.style.width=getWindowWidth()-17+"px":menus[i].container.width=getWindowWidth()-17;
}
</script>Is the onresize added correctly? The submenu width is great now. But there is a horizontal scroll bar unless I "refresh" the page. Activating the menu does not get rid of the scroll bar. |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 07 June 2004 : 09:41:22
|
I noticed this meself (mostly in IE) I got around it by increasing the value I was subtracting from getWindowWidth() slightly. For some reason it needs to be slightly larger than the sum of your margins & padding. For example, the sum of my margins and padding was 28px but I had to subtract 31 fropm getWindowWidth() to get rid of the scrollbar. Can't tell you why, though. 
|
Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
|
|
|
taropatch
Average Member
USA
741 Posts |
Posted - 07 June 2004 : 10:13:28
|
| Thanks for all the help Shaggy. This is awesome! Can I buy you a pint? |
|
|
|
Topic |
|
|
|
Topic Locked
