June 18, 2013

Dropdown Menu CSS

Wizzme’s Question:

I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the main link.
I have been on this for a couple of hours and any help would be greatly appreciated.

Here is the html part :

<div class="nav">

        <ul id="menu">
           <li><a href="#" class="current">Home</a></li>
              <li><a href="#">Apetiziers</a>
              <ul>
               <li><a href="#">Sub-Link 1</a></li>
               <li><a href="#">Sub-Link 2</a></li>
               <li><a href="#">Sub-Link 3</a></li>
               <li><a href="#">Sub-Link 4</a></li>
              </ul>
              </li>

              <li><a href="#">Entree</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>
              </li>

              <li><a href="#">Main Course</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>

              <li><a href="#">Dessert</a>
             <ul>
              <li><a href="#">Sub-Link 1</a></li>
              <li><a href="#">Sub-Link 2</a></li>
              <li><a href="#">Sub-Link 3</a></li>
              <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>


              <li><a href="#">Contact Us</a></li>
        </ul>

 </div>

And the .css :

ul#menu {
   float: left;
  margin: 0;
  width: auto;
    padding: 0px 40px 0px;
    background: #333; color: #fff;
    line-height: 100%;
}

ul#menu li {
  display: inline; 
}


/* top level link */
ul#menu a {
  float: left;
  padding: 10px 16px;
  margin-right: 0px;
  background: #789; color: #fff;
  text-decoration: none;
  border-right: 1px solid #e2e2e2;
}

/* main level link hover */
ul#menu a.current {
  background: #f60; color: #fff;
}


ul#menu li:hover > a {
  color: #fff; background: #ff4500;
  text-decoration: underline;
}

/* dropdown */
ul#menu li:hover > ul {
    display: block; /* shows the sub-menu (child ul of li) on hover */
}

/* sub level list */
ul#menu ul {
    display: none; /* hides the sub-menu until you hover over it */
    margin: 0;
    padding: 0;
    width: 140px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #000;
    border: solid 1px #ccc;
}

ul#menu ul li {
    float: none;
    margin: 0;
    padding: 0;
}

ul#menu ul a {
    font-weight: normal;
    background: #9BB3BF; color: #036;
}

/* sub levels link hover */
ul#menu ul li a:hover {
color: #036; background: #DDDF99;
}

It is probably jumping towards the closest relative container. So configure your list to act as relative container:

ul#menu > li {
  position: relative;
}

Also there was unnecessary float in your anchor tags, your li are already set to display as inline there is no point in float them

ul#menu a {
    display: inline-block;
    padding: 10px 16px;
    /* ... */
}

Here your fixed code

November 7, 2012

Jquery val() not working in ie for dynamically added option

Question by rahul

i am generating options for my dropdown by jquery ajax method, filling it by db.

$.ajax({
        type: "POST",
        url: pageUrl + '/FillAssignee',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
                        for (var i = 0; i < response.d.length; i++) {
                            $('#SelectAssignee').append($("<option></option>").val(response.d[i]['Value']).html(response.d[i]['Text']));
                        }
                  }            
      });

it’s works fine. only problem is that first value not got selected by default on ie. so for that i used many options

1. $('#SelectAssignee").val();
2. $('#SelectAssignee option:first').attr('selected','selected');
3. $('#SelectAssignee option:first').prop('selected',true);

how to get it work please help me out.

Thanks in advance.

Answer by Starx

Try setting as attributes rather than properties.

$('#SelectAssignee').append($("<option />", { value: response.d[i]['Value'], html: response.d[i]['Text'] }));
April 17, 2012

select value of dropdownlist item jquery

Question by Both FM

HTML

<select id="selectDepartment">
  <option value="1">120</option>
  <option value="2">20</option>
  <option value="3">140</option>
  <option value="4">4120</option>
  <option value="5">560</option>
  <option value="6">451</option>
  <option value="7">310</option>
  <option value="8">656</option>
  <option value="9">444</option>
  <option value="10">555</option>
  <option value="11">2560</option>
  <option value="12">450</option>
</select>

jQuery

$("#selectDepartment").change( function() {

alert($("select option:selected").val()); 

});

the above function always shows value 1 on alert, when I select any one of the options

Answer by Brad Christie

Your method of finding the selection option is vague. You’re saying “Grab all <select>s”. You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.

Simply put, you’re always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn’t the first <select>, your value will never change.

Try to keep the scope to within the current <Select> using this:

$('#selectDepartment').change(function(){
  var selopt = $('option:selected',this);
});

Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn’t necessary as val() works just as easily:

var selopt = $(this).val();

Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you’re working with a multi-select and want more control.

Answer by Starx

You can do something like this:

$("#selectDepartment").change( function() {

     var selected = $(this).find(":selected");

});

drop down instead of a href

Question by Yarandi

i want change this input to dropdown menu.

<a href="#" onclick="$('#pb1').progressBar(5);">5</a> |
<a href="#" onclick="$('#pb1').progressBar(60);">60</a> |
<a href="#" onclick="$('#pb1').progressBar(100);">100</a>

dropdown sample…(not work)

<form action="#" name="progress" onclick="$('#pb1').progressBar(10);">
   <select name="dropdown">
    <option name="radOne" value="$('#pb1').progressBar(5);" selected>5</option>
    <option name="radOne" value="$('#pb1').progressBar(60);">60</option>
    <option name="radOne" value="$('#pb1').progressBar(100);">100</option>
   </select>
</form> 

can anyone help me about change this structure?

Answer by Starx

This is how you should do it.

   <select name="dropdown" onchange="$('#pb1').progressBar(this.value);">
    <option name="radOne" value="5" selected>5</option>
    <option name="radOne" value="60">60</option>
    <option name="radOne" value="100">100</option>
   </select>

Even like show, the practice of inline event handlers is not encouraged. Better approach is

document.getElementByid("selectboxid").onchange = function() {
    $('#pb1').progressBar(this.value);
};

But, since you are already using jQuery

$("#selectboxId").change(function() {
    $('#pb1').progressBar(this.value);
});
...

Please fill the form - I will response as fast as I can!