Solved

Select Titles not showing

Posted on 2013-06-16
26
533 Views
Last Modified: 2013-06-18
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
Comment
Question by:DS928
  • 14
  • 12
26 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39251808
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
 

Author Comment

by:DS928
ID: 39251809
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39251834
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
 

Author Comment

by:DS928
ID: 39251876
Awesome Gary!  You are the best!  Thank you!
0
 

Author Closing Comment

by:DS928
ID: 39251877
Super Excelent
0
 

Author Comment

by:DS928
ID: 39251881
Gary!  OOPs.  One slight problem.  The select bar is to tall now can that be adjusted?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39251884
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
 
LVL 58

Expert Comment

by:Gary
ID: 39251885
What do you mean select bar
0
 

Author Comment

by:DS928
ID: 39251909
The Blue Bar going across the selected text.  There is a light bar on top and a darker one below.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39251913
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
 

Author Comment

by:DS928
ID: 39251977
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
 
LVL 58

Expert Comment

by:Gary
ID: 39251996
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
 

Author Comment

by:DS928
ID: 39252053
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 58

Expert Comment

by:Gary
ID: 39252912
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
 

Author Comment

by:DS928
ID: 39253953
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
 
LVL 58

Expert Comment

by:Gary
ID: 39253982
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
 
LVL 58

Expert Comment

by:Gary
ID: 39254042
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
 

Author Comment

by:DS928
ID: 39254173
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
 
LVL 58

Expert Comment

by:Gary
ID: 39254738
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
 
LVL 58

Expert Comment

by:Gary
ID: 39254746
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
 

Author Comment

by:DS928
ID: 39254897
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
 
LVL 58

Expert Comment

by:Gary
ID: 39254908
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
 

Author Comment

by:DS928
ID: 39254950
Thank you GaryC123 have a good night!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39257229
0
 

Author Comment

by:DS928
ID: 39257515
Thank you!  This works perfectly!  Give it a whril!  Should I start a new question so that I may give you more points?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39257625
No its fine.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now