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 25-11-2013 16:41:09

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

The left and right arrow navigation

I would like to move the left/right arrow navigators to the "Group Title" line.   This would save some valuable space for tablets.

I would like to simply move the  (<-) left arrow before the group title   (i.e.   (<--) Download ) and the right arrow over the last top row tile directly across the group title. 

I am relatively new to Metro UI.   Any help would be appreciated...

Regards,
rs

Offline

#2 25-11-2013 20:28:24

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

Re: The left and right arrow navigation

The vertical position of the nav arrows is set in css/layout.css:

.navArrows{
    position:absolute;
    margin-top:60px; /* <--- */
    opacity: 0.5;
    filter:  alpha(opacity=50);
    height:32px;
    display:none;
}

the left / right position is dynamically set by the javascript:

js/functions.js

/* Place the arrows on the right place*/
$.extend($arrows,{
    place:function(speed){
        if($group.direction=="horizontal"){
            if($page.layout == "full"){
                $("#tileContainer").children(".navArrows").hide();
                if($group.current!=0){
                    $("#arrowLeft").css('margin-left',getMarginLeft($group.current)-40).fadeTo(speed,0.5);
                }
                if($group.current!=($group.count-1)){       
                    $("#arrowRight").css('margin-left',$arrows.rightArray[$group.current]+12).fadeTo(speed,0.5);
                }
            }else if($page.layout == "small"){
                $("#tileContainer").children(".navArrows").hide();
                if($group.current!=0){
                    $("#arrowLeft").css('margin-left',getMarginLeft($group.current)-40).fadeTo(speed,0.5);
                }
                if($group.current!=($group.count-1)){
                    $("#arrowRight").css('margin-left',getMarginLeft($group.current)+scaleSpacing*2+scale+12).fadeTo(speed,0.5);
                }   
            }else{
                $("#tileContainer").children(".navArrows").hide();
            }
            $events.arrowsPlaced();   
        }
    }
});

Offline

#3 26-11-2013 21:19:15

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: The left and right arrow navigation

I modified both the css/layout.css and the js/functions.js files.

I was able to change the margin-top:60px to 0px  in order to put the leftArrow on the same line as the groupTitle and the following in the functions.js to put the rightArrow just above the last tile of the first row.

                if($group.current!=0){
/*                    $("#arrowLeft").css('margin-left',getMarginLeft($group.current)-40).fadeTo(speed,0.5);  */
/* FIX */                $("#arrowLeft").css('margin-left',getMarginLeft($group.current)).fadeTo(speed,0.5);
                }
                if($group.current!=($group.count-1)){       
/*                    $("#arrowRight").css('margin-left',$arrows.rightArray[$group.current]+12).fadeTo(speed,0.5);  */
/* FIX */                $("#arrowRight").css('margin-left',($arrows.rightArray[$group.current]+12)-45).fadeTo(speed,0.5);
                }

The only issue I have now is the groupTitle appears on top of the leftArrow.   Is there an easy way way for the groupTitle to be shifted over approx. 45px  (if not the first groupTitle since there is no left arrow required for the first group)?

That is the "Home" group remains constant but each additional group is shifted 45px to allow for the leftArrow to be placed there.

Thank you

Offline

#4 22-03-2014 11:28:44

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: The left and right arrow navigation

If someone wants to do something like rsalomone wanted, you need to make some more changes in js/functions.js file which are:

  1. Make changes like rsalomone wrote.

  2. Right after changed lines in rsalomone solution add this code:

    $("#groupTitle"+$group.current).css('margin-left',(getMarginLeft($group.current)+45));

    This code moves group title 45px to the right side.

  3. Find line of code: if(n<0){n=0}; and right after it (and before $group.current = n;) add this code:

    $("#groupTitle"+$group.current).css('margin-left',(getMarginLeft($group.current)));

    It moves group title back to its original place.

That's all.

Last edited by chrismaliszewski (22-03-2014 11:30:38)

Offline

#5 25-03-2014 13:57:06

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: The left and right arrow navigation

I made those changes (similar to yours) and they work great.    My site (unfinished) demonstrates the result:

www.nortel.ws

Offline

#6 25-03-2014 16:50:00

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: The left and right arrow navigation

Your changes are even better if you consider placing arrows in mobile version but instead of using left/right arrows you try to use up/down arrows smile.

Offline

#7 25-03-2014 18:48:16

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: The left and right arrow navigation

Chris,

I have virtually ignored the mobile version (for now).   I have been making adjustments to the "tablet" version given that there are a lot of anomalies with the rendering and sizing on Ipad.   Once I complete the desktop/tablet version I will invest time in the fully mobile version.   I do agree with you about the directional arrows though.  Thanks.

Offline

Board footer

Powered by FluxBB