Jump to content


Nillervision

Member Since 16 Feb 2013
Offline Last Active Oct 19 2017 06:06 AM
*****

#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/




#513644 Importance of ALT Text in SEO

Posted by Nillervision on 14 March 2017 - 06:59 AM

Alt Tags are the alternative tags which describes your images to people and also to search engines...

 

There is no such thing as "the alt tag". It is an attribute ;) and it should not be a "description for search engines", The purpose of the attribute is to increase accessibility. According to the HTML5 specs the value of the alt attribute should therefore NOT necessarily describe the image but the PURPOSE of the image in the context. If the image is purely decorative the attribute should still be there but the it should be empty.

 

http://www.w3.org/TR...tent-0.html#alt




#513381 Menu like this...

Posted by Nillervision on 01 March 2017 - 08:46 PM

I suppose what you are after is the dropdown effect. No JavaScript is used for that. It is done with CSS transitions on hover

I grabbed the transition effect from the page and used it in a simpler example here:

 

https://jsfiddle.net...ision/9eywnra6/

 

It should be enough to get you started




#513122 Modal windows

Posted by Nillervision on 19 February 2017 - 09:15 PM

Many devs resort to Bootstrap or other frameworks when it comes to modal / pop-up windows.

But it's not needed at all. If you would like to learn how to code your own responsive flexible modals, here is my approach.

 

It's been a year since I last had time to make a video tutorial and I got some great feedback from this forum then.

So besides the hope that it can be helpful to many people, I would also appreciate critique, ideas for alternative approaches etc. Thanks :)

 




#512727 Using Images Of celebrities on a website

Posted by Nillervision on 07 February 2017 - 10:05 PM

Publishing copyrighted work without permission is theft unless it can be justified as fair use  (educational purposes etc.)

 

However you can find a lot of images released under a open content licenses, a good source is https://commons.wiki.../wiki/Main_Page

 

Do a search on the page to find images of the celebs.

 

For most of the images from this source an attribution to the original creator is required but it can usually be done with a title/alt attributes.

And every image has guidelines for reuse. You can even use The provided "embed code" for each image which is a hotlink to the image on wikimedias fast SSL server provided in different resolutions. The embed code also contains all the required attributions.

 

Here is an example with an image of David Bowie, click the globe-icon on the right to get the embed code:

https://commons.wiki...lm_Festival.jpg