www.webdeveloper.com
Results 1 to 9 of 9

Thread: jquery on my website

  1. #1
    Join Date
    Jan 2014
    Posts
    2

    jquery on my website

    Hi everyone
    for a beguinner who wants to put javascript and jquery on his website, by what part will i start?
    i knw html5 and css3 and i can build the site with those but i want to make it responsive and dynamic. Please someon can help me?
    thx

  2. #2
    Join Date
    Jun 2009
    Posts
    18
    Oww, you are at the very beginning
    http://www.w3schools.com/ This site has very useful tutorials and live demos for your needs. Make some reading and come back later, agan
    Last edited by Flashbond; 01-30-2014 at 07:18 AM.

  3. #3
    Join Date
    Jan 2014
    Posts
    2
    thx very much
    I know this site. do you think i need to know all the tags on javascipt to start jquery or which tag is more important.
    I start my project on monday and I hope to finish it at the en of February.

  4. #4
    Join Date
    Jun 2009
    Posts
    18
    OK, I'll give you the most useful parts. I will get it from the very basic.

    Now, HTML tag nearly does nothing, it is very standard, we may skip it. It is nearly the same the same everywhere. It is just a tag to declare it is a html document. Only in html5 you have to declare it as <!doctype html> on the very top. Html5 is not a seperate format. It is still a html page but a new standart for browsers which allows different transitions and effects. At this point, I highly recommend you to move to other softwares with easy-to-use interfaces şf you don't want to deal with all these coding things. If you don't want to deal with these things then go to Adobe page and try Muse, directly. It is the easiest way to make parallax scrolling and other effects.

    <title> is the name of your page. I am skipping <meta> data tag because it is useless in modern browsers.

    After this point there are two main tags. <head> and <body>. <head> tag includes your styles. There are two ways to do it. First, open a <style> tag under <head> tag and you may fill it in css format. Second way, you can prepare a seperate css file ie. sytle.css and give a link to it in <head> tag. ie. <link rel="stylesheet" type="text/css" href="style.css"/>. Again you write the text file in css format. It is a better method because long css formattings may cause lags onload if you embed the whole thing into html file.

    <body> is your main stage. Everything within <body> will appear on screen. The main element to arrange webpage content is <div> which is the framework of modern table-less browsing.

    It mainly gets two attribute: class and id. These are important to organize them later. Let's make a basic <div> structure.

    HTML Code:
    <div class="container" id="one">
    
    <div class="containerpart" id="one" style="padding:20px;">
    Some text or image.
    </div>
    
    <div class="containerpart" id="two">
    Some other text or image.
    </div>
    
    </div>
    Now we have a big container div includes two parts made of other divs. If you want a second container it may get an id number "two" and fill it with many div parts as you like. Most browsers renders divs in squence which means if these two containerparts conflicts then the second div will be over the first one because it is the last one-rendered. Don't forget, class and id names must start with a alphabetic character. Also you may write some css style right in to div tag as I gave 20px padding to the first containerpart.

    Before closing the <body> tag you should declare your javascripts. You may write it just like css.
    First way, you may write your own javascript code in js language between <script> tags. Second way, is to give a link like to javascript file which is written in javascript language. ie. <script src="jQuery.js"></script>. Again the second way is better because, jQuery for instance, is a very long script which is not practical to embed in html page.

    Html coding is mostly nothing more than this. Also keep in mind that you may open new <style> or <script> tags with in the <body> again and again as following your needs.

    In most samples you'll see jQuery has an online link but you may download file and give a local link. jQuery is basically a library of events and methods. It hasn't got much more different functions than javascript but allows you to write easier in most cases.

    Let's make an example. Say you have a js file which will include your functions. In pure js you should write something like that to change our container's height:
    Code:
    document.getElementsByClassName("container").style.height="100px";
    But jQuery allows you to write it in a easier way:
    Code:
    $(".container").css("height","100px");
    Another example for click event; in pure js you say:
    Code:
    document.getElementById("two").onClick=alert('Yeah!');
    but in jQuery:
    Code:
    $("#two").click(function() {=alert('Yeah!');});
    $ sing indicates you are going to use jQuery. '.'(dot) is a class selector as we are going to use in css. And becareful, javascript is case sensetive, even jQuery!

    Css is the most fun part for me. Let's declare some values for our divs:
    Code:
    div           {bacground:red;}
    .container {width:100px;
                     heignt:100px;}
    #two        {transform:rotate(90deg);
                     -webkit-transform:rotate(90deg);
                     -moz-transform:rotate(90deg);
                     -o-transform:rotate(90deg);}
    .container div {width:100%;
                          heignt:100%;}
    Now, let's look what we have done so far. You have to read carefully after this point to get the whole vital stuff!
    If you use only element tag name without any indicator like "div", it means we've selected the all divs on the page and set the background color of all divs you see to red.
    '.'(dot) is the calss indicator. It means you selected the divs which contains that classname. We set our container divs dimensions to 100x100px.
    '#'(hash) is the id indicator. We select the all divs contains "two" id. In this case we have only one. If you want to imply especially the one in this container, then you must say .container #two {...
    We rotated that div by 90 degrees but I wrote it several times with different prefixes for Chrome(webkit also for ios Safari), Mozilla and Opera in the given order. Because different browsers renders some operations differently. Most properties are common like height or width but some are not common. Even some doesn't exist for some browsers. For example, IE doesn't support transfom-style: preserve-3d; property. So, if you find out something doesn't work on some browsers, then it is most likely because of that
    .container div means, we selected all the div elements under .container and sized them to fill the main container 100%. We could also say .container .containerpart which would be the same thing in our example.

    If we should go back to our jQuery example, thats why we'd said $(".container"). You may say $("div") or $("#one") or $(".container div") as just like we did in css.

    These are the all basics. Ofcourse you have waaay much to go. I hope it will help you.
    Now, here is a sandbox for you: http://jsfiddle.net/m8XN5/
    There are different sites like GitHub or codepen similar to jsfiddle. It includes jQuery already as you'll see on the left pane. The screen is seperated into three parts, body, css and javascript. It acts like you've already embedded your code into your html file or gave links as I told you before.

    Feel free to ask anything.


    Good luck!
    Last edited by Flashbond; 01-30-2014 at 09:18 AM.

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648

    Thumbs up

    Flashbond, respect!
    Last edited by Padonak; 01-30-2014 at 11:08 AM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    Jun 2009
    Posts
    18
    Thanks, Padonak. Sorry for some typos, I was in a hurry and English is not my mother tounge.

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Quote Originally Posted by Flashbond View Post
    ...and English is not my mother tounge.
    the same story here )) greetings from Russia )))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    Jun 2009
    Posts
    18
    Zdrasvite from Istanbul ))

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,311
    We have a JQuery forum, please use it, you will find it in the JavaScript frameworks form.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles