Showing posts with label jquery. Show all posts

Wednesday, November 4, 2015

Making a responsive navigation without any additional css framework

This small tutorial will show you how to create a simple responsive navigation that works for any device.

Few interesting arts with sketch.js

I just found these interesting arts with sketch.js. This minimal footprint javascript library lets you to code fun things in your web designs.

You can do unlimited things with sketch javascript library.

Below are few examples done with sketch.js

Do not make your webpage to load all images at once. Tip to speed up website

User experience is very important aspect in making a web application. One of the important factors is improving your website page load time. Where do many applications fail to make good user experience ?

Trying to load lot of content at once.
Loading higher dimension ed images than required by your styles
Loading images before even they actually require on the screen.

Floating your sidebox between two points, Inspired by Google

I have seen google pagespeed insights floating the mobile or desktop screenshot on the sidebar between only certain points.
I just figured it out how to do it. And here is the tutorial explaning to make your website sidebar widget float between two limits.

Offer something when user is moving out of your page

What most of the publishers are doing to convert their new visitors as returining visitors? They offer something when users visit the site.
Now, when do they offer discount or free stuff, it depends from business to business, either when user spends some time on a page or
user visiting couple of pages or when he/she is leaving the website.

Making a full page navigation for all devices

Having responsive site navigation is important for a website and also it is necessary to have good user experience on all the platforms

A Simple Mobile Menu

I have created a simple mobile menu using html, javascript(jquery) and css. I have used similar mobile menu for couple of websites.

Below is how I created the menu. You can also edit and play with the code here https://jsfiddle.net/mannemvamsi/j9m571ve/

1. HTML for the menu(Navigation)

<div class="mobile-menu-wrapper">
    <div class="mobile-menu-control">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
<div class="mobile-menu">
    <ul>
        <li ><a href="#"><div class="header item-height" ><strong>The Main 1</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
        <li ><a href="#"><div class="header" ><strong>The Main 2</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

2. Add CSS to the html document( basically adding css only to above navigation part)

.mobile-menu-wrapper{
    position:fixed;
    left:-220px;
    width:260px;
    cursor:pointer;
}

div.mobile-menu {
    width:210px;
   
    float:left;
    background-color:#222;
}
.mobile-menu ul {
    list-style:none;
    margin:0;
    padding:0px;
   
}
.mobile-menu ul ul li {
    padding-left:8px;
   
}
.mobile-menu li {
    margin:0;
    padding:0;
}
.mobile-menu li, .mobile-menu li a {
    color:#fff;
    font-family:calibri, sans-serif;
    text-decoration:none;
}
.mobile-menu li li:hover {
    background-color:#111;
}
.mobile-menu .item-height{
    padding:10px 2px;
}

.mobile-menu-control {
    float:right;
    //border:1px solid green;
    cursor:pointer;
    background-color:#222;
    padding:5px;
}
.mobile-menu-control .bar {
    width:25px;
    margin:4px 0;
    border:2px solid #fdbd12;
}
.mobile-menu .header {
    color:#fdbd12;
    padding-left:4px;
    width:100%;
}

3. Use Jquery for actions

$(function() {
    var wrapper = $(".mobile-menu-wrapper");
    var mobileMenu = $(".mobile-menu");
    var mobileMenuWidth = mobileMenu.width();
    $(".mobile-menu-control").bind("click",function() {
       
        if(mobileMenu.hasClass("opened-menu")) {
           
           $(".mobile-menu-wrapper").animate({
               left:-(220)
              
           });
            mobileMenu.removeClass('opened-menu');
        }
        else
        {
           $(".mobile-menu-wrapper").animate({
               left:0
           });
            mobileMenu.addClass('opened-menu');
        }
    });
})

Fiddle is available for the same here : https://jsfiddle.net/mannemvamsi/j9m571ve/

Friday, April 24, 2015

Do Something new with these Jquery plugins and Javascripts

Web designing is always been a challenge for web designers and developers. Unless you have some good tools to work, it is most likely difficult to develop great UI.

Below are some tools that might help you to come up with some great designs to your apps or websites.

A Simple Jquery ajax example - HTML form submission made easy

You might be wondering about using jquery ajax method. Here is a simple Jquery ajax post example that explains easy way to send data to server and fetch data from server asynchronously.

Jquery ajax tutorial for beginners

1. Include Jquery in your html header

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

2. Create a html form to submit sample data asynchronously

    <form id ="myForm">
      ENTER YOUR NAME   <input id ="myInput" name="myInput"/>
      <button type="submit" id="submit">SUBMIT</button>
   </form>

3. Create jquery method $.ajax to submit data to server

In your javascript add function like this

      $.ajax();   // primary method

