Can Scriptcase Menus behave themselves??!!

Scriptcase 8 Discussion
#1

I’ve played around with horizontal menus and notice these you can only left or right justify or centre the items on the line; this does not look modern compared with contemporary apps especially when the items are few. When the items are more, it wraps unto the next line.

Has anyone discovered a hack to make the menu items take up 100% of the available screen width (i.e. resize each item equally but not enlarge the text)

#2

You should be able to do something like this: http://www.scriptcase.net/forum/showthread.php?8119-Make-the-form-to-use-the-entire-page
However I’m not really a CSS god so don’t ask me how.

#3

[QUOTE=hoihoi661;34448]You should be able to do something like this: http://www.scriptcase.net/forum/showthread.php?8119-Make-the-form-to-use-the-entire-page
However I’m not really a CSS god so don’t ask me how.[/QUOTE]

Yeah I’d seen this but it has no effect on the menu.

#4

How do you mean no effect on the menu?
It’s CSS if you want to you can make it have effect on everything, just use !important.
You’d have to put the echo on one of the menu’s events btw, not an application called by the menu in case that’s the problem.

#5

I think could be interesting if you share an screenshot about exactly what you mean, and what you want. As Matt sais, is more related to CSS.

#6

Attached shot shows what I want. Don’t know CSS enough but I can follow any pointers. I don’t think the code referred to in the link addresses menu apps nor the menu bar specifically.

menustuff.jpg

#7

Hi there…

you can do this but you have to use jscript… i believe you can do something like



var myElements = document.querySelectorAll(".topmenu toproot");
 
var h=window.height()/<number of elements in your menu>;
for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.width = h;
}

You should customize this code this is just an example, in this case im selecting the css class “topmenu toproot” of the document, you have to set the right one for your menu.

Hope this is of help.

Regards

oh i forgot you can also use CSS straight, like an

echo ‘style bla bla’

you just have to set the width of the class to a % , for example if you have 10 elements set the width to a 10% =P

some more regards >.<

#8

[QUOTE=kafecadm;34494]Hi there…

you can do this but you have to use jscript… i believe you can do something like



var myElements = document.querySelectorAll(".topmenu toproot");
 
var h=window.height()/<number of elements in your menu>;
for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.width = h;
}

You should customize this code this is just an example, in this case im selecting the css class “topmenu toproot” of the document, you have to set the right one for your menu.

Hope this is of help.

Regards

oh i forgot you can also use CSS straight, like an

echo ‘style bla bla’

you just have to set the width of the class to a % , for example if you have 10 elements set the width to a 10% =P

some more regards >.<[/QUOTE]

Ok so:

==> the CSS option is static whilst the javascript is dynamic?

==> in the jscript code above, you meant var h=window.width()/<number… right?

==> if using the jscript, how would this go in? echo statement as well? what would make it execute before the menu is rendered by the browser?

#9

actually you should have to use the sc_java suttuff to execute it, in the cas of the static CSS you simply echo it in the onexecute event.

Regards.

#10

How did it go?

#11

haven’t had the $%^"?! to try it yet but will do so tomorrow and let you know.

#12

ok good luck.

#13

Kafecadm,

Thanks for asking. Please see the screenshot: the code seems to have no effect. Inspecting elements though, is “.topmenu toproot” the appropriate selector?

attempt.jpg

#14

By the way, when I view the source of the generated page, this piece of code does not show up at all so I guess page gen is concluded prior to the event. Also it fails if put in onApplicationInit (the raw code is simply echoed to screen).

#15

Spoke too soon: the code becomes part of the page if echoed in onApplicationInit. Still does not work though: menu looks the same. My best guess would be because this code is not part of the document.ready function of JS. Please see attached. Any ideas?

nowinpage.jpg

#16

Update: I’ve manually edited the index.php file generated by SC to have this logic in the document.ready but still no difference. Must be the CSS selector then?

#17

Wich theme are you using? to do some testing

#18

Sc8_Saphir.

#19

onApplicationInit:

echo "
<script>

function resizeMenu(){
	var h = 100/$(\"li.topmenu\").length; 
	$(\"table\").eq(1).width(\"100%\"); 
	$(\"ul.topmenu\").width(\"100%\"); 
	$(\"li.topmenu\").width(h + \"%\");
};

window.onload = resizeMenu;
</script>";

Enjoy!

#20

[QUOTE=Giu;34662]onApplicationInit:

echo "
<script>

function resizeMenu(){
	var h = 100/$(\"li.topmenu\").length; 
	$(\"table\").eq(1).width(\"100%\"); 
	$(\"ul.topmenu\").width(\"100%\"); 
	$(\"li.topmenu\").width(h + \"%\");
};

window.onload = resizeMenu;
</script>";

Enjoy![/QUOTE]

Awesome! Works like a charm on a desktop, though on smaller screens there’s menu item overlap. I appreciate, its an eye opener!