6 Replies Latest reply: Dec 28, 2012 8:48 AM by Chandran RSS

    Tabs with images

    Chandran
      Hi,

      I am trying to add an image to a tab using shared components, but images are not displaying when i am running a page.

      Please help me on this.

      I am using APEX 4.1.1

      below is the demo application, which i have created

      workspace : Chandu_jnet
      username : test
      password : test

      Thanks
        • 1. Re: Tabs with images
          fac586
          Chandran wrote:

          I am trying to add an image to a tab using shared components, but images are not displaying when i am running a page.
          How? I don't see any attempt to "add an image to a tab". What have you tried?
          • 2. Re: Tabs with images
            Chandran
            Thanks for your quick response Fac, I followed the below

            shared components > tabs > manage tabs > (selected tab) > current image tab = Giving image path as #APP_IMAGES#TESTON.jpg

            same to non current tab

            but this is not working..

            Thanks
            Chandran
            • 3. Re: Tabs with images
              fac586
              Chandran wrote:
              Thanks for your quick response Fac, I followed the below

              shared components > tabs > manage tabs > (selected tab) > current image tab = Giving image path as #APP_IMAGES#TESTON.jpg
              Firstly, image-based tabs will only be displayed when the <tt>#TAB_IMAGE#</tt> substitution string is used in the tab attributes in the page template (see the "Two Level Tabs - Right Sidebar (optional / table-based)" template in your app where I have made this modification).

              Secondly, image-based tabs are subject to a long-unfixed bug where the image source always uses the <tt>#IMAGE_PREFIX#</tt> substitution string (see +{thread:id=2132745}+ among others) which has to be worked round if your images are not in the virtual image directory. One way to do this is using a Dynamic Action to strip out the unwanted <tt>/i/</tt> from the URL path:
              h4. When

              Event: Page Load

              h4. True Action

              Action: Execute JavaScript Code
              Code:
              $('.tab-holder img') // Note that selector for tab images is theme-dependent
                .attr('src', function(i, src) {
                  return src.slice(3) // Slice index depends on #IMAGE_PREFIX#: this works when it is "/i/"
                });
              However&mdash;even if this bug is ignored&mdash;using image-based tabs in 2013 is a backward step. Personally I avoid using tabs at all: lists are much more flexible, and easier to implement.
              • 4. Re: Tabs with images
                Chandran
                Your solution is working perfectly, Thanks alot

                Could you please help me another solution also to display the icon symbol in navigation bar entry.

                Ex: Need to display small icon with log out text.

                I tried with navigation bar attributes > icon image attributes = giving image path and this is not working ? is there any bug or something

                thanks
                Chandran
                • 5. Re: Tabs with images
                  fac586
                  Chandran wrote:
                  Your solution is working perfectly, Thanks alot

                  Could you please help me another solution also to display the icon symbol in navigation bar entry.

                  Ex: Need to display small icon with log out text.

                  I tried with navigation bar attributes > icon image attributes = giving image path and this is not working ? is there any bug or something
                  Stick to one topic per thread. Mark this thread as answered and start a new one for this question.
                  • 6. Re: Tabs with images
                    Chandran
                    Sure, Thanks