How to make a nice menu.

This, and the previous post are jQuery related, because I played a lot with front-end stuff. Hopefully, I'll find some time and I'll publish some of the other things I did some time ago. So, let's not waste time. I'll not go into details, I believe the code is more or less self-explanatory.

 First, the HTML structure:

<span id="main_menu_bar">
  <span id="menu_item_wrapper">
<span id="men_item" class="active"><a href="#">Main Item1</a></span>
<span id="men_item"><a href="#">Main Item2</a></span>
  </span>
</span>
<div id="submenus">
</div>

The CSS:

menu_item_wrapper{
position: absolute;
height: 24px;
width: 1200px;
margin-bottom: 30px;
margin-top: 30px;
padding-left: 100px;
background-color: transparent;
}

#men_item{
position: relative;
padding: 0px;
margin-bottom: 30px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
background-color: transparent;
font-size: 122%;
}
#submenus{
position: fixed;
float: left;
display: none;
z-index: 101;

width: 70px;
height: 50px;

margin-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;

border: none;
background-color: #F7BE81;
color: #000;

border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft:  5px;
-moz-border-radius-bottomright:  5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
#submenu_item a{
color: #000;
border: none;
margin-bottom: 10px;
}
#submenu_item:hover {
border-color: #000;
border-style: solid;
border-bottom: #000;
border-top:none;
border-left:none;
border-right:none;
border-width: 1px;
text-decoration: underline;
}

#submenu_item{
margin-bottom: 10px;
}

And, the jQuery code:

var submenu_visible = true;
$('#men_item.active').hover(function(){
  var p = $(this).position();
  $('#submenus').hide();
  $('#submenus').css('margin-left',p.left+10);
  $('#submenus').css('width',$(this).css('width'));
  $('#submenus').css('margin-top','55px');
  $('#submenus').html('<div id="submenu_item"><a href="http://localhost/">test</a></div><div id="submenu_item">
<a href="http://localhost/">test</a></div>');
                $('#submenus').show();
 });
        $('#submenus').mouseenter(function(){
                submenu_visible=true;
        });
        $('#submenus').mouseleave(function(){
                if(submenu_visible){
                    $(this).hide();
                    submenu_visible=false;
                }
        });
 $(document).click(function(){
  $('#submenus').hide();
  $('#submenus').html('');
 });

I hope I'l have time to share an example soon.

How to make a select editable using jQuery

I'm sure some of you had or have the need to make a html drop-down list editable. Well, if you didn't I did.

There are a lot of neat plug-ins out there, but, if you found yourself in a situation like me (compatibility issues), you'll definitely want/try to do it by yourself. Let me save you some time. I'll just copy/paste my code, works great under FF, Chrome, Opera, IE.

HTML:

Enter custom value in a select element

The trick is to hide the text field (using a CSS), and, when 'custom' is selected, show it. There's a onKeyUp event, when triggered, changes the value of the 'custom' child of the select.

<select id="select_element" name="select_element">
 <option value="1">1</option>
 <option selected="selected" value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option id="custom_value" value="">custom</option>
</select>
<input id="custom" name="custom" type="text" />

jQuery code:

$(document).ready(function(){
//  enter a custom value 
$('#select_element').change(function(){
 if($(this).prop("selectedIndex") == 4){
 $('#custom').css('position','absolute');
 $('#custom').css('left',$(this).css('left'));
// add a pixel or two to the top, FF doesn't align the objects right 
 $('#custom').css('top',$(this).css('top')+2);
 $('#custom').css('width','40px');
// same as the top property
 $('#custom').css('height',$(this).css('height')-1);
 $('#custom').show();
 $('#custom').focus();
}
else{
 $('#custom').hide();
}
});
//  if the value changes, change the dropdown value also
$('#custom').keyup(function(){
 $('#custom_value').val($(this).val());
 console.log('The value you typed is:'+$('#custom_value').val());
});
});

and , finally , CSS:

body{
position: absolute;
width: 100%;
height: 100%;
margin:0px;
padding: 0px;
font-family: Arial, sans-serif;
}
#header_para{margin-left: 20%;}
.contentWrapper{margin-left:180px;}
#custom{
display:none;
z-index: 100;
position: relative;
float: left;
width: 43px;
margin: 0px;
}
#select_element{
z-index: 0;
position: absolute;
width: 60px;
}

and link to all of this:

edit_select.zip

I hope you'll find this usefull.

Intro...

Hi there. My name is Bojan Seirovski, Web developer according to my day job description. 

I am fooling around with some everyday stuff (if you are a web developer or in the same field), and I decided to share my findings with ... well with you, who ever you are.

OK, this is a place where I'll dump a lot of things that I already did. If you find any of these useful or not , please feel free to comment.