How to make thumbnails enlarge when using grid navigation effects with jquery

I have used a grid navigation effect with jquery to display several thumbnail images but i would like the images to enlarge to a bigger size when they are clicked on, i dont want another window to open but for the image to appear on the same page like lightbox, except i dont need a gallery, just the enlarging function. Please see the code below of my page and the link to see the demo of the grid nav with jquery that i used (effect- 'rows move', example 9).
http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/comment-page-2/#comments
<!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>My gallery</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="gridNavigation.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
          background-color: #000000;
a:link {
          text-decoration: none;
          color:#f1d379;
a:visited {
          text-decoration: none;
          color: #f1d379;
a:hover {
          text-decoration: none;
          color: #9d6f1b;
a:active {
          text-decoration: none;
          color: #f1d379;
</style>
        <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
                    <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
                    <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
                    <script type="text/javascript" src="scripts/jquery.gridnav.js"></script>
<script type="text/javascript">
$(function() {
                                        $('#tj_container').gridnav({
                                                  type          : {
                                                      rows    : 2,
                                                            mode                    : 'rows',                               // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
                                                            speed                    : 1000,                                        // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                            easing                    : 'easeInOutBack',          // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                            factor                    : 150,                                        // for seqfade, sequpdown, rows
                                                            reverse                    : ''                                        // for sequpdown
</script>
</head>
<body>
<div class="container" id="container">
<div id="navbar_gallery" class="#navbar_gallery">
<ul>
          <li><a  href="index.html">Homepage</a></li>
          <li><a  href="about_me.html" >About me</a></li>
          <li><a  href="gallery.html">Gallery</a></li>
          <li><a  href="contact.html">Contact</a></li>
  </ul>
</div>
<div class="maintext" id="page_maintext">
  <p class="page_heading">My Gallery</p>
</div>
<div class="content example5">
<div id="tj_container" class="tj_container">
                                                  <div class="tj_nav">
                                                            <span id="tj_prev" class="tj_prev">Previous</span>
                                                            <span id="tj_next" class="tj_next">Next</span>
                                                  </div>
          <div class="tj_wrapper">
                                                            <ul class="tj_gallery">
                                                                      <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
                                                                      <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
                                                                      <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
                                                                      <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
                                                                      <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
                                                                      <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
                                                                      <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
                                                                      <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
                                                                      <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
                                                                      <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
                                                                      <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
                                                                      <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
                                                                      <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
                                                                      <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
                                                                      <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
                                                                      <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
                                                                      <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
                                                                      <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
                                                                      <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
                                                                      <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
                                                    </ul>
            </div>
  </div>
</div>
</body>
</html>

Ok so i've tried to do the above as suggested but i've obviously gone wrong somewhere as the fancybox function doesnt work, all that happens when clicking on thumbnail is the bigger version is opened in another browser window?
<!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>My gallery</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="gridNavigation.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<style type="text/css">
body {
          background-color: #000000;
a:link {
          text-decoration: none;
          color:#f1d379;
a:visited {
          text-decoration: none;
          color: #f1d379;
a:hover {
          text-decoration: none;
          color: #9d6f1b;
a:active {
          text-decoration: none;
          color: #f1d379;
</style>
        <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
                    <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
                    <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
                    <script type="text/javascript" src="scripts/jquery.gridnav.js"></script>
        <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
        <script type="text/javascript">
$(function() {
                                        $('#tj_container').gridnav({
                                                  type          : {
                                                      rows    : 2,
                                                            mode                    : 'rows',                               // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
                                                            speed                    : 1000,                                        // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                            easing                    : 'easeInOutBack',          // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                            factor                    : 150,                                        // for seqfade, sequpdown, rows
                                                            reverse                    : ''                                        // for sequpdown
</script>
<script type="text/javascript">
          $(document).ready(function() {
                    $(".fancybox").fancybox();
</script>
<script type="text/javascript">
$(document).ready(function() {
              $("#single_1").fancybox({
          helpers: {
              title : {
                  type : 'float'
    $("#single_2").fancybox({
              openEffect          : 'elastic',
              closeEffect          : 'elastic',
              helpers : {
                        title : {
                                  type : 'inside'
    $("#single_3").fancybox({
              openEffect : 'none',
              closeEffect          : 'none',
              helpers : {
                        title : {
                                  type : 'outside'
               $("#single_4").fancybox({
              helpers : {
                        title : {
                                  type : 'over'
</script>
</head>
<body>
<div class="container" id="container">
<div id="navbar_gallery" class="#navbar_gallery">
<ul>
          <li><a  href="index.html">Homepage</a></li>
          <li><a  href="about_me.html" >About me</a></li>
          <li><a  href="gallery.html">Gallery</a></li>
          <li><a  href="contact.html">Contact</a></li>
  </ul>
</div>
<div class="maintext" id="page_maintext">
  <p class="page_heading">My Gallery</p>
</div>
<div class="content example5">
<div id="tj_container" class="tj_container">
                                                  <div class="tj_nav">
                                                            <span id="tj_prev" class="tj_prev">Previous</span>
                                                            <span id="tj_next" class="tj_next">Next</span>
                                                  </div>
          <div class="tj_wrapper">
                                                            <ul class="tj_gallery">
                                                                      <li><a id="single_1" href="images/1-big.jpg" title="Row of beach huts"><img src="images/1.jpg" alt="Row of beach huts" /></a>
                                                                      <li><a id="single_2" href="images/2-big.jpg" title="Bees collecting pollen"><img src="images/2.jpg" alt="Bees collecting pollen" /></a></li>
                                                                      <li><a id="single_3" href="images/3-big.jpg" title="Frank"><img src="images/3.jpg" alt="Frank" /></a>
                                                                      <li><a id="single_4" href="images/4-big.jpg" title="New zealand beach"><img src="images/4.jpg" alt="Beach" /></a></li>
                                                                      <li><a id="single_5" href="images/5-big.jpg" title="Sonning river"><img src="images/5.jpg" alt="River" /></a></li>
                                                                      <li><a id="single_6" href="images/6-big.jpg" title="Steaming post in the morning sun"><img src="images/6.jpg" alt="steaming post" /></a></li>
                                                                      <li><a id="single_7" href="images/7-big.jpg" title="Portrait lady"><img src="images/7.jpg" alt="Portrait of lady" /></a></li>
                                                                      <li><a id="single_8" href="images/8-big.jpg" title="A great day at the coast"><img src="images/8.jpg" alt="Dog running along beach" /></a></li>
                                                                      <li><a id="single_9" href="images/9-big.jpg" title="Jam hut in new zealand"><img src="images/9.jpg" alt="Jam hut in new zealand" /></a></li>
                                                                      <li><a id="single_10" href="images/10-big.jpg" title="New zealand lake"><img src="images/10.jpg" alt="new zealand lake" /></a></li>
                                                                      <li><a id="single_11" href="images/11-big.jpg" title="Full speed ahead"><img src="images/11.jpg" alt="Dog running" /></a></li>
                                                                      <li><a id="single_12" href="images/12-big.jpg" title="Portsmouth docks"><img src="images/12.jpg" alt="Portsmouth docks" /></a></li>
                                                                      <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
                                                                      <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
                                                                      <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
                                                                      <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
                                                                      <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
                                                                      <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
                                                                      <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
                                                                      <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
                                                    </ul>
            </div>
  </div>
</div>
</body>
</html>

Similar Messages

  • Problem with GRID NAVIGATION EFFECTS WITH JQUERY

    Hi All,
    Im having problem with this image gallery with navigation (please see link below to see running demo). I am trying to use the 'Row move' style but am having problems getting the function to work. I have the images and everything set up fine but the actual function/navigation isn't working. I have downloaded all the relevant files to my computer but nothing happens when i click on the arrows. Also all of the 20 images are showing instead of just the 2 rows of 3? There should be 2 rows of 3 iamages showing then when the arrows are clicked the next two rows are shown and so on.
    http://tympanus.net/codrops/2011/06/09/grid-navigation-effects/
    This is the code i have -
    <!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>My gallery</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="gridNavigation.css" rel="stylesheet" type="text/css" />
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
              background-color: #000000;
    a:link {
              text-decoration: none;
              color:#f1d379;
    a:visited {
              text-decoration: none;
              color: #f1d379;
    a:hover {
              text-decoration: none;
              color: #9d6f1b;
    a:active {
              text-decoration: none;
              color: #f1d379;
    </style>
            <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
                        <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
                        <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
                        <script type="text/javascript" src="scripts/jquery.gridnav.js"></script>
    <script type="text/javascript">
                                  $(function() {
                                            $('#tj_container').gridnav({
                                                      type          : {
                                                          rows    : 2,
                                                                mode                    : 'rows',                               // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
                                                                speed                    : 1000,                                        // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                easing                    : 'easeInOutBack',          // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                                                                factor                    : 150,                                        // for seqfade, sequpdown, rows
                                                                reverse                    : ''                                        // for sequpdown
                        </script>
    </head>
    <body>
    <div class="container" id="container">
    <div id="navbar" class="#navbar">
    <ul>
              <li><a  href="index.html">Homepage</a></li>
              <li><a  href="about_me.html" >About me</a></li>
              <li><a  href="gallery.html">Gallery</a></li>
              <li><a  href="contact.html">Contact</a></li>
      </ul>
    </div>
                                                      <div class="tj_nav">
                                                                <span id="tj_prev" class="tj_prev">Previous</span>
                                                                <span id="tj_next" class="tj_next">Next</span>
                                                      </div>
                                                      <div class="tj_wrapper">
                                                                <ul class="tj_gallery">
                                                                          <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
                                                                          <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
                                                                          <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
                                                                          <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
                                                                          <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
                                                                          <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
                                                                          <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
                                                                          <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
                                                                          <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
                                                                          <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
                                                                          <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
                                                                          <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
                                                                          <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
                                                                          <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
                                                                          <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
                                                                          <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
                                                                          <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
                                                                          <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
                                                                          <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
                                                                          <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
                                                        </ul>
                </div>
    </div>
    </body>
    </html>

    Not sure what example you are using but it looks like you have missed out a couple of important <divs> in your code which surround the main <div>:
    If the case of example five:
    <div class="content example5'>
    <div id="tj_container" class="tj_container">
    MAIN STUFF GOES HERE
    </div>
    </div>
    I dont know if its my computer or not but I found the animation a bit flaky.

  • How to register iOS device when using self signed certificate with apple Server?

    Hi,
    I have installed the server.app by Apple and used a slef signed certificate for my server. Now I want to register my different devices (iMac, iPhone etc.). I could register the iMac without problesm (I just had to add my self signed certificate to the trusted certificates)
    Sadly, with the iPhone it is not that easy. I can install the "trust profile", but still after that I can not register my device. It seems like it does not accept my self signed certificate for device registration. When adding a registration profile, I get the error "www._mydomain_.tld/devicemanagement/api/device/auto_join_ota_service" is not valid.
    Nethertheless, I can install a profile with setting, e.g. my imap settings, via the profile management without problems.
    Does anyone have an idea how to get around the problem with the self signed certificate?
    Best regards

    Try deleting the Server.app and download it again from the App Store, restart.
    My Server is also using self signed certificates and is working with iOS device (Trust Profile needed first).

  • CS6 Fluid Grids - how to make images resize when page is resized? [was: Hello]

    I am new to fluid grid layouts in Dreamweaver cs6, I want to insert a GIF file on my index page but I do not know how to make it so when the page shrinks the GIF or image shrinks as well. The only code that I have found is
    img, {
        max-width: 100%;
    But this code already exists in the css file when you create a new fluid grid based layout
    img, object, embed, video {
        max-width: 100%;
    can anyone help a newbie please..

    this is my source code
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kyle Childress Foundation</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="/layout.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="animation"><img src="images/images/kyleanimation2014gif2.gif" alt="kylechildressfoundationanimation"></div>
    </div>
    </body>
    </html>
    this is my css
    @charset "UTF-8";
    @import url("/kyle.css");
    /* Simple fluid media
       Note: Fluid media requires that you remove the media's height and width attributes from the HTML
       http://www.alistapart.com/articles/fluid-images/
    img, object, embed, video {
        max-width: 100%;
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
        width:100%;
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:        5;
        dw-num-cols-tablet:        8;
        dw-num-cols-desktop:    10;
        dw-gutter-percentage:    25;
        Inspiration from "Responsive Web Design" by Ethan Marcotte
        http://www.alistapart.com/articles/responsive-web-design
        and Golden Grid System by Joni Korpi
        http://goldengridsystem.com/
    /* Mobile Layout: 480px and below. */
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 87.36%;
        padding-left: 1.82%;
        padding-right: 1.82%;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #animation {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #image {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) {
    .gridContainer {
        width: 90.675%;
        padding-left: 1.1625%;
        padding-right: 1.1625%;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #animation {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #image {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    @media only screen and (min-width: 769px) {
    .gridContainer {
        width: 88.2%;
        max-width: 1232px;
        padding-left: 0.9%;
        padding-right: 0.9%;
        margin: auto;
    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #animation {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    #image {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    the animation GIF is 700 x 908
    I changed the code from max-width to just width 100% but it still did not work ,, please help

  • Help: how to make photo enlargements?

    hi there, i'm am currently constucting a website using iweb. i have managed to create a photo page with all the thumbnails i need.
    can anyone tell me how to make it so when someone clicks on a particular thumbnail and enlargement or the actual size of the photo opens up in a separate window as you find in regular galleries?
    also, is this an effective method, or does it take up a lot more memory when uploading the site, or would it just be better to have larger thumbnails that are more visable?
    any help is appreciated, thanks!
    MacBook2,1   Mac OS X (10.4.8)  

    This should be already happening if you are using a photo page template.

  • How to make different users to use different Plan_Tables?

    How to make different users to use different Plan_Tables?
    I want each user use his own's Plan_Table. How to achieve this goal?

    qkc wrote:
    How to make different users to use different Plan_Tables?
    I want each user use his own's Plan_Table. How to achieve this goal?Which version of Oracle - if you're on 10g or later you are already (effectively) doing this.
    If not, then copy the 10g strategy back to your version; in outline:
    <ul>
    drop all existing plan tables
    create a table (but call it plan_table$) in the SYS schema (you may prefer to use SYSTEM) as a global temporary table on commit preserve rows
    create a public synonym plan_table for plan_table$
    grant select insert update delete on plan_table to public
    </ul>
    Look in $ORACLE_HOME/rdbms/admin/catplan.sql in a 10g version of Oracle to check how it's done.
    Each user gets a private (temporary) table in their temporary tablespace whenever they use the plan_table
    Their private data disappears when there session ends.
    Regards
    Jonathan Lewis
    http://jonathanlewis.wordpress.com
    http://www.jlcomp.demon.co.uk
    To post code, statspack/AWR report, execution plans or trace files, start and end the section with the tag {noformat}{noformat} (lowercase, curly brackets, no spaces) so that the text appears in fixed format.
    There is a +"Preview"+ tab at the top of the text entry panel. Use this to check what your message will look like before you post the message. If it looks a complete mess you're unlikely to get a response. (Click on the +"Plain text"+ tab if you want to edit the text to tidy it up.)
    "Science is more than a body of knowledge; it is a way of thinking"
    Carl Sagan                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

  • How to Suppress Report Total When Using Sum on Columns & Break Formatting

    I need to know how to NOT show the report total line when using the sum functionality with a break in a report.
    I am summing two columns, a debit amount and credit amount. I am breaking on the first column which is the level of a hierarchical query. I want to see something like this:
    Parent Record xxxxxxxxxxxxxx
    Parent Sum $$ $$
    Child Record xxxxxxxxxxxxxx
    Child Record xxxxxxxxxxxxxx
    Child Sum $$ $$
    However, when I run the report, I also get a report total line under the child sum which is really meaningless for this report.
    I have also tried creating this report as an interactive report. When applying the sum on the two columns, I do get the sum totals on the break only - no report total - however, it is reversing the order of the hierarchical query results putting the child records first and the parent records second.
    Thanks in advance for your help.

    Hi, and welcome!
    I don't think that there's an easy way to "switch off" the Total line on a report. The nearest I could suggest would be to either hide the entire row or colour the text so that it's the same as the background - either way, the total is calculated but the user won't see it.
    If you put something like the following into your report region's Region Footer:
    &lt;script type="text/javascript"&gt;
    var outertable = document.getElementById("#REGION_ID#");
    var innertable = outertable.getElementsByTagName("TABLE")[1];
    var rs = innertable.rows;
    var lastrow = rs[rs.length-1];
    if (lastrow.cells[0].innerHTML == '&lt;b&gt;TOTAL&lt;/b&gt;')
    rs[rs.length - 1].style.display = "none";
    &lt;/script&gt;Then, on your report's Report Attributes page, scroll down to the Break Formatting section and put TOTAL into the "Display this text when printing report sums" setting. Also, in the "Layout and Pagination" section, set "Enable Partial Page Refresh" to No.
    The above code is based on the report and region templates that I'm using here: [http://apex.oracle.com/pls/otn/f?p=267:147] (Theme 18, "Report Region" region template and "Standard" report template). Your report may use different templates, so the first two lines on the code may have to change. #REGION_ID# would be replaced with the region's ID value (which would be "R" followed by a long number). As long as you can identify the HTML tag that uses this ID value, you can then get to the actual table that contains the data as it would be a TABLE within that tag - the [1] above is the second table within the region. In some instances, you may have to use "region_#REGION_ID#" as the starting point.
    Andy

  • How to solve power error when using USB camera adapter in your camera

    Hello Everyone,
    First of all I wanna say reducing the output of the USB camera adapter from 100mA to 20mA just to save battery life is by far the most incredible adjustment in the history of @)#*$#%*($#!
    I know most of us bought the USB Camera adapter so we can use it as a USB adapter for the Camera (saves us from taking the memory card on and off the camera) but sadly the "Ginues Apple" reduced it to 20mA which decreases the range of cameras and flash drives that will work with it. I use Gopro Hero 3+ black and everytime I plug it with the adapter to my ipad I keep on seeing this @#@$#@ power error. I didn't want to waste the expensive adapter so I tried to look for a micro sd card reader but I don't think 20mA readers still exist.
    Now to solve this problem is very simple add a power source to help that 20mA up, most of the my friends bought a powered port hub but it's not my type because it's bulky, needs an outlet and not portable.
    So I found a better solution on how you can add a power source and still be portable, the answer is power bank or portable charger.
    Things you need:
    Camera
    USB camera adapter (Ginues Apple product)
    Power bank (I'm using 8,400 mAh)
    Dual USB Male to 5 Pin Mini USB Y Cable
    Ipad
    Procedure:
    Camera --- 5 Pin Mini USB ------------------ USB camera adapter ---------- Ipad
                                                   '---------- Power Bank
    Attach you camera to the 5 pin mini usb then the USB1 male to the female apple's USB camera adapter then to the Ipad. = this will show the power error.
    Then attach the USB2 to the power bank/portable charger to power it up.
    your welcome

    yocto yotta wrote: How to charge iPad Air when using the camera connection kit?
    No can do, Skippy!

  • How to numberformat when using sql:query alogn with c:forEach JSTL tags

    Is there anyway to format the numeric values returned from the database when using <sql:query> alogn with <c:forEach> tags
    Here is my jsp code
    <sql:query..../>
    <c:forEach var="row" items="${queryResults.rows}">
    <tr>
    <td><c:out value="${row.COL1}" /></td>
    <td><c:out value="${row.COL2}" /></td>
    </tr>
    </c:forEach>
    Col1 values are numeric without any formats Eg: 1000, 10000, 1000000 etc.
    how can i format them to 1,000 , 10,1000 , 100,000 etc

    It is polite to mention what your answer was. These posts are not just here for you to ask questions, but to be used as a resource for other people to find answers. Saying "I solved it" with no details helps noone.
    I presume you discovered the JSTL <fmt:formatNumber> tag?

  • How to hide system tables when using the Oracle SQL Developer?

    Hi,
    I would like to know how can I show only the tables that I created under the Tables tree? I didnt find a way to create a separate database using the Oracle Sql Developer. I see all the tables together, and would like to differentiate between different databases.
    Can anyone explain to me how to do these things?
    Thanks,

    Hi,
    I would like to know how can I show only the tables that I created under the Tables tree? Your posting is not clear,again tell something more on tables tree,what u want to achieve with it.
    How to hide system tables when using the Oracle SQL Developer? if u connected with sys, system or user with dba role then u have a privilege to see these tables,so revoke the privilege/role from ur user to view this tables if ur connected other then sys,system,
    I didnt find a way to create a separate database using the Oracle Sql Developer. DBCA is a tool for creating the new database.
    Kuljeet

  • Ques;How  do you secure imail when used being used in iweb. People can mess

    How do you secure imail when used being used in iweb? People can mess w/my settings in iweb imail window.

    What is iMail?
    And what is an iWeb iMail window?
    iWeb is part of iLife 06 which is an application used to create websites hosted on .Mac.
    Are you referring to Apple's Mail application and webmail access using a browser such as Safari to access your .Mac account?
    Which people can mess with what settings? You shouldn't allow anyone else to access your Mac when logged in to your account and home folder/directory. OS X was designed for multiple users of the same Mac with each regular user having their own computer login account (with or without admin privileges) and associated home folder/directory to store and access their data and settings for their login account only.

  • When using printer Epson R1900 with Aperture 3 and if I mistakenly choose the wrong paper such as, epson's luster instead of glossy, does that change the exposure? Like make it too dark one or two stops!

    When using printer Epson R1900 with Aperture 3 and if I mistakenly choose the wrong paper such as, epson's luster instead of glossy, does that change the exposure? Like make it too dark one or two stops!

    Hi,
       If you choose the incorrect settings for printing, yes - the print quality will be affected.
    Different papers absorb the ink differently, so you can end up with prints that are too light, too dark, or have a colour cast if you make incorrect choices in your Aperture or printer settings.

  • How to make a contact sheet using iPhoto

    how to make a contact sheet using iPhoto

    Which iPhoto version do you have?
    In iPhoto '11 you can make the Contact Sheet by selecting all photos you want on the sheet, press ⌘P, and in the Print panel select "Contact Sheet". Set the number of columns, adjust the margins, and select the captions you want.
    Then press the Print button.

  • Does anyone know how to load ACR presets when using ACR in the creative cloud?

    Does anyone know how to load ACR presets when using ACR in the creative cloud?

    Moving the discussion to Adobe Camera Raw forum.
    Thanks,
    Atul Saini

  • How to make it selected when clicked and open popup

    Hi,
    I 've a form in the parent page with many form elements.
    I've 2 radio buttons with values "Yes" and "No". I am opening a modal popup when clicked on "Yes" radio button. The modal popup is opening fine.
    But when I click "Yes", it' s not selected. After modal popup is closed, when I return to parent page, the option "Yes" is still not selected.
    How to make it selected when clicked and open popup?

    Perhaps try moving the application to your preferred desktop and then right-click it's dock icon > options > Assign to This Desktop.

Maybe you are looking for