How do i style an inactive navigation for sliding panel?

How can i style my navigation when they are not active(for example i would like to style my "previous" navigation arrow in a specific manner when there is no previous content to show)

With great difficulty. We must first determine the current panel and then, if the current panel is 0 then the previous button has to be changed and if the current panel matches the total number of panels, the next button has to be changed.
The following is a complete document that will work. Make sure you have all of the support (read JS) files in the allocated directory.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Panels Example.</title>
<script src="SpryAssets/SprySlidingPanels.js" language="javascript" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanelsContentGroup {min-height:0;}
.disabled {color:#F00;}
</style>
<script>
function slideNextPanel() {
     sp1.showNextPanel();
     var currentPanel = getCurrentPanel();
     var panelCount = sp1.getContentPanelsCount()-1;
     if (currentPanel==panelCount) {
          Spry.$$("a#nextPanel").addClassName("disabled");
     } else {
          Spry.$$("a#previousPanel").removeClassName("disabled");
function slidePreviousPanel() {
     sp1.showPreviousPanel();
     var currentPanel = getCurrentPanel();
     if (currentPanel==0) {
          Spry.$$("a#previousPanel").addClassName("disabled");
     } else {
          Spry.$$("a#nextPanel").removeClassName("disabled");
function getCurrentPanel() {
     var className = 'SlidingPanelsContent'; //change the className that is on all your content panels..
     var panelCount = sp1.getContentPanelsCount();//get panel length
     var current = sp1.getCurrentPanel(); //get current panel
     var group = sp1.getContentGroup(); //get our group
     var panelNumber = 0;
     if(group.hasChildNodes()){
          var j = 0;
          for(var i = 0, l = group.childNodes.length; i < l; i ++){
               if(group.childNodes[i].className && group.childNodes[i].className.search(new RegExp("\\b" + className + "\\b")) != -1){ // if it has SlidingPanelsContent class we found the correct node.
                    if(group.childNodes[i] == current){ // if it matches our current panel, we have a number
                         panelNumber = j;
                         return panelNumber;
                    j++; //increase our panelcounter
</script>
</head>
<body>
<a href="#" id="previousPanel" onclick="slidePreviousPanel();">Previous Panel</a> |
<a href="#" id="nextPanel" onclick="slideNextPanel()">Next Panel</a> |
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel 1</div>
    <div class="SlidingPanelsContent" id="p2">Panel 2</div>
    <div class="SlidingPanelsContent" id="p3">Panel 3</div>
    <div class="SlidingPanelsContent" id="p4">Panel 4</div>
    <div class="SlidingPanelsContent" id="p5">Panel 5</div>
    <div class="SlidingPanelsContent" id="p6">Panel 6</div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
</body>
</html>
Gramps

Similar Messages

How to intercept style changes in skin for spark Button?

How to intercept style changes in skin for spark Button?
Thank you.

How to intercept style changes in skin for spark Button?
Thank you.

How do i set a multiple colors for a panel

hi all,
how do i set a multiple colors for a panel .pl desperately need a solution.
regards
bhaskar

Iam contradicting self !
Hope this helps !
java.lang.Object
|
--java.awt.Component
has the paint method ! Take the Graphics Object and call Graphics.setColor( Color.red ) .. and u can draw regular shapes like fillRoundRect. blah blah.. u need t count on the pixels .. I guess..
An easier choice could be adding labels or panels with a layout of ur choice ..
venu

Jump Menu for Sliding Panels Widget

I have used the sliding panels tutorial to build a 15 page
sliding document inside a new site I am building. It works
briliantly. However I want to be able to use a jump menu to access
any of the 15 pages as well as use the next and previous buttons.
I tried by inserting a form, then jump menu but couldnt put
it all together code wise.
Is it possible to use a jump menu for this widget (Im sure it
must be) and what bits do I put where? Any ideaas greatly
appreciated.
Nigel

OK Ive given it a shot but I dont where to put that code in
the mix so to speak.
The widget code skeleton is below: as per the tutorial.
Where exactly in this mix would I put the code you suggested.
Im not sure if its css, html or js.
Sorry Im such a novice at this business but I would be very
grateful for a bit more help here.
Nige
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript"
src="SpryAssets/SprySlidingPanels.js"></script>
<link type="text/css" rel="stylesheet"
href="SpryAssets/SprySlidingPanels.css">
<script type="text/javascript">

</script>
</head>
<body>
<a href="#" onclick="sp1.showFirstPanel();">First
Panel</a>|<a href="#"
onclick="sp1.showPreviousPanel();">Previous Panel</a>|
<a href="#" onclick="sp1.showNextPanel();">Next
Panel</a>| <a href="#"
onclick="sp1.showLastPanel();">Last Panel</a>|
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent" id="p1">Panel
1</div>
<div class="SlidingPanelsContent" id="p2">Panel
2</div>
<div class="SlidingPanelsContent" id="p3">Panel
3</div>
<div class="SlidingPanelsContent" id="p4">Panel
4</div>
<div class="SlidingPanelsContent" id="p5">Panel
5</div>
<div class="SlidingPanelsContent" id="p6">Panel
6</div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
</body>
</html>

Using anchors for Sliding panel

I want to use external links with anchors to specific panel in Spry Sliding Panels i.e.
www.mysite.com/Portfolio.html#Panel1
www.mysite.com/Portfolio.html#Panel2
Is it possible to do so? kindly guide me

You can use this technique http://foundationphp.com/tutorials/spry_url_utils.php. You can then use the Spry Loadlistener to trigger the showpanel instead of of an onclick event that is used here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Gramps

How to buy Here Plus navigation for Nokia 720

I would appreciate helping me how can I buy Here Plus navigation for Nokia 720. I would prefer to pay with Paypal or a bank transfer and not the credit card, but any options available will be appreciated. I would prefer to buy this navigation offline through the internet, not creating any accounts anywhere. Nonetheless, I would like to know all the available purchase and payment options.

It would seem there is the feasibility of operator billing in some regions:http://support.microsoft.com/kb/2681472
Happy to have helped forum in a small way with a Support Ratio = 37.0

How do I change the background image for a single tab on the navigation bar

I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
<td width="200"><ul id="navigation"><br />
      <li><a href="../pages/index.html">Home</a></li><br />
      <li><a href="../pages/cast.html">Cast</a></li><br />
      <li><a href="../pages/pictures.html">Pictures</a></li><br />
      <li><a href="../pages/soundtrack.html">Music</a></li><br />
      <li><a href="../pages/interview.html">Interviews</a></li><br />
      <li><a href="../pages/links.html">Links</a></li><br />
    </ul>
    </td>
#navigation {
          list-style-type: none;
          padding: 0px;
          margin: 0px;
#navigation li {
          margin: 0px;
          padding: 0px;
          list-style-type: none
#navigation li a:link, #navigation li a:visited {
          display: block;
          width: 200px;
          height: 100px;
          text-decoration: none;
          text-align: center;
          line-height: 100px;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-weight: bold;
          -webkit-transition: 1000ms ease;
          -moz-transition: 1000ms ease;
          -ms-transition: 1000ms ease;
          -o-transition: 1000ms ease;
          transition: 1000ms ease;
          color: #648AAE;
          background-repeat: no-repeat;
          background-image: url(../Images/gifs/Batman-still-2.gif);
          background-position: center bottom;
          text-transform: uppercase;
          letter-spacing: 0.79em;
          border-radius: 5px;
#navigation li a:focus, #navigation li a:hover, #navigation li a:active {
          color: #000000;
          background-image: url(../Images/gifs/Batman-animation-2.gif);
          background-repeat: no-repeat;
          background-position: center bottom;
          background-color: #454545;
          border-radius: 25px;
So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

Assign a class to the item and use CSS to apply an image as in
<li><a href="../pages/index.html" class="home;">Home</a></li><br />
<li><a href="../pages/cast.html">Cast</a></li><br />
<li><a href="../pages/pictures.html">Pictures</a></li><br />
<li><a href="../pages/soundtrack.html">Music</a></li><br />
<li><a href="../pages/interview.html">Interviews</a></li><br />
<li><a href="../pages/links.html">Links</a></li><br />
and the CSS
#navigation li a:link.home, #navigation li a:visited.home {
     background-image: url(../Images/gifs/Batman-still-2.gif);

How to activate all inactive objects for current user

Hi
How to activate all inactive objects for current user ...
... I have found a (long winded) way to do this:
- Environment / Inactive Objects
- Add to Worklist
- Display Worklist
- Select All
- Activate
this will open a dialog titled "Inactive Objects for <username>"
which has the exact functionality I need ... but I can't figure out how to get to this dialog directly - without so many intermediate steps
the SAP docs repeatedly mention the ability to activate the inactive worklist - but do not mention how
does anybody know the TCode for this dialog?
thanks
ps does the term "mass activation" apply to importing change requests rather than development activation?
Edited by: FireBean500 on Jun 4, 2010 11:07 PM

No other way. But usually it's far more simple as all objects are already in our own worklist.
I wonder why your objects are not already in your worklist, as everytime you create or maintain an object, it is added to your worklist.

How to make warehouse field inactive for all users in all documents autom.

Hi All,
Can anyone pls tell me "**how to make warehouse field inactive for all users in all documents without having to do it through form setting** "for each and every user. It should be visible but inactive
Thanks & Regards,
Mukesh Agrawal

Hi,
As a work around create a warehouse SelectWH and map the mandatory acoounts as a On hold account(in chart of accounts).So there will not be any posting on this account.
And set this warehouse as default warehouse for all users.
So without selecting the appropriate warehouse the user can not add the document.
I think this might resolve you issue.

How do i find a good navigation app for my iphone

How do I find a good navigation app with voice directions for my iphone?

Check the App Store - there are a number of them.

How to find navigation for TC s

small question ..to all
if i want to find the navigation for a particular transaction....for example i know OVK4..i dont know the navigation for this....in this case how can i find the navigation for the TCs.
Thanks in advance.
Raju

Hi Raju!
I don't know how you can use SHDB for this, but here are two other ways:
If you have a non-customizing transaction: take a keyword from transaction text (SE93) and make a search with transaction SEARCH_SAP_MENU.
If you have a customizing table (e.g. V_TSKM), go to SM30, fill in the view / table, press button 'customizing' (right end) (and go on with F5, without specifying a project). This should list all usages in SPRO.
Regards,
Christian

HOW CAN I CHANGE FONT STYLE IN INDEX PAGE FOR IBA?

Hi
Is it possible to change the font style in INDEX page for iBA?
Naidu

NO. In the index page. I figured out that we can change the space and text formate.
I am preparing a bokk with 1 chapter and 13 section.
SO, in the index page it is showing like 1.1, 1.2.......1.10, 1.11 so on; on the left hand side and page numbers on the right hand side.
Can i take out the numbers on the left and have only the section name and page number?
If so how?

On my HP Touchsmart 310 PC how do I increase the inactivity time on the display?

On my HP Touchsmart 310 PC how do I increase the inactivity time on the display? Windows 7, 64-bit

Hi,
Please try Control panel > Power options > Change when the computer sleeps
Hope this helps.
BH
**Click the KUDOS thumb up on the left to say 'Thanks'**
Make it easier for other people to find solutions by marking a Reply 'Accept as Solution' if it solves your problem.

How to give styles to my HTMLDocument inside a JTextPane?

I have a JTextPane with a HTMLDocument attached to it. How can I style the text which is typed in? For example I want to set a larger font. How can I do this in my example?
Another problem is that when I hit the alignment buttons the text is actually aligned according to the hit button but the JEditorPane doesn't show the text correctly. It also doesn't enter a line feed when typing ENTER key.
Can someone help me on this please?
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.IOException;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextPane;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.text.BadLocationException;
import javax.swing.text.html.HTMLDocument;
import javax.swing.text.html.HTMLEditorKit;
public class AdditionalText extends JFrame implements ActionListener {
     private JButton leftAlign;
     private JButton centerAlign;
     private JButton rightAlign;
     private JTextPane editor;
     private JButton save;
     private JButton dump;
     public AdditionalText() {
          setTitle("Test Frame");
          JPanel topToolbar = new JPanel();
          leftAlign = new JButton("Left");
          centerAlign = new JButton("Center");
          rightAlign = new JButton("Right");
          ActionListener alignLeft = new HTMLEditorKit.AlignmentAction("alignLeft", 0);
          ActionListener alignCenter = new HTMLEditorKit.AlignmentAction("alignCenter", 1);
          ActionListener alignRight = new HTMLEditorKit.AlignmentAction("alignRight", 2);
          leftAlign.addActionListener(alignLeft);
          centerAlign.addActionListener(alignCenter);
          rightAlign.addActionListener(alignRight);
          topToolbar.add(leftAlign);
          topToolbar.add(centerAlign);
          topToolbar.add(rightAlign);
          editor = createEditor();
          JPanel bottomToolbar = new JPanel();
          save = new JButton("Save");
          save.addActionListener(this);
          dump = new JButton("Dump");
          dump.addActionListener(this);
          bottomToolbar.add(save);
          bottomToolbar.add(dump);
          getContentPane().add(BorderLayout.NORTH, topToolbar);
          getContentPane().add(BorderLayout.CENTER, editor);
          getContentPane().add(BorderLayout.SOUTH, bottomToolbar);
          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
          setSize(new Dimension(640, 480));
          setLocation((screenSize.width - 640) / 2, (screenSize.height - 480) / 2);
     private JTextPane createEditor() {
          JTextPane textPane = new JTextPane() {
               public void paintComponent(Graphics g) {
                    Graphics2D g2 = (Graphics2D) g;
                    g2.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
                    g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                    g2.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
                    g2.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
                    g2.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
                    g2.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BICUBIC);
                    g2.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
                    g2.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_NORMALIZE);
                    g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
                    super.paintComponent(g2);
          textPane.setEditorKit(new HTMLEditorKit());
          return textPane;
     public void actionPerformed(ActionEvent e) {
          HTMLDocument htmlDocument = (HTMLDocument) editor.getDocument();
          if(e.getSource() == save) {
               HTMLEditorKit kit = (HTMLEditorKit)editor.getEditorKitForContentType("text/html");
               try {
                    kit.write(System.out, htmlDocument, 0, htmlDocument.getLength());
               } catch (IOException ex) {
                    ex.printStackTrace();
               } catch (BadLocationException ex) {
                    ex.printStackTrace();
          } else if(e.getSource() == dump) {
               htmlDocument.dump(System.err);
     public static void main(String[] args) {
          try {
               UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
          } catch (ClassNotFoundException e) {
               e.printStackTrace();
          } catch (InstantiationException e) {
               e.printStackTrace();
          } catch (IllegalAccessException e) {
               e.printStackTrace();
          } catch (UnsupportedLookAndFeelException e) {
               e.printStackTrace();
          AdditionalText at = new AdditionalText();
          at.show();
}

I created a class that can be used to highlight Java source code. Most of the code is for handling multi line comments. If you just want it to highlight certain keywords then you can get rid of all that logic. In case your interested, the code can be downloaded from here:
http://www.discoverteenergy.com/files/SyntaxDocument.java

How do I use my iphone 4s for gps - do I need an app?

I'm a new smartphone user. How do I use my iphone 4s for gps - do I need an app - which one is best...prefer free of course...does it work from home or do I have to be on the road to access gps function? Thanks!!

There is a built in GPS and map function that provides basic navigation using Google Maps. It's hard to miss right there on the home screen. However, it is maunal; you have to tap "next" when you reach each waypoint, and it does not provide spoken directions. It also downloads maps in real time, so it can be slow if you have a slow data connection, and it uses a lot of data if you are on a limited data plan. It is excellent for walking and public transportation, less useful in a vehicle unless you have a navigator sitting in the car.
There are several commercial GPS apps that you can buy from the App Store, but no free ones. Just search the App Store for "GPS".

How do i style an inactive navigation for sliding panel?

Similar Messages

Maybe you are looking for