W3 Lessons: Web Design

Showing posts with label Web Design. Show all posts

Wednesday, July 24, 2019

Full Screen iframe, frameset URL Masking

URL Masking technique with frameset, widely used method and support all modern and old browsers.

<html><head><meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<frameset border="0" rows="100%,*" cols="100%" frameborder="no">
 <frame name="TopFrame" scrolling="yes" noresize src="http://www.w3lessons.com">
 <frame name="BottomFrame" scrolling="no" noresize>

 <noframes></noframes>
</frameset>
</html>

Tuesday, July 24, 2012

jQuery Menu Slider

jQuery Menu Slider with Left Right Button is useful user interface for website with long horizontal menu, with this Menu user able to scroll the menu with left and right sliders.

Let us build this jQuery Horizontal Menu Slider with rotatable links inside the menu

Step: 1
Include jQuery Lib and menuSlider Plugin

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.menuSlider.js" type="text/javascript"></script>

Step: 2
Add jQuery handler for menuSlider

<script type="text/javascript">

$(document).ready(function(){
 $('#menuSlider').menuSlider({
  width: '500px', // Menu Width
  height: '36px', // Menu Height
  linkSlideCount : 5 // How many Menus scroll back when hit right or lef
  }); 
 });

</script>

Step: 3
menuSlider CSS Styles

<style type="text/css">

#menuSlider ul
{
 display:block;
 position:relative;
 list-style:none;
 padding:0px;
 margin:0px;
 height:36px;
}

#menuSlider ul li
{
 display:block;
 float:left;
 padding:7px;
 height:15px;
 text-align:center;
}

#menuSlider ul li a
{
 text-decoration:none;
 font-weight:bold;
 color:#000;
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;

}

#menuSlider ul li a:hover
{
 color:#390;
}

#menuSliderWrapper
{
 position:relative;
 width:1000;
 background:url(images/link_bg.png) repeat-x top;
}

#menuSlider .ls_left_button, #menuSlider .ls_right_button
{
 background:url(images/button_sprit.png) no-repeat 0px 0px;
 width:94px;
 height:36px;
 cursor:pointer;
 clear:both;
}

#menuSlider .ls_right_button
{
 background:url(images/button_sprit.png) no-repeat -94px 0px;
 
}

Step: 4
menuSlider HTML

<div id="menuSlider">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Live Demo

Download Script

Download PSD

Saturday, June 9, 2012

Custom File upload control jQuery

Making Stylish HTML Form file input control in designing part of Web Layout was create browser compatibility issues and upload problems. Customizing Form Input Control using following jQuery technique.

jquery.fileControl.js

(function($) {
    
    $.fn.fileControl = function(options) {
                
        /* TODO: This should not override CSS. */
        var settings = {
            width : 250
        };
                
        if(options) {
            $.extend(settings, options);
        };
                        
        return this.each(function() {
            
            var self = this;
            var wrapper = $("<div>")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": settings.imageheight + "px",
                                "background": "url(" + settings.image + ") 0 0 no-repeat",
                                "background-position": "right",
                                "display": "inline",
                                "position": "absolute",
                                "overflow": "hidden"
                            });
                            
            var filename = $('<input class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px"
                             });

            $(self).before(filename);
            $(self).wrap(wrapper);

            $(self).css({
                        "position": "relative",
                        "height": settings.imageheight + "px",
                        "width": settings.width + "px",
                        "display": "inline",
                        "cursor": "pointer",
                        "opacity": "0.0"
                    });

            if ($.browser.mozilla) {
                if (/Win/.test(navigator.platform)) {
                    $(self).css("margin-left", "-142px");                    
                } else {
                    $(self).css("margin-left", "-168px");                    
                };
            } else {
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");                
            };

            $(self).bind("change", function() {
                filename.val($(self).val());
            });
      
        });
        

    };
    
})(jQuer
fileControl

FileControl.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Custom File Upload Control - W3Lessons.com</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.filecontrol.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// Custom File Input Control
 $("input.attachment").fileControl({ 
 image: "browse_btn.png",
 imageheight : 39,
 imagewidth : 128,
 width : 175,
 height:40,
 marginleft:0
 });
 
 })



</script>
<style type="text/css">
body,td,th {
 color: #D3BCA7;
}
body {
 background-color: #333;
}

.attachment, .attach
{
 padding:10px;
 margin-bottom:5px;
}
</style>
</head>

<body>

<form method="post" enctype="multipart/form-data">
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="submit" class="attach" value="Upload" />
</form>

</body>
</html>

Copy Button Image

Friday, March 2, 2012

PHP Tidy - Clean HTML Tags, HTML code, HTML Source, Comments

Website Webpage Optimization part, HTML pages contain many unnecessary development usage section such as Comments, Indents, Empty Lines, Accidental Enclosed tags without End Tag, Unknown Closing Tag, These are very sensitive for Browser Compatibly Issues, Page Loading Time and Web Page Optimization

We can able to keep our Web pages keep away from Unnecessary things such Comments, Un closed Tags, Un closed End Tags using HTML Tidy Object from PHP.

Here is the Example Code for PHP tidy Object. with Examples.
With this Example We have to use tidy Object (Tidy Object need to Enabled in PHP Configuration).
Check with phpinfo() under Tidy. ob_get_clean() , parse HTML String with parseString() function from Tidy object, and Clean our HTML with cleanRepair()

Read Full Article

Saturday, August 13, 2011

Pure CSS Drop Down Menu, Complete Fully CSS 3

Here is a SEO Friendly Horizontal Multilevel Drop Down Menu using Completely written with Pure CSS attributes and properties. You can easily format it with your own color theme and Image background by adjusting few properties You can use this menu for your Real time projects Back office Admin Panels.

