Jump to content


Nillervision

Member Since 16 Feb 2013
Online Last Active Today, 01:11 AM
*****

Posts I've Made

In Topic: Sketch vs Affinity Designer vs Autodesk Graphic vs etc etc etc

11 December 2017 - 08:37 PM

Gimp will allow you to create bezier curves when editing, but as soon as you add a stroke or fill to the curve the result will be a raster image.

InkScape is IMO the best free alternative to AI. (Why do you hate it?)

BTW if you go for inkScape, use the optimized SVG option, to remove unnecessary metadata, comments etc.

Attached File  inkscape.JPG   38.31KB   0 downloads


In Topic: Responsive menu not working

29 November 2017 - 10:20 PM

There is a few issues first of all classnames must be separathed with a space

This:

if (x.className === "navigation-desktop") {
        x.className += "navigation-mobile";
}

will result in:

class="navigation-desktopnavigation-mobile"

So you should ad a whitespace before the classname

if (x.className === "navigation-desktop") {
        x.className += " navigation-mobile";
}

or even better have a look at classList.toggle

 

For the CSS you should remove the whitespace between

.navigation-desktop .navigation-mobile

You do not want to target a child element but the same element with the ekstra classname.

 

 

I did a few other changes to your code (removed the click event from the HTML markup and added it to the script instead)

 

Here is a working fiddle

 

And here is the entire source:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style>
html,body {
    font-family: 'Open Sans',sans-serif;
    background-color: #ffffff;
    margin: 0px;
}
.container {
    position: relative;
    clear: both;
    padding: 0px;
    margin: 0px;
}
.navigation {
    background-color: #000099;
    height: 400px;
    color: #ffffff;
}
.navigation-desktop {
    overflow: hidden;
    background-color: #333;
}
.navigation-desktop a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
.navigation-desktop a:hover {
    background-color: #ddd;
    color: black;
}
.active {
    background-color: #4CAF50;
    color: white;
}
.navigation-desktop .icon {
    display: none;
}
/*-- solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+. --*/
.group:before, .group:after {
    content:""; display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
@media screen and (max-width: 1024px) {
    .navigation-desktop a:not(:first-child) {
        display: none;
    }
    .navigation-desktop a.icon {
        float: right;
        display: block;
    }
    .navigation-desktop.navigation-mobile {
        position: relative;
    }
    .navigation-desktop.navigation-mobile .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .navigation-desktop.navigation-mobile a {
        float: none;
        display: block;
        text-align: left;
        }
}

        </style>
    </head>
    <body>
        <div class="container navigation group">
            <div class="navigation-desktop" id="myNavigation">
                <a href="index.html" class="active">Home</a>
                <a href="index.html">Item 1</a>
                <a href="index.html">Item 2</a>
                <a href="index.html">Item 3</a>
                <a id="burger" href="#" style="font-size:15px;" class="icon">&#9776;</a>
            </div>
        </div>
        <script>
            function myFunction(event) {
                event.preventDefault();
                var x = document.getElementById("myNavigation");
                if (x.className === "navigation-desktop") {
                    x.className += " navigation-mobile";
                } else {
                    x.className = "navigation-desktop";
                }
            }
                
            var burger = document.getElementById('burger');
            burger.addEventListener('click', myFunction);
        </script>
    </body>
</html>

In Topic: Urgent - Please Help!

29 November 2017 - 09:25 PM

If you don't know how to code a site to match a mockup you shouldn't take the job. There are plenty of "shortcuts" (site builders, frameworks, themes, plugins etc.) in the world of web development, but they will not be of any help if you don't know what you are doing.


In Topic: Excluding Animation Elements Loading Via JS?

30 October 2017 - 04:55 PM

Thanks so much Nillervision, I wish I could repay your kindness.

 

You're welcome.

Just happy to help :)


In Topic: Photo Gallery CMS

27 October 2017 - 08:36 PM

Why not just install a CMS in a subfolder and let your client use the CMS to upload/delete the images.

Then you just run a php script, on your bespoke page, that loops through all files in the media upload folder and echoes out an image-link for each result

(PHP has functions to match specific patterns so you could probably get the cms-generated thumbnails as well)

 

For each link you would of course also have to add the data or rel attributes that your favorite lightbox requires