Menu icon Foundation

Designer | France

My Posts




  • 6
    Replies
  • Javascript not loaded

    By VIncent Kosciuszko

    javascript

    Hello, I've some problems with the new version of Foundation. When I start a new project I got this error: TypeError: $(...).foundation is not a function. Because of that my top-bar didn't work. Any idea ? All links in my index.html work well.

    Last Reply by Erik M almost 4 years ago


My Comments

VIncent Kosciuszko commented on VIncent Kosciuszko's post over 3 years

Ok so I've try to get the design working with off-canvas. I've two main problems, first the title-bar is not 100% with when the sidebar is collapse (state 2), and with this way the off-canvas basic behavior is broken by my css.
Here is the code :
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KittenBoard</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>

&lt;div class="off-canvas-wrapper"&gt;
    &lt;div class="off-canvas-wrapper-inner" data-off-canvas-wrapper&gt;
        &lt;div class="off-canvas position-left reveal-for-medium" id="sidebar" data-off-canvas&gt;
            &lt;ul class="menu vertical"&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-th-large"&gt;&lt;/i&gt; &lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-font"&gt;&lt;/i&gt; &lt;span&gt;Typography&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-align-left"&gt;&lt;/i&gt; &lt;span&gt;UI Interface&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; &lt;span&gt;Forms&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-table"&gt;&lt;/i&gt; &lt;span&gt;Tables&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-line-chart"&gt;&lt;/i&gt; &lt;span&gt;Charts&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-calendar-o"&gt;&lt;/i&gt; &lt;span&gt;Calendar&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-file-o"&gt;&lt;/i&gt; &lt;span&gt;Pages&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="off-canvas-content" data-off-canvas-content&gt;
            &lt;div class="top-bar"&gt;
                &lt;div class="top-bar-left"&gt;
                    &lt;ul class="menu"&gt;
                        &lt;li&gt;&lt;a href="#" class="sidebarIcon"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;form action="#" method="get"&gt;&lt;input type="search" placeholder="Search Dashboard" class="search"&gt;&lt;/form&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="top-bar-right"&gt;
                    &lt;ul class="menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-flag"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-ellipsis-v"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/what-input/what-input.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/foundation-sites/dist/foundation.js"&gt;&lt;/script&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;

&lt;script&gt;
$( document ).ready(function() {
    var sidebar = $("#sidebar");
    var menuIcon = $(".sidebarIcon");

    menuIcon.click(function(){
        if(sidebar.hasClass('expand')){
            sidebar.removeClass('expand')
        }
        else{
            sidebar.addClass('expand');
        }
        return false;
    });

});
&lt;/script&gt;

</body>
</html>

 
#sidebar{
width: 50px;
min-height: 100vh;
background-color: #2f323a;

&amp;.expand{
    width: 230px;
    border-right: 5px solid rgba(255, 255, 255, .2);

    .menu{
        li{
            width: 200px;
            padding-left: 30px;
            text-align: left;
            span{
                display: inline;
            }
        }
    }
}

.menu{

    li{
        width: 50px;
        text-align: center;
        span{
            display: none;
        }
    }

    a{
        color: #eeeeee;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        padding: 20px 0;
    }
}

}

.top-bar{
background: #fff;

.menu{
    background: #fff;
}

a{
    color: #2f323a;
}

.search{
    border: none;
    background: #f4f5f7;
    color: #2f323a;
    width: 213px;
    height: 33px;
    padding-left: 10px;
    box-shadow: none;
}

}

.position-left.reveal-for-medium ~ .off-canvas-content{
margin-left: 50px;
}

.position-left.reveal-for-medium.expand ~ .off-canvas-content{
margin-left: 230px;
}
 
Here is the screenshots :


 

 
Thanks again for help Rafi

VIncent Kosciuszko commented on VIncent Kosciuszko's post over 3 years

Hello Rafi,
The problem is not really the css because I've already try and yes with the off-canvas I work pretty well. (just need to change the width on the off-canvas and the margin-left (on the canvas-content).
My problem is with the state 2. First on the design you can see in the state 2 the title-bar is 100% with, i don't think it's possible with off-canvas. And when we are in state 2 I need a dropdown menu vertical. And on state 1 a classic dropdown menu. and one more time the class .vertical-only-medium does not exist I beleive.
And when we are on mobile I don't want an off-canvas but a classic dropdown menu under the title bar. Can I do that with foundation ? Or I need to clone the menu and hide it on medium & large ?