This menu written with Combination of <div> and <ul><li>, and <a> <span> Tags
Mokup for the Multi Level Menu as Followes

drop-down-menu.css
In this file you can edit your color values as per your need.

/* menu::base */
div#menu {
	float:left;
    height:30px;
	background-color:#3399CC;	
	font-size:11px;
	font-weight:bold;
	text-align:left;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
	background-color:#0099CC;		
}
div#menu ul.menu {
    padding-left: 10px;
	background-color:#3399CC;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
}
   
div#menu li:hover>ul {
    left: -2px;
}

div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    z-index: 11;
    visibility: hidden;
    padding:0px;
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu li.current a {}

/* menu::level1 */
div#menu a {
    position: relative;
    z-index: 10;
    height: 11px;
    display: block;
    float: left;	
    padding:10px;
    text-decoration: none;
	color:#000;
}
div#menu span {

	font: bold 11px Tahoma, Geneva, sans-serif;
    padding-top:0px;
    color: #000;
    font-weight:bold;
    text-transform:capitalize;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
}

div#menu ul a:hover span {
    color: #039;
}

div#menu li { border-right:1px solid #CCC; }
div#menu li.last span{
    padding:0px;
}

/* menu::level2 */
div#menu ul ul li {
    padding: 4px 0;
    z-index: 9;
	border-bottom:1px solid #000;
	border-left:1px solid #CCC;
}
div#menu ul ul {
    z-index: 12;	
    padding: 0;
    margin-top:2px;
    margin-left:0px;
    margin-right:0px;
}
div#menu ul ul a {
  	width: 184px;
  padding: 0px 7px 3px 8px;
    height: auto;
    float: none;
    display: block;
    background:none;
    margin-bottom: 2px;
    z-index: -1;
	color:#FFF;
}
div#menu ul ul a span {
	  padding: 0 10px 0px 10px;
    line-height: 20px;
    color: #000;
	font-weight:bold;
    text-transform: none;
    background:none;
}
div#menu ul ul a:hover {

}
div#menu ul ul a:hover span {

    color: #039;
}

div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
	border-bottom:1px solid #EEEEEE;
}

/* menu::level3 */
div#menu ul ul div {
    width: 208px;
    margin: -30px 0 0 190px !important;
    height: auto;
    _padding: 0 0 9px 3px;
}
div#menu ul ul ul {
	_padding-right:1px;
}

/* lava lamp */
div#menu li.back {
}
div#menu li.back .left {
}

sample-menu.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Menu Fully CSS Only</title>
<link href="drop-down-menu.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="menu">
<ul class="menu">
<li><a class="parent" href="http://www.w3lessons.com/"><span>Home</span></a></li> 
<li><a href="http://www.w3lessons.com/"><span>About us</span></a></li>

<li><a class="parent" href="javascript://"><span>Services</span></a>
<!--First Level-->             
    <div>
    <ul>
    <li><a href="http://www.w3lessons.com/"><span>SEO</span></a></li>
    <li><a href="http://www.w3lessons.com/"><span>Web Design</span></a></li>  
        <!--Second Level-->     
        <li><a href="javascript:"><span>Web Development</span></a>
            <div>
            <ul>
            <li><a href="http://www.w3lessons.com/"><span>HTML</span></a></li>
            <li><a href="http://www.w3lessons.com/"><span>CSS</span></a></li>
                 <!--Third Level-->   
                <li><a href="javascript:void(0)"><span>PHP</span></a>
                    <div>
                    <ul>
                    <li><a href="http://www.w3lessons.com/"><span> PDO</span></a></li>
                    <li><a href="http://www.w3lessons.com/"><span>MySQL</span></a></li>                
                    <li><a href="http://www.w3lessons.com/"><span>SQLite</span></a></li>                
                    </ul>
                    </div>                                     
                </li>                
            </ul>
            </div>                
        </li>   
    
    </ul>
    </div>
</li>

<li><a class="parent" href="javascript://"><span>Skills</span></a></li>
</ul>
</div>

</body>
</html>

Design SEO Friendly 3 Column Liquid Web Layout

Percentage dimensions of 3 Column Liquid web Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

Maximum column content widths

To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:

800 x 600: Left & right columns: 162 pixels; Center page: 357 pixels
1024 x 768: Left & right columns: 210 pixels; Center page: 459 pixels

The nested div structure

Div Arrangements for3 Column Liquid web Layout I've colour coded each div so it's easy to see:

The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns.

Author: Matthew James Taylor

Requirements for SEO Friendly Web Layout

No CSS hacks
The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used in conjunction with a width. Instead, this design uses percentage widths and clever relative positioning.

SEO friendly 2-1-3 column ordering
The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on link source ordering for more details on how this affects links). To make your website as optimised as possible, your main page content must come before the side columns. This layout does exactly that: The center page comes first, then the left column and finally the right column (see the nested div structure diagram for more info). The columns can also be configured to any other order if required.

Full length column background colours
In this layout the background colours of each column will always stretch to the length of the longest column. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. Say goodbye to annoying short columns! You can read my article on equal height columns if you want to see how this is done.

No Images
This layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and XHTML?

No JavaScript
JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here. The JavaScript at the bottom of this page is just my Google Analytics tracking code, you can remove this when you use the layout.

Resizable text compatible
This layout is fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility. Apple have made resizing the text on a website simple with the pinch gesture on their multi-touch trackpad. Is your website text-resizing compatible?

No Quirks Mode
This liquid layout does not require the XML declaration for it to display correctly in older versions of Internet Explorer. This version works without it and is thus never in quirks mode.

No IE Conditional Comments
Only one stylesheet is used with this layout This means that IE conditional comments are not needed to set extra CSS rules for older versions of Internet Explorer.