It takes some arguments like
a) Jquery ajax action-type (type), eg: post, get etc..
b) file to call (url ),
c) data to send (data),
d) what to do upon success ajax call (success)
e) what to do upon server error (error)

So, adding up the arguments, it finally looks like this

      $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data) {
                      // alert(data);
                            } ,
              error : function(data) {
                   // alert('Report Server Error');
                         }
           }
         );

4. Call ajax on clicking the submit button

So, our jquery ajax method is ready to send data to server.
NOTE : $("#myForm").serialize() method will send all the form elements to server.

Create handler to submit button

      $("#submit").click(function () {
                // add ajax function here.
        });

It should look like

      $("#submit").click(function () {
           $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data) {
                       // alert(data);
                            } ,
              error : function(data) {
                       // alert('Report Server Error');
                         }
           }
         );
        });

5. Handling form elements on the server side

On your server side PHP or servlet get the form elements

In our example we passed our server file as "/path/to/my.php". Jquery ajax will send form to that location.

if it is PHP, use
$_POST["myInput"];
if it is jsp/servlet use
request.getParameter("myInput");

do what ever you want on the server side and you can send signal saying either it is good or bad or you can throw any exception.

Throwing exception will be treated as error by $.ajax();

So, what I have done in my example php file is
echo $_POST["myInput"];

6. Once it is success (Jquery ajax success)

It is all happy on the server side, the $.ajax parameter success function is invoked.

There is another important thing is to block default form submission.

Because, html form is submitted to server when you click on submit button.
In order to avoid such form submissions, you can say event.preventDefault(); Use this on button click

So, our final form submission using jquery will look like this.

  $("#submit").click(function (e) {
           e.preventDefault();
           $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data){
                      // alert(data);
                            } ,
              error : function(data) {
                     // alert('Report Server Error');
                         }
           }
         );
        });

Wednesday, May 14, 2014

How to call jquery function from JSP page conditionally

Sometimes we might need to write a jquery function in jsp page and we might need to call it only when it is required or based on certain conditions.

Say we have a boolean attribute based on which we have to call jquery function.

Setting an attribute on server side

We set an attribute on server side using

 req.setAttribute("myAttribute", true);  // On Server Side

on jsp page use <% % > tags to write java code and get that attribute.

Getting attribute in JSP

<%  boolean myAttribute = (Boolean)req.getAttribute("MyAttribute") %>

Now, if that boolean is true write your jquery script.

Calling Jquery function in JSP

<%  if( myAttribute) {%>
<script>
   $(function () {
      alert("Called Jquery from JSP conditionally")
})
</script>
<%}%>

Or you can use taglib library

Example for calling jquery in JSP:

 <c:set var="myAttribute"  value="${5}"/>
<c:if test="${myAttribute< 10}">
  <script>
   $(function () {

       alert("Called Jquery from JSP conditionally");
   });
  </script>
   Variable <c:out value="${myAttribute}"/>

</c:if>

Monday, March 24, 2014

How to increase or decrease height of an element by clicking another element

1. Create a div which holds the main container

<div id= "main">
//This is your main container
</div>

2. Create a div which holds the content and place it in the main div like below

<div id = "main ">
    <div id = "content">
        <p> My content line 1</p>
        <p> My content line 2</p>
        <p> My Content line 3</p>
    </div>
</div>

3. Now, create another div which will have a button to control the div with content. In my case I am calling it as "footer" and place it in the main div

after placing the footer div the whole html code should look like this

<div id= "main">
  
    <div id = "content">
        <p> My content line 1</p>
        <p> My content line 2</p>
        <p> My Content line 3</p>
    </div>
    <div id = "footer">
        Footer
        <button id = "btn">Button</button>
    </div>
  
</div>

And the css for these elements is





html,body {
   height:100%
}
 
# main{
    min-height:100px;
    border:1px solid grey;
    height:100%;
}
#content {
    border:1px solid black;
    display:block;
    overflow:hidden;
    overflow-y: scroll;
}
#footer {
    border: 1px solid blue;
    display:block;
    //If you want to place your footer at the bottom and not to move it
    bottom:-10px;
    position:absolute;
}

NOTE : If you do not wish to move your bottom 

 
 I have used jquery, so I am going to use click function from jquery to handle click events on the footer button that we have created in step 3.

 And also change the height of the content element with jquery css function

 
$(function () {

    $('#btn').click(function(){
   
        $('#content').css("height", "100px");
    });
   
})
In this example I created only one button with handles reduces the height of the "content" div.
You can add another button to increase the height of the content div/element.






If you want some smoother action, you can use jquery animate https://api.jquery.com/animate/   like this



 
 
