Jquery :: Dynamic Width On Dropdown Submenu

Jan 3, 2010

I spent way too long writing a buggy and bloated jQuery script that is supposed to allow the sub-menus of a drop-down menu be a dynamic width (i.e. the submenu assumes the width of the widest list item). I am probably missing some base CSS property, surely it cant be this hard? My script I wrote is:

// drop down menu
var setWidth = 2;
var nextSetWidth = 0;
$jQ('.nav li').hover(function(){
var thisList = $jQ(this).parent('ul');
if (thisList.parent('li').length > 0) {
thisList.children('li').each(function(){
var thisSpan = $jQ(this).find('span');
var spanWidth = thisSpan.width();
if (spanWidth > setWidth) {
setWidth = spanWidth;
}});
setWidth = setWidth + 16;
thisList.css('width', setWidth);
}

var nextList = $jQ(this).find('.nav:eq(0)');
if (nextList.parent('li').parent('ul').parent('li').length == 0){
nextList.css('left', '2px');
}

nextList.children('li').each(function(){
var nextThisSpan = $jQ(this).find('span');
var nextSpanWidth = nextThisSpan.width();
if (nextSpanWidth > nextSetWidth) {
nextSetWidth = nextSpanWidth;
}});

nextSetWidth = nextSetWidth + 16;
nextList.css('width', nextSetWidth);
if (nextList.parent('li').parent('ul').parent('li').length > 0){
nextList.css('left', setWidth);
}}, function(){
$jQ(this).find('.nav:eq(0)').css('left','9999em');
setWidth = 2;
nextSetWidth = 0;
});
//End of Drop down menu

The HTML looks something like:
<ul class="nav">
<li><a><span></span></a></li>
<li><a><span></span></a></li>
<li><a><span></span></a>
<ul class="nav">
<li><a><span></span></a></li>
</ul>
</li>
</ul>

View 4 Replies


ADVERTISEMENT

Submenu Code - Floating Horizontal Dropdown Menu

Dec 7, 2009

Where do I need to look to find such a script?

Ive been looking for 3 days now and I cant find something that will have all of those.

I need a floating horizontal dropdown menu, and submenu with mouse over description of the site.

EX: menu 1

View 12 Replies View Related

JQuery :: Populate A Dynamic Dropdown List Based On Another Dynamic Drop Down Selection?

Jun 29, 2010

how to populate a dropdown based on Another dropdown selection. This all should be a dynamic. Eg: I have two text boxes one is TechID and other is JOB ID. When I start typing Tech ID it suggests me the list of IDs which start with the input string i have put in Tech textbox. When i select the Tech ID the jobs associated to that Tech ID should be displayed in JOB ID text box as a dropdown list.

View 1 Replies View Related

JQuery :: Setting The Width Of The Dropdown?

Apr 7, 2011

I use autocomplete on my application. The width of the dropdown is equal to the width of the Input element that is used. I would like to use a custom width for the Dropdown leaving the width of the input same. Can this be done?

View 1 Replies View Related

Jquery :: For Setting A Dynamic Max-width ?

Nov 18, 2011

The function will be

1.get the 70% width of the browser's screen.

2.convert that width into its corresponding px value

3.set the max width of the #mainContainer using the value got from the conversion/calculation.

Here is the css style for the container i want to set max-width with.

View 2 Replies View Related

JQuery :: Dynamic CSS Padding Based On Element Width?

Oct 21, 2010

I'm currently working on an IE7 CSS fix for a rather large form. Long story short, I have each input wrapped in a div, all in the same class. What I need, is to have each div define a padding-right value that is equal to the width of that div. I'm fairly new to jQuery, so I'm in need of some help with the syntax. Here's what I currently have, but it keeps printing a padding-right value of "0".

