I have the following code in jsfiddle. I have been told this this code is messy and not optimised. My question is, what about this is messy and unoptimised and how can it be tidied up and optimised to reduce file size and so it becomes more responsive?
$(document).ready(function() {
$( ".column" ).sortable({
connectWith: ".column",
handle: ".widget_header_icon, .widget_header_title",
start: function( event, ui ) {
$('.menu_button.active, .configure_button.active').click();
$('.menu_button, .configure_button').removeClass("active");
}
});
$(document).click(function(event) {
$('.menu_button.active, .configure_button.active').click();
$('.menu_button, .configure_button').removeClass("active");
});
$('.dropdown_left, dropdown_right').each(function() {
$(this).css('left', $(this).prev().position().left);
});
$('.menu_button, .configure_button').click(function(event) {
$(this).siblings('.menu_button.active, .configure_button.active').click();
$(this).toggleClass('active').next().toggle();
event.stopPropagation();
});
$('.widget_configure_button').click(function(event) {
var $nav3 = $(this),
$dd = $nav3.next('.dropdown');
$nav3.toggleClass('active');
$dd.css({
top: $nav3.outerHeight()+10,
right: 10
});
$nav3.hasClass('active') ? $dd.show() : $dd.hide();
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:arial;
font-size:12px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**/
body
{
background:#F5F5F5;
}
.notification
{
background:#FFFFFF;
}
.inner_notification
{
width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/
margin:auto;
padding:10px;
background:#EEEEEE;
}
.header
{
background:#EEEEEE;
}
.inner_header
{
width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/
margin:auto;
padding:10px;
background:#DDDDDD;
}
.top_menu
{
background:#DDDDDD;
}
.inner_top_menu
{
width:1003px; /*1003 max width without horizontal scroll for 1024x768 screens*/
margin:auto;
position: relative;
background:#CCCCCC;
}
.menu_button {
float:left;
padding:10px;
cursor:pointer;
}
.configure_button {
float:right;
padding:10px;
cursor:pointer;
}
.widget_configure_button {
float:right;
padding:10px;
cursor:pointer;
}
.menu_button::selection, .configure_button::selection, .widget_configure_button::selection { background:transparent; }
.menu_button::-moz-selection, .configure_button::-moz-selection, .widget_configure_button::-moz-selection { background:transparent; }
.menu_button:hover, .configure_button:hover, .widget_configure_button:hover {
background-color:#ffffff;
}
.menu_button.active, .configure_button.active, .widget_configure_button.active {
padding:10px;
background-color:#ffffff;
z-index:1;
}
.dropdown
{
display:none;
background-color:#ffffff;
position:absolute;
top:40px;
padding:10px;
cursor:pointer;
}
.dropdown_left {
display:none;
background-color:#ffffff;
position:absolute;
top:32px;
padding:10px;
cursor:pointer;
z-index:20;
}
.dropdown_right
{
left: auto ! important;
right: 0;
}
.clearfix
{
clear:both;
}
.title
{
background:#CCCCCC;
}
.inner_title
{
width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/
margin:auto;
padding:10px;
background:#BBBBBB;
}
.content
{
background:#BBBBBB;
}
.inner_content
{
width:993px; /*1003 max width without horizontal scroll for 1024x768 screens*/
margin:auto;
padding:10px 0px 0px 10px;
background:#AAAAAA;
}
.column
{
width:331px;
float:left;
}
.widget
{
background:#EEEEEE;
padding:10px;
margin-bottom:10px;
margin-right:10px;
position:relative;
z-index:10;
}
.widget_header
{
background:#DDDDDD;
margin-bottom:10px;
overflow: hidden;
}
.widget_header_icon
{
padding:10px;
float:left;
cursor:move;
}
.widget_header_title
{
padding:10px;
float:left;
cursor:move;
background:#CCCCCC;
width:210px;
}
.widget_sub_header
{
background:#DDDDDD;
margin-bottom:10px;
padding:10px;
overflow: hidden;
}
.widget_content
{
background:#CCCCCC;
padding:10px;
margin-bottom:10px;
height:200px;
}
.widget_footer
{
background:#BBBBBB;
padding:10px;
}
.footer
{
background:#AAAAAA;
}
.inner_footer
{
width:983px; /*1003 max width without horizontal scroll for 1024x768 screens*/
margin:auto;
padding:10px;
background:#999999;
}
/*-------------*/
.ui-sortable-placeholder { background:#BBBBBB; visibility: visible !important; }
.ui-sortable-placeholder * { visibility: hidden; }
/*------------*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div class="notification">
<div class="inner_notification">
notification
</div>
</div>
<div class="header">
<div class="inner_header">
header
</div>
</div>
<div class="top_menu">
<div class="inner_top_menu">
<div class="menu_button">menu</div>
<div class="dropdown_left">
<div>icon Default 2</div>
<div>icon Reports 2</div>
<div>icon Other 2</div>
</div>
<div class="configure_button">(c)</div>
<div class="dropdown_left dropdown_right">
<div>icon Default 2</div>
<div>icon Reports 2</div>
<div>icon Other 2</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="title">
<div class="inner_title">
title
</div>
</div>
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
<div class="widget_header">
<div class="widget_header_icon">( i )</div>
<div class="widget_header_title">header title</div>
<div class="widget_configure_button">(c)</div>
<div class="dropdown">
<div>icon Default 3</div>
</div>
</div>
<div class="widget_sub_header">
sub header
</div>
<div class="widget_content">
content
</div>
<div class="widget_footer">
footer
</div>
</div>
<div class="widget">
<div class="widget_header">
<div class="widget_header_icon">( i )</div>
<div class="widget_header_title">header title</div>
<div class="widget_configure_button">(c)</div>
<div class="dropdown">
<div>icon Default 3</div>
</div>
</div>
<div class="widget_sub_header">
sub header
</div>
<div class="widget_content">
content
</div>
<div class="widget_footer">
footer
</div>
</div>
</div>
<div class="column">
<div class="widget">
<div class="widget_header">
<div class="widget_header_icon">( i )</div>
<div class="widget_header_title">header title</div>
<div class="widget_configure_button">(c)</div>
<div class="dropdown">
<div>icon Default 3</div>
</div>
</div>
<div class="widget_sub_header">
sub header
</div>
<div class="widget_content">
content
</div>
<div class="widget_footer">
footer
</div>
</div>
<div class="widget">
<div class="widget_header">
<div class="widget_header_icon">( i )</div>
<div class="widget_header_title">header title</div>
<div class="widget_configure_button">(c)</div>
<div class="dropdown">
<div>icon Default 3</div>
</div>
</div>
<div class="widget_sub_header">
sub header
</div>
<div class="widget_content">
content
</div>
<div class="widget_footer">
footer
</div>
</div>
</div>
<div class="column">
<div class="widget">
<div class="widget_header">
<div class="widget_header_icon">( i )</div>
<div class="widget_header_title">header title</div>
<div class="widget_configure_button">(c)</div>
<div class="dropdown">
<div>icon Default 3</div>
</div>
</div>
<div class="widget_sub_header">
sub header
</div>
<div class="widget_content">
content
</div>
<div class="widget_footer">
footer
</div>
</div>
<div class="widget">
<div class="widget_header">
<div class="widget_header_icon">( i )</div>
<div class="widget_header_title">header title</div>
<div class="widget_configure_button">(c)</div>
<div class="dropdown">
<div>icon Default 3</div>
</div>
</div>
<div class="widget_sub_header">
sub header
</div>
<div class="widget_content">
content
</div>
<div class="widget_footer">
footer
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
</body>
</html>
widget_header
andwidget_header_icon
just call itheader
andicon
. The css selector for the icon would then be.widget .header .icon
\$\endgroup\$ – Flambino Nov 28 '12 at 18:37.header
class for the header of the page. That is why I gave the header of the.widget
's a different class. Because I want both headers to have different styled. Plus, I will have a general.icon
class and.widget
icon classes. \$\endgroup\$ – oshirowanen Nov 29 '12 at 10:05div
elements)? \$\endgroup\$ – unor Nov 29 '12 at 12:44header
class already (in which case you should probably use the<header>
element, or use an id attribute), but that's why CSS has selectors; a.widget .header
selector will only styleheader
-classed elements insidewidget
-classed elements. That's basic CSS. \$\endgroup\$ – Flambino Nov 30 '12 at 20:51.widget .header
has several problems. 1. If you have a nested component, for example '.notification .header' inside of the widget, the styles will interfere with each other. This becomes very problematic in large projects. 2. Quoting Mozilla: "The descendant selector is the most expensive selector in CSS. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category." They recommend using.treecell-header {…}
overtreehead > treerow > treecell {…}
. 3. Using simple selectors helps you avoid reliance on a specific DOM structure. \$\endgroup\$ – Alexey Lebedev Dec 7 '12 at 19:20