Spring MVC jquery jqgrid

HERE

Read More..

Possibly the most simple jQuery Slider

Do you have jQuery in your blog and space to insert 10 lines of code? If the answer is yes and you also want to have an automatic slideshow, this is the simplest code Ive seen so far.

That code having a succession of simple images placed inside a box with a common general container would give this result:

1. Adding the JavaScript

If you do not have jQuery, then you should add this line just after ]]></b:skin> to load this popular slideshow:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js type=text/javascript/>

Once confident that we have the library in our template, we need to add the same line to make the series of images function as a slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $(#slider div:gt(0)).hide();
    setInterval(function(){
      $(#slider div:first-child).fadeOut(0)
         .next(div).fadeIn(1000)
         .end().appendTo(#slider);}, 4000);
});
//]]></script>

We can save changes to the template because that is all. It is simple but you will see that it works and does what it has to do. Now we just have to put the images where we want to display, in the manner discussed below.

2. Create the slider

After adding the codes above in our template (although you could add it directly into a gadget, on a page or even in an entry as you see here) we can create a viewer as you saw above. We just have to use this HTML structure below to add the images:

<div id="slider">
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
</div>

I do not know how you see it but it is all you need.

For me this is quite lightweight and efficient, much more than most libraries that are used perhaps too often.

Settings

The last three numbers of the plugin allow us to adjust some things. All are expressed in milliseconds (4000 = 4 seconds)

fadeOut(0): Time for the outgoing image
fadeIn(1000): Time for the next image
(#slider);},4000): Time spent in each image

How it Works

And for the curious who want to learn things...

$(#slider div:gt(0)).hide();
With gt(x) we select all the divs from number x. In this case 0 is the first, so what we do with this line is to hide (hide) all the boxes except the first, which will be the image visible initially.

setInterval(function(){ [what we will do] }, 4000);
We need to reiterate a few things from time to time and we do with setInterval, indicating the delay time between each set.

$(#slider div:first-child).fadeOut(0)
Within each of these intervals we remove (fadeOut) the first box (div:first-child) that is in the relationship of images...

.next(div).fadeIn(1000)
...and we make the following box (next) appearing gradually (fadeIn).

.end().appendTo(#slider);
Finally we have the first image and place it at the end (appendTo) of the "list".

end() resets the count of elements that we move forward with next(). Thus, the first child made earlier to disappear is the one we sent down the stack and not the image that is now visible.

Variants and customization

As you have seen CSS is not necessary for the slider to work, but using it we can change its look, allow the use of images of different sizes, include labels and even improve the transition. Here are some ideas.

DEMO TEXT1

DEMO TEXT2

DEMO TEXT3

We can limit the overall container size and prevent overflow for larger images. And then we will put rounded corners, border and then center them.

#slider {
overflow: hidden;
width: 500px;
height: 300px;
border:3px solid #b8b8b8;
border-radius: 40px;
margin: 0 auto;
padding: 0;
position: relative;
}

If we place the parent boxes of the images absolutely with respect to the general container (for that we put before the relative), these will overlap each other. In this way the fadeOut may give them some time to be "visible" (we changed 0 to 1000) and a smoother transition between images. The mixture of images is produced in the second demo.

In the images, the max-width serves us to always take up the entire width and min-height so that even if they are distorted, there will remain no space below when they are less than 300px.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

And if we add other elements on the images (in this example a text), well just label them with a span or paragraph (p) and position them in the CSS in an absolute manner, placing them in the exact place where we want with top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

The markup in the HTML for this last, includes also a link to the image, so it would be like this:

<div id="slider">
<div><a href="Link_URL1"><img src="Image_URL1" /></a><p>TEXT1</p></div>
<div><a href="Link_URL2"><img src="Image_URL2" /></a><p>TEXT2</p></div>
<div><a href="Link_URL3"><img src="Image_URL3" /></a><p>TEXT3</p></div>
</div>

Read More..

Add Css Jquery fixed horizontal menu to blogger blog

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.

-> SEE DEMO <-

Lets start adding it...

1. Go To Blogger - Template - Edit HTML

 ....and select the "expand widget templated" box:

2. Search (using CTRL + F) for this piece of code:

</head> 

3. Just above/before the </head> tag, add this code:

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
 <script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $(#nav).stop().animate({opacity:0.2},400);
                    else   
                        $(#nav).stop().animate({opacity:1},400);
                });
               
                $(#nav).hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(#nav).stop().animate({opacity:1},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(#nav).stop().animate({opacity:0.2},400);
                        }
                    }
                );
            });
        </script>

4) Now search for this tag:

<body>  

If you cant find it, search for this one:

<body expr:class=&quot;loading&quot; + data:blog.mobileClass>

5) Just below/after this code, copy and paste the following code:

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href=URL address><span>Link 1</span></a></li>
<li><a href=URL address><span>Link 2</span></a></li>
<li><a href=URL address><span>Link 3</span></a></li>
<li><a href=URL address><span>Link 4</span></a></li>
<li><a href=URL address><span>Link 5</span></a></li>
<li><a href=URL address><span>Link 6</span></a></li><li class="search">

