Code solutions to PHP, JS, CSS

Spread your code soluces to the world

Love me

Search results for : class    (8)

Centering an element in the page (css)

Here are two methods to center CSS DIV blocks inside the page or parent element. The first method uses absolute positioning wich does not consider the position of other page elements. It is recommended for a rapid implementation of a correctly set graphical template. The second method uses a div to wedge the second DIV in height. The horizontal...
solucior.com/35-Centering_an_element_in_the_page.html

Image class resize and rounded mask (php gd image)

This PHP GD class offers several useful features. It resizes images, apply a rounded mask with various options : • output size • crop mode : crop to fill, fill to fit • rounded corners or square • color of the rounded mask It is complete and usable in all cases. This class use the PNG mask round_440.png
solucior.com/38-Image_class_resize_and_rounded_mask.html

Very simple drag and drop upload form (javascript)

There are many solutions and scripts for drag and drop upload. Here is a very simple solution using the native drag and drop of the modern browsers type file input. It is also compatible with browsers that do not support drag and drop as smartphone because it uses conventional HTML forms input. Tested with Safari, Chrome, Firefox last...
solucior.com/41-Very_simple_drag_and_drop_upload_form.html

Rotate and scale with CSS (css)

Here are two examples of rotation and scale (zoom) with CSS3. The first example uses javascript to apply transition effects by changing the CSS class of an element. This allows the event to be deported to another area. The second example works with the simplest pseudo-class HOVER. The effects do not work with Firefox for now only on...
solucior.com/32-Rotate_and_scale_with_CSS.html

Isolate a color (php gd image)

Here is a class to isolate a primary color rendering of a photo black and white. The choice of using Object-oriented programming instead of a function gives the advantage to add filters or other image effects thereafter. Instantiation [code]$obj = new image_effect(); // Optional : ratio size of the working image. default : 2 ...
solucior.com/23-Isolate_a_color.html

Zoom with CSS3 (css)

CSS3 allows the function of "scaling"(or zoom) on an HTML element. In the example below, the scale is assigned to the pseudo class : hover. Syntax : transition: (transition-property) (transition-duration in secondes) (transition-timing-function) • transition-property : all, css property • transition-duration : timing...
solucior.com/15-Zoom_with_CSS3.html

Javascript opacity (javascript)

Here is the method the most compatible to change the CSS opacity of an element with javascript. [code]opacity // modern browser -moz-opacity // older versions based on firefox -khtml-opacity // older versions based on Konkeror and Safari filter: alpha(opacity) // Internet Explorer before 8.0 ...
solucior.com/18-Javascript_opacity.html

Move dynamically a DOM objet up (javascript)

When you display elements as list, it is sometimes necessary to provide the classification of the lines. This function can raise an object of a level. Eg. when displaying a list of products. The verification of the nodeType is used to circumvent a problem in some browsers that carriage returns and spaces between two objects as a "objet...
solucior.com/2-Move_dynamically_a_DOM_objet_up.html