Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 570
  • Last Modified:

Select Titles not showing

I have an iPhone type picker but the titles are not showing ih the larger one.  See combo for the titles.  Any help is appreciated, thank you.

http://www.menuhead.com/example.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript" src="JQuery/jquery.iphonepicker.js"></script>
</head>
<body>
	
	<p style="position:relative;float:left;width:100%;">
		<select id="countries" name="countries">
			<option value="6">Austria</option>
			<option value="2">Belgium</option>
			<option value="5">France</option>
			<option value="3">Germany</option>
			<option value="8">Great Britain</option>
			<option value="4">Luxembourg</option>
			<option selected="selected" value="1">Netherlands</option>
			<option value="10">Spain</option>
			<option value="9">Sweden</option>
			<option value="7">Switserland</option>
		</select>

		<script type="text/javascript">
			$(document).ready(function () {
				$('#countries').iPhonePicker({ width: '80px', imgRoot: 'Images/Misc' });
				$('#countries').show(); // made invisible by iPhonePicker command
			});
		</script>	
	</p>
    <p style="position:relative;float:left;width:100%;">
    <select id="Place" name="Place">
                <?PHP
				include "Scripts/config.php";
				//With Numbers
				$sql = "SELECT DISTINCT TownType AS type, TownID, TownName FROM tblTowns
				WHERE TownStatus ='Yes'
				ORDER BY TownType, TownName";
				$result = mysql_query($sql) or die(mysql_error());
				$prev='';
				while ($row = mysql_fetch_assoc($result)) { 
				if ($prev != $row['type']) {
						if ($prev) echo "</optgroup>";
							echo "<optgroup label='{$row['type']}'>";
							$prev = $row['type'];
							}
							echo "<option value='".$row['TownID']."'>".$row['TownName']."</option>";         					 							}
							echo "</optgroup>";
				?>
                  </select><!--End Place List Box-->
    
    <script type="text/javascript">
			$(document).ready(function () {
				$('#Place').iPhonePicker({ width: '280px', imgRoot: 'Images/Misc' });
				$('#Place').show(); // made invisible by iPhonePicker command
			});
		</script>	
	</p>

Open in new window

0
DS928
Asked:
DS928
  • 14
  • 12
1 Solution
 
GaryCommented:
What do you mean Titles? The State, City headings? They show fine for me.
Do you mean they are not showing in the iphone spinner, well they are not a selectable option - in fact they are not options at all
0
 
DS928Author Commented:
Correct Gary The State, City Headings are not showing in the spinner.  I know they are not options but I do need them to display in the iphone like spinner.
0
 
GaryCommented:
I've hacked the core code, make the additions indicated by HERE

			if (data.target[0].options.length > 0) {
				var header=""  // HERE
				for(var i=0;i<data.target[0].options.length;i++) {

					var option = data.target[0].options[i];
					if(header!=$(data.target[0].options[i]).closest('optgroup').attr('label')){ // HERE
						$('<li/>', {id: ulId+'_', value: "", text: $(data.target[0].options[i]).closest('optgroup').attr('label')}).appendTo('#'+ulId); // HERE
						header=$(data.target[0].options[i]).closest('optgroup').attr('label'); // HERE
					} // HERE

					$('<li/>', {id: ulId+'_'+option.value, value: option.value, text: option.text}).appendTo('#'+ulId);
					$('#'+ulId+'_'+option.value).css({
						'height': '37px',
						'line-height': '37px',
						'text-align': 'center',
						'display': 'block',
						'padding': '0px',
						'margin': '0px'
					});
				}

				$('#'+contentId).iPhonePickerOverscroll({
					selectedIndex: data.target[0].options.selectedIndex, 
					parentId: targetId, 
					itemCount: data.target[0].options.length});
			}

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
DS928Author Commented:
Awesome Gary!  You are the best!  Thank you!
0
 
DS928Author Commented:
Super Excelent
0
 
DS928Author Commented:
Gary!  OOPs.  One slight problem.  The select bar is to tall now can that be adjusted?
0
 
GaryCommented:
Add the following after
header=$(data.target[0].options[i]).closest('optgroup').attr('label');  

Open in new window

to get the styling for the extra li

$('#'+ulId+'_'+option.value).css({'line-height': '37px'});

Open in new window

0
 
GaryCommented:
What do you mean select bar
0
 
DS928Author Commented:
The Blue Bar going across the selected text.  There is a light bar on top and a darker one below.
0
 
GaryCommented:
Yes, that's what I'm seeing.
Don't forget the extra line above I said to add in.

