Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Select Titles not showing

Posted on 2013-06-16
26
Medium Priority
?
556 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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

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.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

670 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