You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 03-06-2013 20:17:12

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Mobile template: Menu issues

Hi Thomas,

i have two ideas for the mobile menu:

1) It would be great, if the menu would stay on the screen, when scrolling the page up/down.
2) After clicking a link in the menu, it should collapse by default

no hurry, but i'd like it :-)

regards
- Pie

Offline

#2 03-06-2013 21:24:36

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Mobile template: Menu issues

For the scrolling thing: open mobile.css and set on line 17: position to "fixed" instead of "absolute".

Can't say about the other thing directly. It isn't difficult, but needs some additional lines of code.

Offline

#3 05-06-2013 04:38:48

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Re: Mobile template: Menu issues

Same thoughts here:
1) Agreed with Pie. Thx Thomas for the quick trick and works like charm!
2) Agreed with Pie, mobile screen size too limited. Can't afford the spaces being taken by the expanded menus.

Updated Info: Ok, found the clue. I have added these codes to line 191 (roughly) for the mobile/main.js:

        $("#navItems").click(function(){
                $("#navItems").css("display","none");
        });

just after this block of codes:

         $("#navTitle").click(function(){
                if($("#navItems").css("display") == "none"){
                        $("#navItems").css("display","block");
                }else{
                        $("#navItems").css("display","none");
                }
        });

If i done i wrong, please correct me. Thx

Last edited by paulineccl (05-06-2013 09:13:55)

Offline

#4 05-06-2013 14:24:14

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Mobile template: Menu issues

Hey,

while playing around on the iPhone, i thought it would be best, if the menu collapses, when touching the screen outside the menu, instead of collapsing after clicking an entry.

just a thought :-)

- Pie

Offline

#5 09-06-2013 06:46:45

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Re: Mobile template: Menu issues

Sry for the delay, Pie. I'm busy with something else here. I think this is what you want:

Replace this block of codes with:

         $("#navTitle").click(function(){
                if($("#navItems").css("display") == "none"){
                        $("#navItems").css("display","block");
                }else{
                        $("#navItems").css("display","none");
                }
        });

With:

	/*For main nav*/
	$("*").click(function(){
		var $myid = $(this).attr("id").trim();
		if(($myid == "navTitle") && ($("#navItems").css("display") == "none")){
			$("#navItems").css("display","block");
		}else{
			$("#navItems").css("display","none");
		}
	});

IMPORTANT: Undo all the changes on my previous post before apply the above changes.

Anyway, I think there might still some blink areas.

Last edited by paulineccl (09-06-2013 07:35:46)

Offline

#6 12-06-2013 17:46:00

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Mobile template: Menu issues

Hi,

thanks for that! I'll test it asap :-)

- Pie

Offline

#7 13-06-2013 13:28:38

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Mobile template: Menu issues

Hi pauline,

works like a charm, thanks :-)

- Pie

Offline

#8 16-06-2013 19:17:46

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Re: Mobile template: Menu issues

Pie, please update the code as following:

        /*For main nav*/
        $("*").click(function(){
                if($(this)!==undefined && $(this).attr("id")!==undefined && $(this).attr("id").trim()!==undefined) {
                        var $myid = $(this).attr("id").trim();
                        if(($myid == "navTitle") && ($("#navItems").css("display") == "none")){
                                $("#navItems").css("display","block");
                        }else{
                                $("#navItems").css("display","none");
                        }
                }
        });

Previously, i forgot to place the error checking conditions.

Offline

#9 16-06-2013 19:51:04

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Mobile template: Menu issues

Hey,

thanks for the efford!
I've replaced it and it's still working fine :-)

@Thomas: Perhaps you could implement that in the next version?!

- Pie

Last edited by Pie (16-06-2013 19:52:52)

Offline

#10 16-06-2013 19:56:11

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Mobile template: Menu issues

I already planned to do that smile

Offline

#11 16-06-2013 20:03:30

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Mobile template: Menu issues

Great :-)

BTW: just got Web Server: Too many connections! WTF big_smile

- Pie

Offline

#12 20-06-2013 21:45:47

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Mobile template: Menu issues

I'm gonna use this;

/*For main nav*/
	$("#navTitle").click(function(){
		if($("#navItems").css("display") == "none"){
			$("#navItems").css("display","block");
			setTimeout(function(){
				$(document).bind("click.closeNav",function(){
					$("#navItems").css("display","none");
					$(document).unbind("click.closeNav");	
				})
			},1);
		}else{
			$("#navItems").css("display","none");
		}
	});

I don't like applying click functions to all page elements smile + since it's a .click thing it won't bind to new generated elements (when a new page is loaded for example) and maybe act awkward.

Offline

#13 20-06-2013 23:41:02

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Mobile template: Menu issues

Hey,

works fine on iPhone :-)

- Pie

Offline

#14 21-06-2013 10:12:48

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Re: Mobile template: Menu issues

You're right, Thomas. Thx for the correction.

Offline

#15 23-02-2014 00:10:01

vanderaatje
Contributors
From: The Netherlands
Registered: 20-02-2014
Posts: 17
Website

Re: Mobile template: Menu issues

The fixed option is not working on windows phone 7.8 (internet explorer)

Offline

Board footer

Powered by FluxBB