$('.form_label').each(function(){
$(this).css('padding-right', function() {
var w = $(this).width();

[code]....

View 5 Replies View Related

Dropdown Submenu - Make A Horizontal Drop Down Menu With A Sub Menu ?

Nov 3, 2009

I actually want to make a horizontal drop down menu with a sub menu.As far as I have researched, I think that it can be done by JavaScript. I have searched for some java scripts but they are very long and complex.

That made me wonder that for a funcitonality like a Drop down is so complex?

So here is my question : Is there any JavaScript that can be applied for drop down menu exclusively? Which just presents logic of drop down solely?

View 3 Replies View Related

JQuery :: Dynamic Height / Width Sometime Broken On Page Load?

Aug 28, 2009

I've written a small plugin to serve as a feature rotator and am having one strange problem.You can see some demos of the plugin and documentation here:

http://pbskids.org/pbskidswidgets/carousel.html.The plugin does a number of things that involve reading the width and height of DOM elements and using them to set the width and height of other elements. The problem is that sometimes in Firefox and Safari, when the page loads, the widths and heights of panels in the carousel are fracked.

Reload the page and the problem's fixed. In Safari, I can't get it to happen again on many reloads. In Firefox, though, if I reload repeatedly, I can get the problem to happen again: maybe once every seven or eight times.It looks like something's happening with page loading, but I'm at a loss to diagnose it further: is the script firing before the elements have fully loaded sometimes, and then works on subsequent tries because those elements are in the cache? Also: I've never seen this error in any of the IE versions.

View 1 Replies View Related

JQuery :: Dynamic Forms And DropDown Lists?

Aug 15, 2011

I am trying to figure out how to dynamically show/hide certain form elements based on the selection from the drop down list.My form is defined like so[code]...

View 6 Replies View Related

Textarea With Dynamic Width

Jul 23, 2005

This textarea, however, must have a dynamic width, one that "fills the
screen width of any sized screen". Sorry but I cannot fathom how to
do this!

<textarea name="resume" cols="108" rows="29" wrap="physical><?=$resume ?></textarea>

How on earth do I do this? cols="???"

Is there either a client-side solution in HTML or Javascript, or will
I have to use a server-side solution in PHP? I'm completely stuck and
under a Monday AM deadline to come up with a solution.

View 16 Replies View Related

JQuery :: Dropdown Menu (Superfish) Overlapped By Dynamic Content Gallery In Firefox.?

Aug 26, 2010

I'm developing a website right now for a clientIssue:On the homepage, the dropdown menu for "cities" (hover over "cities") gets overlapped by the Dynamic Content Gallery (DCG), which as a result cuts off bottom portion of the dropdown. Dropdown Menus are using Superfish.The issue only occurs in Firefox. It works fine in IE, hovering over the top of the DCG slide (weird, right?).Screenshot in FirefoxScreenshot in IEI was thinking it could be corrected by adjusting the z-index of the dropdown menu, but decided I would ask here first before I get in over my head.Attachments IE-Screenshot.jpgSize : 120.0 KB Download : 358Firefox-Screenshot.jpgSize : 119.87 KB Download : 353

View 1 Replies View Related

Dynamic Dropdown Boxes

Nov 17, 2007

I'm wondering how to go about creating two
dropdown boxes such that when you select a value from the first one,
the second is populated with values that depend on the first.

View 2 Replies View Related

Copy Dropdown To Other Dynamic?

Sep 23, 2009

I am starting to use javascript, so my knowledge is very basic, so this is what i am looking for:

Right now i have a form that have some Input box and dropdown boxe, this dropdown are fill using a database so there are all ready with information, but now this is where i am stuck, i am creating dynamic new rows to my table and duplicate the input box, i like to duplicate using javascript the all ready existing dropdow with all the content, is there are a easy way to do this some like copy?

View 1 Replies View Related

Dynamic Dropdown Causing Popup In IE7?

Apr 29, 2009

I have a dynamic dropdown (done via Spry) that is trying to throw a pop-up window in IE7 (which I have to support). Here's the link:

[URL]

View 3 Replies View Related

Dynamic Generated DropDOwn Value Not Captured In IE?

Aug 17, 2011

i am having issue capturing the value of the selected DDL using IE. the code below works just fine in Firefox...

// Create a new drop down list -- for text box use 'input' instead of 'select'
var newDDL = document.createElement('select');
// size lenght of the DDL for both IE or Firefox

[code]....

View 2 Replies View Related

3 Level Dynamic MySQL Dropdown

Apr 12, 2010

I'm trying to make 3 drop downs (based off of mysql tables), to narrow down the selection. Source, School, and Program. So when when they select SOURCE(source), all the SCHOOLs in drop2 will be based on the SOURCE selected in the previous dropdown, and whatever school(cid) is selected, the program will be based off that school(cid) and display all the programs for that school. I've google'd high and low for something, and no avail. Here is what I have, I am just trying to make 3 drop downs narrow in, without pressing submit (I am new to ajax and javascript etc) The issue may be in that java part, I've look in the php and mysql, but nothing.

PHP Code:
<table width="517" border="1"><tr>
<td width="87">Source:</td><td width="414">
<? echo'<select name="source" onChange="showUser(this.value)">
<option value="">--Select--</option><?php while() { } ?>'; .....

My javascript
Code:
var xmlhttp;
function showUser(str){
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
alert ("Browser does not support HTTP Request");
return;
} .....

Right now, the results display in a table, I don't want that - I need them to display as results in the next dropdown.

View 1 Replies View Related

Add Dynamic Dropdown Autopolulated Menu?

Dec 9, 2010

I'm relatively new to javascript, so please forgive me if my questions seem obvious.

I want to have a drop down menu added to each new line in a dynamic table, each time the 'add instruments' button is clicked. I also need that ddmenu to autopopulate with the same parameters as the first one (which you can see).

All of this is in the right-hand column on my page, which you can find at code...

View 5 Replies View Related

Dynamic Dropdown/listbox With Checkboxes?

Aug 10, 2010

I'm struggling with a multiple select box I have that currently has an onchange that fires every time you make a selection, which then updates other form elements on the page. Works great. But it doesn't really give you time to select multiple items in the dropdown, just one select at a time. how to capture multiple selects with an onchange or I need to switch to a dropdown/list box that contains checkboxes -- but I haven't found a good php/javascript/ajax/jquery type of option. here is the form select element and function that gets called:

PHP Code:

myform:

[code]....

Seems like I need to somehow change the onchange even to allow multiple selects before submitting or somehow gather and pass each selection within the javascript? Found a script like this but couldn't get it to work within my code:

PHP Code:

[code]...

View 4 Replies View Related

Dynamic Input Fields When Dropdown Value Selected

Apr 10, 2009

I am having a form with a drop down and want to display the fields below it based on the drop down value selected. For example: my form has a drop down <select value> <values: A, B ,C, D) when I select A then I should get displayed a set of fields (like input fields, drop down fields etc) just below the main drop down and when I choose B then it should display a set of fields specific to B and like that. What technology / script to use this to achieve this. I have also attached the sample html page.

View 1 Replies View Related

Passing Current Value Of Fields Into Dynamic Dropdown?

Sep 27, 2010

So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field?

this is what i have in my <head>
<script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;

[Code].....

The only var that is passing is SOURCE, and that's because its the name of the first dropdown

i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first?

View 3 Replies View Related

Writing A Dynamic Dropdown Menu Feature

Mar 13, 2003

I've downloaded a couple of example scripts, but they are pretty specific to whatever the authors needs were, and basically I don't really understand the script (actually, the best example I found was in french, so all the variable names are in untranslatable French, haha).

I was wondering if somebody could possibly help me out with getting some skeleton code written out in Javascript for this. I know PHP, MySQL, C, some Java, but there's so much with Javascript that I'm just not understanding the examples.

I will be grabbing data from a MySQL table, and will be using PHP array's to temporarily store that data so it can be displayed, and I understand how to work with PHP and Javascripts, but I need the some skeleton code for the actual dynamic dropdown menu algorithm.

View 2 Replies View Related

Populate Dynamic Dropdown List In Form?

Oct 1, 2010

Have a WAMP setup with Apache, PHP and Mysql service and I�m working on a HTML form which will have two drop-down controls where information is extracted from two tables in my DB.The first drop-down list called (name="sel_ControlArea") will decide what information the second drop-down list will have.So far I have managed to populate them when the page is loaded using PHP but run into problem when I make a change on the first drop-down list.Question one: What is the best/correct way to solve this problem?Is it to load all information into PHP arrays and then translate these to Javascript arrays, or should I go for AJAX, or XML or are there any other better ways ?I have tried to solve this using the first method, put data in a PHP array but run into problem with this data not properly loaded.This is first time for me to pose a question so please let me know if I have left out some important information or if I should describe this problem in a different way.

<table class="exemption" border="0" cellpadding="2"
cellspacing="5" bgcolor="#eeeeee">
<th colspan="2" align="center">Security Exemption Request</th>

[code]....

View 1 Replies View Related

Dynamic Dropdown List For Sending Messages To Multiple Members

Sep 3, 2011

I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that. Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly.

View 3 Replies View Related

JQuery :: Calculate The Width Of Each Column Plus The Combined Width For The Container?

Apr 26, 2011

Is there any way that one could have supersubs functionality applied to drop-down multi-column menus?I assume one would need to calculate the width of each column plus the combined width for the container.

View 1 Replies View Related

JQuery :: All Images Must Be Resized If Width Exceeds Max Width?

May 5, 2010

I currently have a website where i share thoughts with my friends (some kind of forum) and within this 'forum' people can post pictures they made but most of the time these pictures exceed the max width of my website so my website gets all streched out!So this is what i want: all images on the page must run thru some sort of function which checks if the image image width exceeds the max_width. if it does then the script must calculate how many pixels the current width exceeds the max_width and get this number so that the script does: current_width = current_width - (max_width - current_width)

View 1 Replies View Related

JQuery :: Resizing Width Depending On $(window).width?

May 18, 2010

I've recently start using Flexigrid (old JQuery grid plugin), and, as you may know, one of the few issue this really good grid plugin got is the lack of liquid layout option. My personal idea to solve the problem is to set the "width" parameter depending on $(window).width. Here is the problem (and here's why i post this question in "General use" and not in "Plugin").

The starting, and working, code is:
$(document).ready(function(){
$("#flex1").flexigrid
(
{

[Code].....

This work fine for me, but I supose it could be done way much elegant... maybe somethin without "IF" that could emulate the "%", like var percentage = $(#div.id).width()*0.XX with the 0.XX picked from an array of percentage, one for each column. Probably I should set up a function... ahhhh, as you may easily see I'm a total beginner with JQuery (and JS in general...)

View 3 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved