Hi JQM Gods-
I'm stuck and I hope you can help. I'm new to development and I'm not quite sure where my thinking is wrong here.
In my header toolbar I have two buttons for select lists. I've figured out how to put a pointer on top of the select list popup that points to the button tapped. I can't figure out how to change the position of the pointer when the user taps a different button.
I added a line in the .ui-popup-container:after style that aligns the arrow under button 1 (left:90px). To align it under button 2 it needs to be left:120px. It seems the thing to do is write a function to change the line in .ui-popup-container:after to left:120px. I've looked through the forums for similar problems (popup positioning, overriding CSS styles with functions) and tried a bunch of different things. Nothing works.
Can someone here help me think about it in the right way?
Thanks in advance and here's the code:
<!DOCTYPE html>
<head>
<title>Popup Fail</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<style type="text/css">
.ui-popup-container {
width:90%;
padding:0
}
.ui-popup-active {
top:45px !important;
}
.ui-popup-container:after {
content: ' ';
height:0;
position:absolute;
width:0;
border:10px solid transparent;
border-bottom-color:#ffffff;
bottom:100%;
left:90px;
opacity:0.9;
}
</style>
<script language="JavaScript">
$(document).ready(function(){
$(".navButton2").bind("tap", function(event) {
$('.ui-popup-container:after').css('left':'120px');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role='header' data-position='fixed' >
<div class='ui-grid-c' style='height:44px;text-align:center;vertical-align:middle'>
<div class='ui-block-a'>
</div><!-- /block a -->
<div class='ui-block-b' id='navButton1'>
<select name='Day' id='Day' data-mini='true' data-native-menu='false' data-icon='false'>
<option value='Today'>Today</option>
<option value='Tomorrow'>Tomorrow</option>
<option value='DayAfter'>The Day After</option>
</select>
</div><!-- /block b -->
<div class='ui-block-c' id='navButton2'>
<select name='Time' id='Time' data-mini='true' data-native-menu='false' data-icon='false'>
<option value='AM1'>Morning</option>
<option value='AM2'>Afternoon</option>
<option value='PM1'>Evening</option>
<option value='PM2'>Night</option>
</select>
</div><!-- /block c -->
<div class='ui-block-d'>
</div><!-- /block d -->
</div><!-- /ui grid c -->
</div><!-- /header -->
<div data-role='content'>
<h3>This page intentionally left blank</h3>
</div><!-- /content -->
<div data-role="footer" class='ui-bar'>
<p>Here's the footer</p>
</div><!-- /footer -->
</div><!-- page -->
</body>
</html>