Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Metrostyle tile

S

Sacruzsa

New Coder
Hello everyone,
I hope someone here can help me with the following problem.
At my work we use sharepoint with the metrostyle layout .
Now they want me to extend the current layout.
Currently the tile can slide open 1 time (parent and child system) but now the child tile should also slide open , but I have no idea how to do that.
I hope someone can help me with thisInstead of posting all the code below, I've attached the files

This is what i have
if you click on block 1, 3 tiles will slide down
What i have.png
This is what i want
still click on block 1 for the underlying tiles, but when clicked on this they can also slide open
What i want.png
Thanks in advance for the help
 
Sort by date Sort by votes
Sacruzsa said:
Hello everyone,
I hope someone here can help me with the following problem.
At my work we use sharepoint with the metrostyle layout .
Now they want me to extend the current layout.
Currently the tile can slide open 1 time (parent and child system) but now the child tile should also slide open , but I have no idea how to do that.
I hope someone can help me with thisInstead of posting all the code below, I've attached the files

This is what i have
if you click on block 1, 3 tiles will slide down
View attachment 1839
This is what i want
still click on block 1 for the underlying tiles, but when clicked on this they can also slide open
View attachment 1840
Thanks in advance for the help
Click to expand...
Hi there,
Is there a way you can either copy and paste your code onto here, or provide a link to a pastebin of your code, rather than uploading a zip file?
 
Upvote 0 Downvote
This is de code for the tile layout

HTML: 
<!DOCTYPE html>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
        <link rel="stylesheet" type="text/css" href="MetroStyle.css">

</head>
    <body>
        <div class="center">
        <div id="obscure" class="obscure" onclick="RestoreObscurity()"></div>
        <!--Left Sidebar-->
        <!--div class="sideBarLeft">
        </div>
        <!--MAIN BODY-->
        <div class="mainBody">

            <!--First line of tiles-->       
                        
                <!--New Tile blok1-->
            <div class="tile largeTile green" onclick="DropDown(this)" Parent="tegel">
                    <div class="tileFront" title="S2">
                        <div class="title">
                            Block1
                            </div>
                        </div>
                    </div>
            <!--Start Child containers for child of blok1-->
                    <div class="tile green DocumentChild" Parent="tegel">
                        <div class="tileFront" title="test" onclick="window.open('link','_blank')">
                            <div class="title">
                                Child1
                            </div>
                        </div>
                    </div>
                    <div class="tile green DocumentChild" Parent="tegel">
                        <div class="tileFront" title="test" onclick="window.open('link','_blank')">
                            <div class="title">
                                Child2
                            </div>
                        </div>
                    </div>
                    <div class="tile green DocumentChild" Parent="tegel">
                        <div class="tileFront" title="test" onclick="window.open('link','_blank')">
                            <div class="title">
                                Child3
                                </div>
                        </div>
                    </div>
                <!--End of child containers Blok1-->       
                
                            </div>
                    </div>
                </div>
        
        <script src="metro.js" type="text/javascript"></script>
    </body>
</html>

This is the code for how the tiles are made
CSS: 
.obscure{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    background-color: white;
    opacity: 0.6;
    filter: alpha(opacity=60);
    z-index: -4;
}
.center{
    width: 635px;
    margin-left: auto;
    margin-right: auto;
}
.metroContainer{
    width: auto;
    position: relative;
    padding: 0px;
    margin-right: auto;
    margin-left: auto;
    
}

.metroContainer:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    text-align: center;
    
}
.tile{
    position: relative;
    width: 100px;
    height: 100px;
    margin-right: 5px;
    margin-left: 0;
    margin-bottom: 5px;
    color: white;
    float: left;
    text-align: center;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    font-size: 29px;
    text-decoration: none;
    font-style: oblique;
    border-top-width: thick;
    border-radius: 4px;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    vertical-align: middle;
    /* [disabled]white-space: nowrap; */
    letter-spacing: -1px;
    word-spacing: -15px;
    font-variant: small-caps;
}
.largeTile{
    width: 205px;
    
}
.largeTile .description{
    position:absolute;
    left:2px;
    right:102px;
    top:2px;
    height:73px;
    font-size:10px;
    overflow:auto;
}
.tile .tileFront{
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin-top: 30px;
    margin-right: 17px;
    margin-left: 1px;
    margin-bottom: 17px;
    display: block;
    }   
.tile:hover{
    cursor: pointer;
}