$(function () {

    $('#btn').click(function(){
    
        $('#content').animate({
            height:"20px"
        }, 2000);
    });
    
})






 



Here is the fiddle http://jsfiddle.net/mannemvamsi/DYZr5/4/

Wednesday, December 25, 2013

How to validate simple html form using jquery validate plugin

In this example, I have created a simple form which has user name and password as input fields.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
// Validate plugin which I got from http://plugins.jquery.com/validation/
<script src="jquery.validate.js"></script>
</head>

<body>
<script>
$(function() {
 $("#form1").validate({
                // Use this one to place the error
  errorLabelContainer: $("#form1 div.errorHolder")
 });
});
</script>
<form id="form1" action="">
  <p>
   <label>Username</label>
   <input name="user" title="Please enter your username " required minlength="5">
  </p>
  <p>
   <label>Password</label>
   <input type="password" maxlength="12" name="password" title="Please enter your password" required minlength="5">
  </p>
                 // Div tag to hold error messages
  <div class="errorHolder">
  </div>

  
   <input class="submit" type="submit" value="SUBMIT"/>
  
</form>
</body>
</html>

Simple sign in form example

You can copy the above code and save it in a file .html to test it.

Monday, December 23, 2013

How to find user entered value is present in the autocomplete search list

I have created an example here to find whether user entered value is present in the autocomplete search list or not.

How I did this ?
Jquery autocomplete has inbuilt response function, which gets called at the end of every search.
So, just look at the response content and find if the user input value matches. Save your boolean there and

finally, when you submit your form -- Just check this boolean and take your action based on that.

<!DOCTYPE html>
<html>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  var valuePresentInSearchList = false;

  $(function() {
     // ON SUBMIT DO SOME ACTION
      $("#SUBMIT").bind("click", function() {
          alert('Entered value: '+$("#tags").val() +'     Its presence in list: ' + valuePresentInSearchList);

      });

      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
      $( "#tags" ).autocomplete({
        source: availableTags,
          response: function( event, ui ) {
              valuePresentInSearchList = false;
              jQuery.each( ui.content, function( key, value ) {
                  for( k in value ) {
                   // alert( "key is " + [ k ] + ", value is " + value[ k ] );
                      // CHECK HERE IF INPUT VALUE IS EXACTLTY MATCH
                      // YOU CAN ALSO DO PATTERN MATCH HERE
                      if( value[ k ] ==$("#tags").val())
                      {
                      valuePresentInSearchList = true;
                      }

              }
          });
       }
      });
    });

  </script>
  <link rel="stylesheet" href="/resources/demos/style.css">
      <body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
      <button type= "submit" id= "SUBMIT" onclick="validate()" value="SUBMIT">  BUTTON</button>
</div>


</body>
</html>

You can simply copy the above code and paste it in a NEW .html file to test it.

Also I have created fiddle for the same : http://jsfiddle.net/GCnEW/

NEXT TIP Best way of using jquery ajax

Sunday, December 22, 2013

How to close jquery menu on page scroll down

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

</head>


<!-- STYLE-->
<style>
#main-nav{
    width:150px;
}
body{
    height:1000px;
   
}
</style>


<!--SCRIPT-->
<script>
$(function() {
    $( "#main-nav" ).menu();
  });

 <!--Fire on scroll event and collapse all menu active items -->
window.onscroll = function (event) { 
  $( "#main-nav" ).menu( "collapseAll", null,true );
}
</script>


<body>
<div id="sub-link-bar"> </div>

 <div id="wrap">

 <div class="roundfg">
 <ul id="main-nav">
     <li><a class="main-link" href="#">Home</a>
         <ul class="sub-links">
         <li><a class="main-link" href="#">Home</a></li>
         </ul>
     </li>
     <li><a class="main-link" href="#">Tutorials</a>
         <ul class="sub-links">
             <li><a href="#" >Design</a> </li>
             <li><a href="#">HTML &amp; CSS</a> </li>
             <li><a href="#" >Other</a> </li>
             <li><a href="#">PHP</a> </li>
             <li><a href="#">Ruby</a> </li>
             <li><a href="#">Site Builds</a> </li>
             <li><a href="#">Tools &amp; Tips</a> </li>
             <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
         </ul>
 </li>


 <li><a class="main-link" href="#">Videos</a>
 <ul class="sub-links">
 <li><a href="#">Screencasts</a> </li>
 </ul>
 </li>
 <li><a class="main-link" href="#">About</a>
 <ul class="sub-links">

 </ul>
 </li>
 </ul>
</div></body>
</html>

SEE ALSO

Simple Sign-in form using HTML and CSS

How to place text inside a circle using CSS

I also have created the fiddle for the same http://jsfiddle.net/3XED6/

JavaScript HTML & CSS