<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu.

6) Now click on the Save Template button and youre done ;)

Credit goes to the original author. This widget was inspired by David Walsh’s top navigation bar.

Read More..

How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.

Demo

You can see a live demo on my blog, the buttons are located on the right side.

How to put Go Up and Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button

Step 2. Select the "Expand Widget Templates" box

Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above this code, paste this one:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK_svw4My_S0xeEROPDpvBrM8Z7MQ1dh4RrTg6dq1fYm31XXpDZ3mUHmBif_y-8dbSI9J_hfNMAWY5As7n3FI-O3OtNHC3fgo58sR4XHmrgkMueC6Fvt-LBX2VfioM12V9A4o7DjDMeOg/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Buttons width */
height:20px; /* Buttons height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLZ7TGGT3x1mV1h1U09TyTasD_UczNz8N6blvceF8ddjmAaZ77228CaiGYxskIMjz26INCxqckKJ0irRYdJO1DkHf1OymJIOl2CP4k_8WvXcXVCYq6DADcAS64kktNjYVz13bACjC25o/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Buttons width */
height:20px; /* Buttons height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note:  - in green are some annotations that explains what styles you can modify on their left side.
           - You can change the arrows by changing the URLs in blue.
           - To change the buttons background color of buttons, change the white text with your color

Step 5. Now search (CTRL + F) for this tag:

</body>

Step 6. And just above it, paste the following code:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>

<div class=button_up id=button_up style=display:none;/>
<div class=button_down id=button_down style=display:none;/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1=D+(+new Date()),uid2=D+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type=scrollstart;jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind(scroll,handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind(scroll,jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type=scrollstop;jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind(scroll,handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind(scroll,jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $(body);
$(#button_up).fadeIn(slow);
$(#button_down).fadeIn(slow);
$(window).bind(scrollstart, function(){
$(#button_up,#button_down).stop().animate({opacity:0.2});
});
$(window).bind(scrollstop, function(){
$(#button_up,#button_down).stop().animate({opacity:1});
});
$(#button_down).click(
function (e) {
$(html, body).animate({scrollTop: $elem.height()}, 800);
} );
$(#button_up).click(
function (e) {
$(html, body).animate({scrollTop: 0px}, 800);
} );});
//]]>
</script>

Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

Step 7. Finally, Save your Template. Enjoy!

Read More..

A Beautiful jQuery Drop Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.

Steps Adding the jQuery Drop-Down menu

Step 1. Go to Dashboard - Template - Edit HTML - Proceed

Step 2. Expand Widget Template (make a backup)

Step 3. Search for the following code:

]]></b:skin>

Step 4. Add the following CSS code before/above it:

#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 5. Now find this piece of code:

</head>

Step 6. Add this code immediately before/ABOVE it:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js type=text/javascript/>
  <script type=text/javascript>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find(ul).css(visibility, visible);}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css(visibility, hidden);}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $(#jsddm > li).bind(mouseover, jsddm_open)
  $(#jsddm > li).bind(mouseout,  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script>

Step 7. Click on Save Template button.

Step 8. Go to Layout > click on "Add a gadget" link

Step 9. Choose HTML/JavaScript from the pop-up window

Step 10. Paste the following code in the empty box:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Link 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>
 <li><a href="#">Link 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  </li></ul>

Note :

You must change links titles and replace the # symbol with the URL address of each of your links

Step 11. Click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Template > Edit HTML and search (CTRL + F) for this code:

<b:section class=header id=header maxwidgets=1 showaddelement=no>

You should change 1 with 3 and no with yes like this:

<b:section class=header id=header maxwidgets=3 showaddelement=yes>

Save the Template.

Next thing to do is to go to Layout and drag your menu immediately below your header

Then click on Save Arrangement

Here you can see the DEMO.

Enjoy! :)

Read More..