Jump to content


Nillervision

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

#518384 Responsive menu not working

Posted by Nillervision on 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>



#518383 Urgent - Please Help!

Posted by Nillervision on 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.




#517937 Excluding Animation Elements Loading Via JS?

Posted by Nillervision on 27 October 2017 - 08:04 PM

 

Is it possible to generate/ output html css3 animations via js? I'm not having any luck so far; the purpose is to exclude this animated text from the text on the page I do want indexed.

		<p id="OutputtedJS"></p>

		<script>
			document.getElementById(OutputtedJS).InnerHTML =
			"<h5 class=\"zoomout\">Fast</h5> \
			<h5 class=\"zoomout\">Reliable</h5> \
			<h5 class=\"zoomout\">Reliable</h5> \
			<h5 class=\"zoomout\">RC ESTIMATING LTD</h5>";
		</script>

 

Generating content with JS does not guarantee that it will not be indexed .

Google and other search engines can actually run JS on a page and decide that the generated content should be indexed. There are better ways to do exclude content from indexing. Try a noindex tag:

<html>
  <head>
  </head>
  <body>
    <p>This content will be indexed</p>

    <!--noindex-->

        <p>This content will not be indexed</p>
        <p>Place your animation elements here</p>

    <!--/noindex-->

    <p>This content will be indexed</p>
</body>
</html>

BTW your JavaScript syntax is wrong.

It is innerHTML not InnerHTML, and the ID you want to select is a string so it should be in quotes

document.getElementById("the-id-must-be-in-quotes").innerHTML = "The string you want to generate";



#517899 Tables for Lightbox

Posted by Nillervision on 23 October 2017 - 05:00 PM

Yes, You get the idea :)




#517793 Tables for Lightbox

Posted by Nillervision on 15 October 2017 - 09:25 PM

Get rid of the table elements and table row elements. Use divs instead. By changing the divs display property to table/table-row/table-cell you can get the same visual behavior as you would with "real" table elements.




#517667 Unwanted padding on Android with CSS3 Animations.

Posted by Nillervision on 07 October 2017 - 05:15 PM

Maybe you should try to animate the transform:scale() property rather than the font size.

Transform properties are made exactly for that sort of thing, and are much smoother as they are hardware accelerated on many devices (calculations can be done by the graphic card rather than the OS/browser).

 

Also changing font sizes can give you problems as browsers set initial values for properties like line-heights, margin etc. which also would have to be animated for accurate results.

 

Try this instead:

@keyframes zoomin {
    0% {transform: scale(1); /*Full size*/}
    90% {transform: scale(0.5); /*Half size*/ opacity: 100;}
    100% {transform: scale(0.5); opacity: 0;}
}




#517255 Web Accessibility Design Guidelines

Posted by Nillervision on 10 September 2017 - 11:43 PM

It's a sad fact that a lot of information on the Web is not directly accessible by people with disabilities.

 

 

 

It's a sad fact that people copy articles from the all over web and post them on this forum, without any link or credits to the source :(




#515450 General PHP

Posted by Nillervision on 17 May 2017 - 12:54 AM

The function above could be extended to handle all sorts of array operations  it might be useful for some to have a universal array-handler function
 
Remove, add, sort and shuffle

<?php
function processArray($array, $operation, $value=NULL) {
    if (!is_array($array)){
        return;
    }
    if (!isset($operation)){
        return;
    }
    if ($operation == "remove" && isset($value)){
        $newArray = array_diff($array, array($value));
    }
    elseif ($operation == "add" && isset($value)){
        array_push($array, $value);
        $newArray = $array;
    }
    elseif ($operation == "sort"){
        asort($array);
        $newArray = $array;
    }
    elseif ($operation == "shuffle"){
        shuffle($array);
        $newArray = $array;
    }
    /*More elseifs here for other array operations*/
    else{
        return;
    }
    return $newArray;
}

Usage

Some of the examples needs 3 arguments the array [array], the operation[string] and the value[string])
others only the array and the operation

<?php
$processedArray = processArray(array("red","green","blue","orange"), "remove", "blue");
//Will output red,green,orange... blue is removed
foreach($processedArray as $newVals):
echo $newVals."<br />";
endforeach;

$processedArray = processArray(array("red","green","blue","orange"), "add", "purple");
//Will output red,green,blue,orange,purple... purple is added
foreach($processedArray as $newVals):
echo $newVals."<br />";
endforeach;