.img:hover{
    cursor: pointer;
}

}
.title{
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 50px;
    height: 50px;
    margin-left: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
    text-align: center;
}
.DocumentChild{
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    font-size: 20px;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    font-style: oblique;
    white-space: normal;
    letter-spacing: 0px;
    word-spacing: -5px;
    font-variant: normal;
}
.OpenedParent{
}
/* Page Sections CSS */
.sideBarLeft{
    position: relative;
    width: 270px;
    height: 35%;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;

}
.mainBody{
    position: relative;
    width: auto;
    float: left;
    margin-left: auto;
    margin-right: auto;
}
.sideBarRight{
    position: relative;
    width: 250px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    cursor:pointer;
}
.toolbar{
    position: relative;
    width: 160px;
    height: 100%;
    margin-left: 0px;
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: #31E255;
    text-align: center;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    font-style: italic;
    padding-bottom: 0px;
    border-radius: 10px;
    cursor: pointer;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 0px;
}
/* Sidebar content CSS */
.sideBarHeader{
    position: relative;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 25px;
    font-family: 'Segoe UI Semibold';
    font-size: 17px;
    color: #323436;
    padding-top: 5px;
    text-align: center;
}
.sideBarContent{
    position: relative;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 25px;
    font-family: 'Segoe UI Semibold';
    font-size: 13px;
    color: black;
    text-align: center;
    padding-top: 3px;
    vertical-align: center;
}
.sideBarContent:hover{
    cursor: pointer;
}

.link{
    font-family: 'Segoe UI Semibold';
    font-size: 20px;
    color: black;
    text-align: center;
    text-decoration: none;
}
/* Toolbar content CSS */
.toolbarMenu{
    display: inline-block;
    width: 150px;
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-right: 3px;
}
.toolbarMenu:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.toolbarContent{
    display: block;
    position: relative;
    width: 100%;
    height: 25px;
    font-family: 'Segoe UI Semibold';
    font-size: 13px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}
.toolbarContent:hover{
    cursor: pointer;
}
.imagePlaceHolder{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: right;
    margin: 0px 0px 0px 0px;
    top: 0;
    left: 0;
}
.toolbarImage{
    height: 20px;
    margin: 5px 5px 5px 5px;
}
.toolbarChild{
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 0px;
    border-right: 0px;
}
/* Define color-shemes */
.green{
    background-color: #317612;
}
.green:hover{
    background-color: #389e37;
}
.greenSidebar{
    background-color: #317612;
}
.neutralSidebar{
    background-color: #ffffff;
    cursor: pointer;
}
.neutralSidebar:hover{
    background-color: #389e37;
    color:white;
}
.neutralSidebar:hover .link {
    background-color: #389e37;
    color:white;
}
.neutralToolbar{
    background-color: #317612;
    color:white
}
.neutralToolbar:hover{
    background-color: #389e37;
}
.neutralToolbarChild{
    background-color: #317612;
    color: white;
}
.neutralToolbarChild:hover{
    background-color: #389e37;
}

And this is the code for how everything needs to work
JavaScript: 
//Dropdown_Sliding_Tiles

function DropDown(parent){
    
    //Get all child elements
    var tile = document.querySelectorAll(".DocumentChild");

    //Get Parent tags
    var parentName = parent.getAttribute("Parent");
    
    //Format Parent tile
    parent.className += " OpenedParent";
    parent.style.zIndex = "2";
    var parentWidth = parent.offsetWidth;
    parent.setAttribute("onclick","RestoreObscurity();");
    
    //Child tile animation
    var i;
    var childOfParent;
    var topOffset = 105;
    var leftOffset = parent.offsetLeft;
    var farLeft = true;
    
    for (i = 00; i < tile.length; i++) {
        
        //check if tile is child of clicked parent
        childOfParent = tile[i].getAttribute("Parent");
        
        //Unhide child tile
        if(childOfParent == parentName){
            tile[i].style.visibility = 'visible';   
        
            //Position tile under parent tile
            tile[i].style.left = leftOffset+'px';
            tile[i].style.zIndex = "1";
    
            // Set element transform times
            tile[i].style.webkitTransition = "transform 1s";
            tile[i].style.MozTransition = "transform 1s";
            tile[i].style.msTransition = "transform 1s";
            tile[i].style.OTransition = "transform 1s";
            tile[i].style.transition = "transform 1s";
            
            //Initiate tile slide
            tile[i].style.webkitTransform = "translate(0px,"+topOffset+"px)";
            tile[i].style.MozTransform = "translate(0px,"+topOffset+"px)";
            tile[i].style.msTransform = "translate(0px,"+topOffset+"px)";
            tile[i].style.OTransform = "translate(0px,"+topOffset+"px)";
            tile[i].style.Transform = "translate(0px,"+topOffset+"px)";
            
            //Child tile positioning without animation
            tile[i].style.top = topOffset;
            
            //Calculate offset
            if (parentWidth == 205){
                if (farLeft){
                    leftOffset = leftOffset + 105;
                    farLeft = false;
                }
                else{
                    leftOffset = leftOffset - 105;
                    farLeft = true;
                    topOffset = topOffset + 105;
                }
            }
            else{
                topOffset = topOffset + 105;
            }
        }
    }
    
    //Obscure rest of page
    var obscure;
    
    obscure = document.getElementById("obscure");
    obscure.style.zIndex = "1";
    obscure.style.visibility = 'visible';   
}

