Solved

Select Titles not showing

Posted on 2013-06-16
26
537 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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 

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
 
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

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

777 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