VIncent Kosciuszko commented on Jamie Totten's post over 3 years

In F5 you have the class .small-only-text-center but i don't know if you have it in F6

VIncent Kosciuszko commented on Jean-Luc Tallis's post over 3 years

Hello,
 
In ./scss/_settings.scss line 48 you can change the global size
$global-font-size: 100%;
In the same file line 108 you can change the font size for the headers :
$header-sizes: (
small: (
'h1': 24,
'h2': 20,
'h3': 19,
'h4': 18,
'h5': 17,
'h6': 16,
),
medium: (
'h1': 48,
'h2': 40,
'h3': 31,
'h4': 25,
'h5': 20,
'h6': 16,
),
);

VIncent Kosciuszko commented on Alistair Kenyon-Brodie's post over 3 years

Can you give some code ? Maybe your path to the css & js file are broken

VIncent Kosciuszko commented on Lex Nasser's post over 3 years

It's not really hard:
With this html :
<h1>Conseil <br>& création pour les
<span class="words-list">
<b class="is-visible">visionnaires</b>
<b class="is-hidden">agences</b>
<b class="is-hidden">indépendants</b>
<b class="is-hidden">passionnés</b>
<b class="is-hidden">entreprises</b>
<b class="is-hidden">écureuils</b>
</span>
</h1>
// Call this function every 2 sec

window.setInterval(function(){
// list all hidden word
var words = document.querySelectorAll(".is-hidden");
// chose one randomly
var randomWord = Math.floor(Math.random()*((words.length - 1)+1));

//hide the visible word
document.querySelector(".is-visible").className = "is-hidden";

//show the chosen one :)
words[randomWord].className = "is-visible";
}, 2000);
 
 

VIncent Kosciuszko commented on Alistair Kenyon-Brodie's post over 3 years

Hello,
 
are you opening your file in a webserver ?

VIncent Kosciuszko commented on hassan's post almost 4 years

@Erik M you have removed my thread because It's the same problem here ?

VIncent Kosciuszko commented on VIncent Kosciuszko's post almost 4 years

Here is the output : ReferenceError: Foundation is not defined

Posts Followed






Following

    No Content

Followers

My Posts



My Comments

You commented on VIncent Kosciuszko's post over 3 years

Ok so I've try to get the design working with off-canvas. I've two main problems, first the title-bar is not 100% with when the sidebar is collapse (state 2), and with this way the off-canvas basic behavior is broken by my css.
Here is the code :
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KittenBoard</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>

&lt;div class="off-canvas-wrapper"&gt;
    &lt;div class="off-canvas-wrapper-inner" data-off-canvas-wrapper&gt;
        &lt;div class="off-canvas position-left reveal-for-medium" id="sidebar" data-off-canvas&gt;
            &lt;ul class="menu vertical"&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-th-large"&gt;&lt;/i&gt; &lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-font"&gt;&lt;/i&gt; &lt;span&gt;Typography&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-align-left"&gt;&lt;/i&gt; &lt;span&gt;UI Interface&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-check-square-o"&gt;&lt;/i&gt; &lt;span&gt;Forms&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-table"&gt;&lt;/i&gt; &lt;span&gt;Tables&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-line-chart"&gt;&lt;/i&gt; &lt;span&gt;Charts&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-calendar-o"&gt;&lt;/i&gt; &lt;span&gt;Calendar&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-file-o"&gt;&lt;/i&gt; &lt;span&gt;Pages&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="off-canvas-content" data-off-canvas-content&gt;
            &lt;div class="top-bar"&gt;
                &lt;div class="top-bar-left"&gt;
                    &lt;ul class="menu"&gt;
                        &lt;li&gt;&lt;a href="#" class="sidebarIcon"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;form action="#" method="get"&gt;&lt;input type="search" placeholder="Search Dashboard" class="search"&gt;&lt;/form&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class="top-bar-right"&gt;
                    &lt;ul class="menu"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-expand"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-flag"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-ellipsis-v"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/what-input/what-input.js"&gt;&lt;/script&gt;