function RestoreObscurity(){
    
    //Get all child elements and restore CSS
    var tile = document.querySelectorAll(".DocumentChild");
    var strClass;
    var i;

    
    for (i = 00; i < tile.length; i++) {
        
        tile[i].style.zIndex = "-1";
        tile[i].style.visibility = "hidden";
        tile[i].style.msTransform = "translate(0px,0px)";
        //tile[i].style.left = "0px";
        //tile[i].style.top = "0px";
    }
    
    //Get opened parent element and restore CSS
    tile = document.querySelectorAll(".OpenedParent");
    
    tile[0].style.zIndex = "auto";
    tile[0].setAttribute("onclick","DropDown(this);");
    
    //Remove Class from parent
    strClass = tile[0].className;
    strClass = strClass.replace(" OpenedParent", "");
    tile[0].className = strClass;
    
    //Remove obscurity
    var obscure = document.getElementById("obscure");
    
    obscure.style.zIndex = "-2";
    obscure.style.visibility = "hidden";
}

//Open links in new tab

function openDatalink(parent){
    
    var url = parent.getAttribute("datalink");
    
    window.open(url,"_parent");
}

//Open links in same page

function openDatalinkHome(parent){
    
    var url = parent.getAttribute("datalink");
    
    window.open(url,"_parent");
}

//Expand toolbar menu

function toolbarMenuExpand(parent){
    
    //Get all child elements
    
    var child = document.querySelectorAll(".toolbarChild");
    
    //Get parent name
    var parentName = parent.getAttribute("id");
    
    //Expand child items
    
    var i;
    var currentHeight = 25;
    var topOffset = 30;
    var firstChildFlag = 1;
    
    for (i=00; i < child.length; i++) {
        
        //Get parent element of child
        var prmParent = child[i].getAttribute("parent");
        
        //Do code only if child element is child of active parent element
        if(prmParent == parentName){
            
            //Expand parent div
            currentHeight = currentHeight + 32;
            
            parent.style.height = currentHeight + "px";
            
            //Format child elements
            child[i].style.visibility = "visible";
            
            child[i].style.webkitTransform = "translate(0px,"+topOffset+"px)";
            child[i].style.MozTransform = "translate(0px,"+topOffset+"px)";
            child[i].style.msTransform = "translate(0px,"+topOffset+"px)";
            child[i].style.OTransform = "translate(0px,"+topOffset+"px)";
            child[i].style.Transform = "translate(0px,"+topOffset+"px)";
            
            //Child tile positioning without animation
            child[i].style.top = topOffset;
            
            topOffset = topOffset + 32;
            
            //formatting delta for first child element
            if(firstChildFlag==1){
                child[i].style.borderTopWidth = "2px";
                topOffset = topOffset + 1;
                
                firstChildFlag = 0;
            }
        }
    }
}

//Collapse toolbar menu

function toolbarMenuCollapse(parent){
    
    //Get all child elements
    
    var child = document.querySelectorAll(".toolbarChild");
    
    //Get parent name
    var parentName = parent.getAttribute("id");
    
    //Restore all formatting
    
    var i;
    
    //Restore child elements
    for (i=00; i < child.length; i++){
        
        child[i].style.top = "0px";
        child[i].style.visibility = "hidden";
        
    }
    
    //Restore parent element
    parent.style.height = "25px";
}

//Ad Valvas Hide/Unhide Toggle

function hideUnhideToggle(){
    
    
    
}
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom