Menu icon Foundation

Developer | Germany

My Posts



My Comments

Thomas K. commented on Megan Carroll's post about 5 years

Here is my actualy solution.
On small screens i will insert a off-canvas menu. (show-for-small-only) But I think a Admin-Tool makes no sense on small screens

HTML-code:

<body>

    <!-- Header content "top-bar" ... -->

        <div class="icon-bar vertical side_fixed hide-for-small-only">
          <a class="item">
            <label>Menuitem 1</label>
          </a>
          <a class="item">
            <label>Menuitem 2</label>
          </a>
          <a class="item">
            <label>Menuitem 3</label>
          </a>
        </div>

        <div class="admin_content">

        <!-- Main-Content   "row" "column" ... -->
        <!-- footer -->

        </div>
    <!-- scripts -->
</body>

SCSS-Code:

@media #{$medium-up} {
  .side_fixed {
    left: 0;
    top: $topbar-height;
    bottom: 0;
    position: fixed;
    width: 8rem;
    max-width: 8rem;
    overflow-x: hidden;
  }
  .admin_content {
    margin-left: 9rem;
  }
}

Thomas K. commented on Megan Carroll's post about 5 years

Hello you two,

I search the same. I'm working on a admin tool. I think we can make a "fixed" sidebar outside of foundation. it is a pity that it no ready solution exists, but it seems not so difficult to do it on your own.

This sample is easy. I will try it.
http://codepen.io/abdots/pen/zxloI

Thomas

Thomas K. commented on Thomas K.'s post about 5 years

This line works only in Firefox (I have v 32)

document.getElementsByTagName("svg")[0].setAttribute("transform", "scale(" + svgfaktor +")");

I have changed the line to this:

document.getElementsByTagName("svg")[0].setAttribute('width', 1464*svgfaktor);
document.getElementsByTagName("svg")[0].setAttribute('height', 815*svgfaktor);

Now my workaround does it on Firefox, Chrome, Opera and IE

But really smart, I'm still not

For me it's enough. Maybe someone with similar problems reads this and finds a different answer or confirms my solution.

Thank you

Thomas K. commented on Thomas K.'s post about 5 years

I have a workaround. But it works only in Firefox. Chrome and IE do not scale.
Anybody knows why?

Here is the code around $(document).ready function:

        $(document).ready(function(){ 

            svgfaktor = (document.all.basisdiv.offsetWidth*0.8) / 1379;

            $('#test').lazylinepainter({
                "svgData": pathObj,
                "strokeWidth": 3,
                "strokeColor": "#DAA520",
                "ratioScale" : 1 //svgfaktor 
            }).lazylinepainter('paint');
            svgfaktor = (document.all.basisdiv.offsetWidth*0.8) / 1379;
            document.getElementsByTagName("svg")[0].setAttribute("viewBox", "0 0 1379 768");
            document.getElementsByTagName("svg")[0].setAttribute("transform", "scale(" + svgfaktor +")");
            $('#test').css('width', svgfaktor*1379);
            $('#test').css('height', svgfaktor*768);
            $('#test').css('margin-left', (document.all.basisdiv.offsetWidth - (svgfaktor*1379)) / 2);

and here the html-code

    <div id="basisrow" class="row">
      <div id="basisdiv" class="small-12 small-centered columns">
        <div id="test"></div>
      </div>
    </div>

Thomas K. commented on Thomas K.'s post about 5 years

<head>
...

<script src="js/jquery-2.1.1.min.js"></script>
<!-- <script src="js/raphael-min.js"></script> -->
<script src="js/raphael_2.1.2.mod.js"></script>
<!-- <script src="js/jquery.lazylinepainter-1.4.1.min.js"></script> -->
<script src="js/jquery.lazylinepainter-1.4.1.js"></script>  

    <style type="text/css">
        body {
            background: #CCCCCC;
        }
        .columns.othercolor {
            background: #DDAA22;
        }
        .columns.mytextcolor {
            background: #EEEEEE;
        }
        .lazy-line {
            display: inline-block;
            position: relative;
            width: 100%;
            vertical-align: middle;
            overflow: hidden;
        }

        .svg-content {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }
        #test {
            background: #EEBB99;
        }
    </style>

    <script> 
      (function( $ ){  
            var pathObj = {
                "test": {
                    "strokepath": [
                        {
                            "path": "M14 50c126,-13 1364,-49 1364,-49l-46 766 -1331 -26",
                            "duration": 2500
                        },
                        {
                            "path": "M 14 93 L 1 698",
                            "duration": 1200
                        }
                    ],
                    "dimensions": {
                        "width": 1379,
                        "height": 768
                    }
                }
            }; 

         $(document).ready(function(){ 
         $('#test').lazylinepainter( 
         {
            "svgData": pathObj,
            "strokeWidth": 5,
            "strokeColor": "#B21C6E",
            "ratioScale" : 0.6
        }).lazylinepainter('paint'); 
      });
    })( jQuery );

    </script>

  </head>
  <body>

    <div class="row">
      <div class="medium-12 medium-centered large-12 large-centered columns othercolor">
        <div id="test"></div>
      </div>
    </div>

    <div class="row">
      <div class="large-6 medium-6 columns smaller mytextcolor">
        <p>
        <center><strong>Lorem ipsum </strong></center>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      </div>
      <div class="large-6 medium-6  columns smaller mytextcolor">
        <p>
        <center><strong>Lorem ipsum </strong></center>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      </div>
    </div>

...

Thomas K. commented on Julian Ćwirko's post about 5 years

Because I don't have any solution, I have made a workaround.
I name my php-files "filename.php.html"

Make a Batchfile e.g. "publish.bat" and copy it in a cmd-path

call grunt publish
ren dist\*.php.html *.

Then I call "publish" in my project-dir.

Important: You must have a "index.html", because otherwise you get an error with grunt.

Thomas K. commented on Julian Ćwirko's post about 5 years

Hm, I've installed connect-php and I've modified the Gruntfile.js in my project-dir.
"grunt publish" runs without error, but I don't have any php-file.

Where is the error?

If it works, it's a nice function.

Thank you

Edit: I have also added this line
var phpMiddleware = require('connect-php');
before grunt.initConfig

Thomas K. commented on Hussain's post about 5 years

Thank you Hussain,

that's exactly what I was looking for. (I bought the ebook). I'm a Developer (SQL,Delphi) since 25 years, but I do Web-Development and Web-Design for 1 or 2 years only. Now I will start development with modern tools. I work with Windows-Systems and search the best tools to work with. I want to use Foundation with SASS (and a little bit wordpress). Can you give me some tips for the development enviroment. I have only Dreamweaver CS6, but I don't know whether it is right.

Regards, Thomas

P.S. The subtitles in your video are very good. My english is very bad. Only reading is good.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Megan Carroll's post about 5 years

Here is my actualy solution.
On small screens i will insert a off-canvas menu. (show-for-small-only) But I think a Admin-Tool makes no sense on small screens

HTML-code:

<body>

    <!-- Header content "top-bar" ... -->

        <div class="icon-bar vertical side_fixed hide-for-small-only">
          <a class="item">
            <label>Menuitem 1</label>
          </a>
          <a class="item">
            <label>Menuitem 2</label>
          </a>
          <a class="item">
            <label>Menuitem 3</label>
          </a>
        </div>

        <div class="admin_content">

        <!-- Main-Content   "row" "column" ... -->
        <!-- footer -->

        </div>
    <!-- scripts -->
</body>

SCSS-Code:

@media #{$medium-up} {
  .side_fixed {
    left: 0;
    top: $topbar-height;
    bottom: 0;
    position: fixed;
    width: 8rem;
    max-width: 8rem;
    overflow-x: hidden;
  }
  .admin_content {
    margin-left: 9rem;
  }
}

You commented on Megan Carroll's post about 5 years

Hello you two,

I search the same. I'm working on a admin tool. I think we can make a "fixed" sidebar outside of foundation. it is a pity that it no ready solution exists, but it seems not so difficult to do it on your own.

This sample is easy. I will try it.
http://codepen.io/abdots/pen/zxloI

Thomas

You commented on Thomas K.'s post about 5 years

This line works only in Firefox (I have v 32)

document.getElementsByTagName("svg")[0].setAttribute("transform", "scale(" + svgfaktor +")");

I have changed the line to this:

document.getElementsByTagName("svg")[0].setAttribute('width', 1464*svgfaktor);
document.getElementsByTagName("svg")[0].setAttribute('height', 815*svgfaktor);

Now my workaround does it on Firefox, Chrome, Opera and IE

But really smart, I'm still not

For me it's enough. Maybe someone with similar problems reads this and finds a different answer or confirms my solution.

Thank you

You commented on Thomas K.'s post about 5 years

I have a workaround. But it works only in Firefox. Chrome and IE do not scale.
Anybody knows why?

Here is the code around $(document).ready function:

        $(document).ready(function(){ 

            svgfaktor = (document.all.basisdiv.offsetWidth*0.8) / 1379;

            $('#test').lazylinepainter({
                "svgData": pathObj,
                "strokeWidth": 3,
                "strokeColor": "#DAA520",
                "ratioScale" : 1 //svgfaktor 
            }).lazylinepainter('paint');
            svgfaktor = (document.all.basisdiv.offsetWidth*0.8) / 1379;
            document.getElementsByTagName("svg")[0].setAttribute("viewBox", "0 0 1379 768");
            document.getElementsByTagName("svg")[0].setAttribute("transform", "scale(" + svgfaktor +")");
            $('#test').css('width', svgfaktor*1379);
            $('#test').css('height', svgfaktor*768);
            $('#test').css('margin-left', (document.all.basisdiv.offsetWidth - (svgfaktor*1379)) / 2);

and here the html-code

    <div id="basisrow" class="row">
      <div id="basisdiv" class="small-12 small-centered columns">
        <div id="test"></div>
      </div>
    </div>

You commented on Thomas K.'s post about 5 years

<head>
...

<script src="js/jquery-2.1.1.min.js"></script>
<!-- <script src="js/raphael-min.js"></script> -->
<script src="js/raphael_2.1.2.mod.js"></script>
<!-- <script src="js/jquery.lazylinepainter-1.4.1.min.js"></script> -->
<script src="js/jquery.lazylinepainter-1.4.1.js"></script>  

    <style type="text/css">
        body {
            background: #CCCCCC;
        }
        .columns.othercolor {
            background: #DDAA22;
        }
        .columns.mytextcolor {
            background: #EEEEEE;
        }
        .lazy-line {
            display: inline-block;
            position: relative;
            width: 100%;
            vertical-align: middle;
            overflow: hidden;
        }

        .svg-content {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }
        #test {
            background: #EEBB99;
        }
    </style>

    <script> 
      (function( $ ){  
            var pathObj = {
                "test": {
                    "strokepath": [
                        {
                            "path": "M14 50c126,-13 1364,-49 1364,-49l-46 766 -1331 -26",
                            "duration": 2500
                        },
                        {
                            "path": "M 14 93 L 1 698",
                            "duration": 1200
                        }
                    ],
                    "dimensions": {
                        "width": 1379,
                        "height": 768
                    }
                }
            }; 

         $(document).ready(function(){ 
         $('#test').lazylinepainter( 
         {
            "svgData": pathObj,
            "strokeWidth": 5,
            "strokeColor": "#B21C6E",
            "ratioScale" : 0.6
        }).lazylinepainter('paint'); 
      });
    })( jQuery );

    </script>

  </head>
  <body>

    <div class="row">
      <div class="medium-12 medium-centered large-12 large-centered columns othercolor">
        <div id="test"></div>
      </div>
    </div>

    <div class="row">
      <div class="large-6 medium-6 columns smaller mytextcolor">
        <p>
        <center><strong>Lorem ipsum </strong></center>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      </div>
      <div class="large-6 medium-6  columns smaller mytextcolor">
        <p>
        <center><strong>Lorem ipsum </strong></center>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      </div>
    </div>

...

You commented on Julian Ćwirko's post about 5 years

Because I don't have any solution, I have made a workaround.
I name my php-files "filename.php.html"

Make a Batchfile e.g. "publish.bat" and copy it in a cmd-path

call grunt publish
ren dist\*.php.html *.

Then I call "publish" in my project-dir.

Important: You must have a "index.html", because otherwise you get an error with grunt.

You commented on Julian Ćwirko's post about 5 years

Hm, I've installed connect-php and I've modified the Gruntfile.js in my project-dir.
"grunt publish" runs without error, but I don't have any php-file.

Where is the error?

If it works, it's a nice function.

Thank you

Edit: I have also added this line
var phpMiddleware = require('connect-php');
before grunt.initConfig

You commented on Hussain's post about 5 years

Thank you Hussain,

that's exactly what I was looking for. (I bought the ebook). I'm a Developer (SQL,Delphi) since 25 years, but I do Web-Development and Web-Design for 1 or 2 years only. Now I will start development with modern tools. I work with Windows-Systems and search the best tools to work with. I want to use Foundation with SASS (and a little bit wordpress). Can you give me some tips for the development enviroment. I have only Dreamweaver CS6, but I don't know whether it is right.

Regards, Thomas

P.S. The subtitles in your video are very good. My english is very bad. Only reading is good.

Posts Followed

Following

  • No Content

Followers

  • No Content