&lt;script src="bower_components/foundation-sites/dist/foundation.js"&gt;&lt;/script&gt;
&lt;script src="js/app.js"&gt;&lt;/script&gt;

&lt;script&gt;
$( document ).ready(function() {
    var sidebar = $("#sidebar");
    var menuIcon = $(".sidebarIcon");

    menuIcon.click(function(){
        if(sidebar.hasClass('expand')){
            sidebar.removeClass('expand')
        }
        else{
            sidebar.addClass('expand');
        }
        return false;
    });

});
&lt;/script&gt;

</body>
</html>

 
#sidebar{
width: 50px;
min-height: 100vh;
background-color: #2f323a;

&amp;.expand{
    width: 230px;
    border-right: 5px solid rgba(255, 255, 255, .2);

    .menu{
        li{
            width: 200px;
            padding-left: 30px;
            text-align: left;
            span{
                display: inline;
            }
        }
    }
}

.menu{

    li{
        width: 50px;
        text-align: center;
        span{
            display: none;
        }
    }

    a{
        color: #eeeeee;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        padding: 20px 0;
    }
}

}

.top-bar{
background: #fff;

.menu{
    background: #fff;
}

a{
    color: #2f323a;
}

.search{
    border: none;
    background: #f4f5f7;
    color: #2f323a;
    width: 213px;
    height: 33px;
    padding-left: 10px;
    box-shadow: none;
}

}

.position-left.reveal-for-medium ~ .off-canvas-content{
margin-left: 50px;
}

.position-left.reveal-for-medium.expand ~ .off-canvas-content{
margin-left: 230px;
}
 
Here is the screenshots :


 

 
Thanks again for help Rafi

You commented on VIncent Kosciuszko's post over 3 years

Hello Rafi,
The problem is not really the css because I've already try and yes with the off-canvas I work pretty well. (just need to change the width on the off-canvas and the margin-left (on the canvas-content).
My problem is with the state 2. First on the design you can see in the state 2 the title-bar is 100% with, i don't think it's possible with off-canvas. And when we are in state 2 I need a dropdown menu vertical. And on state 1 a classic dropdown menu. and one more time the class .vertical-only-medium does not exist I beleive.
And when we are on mobile I don't want an off-canvas but a classic dropdown menu under the title bar. Can I do that with foundation ? Or I need to clone the menu and hide it on medium & large ?

You commented on Jamie Totten's post over 3 years

In F5 you have the class .small-only-text-center but i don't know if you have it in F6

You commented on Jean-Luc Tallis's post over 3 years

Hello,
 
In ./scss/_settings.scss line 48 you can change the global size
$global-font-size: 100%;
In the same file line 108 you can change the font size for the headers :
$header-sizes: (
small: (
'h1': 24,
'h2': 20,
'h3': 19,
'h4': 18,
'h5': 17,
'h6': 16,
),
medium: (
'h1': 48,
'h2': 40,
'h3': 31,
'h4': 25,
'h5': 20,
'h6': 16,
),
);

You commented on Alistair Kenyon-Brodie's post over 3 years

Can you give some code ? Maybe your path to the css & js file are broken

You commented on Lex Nasser's post over 3 years

It's not really hard:
With this html :
<h1>Conseil <br>& création pour les
<span class="words-list">
<b class="is-visible">visionnaires</b>
<b class="is-hidden">agences</b>
<b class="is-hidden">indépendants</b>
<b class="is-hidden">passionnés</b>
<b class="is-hidden">entreprises</b>
<b class="is-hidden">écureuils</b>
</span>
</h1>
// Call this function every 2 sec

window.setInterval(function(){
// list all hidden word
var words = document.querySelectorAll(".is-hidden");
// chose one randomly
var randomWord = Math.floor(Math.random()*((words.length - 1)+1));

//hide the visible word
document.querySelector(".is-visible").className = "is-hidden";

//show the chosen one :)
words[randomWord].className = "is-visible";
}, 2000);
 
 

You commented on Alistair Kenyon-Brodie's post over 3 years

Hello,
 
are you opening your file in a webserver ?

You commented on hassan's post almost 4 years

@Erik M you have removed my thread because It's the same problem here ?

You commented on VIncent Kosciuszko's post almost 4 years

Here is the output : ReferenceError: Foundation is not defined

Posts Followed

Following

  • No Content

Followers

  • No Content