$processedArray = processArray(array("red","green","blue","orange"), "sort");
//Will output the values alphabetically: "blue","green","orange","red"
foreach($processedArray as $newVals):
echo $newVals."<br />";
endforeach;

$processedArray = processArray(array("red","green","blue","orange"), "shuffle");
//Will output the values in random order
foreach($processedArray as $newVals):
echo $newVals."<br />";
endforeach;



#515124 HTML Form Help

Posted by Nillervision on 04 May 2017 - 04:25 PM

Hi,

 

Are you looking HTML form? HTML is easy hyper test scripting language. You can contact here, for more information support@foxprodesigns.com

 




#514914 What's the simplest but most effective design tip you've ever been gi...

Posted by Nillervision on 23 April 2017 - 10:36 AM

Best design tip(s) I ever got was: "kill your darlings" and "Think out of the box". Heat maps, test results and design conventions are great tools but they are only tools. Design is all about problem solving and sometimes the best solution requires that you forget everything you know.


#514717 What are the top web design trends in 2017?

Posted by Nillervision on 16 April 2017 - 09:26 AM

The one most important web design trend is responsive web design. Yes, if you are going to have a website for your business please make sure that it has responsive design.

 

RWD is not a trend. Trends comes and goes.




#514716 Stop font changing on page load

Posted by Nillervision on 16 April 2017 - 08:38 AM

Google own page speed tests they tell you their own font service is a blocking resource!

 

Google PageSpeed will tell you that for any request on your page (including the ones to your own server). It is true that you can save a single request by adding your font-face rules to your existing stylesheet, but the request it self is not what adds most to the load time, it is the actual bytes that needs to be transferred to the client.

 

 

There a gazillions of Google fonts, the chances of many of them being cached is slim.

 

Maybe if you choose a very special font. But fonts like Lato, Oswald, Roboto are some of the most used fonts on the web so if you are using any of these there are real good chances that the user have them cached 

 

The whole point of using a CDN is speed. The data will be transferred to the client from a large network of severs located all over the world rather than from your own local or cheap shared host




#514711 Stop font changing on page load

Posted by Nillervision on 16 April 2017 - 07:42 AM

 

Simple solution is to not use Google. Download the font and call it in your stylesheet:

@font-face {font-family: Sniglet;src: url(assets/Sniglet.ttf);}

Then just add the font to your styles:

body {font-family: Sniglet, Arial, sans-serif;}

 

I'm not so sure that font-face is faster.

The client still have to load the fonts and depending on your hosting it is not certain that your server responds faster than Googles CDN.

Also If you are using some of the popular fonts from Google there is a good chance that they are all ready cached in the users browser.

 

 

Make the Web Faster

Google Fonts makes product and web pages run faster by safely caching fonts without compromising users’ privacy or security. Our cross-site caching is designed so that you only need to load a font once, with any website, and we'll use that same cached font on any other website that uses Google Fonts.

 

https://fonts.google.com/about




#514707 My first Web Site

Posted by Nillervision on 15 April 2017 - 10:38 PM

Hello Elvis :D

Welcome to WDF.

Here are some suggestions for improvements:

 

Serious markup errors.

  • You have no doctype declaration
  • You have no <html> element
  • You have an (extra) <head> element in the end of the body element.
  • Your first <head> element (you can only have one) is missing a (very important) title tag
  • Your home page has 4 <h1> elements. A page should only have one top level heading

 

CSS

  • You are mostly using IDs as CSS selectors, that is bad practice and makes it imposible to reuse any styles
  • I understand that you are working on the page now, but when you are done try to minify your CSS and merge it into a single file for better performance.

JS

  • You have some blocking script tags in your (first) head element, try to move them down to before the closing body tag so the browser can load and start to render the content while the scripts are loading.
  • Use a minified version of jQuery instead
  • I get that you are using the CKEditor WYSIWYG for the backend but why on earth would you have your visitors load the ckeditor script when they are on the front end?



#514678 Modal windows

Posted by Nillervision on 14 April 2017 - 04:06 PM

I wouldn't worry so much about what text editor to use as long as it gets the job done, Also it's way off topic here

 

@Grant Barker I took a look at your post and you said that you want to open images in the modal. So I think you're better of using a lightbox plugin that uses AJAX rather than links to hidden inline content.

Maybe you can give this a try: http://noelboss.gith...o/featherlight/