Different ways to hide an HTML Element

There are different ways to hide an HTML element from the client, just hiding not removing.

We need to hide p.hide element, so the user can’t see it.

Display:

Display css property, display is the most important and most used css property to control HTML elements layout.

display:none; can be used to hide an HTML element from the view and it will appear as if it was not there on the page, means the HTML element will be hidden without blocking any space.

Example: Text 1 | Text 2 | Text 3

If we apply display:none; on Text 2, it will be: Text 1 |  | Text 3

So to hide p.hide element using display property:

Visibility:

Visibility property is the CSS property to manage HTML visibility, unlike display which has different values to control the element layout, visibility is used jut for show and hide elements

visibility: hidden can be used to hide an element from the client, but it will keep the element space visible like this: Text 1 |        | Text 3

When to use which? based on requirements and the case you have, you just need to test it on all browsers, and there will be an unrecognizable performance differences between different ways

http://stackoverflow.com/a/11757103/20126

Opacity:

Opacity property is controlling the transparency of the html element, so we can use it to make the element fully transparent and this will hide the element from the client view.

Just make sure to test it on all browsers because on older IE browsers it had some special ways to implement. (hope that no one still using old IE browsers, because you wont see many things any way 🙂 )

And the same as Visibility property, it will hide the element but will keep blocking its space, so the client will see an empty space instead of the element.

Background color and color

While it is rarely used, but we can change the background-color element css property and all child elements to be the same as the background color of the page or the same as container background.

Will need to change the text color as well to make sure that text is not visible as well.

And on some elements we may need to remove borders, that’s why this way is not common to use.

Font size:

We can hide text elements by setting font-size property to 0

Position:

Using the position property and top left we can make the control appear outside the client view.

Clip-Path (Clip):

Last way I want to mention on this post is using clip-path css property

 

 

References:

http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content

https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

http://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page

http://stackoverflow.com/questions/775060/how-to-hide-the-content-of-the-div-in-css

Aviary Integration step by step

Introduction:

Aviary is a better photo editing solution for web & mobile apps.  Aviary simplifies your app’s workflow by letting your users edit their photos right where they belong: in your app. The Aviary editor is embeddable, and can be added to any website or mobile app with just a few lines of code.

How to use aviary editing tool?
1. Create an account on Aviary.
2. After registering go to the “Web” tab and click “Get Key”  http://www.aviary.com/web-key , it will give you Access key and secret number.
3. Click on “Code Generator” tab  http://www.aviary.com/code-generator  set your preferred settings (you better preview your widget), get the generated code.
4. Embed your code in HTML page.

Let’s talk a little on this code, if we start from top to bottom we will find an image tag

This is the holder of the image that will be edited.  After that you will find a script tag contains a source link to online aviary JavaScript library to load the feather code (feather is the JavaScript library name) and this must be at the beginning before calling the widget.

The next script tag contains the instance of feather, notice that there is some parameters which is the default, you can add some or remove, some of them are mandatory like ‘apiKey’ , and other are optional like ‘openType’ you can find all parameters in the documentation http://www.aviary.com/web-documentation#intro , the ‘onSave’ event will be called by clicking save button after finish editing your photo, it takes two parameters ‘imageID’ and ‘newURL’, imageID is the id of the image tag and newURL is URL of the new photo will be replaced by the old one.

‘launchEditor’ is the function that launch the aviary editor tool by calling ‘featherEditor.launch’ by passing two parameters (id , src), id parameter is id of the image tag and src parameter is the image source.

Notice: The src parameter is required if the image to be edited is on a different host than the enclosing HTML page, and it has to be on the form ‘http://example.com/abc.jpg’.

At last there is an input tag to launch the editor by calling ‘launchEditor’ function

5. Launch your page and try your widget

6. Click on Edit photo and enjoy.

7. After finish editing save your work, the new image will be replaced by the old one

Documentation:

         http://www.aviary.com/web-documentation

         Code sample : AviarySample

Simplest menu using CSS

Many web designers I met had problems while  creating menus, specially which contains nested sub menus.

In some cases it is a real pain, but in most of cases it is simple, and the problem come when the designer start to implement the simple menu the hard wrong way, it will take ages from him to implement a simple menu while it just need few lines of css code.

Also he may think it can’t be done without javascript and jquery.

Try to think simple while writing your next menu and may be you will need my code as a starting point for a more complex menu.

What I am listing here is a very simple menu, putting in mind that this menu may contain infinite number of submenus.

Lets start with html:

 

 

This html use UL and LI to draw the menu html, you can use divs instead of UL and LI, this will not cause a problem.

The only hint I can point about the previous html code is that the sub menus html are inside the parent menu html.

Such as ‘Sub 1 >>’ is inside the parent ‘Main 1’, this will make our job easier.

Next CSS:

[sourcecode language=”css”]
ul li ul li
{
clear: both;
}

li
{
list-style-type: none;
float: left;
margin: 0 10px;
cursor: pointer;
width:100px;
}

li ul
{
display: none;
padding: 0;
}

li:hover > ul
{
display: block;
}
[/sourcecode]

The most important lines for us are starting from line 15, everything before this is just for making things looks better and formatted better.

As you see it is just 4 lines of code to make the menu functional, the trick exists in line 21, which will show the UL which exists under any LI and the user hovered on it, and the ‘>’ means that we will show just the first level of UL not all nested UL.

Feel free to add more nested submenus and see how simple it is.

Demo