Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,174,041 members, 7,890,420 topics. Date: Monday, 15 July 2024 at 01:48 PM

JQuery & Friends:.. Q/A - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / JQuery & Friends:.. Q/A (1310 Views)

Please Do A Q&A Ask Me Anything Thread / Free Csharp, Mvc, Jquery And More Tutorials Online / Tutorial: How To Return Html In Json Response Using Asp.net And Jquery (2) (3) (4)

(1) (Reply)

JQuery & Friends:.. Q/A by delomos(m): 8:06am On Mar 28, 2012
I saw this post => https://www.nairaland.com/309149/complete-javascript-programming-tutorial from awhile ago, and was quite good intentioned and it seemed things feel out; for those who have question respective to that post ( or set of posts), we can share ideas here, will start things off with a quick intro to JQuery, CSS, HTML, HTML5, CSS3 (refered to JQuery and friends henceforth), and some jargons everyone is speaking to day and why a 9ja boy cares:

There are generally two parts to website development these days: the front-end (what you're seeing, this round corners, text, etc) and back-end (what makes things run) -- JQuery and friends mostly care about the front-end. I would just dive into the meat of things, if you want more details, ask.

What's this HTML5? Nothing fancy, it's still regular HTML with more "stuff" , and an HTML5 app is a web page that acts like a desktop application usually with the help of javascript.
Where then does JQuery fit? JQuery is a small javascript 'program' that helps make it easier to do interesting things with HTML. Enough talk, this is a super, super basic Ajax/HTML5 app, it really does nothing it explains the point, so, let's redesign the header of nairaland and make the search box auto-populate when you click a link to search ( I advice you don't use IE to see the HTML5ish)

(you can preview the finished stuff here: http://jsfiddle.net/delomos/rfRfY/6/embedded/result/ and the code is here, I make notes below: http://jsfiddle.net/delomos/rfRfY/6/) ---


(the HTML)
---------------
<!DOCTYPE>
<html>
   <head>
     <title>WebDev for NairaLand </title>  
  </head>
    
    <body>
        <div id="header">
        <h1>NairaLand Forum ::. programming</h1>
        <ul>
            <li>Welcome <a href="#">dele.o:</a></li>
            <li><a href="#">Edit Profile</a></li>
            <li><a href="#">Friends</a></li>
            <li><a href="#">Updated Topics</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
        
        <form action="#">
            <input type="text" placeholder="that Lagos Boy for life...." data-bind="value: lagos"/>  <--- an HTML5 stuff
            <input type="submit" value="wetin u need?"/>
        </form>
        </div>
        
    </body>
</html>​

(the CSS)
--------------------
#header {
    margin: 0 auto;   
    width: 500px;
    background: #f0f0eb;
    padding: 10px;
  border: 1px solid #000;

     -webkit-border-radius: 12px;      <-----CSS3 stuff, rounded corners and shadow
     -moz-border-radius: 12px;
          border-radius: 12px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box;    background-clip: padding-box;
    
  -webkit-box-shadow: 0px 0px 7px 0px #000;
     -moz-box-shadow: 0px 0px 7px 0px #000;
          box-shadow: 0px 0px 7px 0px #000;


}

#header h1 {
    font-size: 1.9em;
    font-variant: small-caps;
    margin-bottom: 3px;
}

#header ul {
    margin-bottom: 5px;
}

#header ul li {
    display: inline;
    margin-right: 10px;
}

#header ul li a {
    text-decoration: none;
    color: #769776;
}

#header ul li a:hover, ul li a:active {
    text-decoration: underline;
}

#header input[type=text]{        <--- more CSS3 stuff
    width: 250px;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    border-bottom: 2px dotted #000;
    background: #f0f0eb;
                            
}

#header input[type=submit]{
    margin-top:5px;
    border: 1px solid #000;
    padding: 2px 
}
​

(the JavaScript/JQuery)
------------------------

$("#header ul li:eq(0)"wink.click(function(e){                  <---- attach to that HTML stuff, #heder ul li:eq(2) -- the second li in the DOM
    e.preventDefault();                                                                                <---- don't let it go to a link
    $(this).hide('slow').delay(500).show('slow');                                            <---- now attach this jQuery 'stuff' to that HTML 'stuff' 
    $("#header input[type=text]"wink.val($("#header ul li:eq(0)"wink.text());             <----- update the search field
});

$("#header ul li:eq(1)"wink.click(function(e){
    e.preventDefault();
    $(this).hide('slow').delay(500).show('slow');
    $("#header input[type=text]"wink.val($("#header ul li:eq(1)"wink.text());
});


$("#header ul li:eq(2)"wink.click(function(e){
    e.preventDefault();
    $(this).hide('slow').delay(500).show('slow');
    $("#header input[type=text]"wink.val($("#header ul li:eq(2)"wink.text());
});


​

I didn't finish the code, play with the code @ http://jsfiddle.net/delomos/rfRfY/6/ -- let's Q/A

(1) (Reply)

Can You Teach Me Programming In Sango-ota Area? / Android Developers Easy ADB Tool / Need Visual Studio

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 13
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.