And change this line
if(header!=$(data.target[0].options[i]).closest('optgroup').attr('label')){

Open in new window

to
if($(data.target[0].options[i]).closest('optgroup').attr('label') && header!=$(data.target[0].options[i]).closest('optgroup').attr('label')){

Open in new window

0
 
DS928Author Commented:
Tried that and it's still abit tall.  It looks ok in the first on but the one with the titles, is still a bit tall.  It seems to be including the Titles in the light blue part.  It seems that the text on the first on is dead center between the light and the dark blue, and on the one with the titles the heading is in the light blue and the text is in the dark blue.  Could it be the line height needs adjusted?
0
 
GaryCommented:
Move this line after the next line
$('#'+ulId+'_'+option.value).css({'line-height': '37px'});

Cannot set css if it hasn't been created yet


$('<li/>', {id: ulId+'_', value: "", text: $(data.target[0].options[i]).closest('optgroup').attr('label')}).appendTo('#'+ulId);
$('#'+ulId+'_'+option.value).css({'line-height': '37px'});

Open in new window

0
 
DS928Author Commented:
Seems to work better.  But the text still needs to be lined up directly on the divide of the light blue and the dark blue, like in the first example.

This is what I have now.

if (data.target[0].options.length > 0) {
				var header=""  // HERE
				for(var i=0;i<data.target[0].options.length;i++) {

					var option = data.target[0].options[i];
					if($(data.target[0].options[i]).closest('optgroup').attr('label') && header!=$(data.target[0].options[i]).closest('optgroup').attr('label')){
					//if(header!=$(data.target[0].options[i]).closest('optgroup').attr('label')){ // HERE
						
						$('<li/>', {id: ulId+'_', value: "", text: $(data.target[0].options[i]).closest('optgroup').attr('label')}).appendTo('#'+ulId); // HERE
						$('#'+ulId+'_'+option.value).css({'line-height': '37px'});
						header=$(data.target[0].options[i]).closest('optgroup').attr('label'); // HERE
					} // HERE

					$('<li/>', {id: ulId+'_'+option.value, value: option.value, text: option.text}).appendTo('#'+ulId);
					$('#'+ulId+'_'+option.value).css({
						'height': '37px',
						'line-height': '37px',
						'text-align': 'center',
						'display': 'block',
						'padding': '0px',
						'margin': '0px'
					});
				}


				$('#'+contentId).iPhonePickerOverscroll({
					selectedIndex: data.target[0].options.selectedIndex, 
					parentId: targetId, 
					itemCount: data.target[0].options.length});
			}

Open in new window


http://www.menuhead.com/example.php
0
 
GaryCommented:
You still haven't moved the css below, swap these two lines around
$('#'+ulId+'_'+option.value).css({'line-height': '37px'});
header=$(data.target[0].options[i]).closest('optgroup').attr('label'); // HERE

Open in new window


So they look like
header=$(data.target[0].options[i]).closest('optgroup').attr('label'); // HERE
$('#'+ulId+'_'+option.value).css({'line-height': '37px'});

Open in new window

0
 
DS928Author Commented:
I moved them but it's still not lining up.  Also when you make a selection the combo box changes but not the text box.
0
 
GaryCommented:
Change this line
$('#'+ulId+'_'+option.value).css({'line-height': '37px'});

Open in new window

to
$('#'+ulId+'_').css({'line-height': '37px'});

Open in new window

0
 
GaryCommented:
Replace
$('[name="What"]').val($('#Place option:selected').text());

Open in new window

with
$("#Place").change(function(){
     $('[name="What"]').val($('option:selected',this).text());
})

Open in new window

0
 
DS928Author Commented:
Ok, almost there. As you can see the blue lines line up perfectly for "City", "State" goes off, then "Zipcode" lines up again.  However; you will notice in the textbox to the right it shows the wrong selected option.  It seems to be one off, then two off.  Also when you reverse directions it lines up differently.
0
 
GaryCommented:
This is not easy debugging someone else's plugin

Add the bolded line below and the closing bracket

if($('#uipv_ul_Place li').eq(index).attr("id")!="uipv_ul_Place_"){
      jQuery("select#"+data.options.parentId+" option[selected]").removeAttr("selected");
      jQuery("select#"+data.options.parentId+" option[index=" + index + "]").attr("selected", "selected");
                  
      if (!data.options.reset) {
            // Trigger onchange event manually
            $('#'+data.options.parentId).trigger(jQuery.Event('change'));
      }
} // Here as well
0
 
GaryCommented:
Just add a class in your css for this

#uipv_ul_Place_{
line-height:37px
}


Bit stupid adding the same css for every LI
0
 
DS928Author Commented:
Thank you GaryC123.  The blue lines are perfect now.  The only problem is...

The first part "City" shows the selected option in the text box as one more than what is selected.
The second part "State" is two more.  And...
The third part "Zip" is three more.  It seems that each time a new header is added the selection option inceases by one.
I know its hard decoding someone else's plug-in.  And I appreciate it.  This is the only example that I could find to do this though.
0
 
GaryCommented:
I'm finished for the night now.
Think it would be quicker to write my own code for this compared to the time trying to understand this plugin. After all this is not exactly rocket science.
Capture mouse scroll, move div up or down, get id, change select box (just not sure about capturing the element in the bar - sure I like a challenge)
0
 
DS928Author Commented:
Thank you GaryC123 have a good night!
0
 
GaryCommented:
0
 
DS928Author Commented:
Thank you!  This works perfectly!  Give it a whril!  Should I start a new question so that I may give you more points?
0
 
GaryCommented:
No its fine.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 14
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now