jquery on my website

@FlashbondJan 30.2014 — #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 ?

@rolkamauthorJan 30.2014 — #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.

@FlashbondJan 30.2014 — #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. [I]sytle.css[/I] and give a link to it in <head> tag. ie. [I]<link rel="stylesheet" type="text/css" href="style.css"/>[/I]. 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.

[code=html]<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>[/code]

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. [I]<script src="jQuery.js"></script>[/I]. 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";[/CODE]
But jQuery allows you to write it in a easier way:
[CODE]$(".container").css("height","100px");[/CODE]
Another example for click event; in pure js you say:
[CODE]document.getElementById("two").onClick=alert('Yeah!');[/CODE]
but in jQuery:
[CODE]$("#two").click(function() {=alert('Yeah!');});[/CODE]
$ 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%;}[/CODE]

Now, let's look what we have done so far. [B]You have to read carefully after this point to get the whole vital stuff![/B]

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 [I].container #two {...[/I]

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 [I]transfom-style: preserve-3d;[/I] property. So, if you find out something doesn't work on some browsers, then it is most likely because of that ?

[I].container div[/I] means, we selected all the div elements under .container and sized them to fill the main container 100%. We could also say [I].container .containerpart[/I] which would be the same thing in our example.

If we should go back to our jQuery example, thats why we'd said [I]$(".container")[/I]. You may say [I]$("div")[/I] or [I]$("#one")[/I] or [I]$(".container div")[/I] 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!

@PadonakJan 30.2014 — #[B]Flashbond[/B], respect!

@FlashbondJan 30.2014 — #Thanks, [B]Padonak[/B]. Sorry for some typos, I was in a hurry and English is not my mother tounge.

@PadonakJan 30.2014 — #...and English is not my mother tounge.[/QUOTE]

the same story here )) greetings from Russia )))

@FlashbondJan 30.2014 — #Zdrasvite from Istanbul ))

@rootJan 31.2014 — #We have a JQuery forum, please use it, you will find it in the JavaScript frameworks form.

jquery on my website

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

jquery on my website

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