Forums
View unanswered posts | View active topics It is currently Sat Nov 01, 2014 12:57 am



Reply to topic  [ 1 post ] 
 PIE with jQuery UI Tabs 
Author Message

Joined: Tue Oct 02, 2012 7:57 am
Posts: 11
Post PIE with jQuery UI Tabs
Interesting case here, Apparently using PIE with jQuery UI's Tabs widget causes a bug. When switching between tabs, sometimes the vml won't render in compatibility view (runs as IE 7). I know the vml is there, and it actually reappears when I resize the window... weirdness.

Here's a test case I wrote (assumes jQuery and jQuery UI are included):

Code:
<div id="testTabs">
  <ul>
    <li><a href="#test1">Test 1</a></li>
    <li><a href="#test2">Test 2</a></li>
  </ul>
 
  <div id="test1" >
    <button class="ClientActionButton">Test button 1</button>
  </div>
  <div id="test2" >
    <br/><br/>
    <button class="ClientActionButton">Test Button 2</button>
  </div>
</div>

<script type="text/javascript">
  (function($) {
    $("#testTabs").tabs();

  })(jQuery);
</script>


And here's the styles for the buttons:
Code:
.ClientActionButton {
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  z-index: 2;
  position: relative;
}

button.ClientActionButton,
input[type="button"].ClientActionButton,
input[type="submit"].ClientActionButton,
input[type="reset"].ClientActionButton {
  border-radius: 4px;
  border: 1px outset #999;
  background-color: rgb(210, 225, 245);
  color: #222;
  margin: 5px;
  box-shadow: 0 0 5px 1px #999;
  behavior: url(../Content/PIE.htc);
  -pie-background: linear-gradient(to bottom, rgb(210, 225, 245) 0, rgb(235, 240, 255) 30%, rgb(210, 225, 245) 70%, rgb(200, 215, 235) 100%);
}

button.ClientActionButton:hover,
input[type="button"].ClientActionButton:hover,
input[type="submit"].ClientActionButton:hover,
input[type="reset"].ClientActionButton:hover,
button.ClientActionButton.pie_hover,
input[type="button"].ClientActionButton.pie_hover,
input[type="submit"].ClientActionButton.pie_hover,
input[type="reset"].ClientActionButton.pie_hover {
  box-shadow: 0 0 5px 1px lightblue;
}

button.ClientActionButton:active,
input[type="button"].ClientActionButton:active,
input[type="submit"].ClientActionButton:active,
input[type="reset"].ClientActionButton:active,
button.ClientActionButton.pie_active,
input[type="button"].ClientActionButton.pie_active,
input[type="submit"].ClientActionButton.pie_active,
input[type="reset"].ClientActionButton.pie_active {
  background: rgb(200, 210, 225);
  -pie-background: rgb(200, 210, 225);
  border: 1px inset #999;
  box-shadow: 0 0 transparent;
}



I tried setting -pie-poll to true, but that didn't do anything. Any ideas?

Update: I did find a way that I can make the buttons show reliably, but I don't really like it. When a new tab is activated, locate all instances of elements with this class and hide, then immediately show them. It looks like they're being rendered off screen when the tab is selected, but not re-rendered when the tab is activated, so this forces the issue.


Tue Mar 19, 2013 7:47 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.