jQuery | සරල jQuery වැඩ කිඩ

ඔන්න අපේ මලින්ත මලයත් දෙතුන් පාරක්‌ ම මතක්‌ කරපු නිසා හිතුන අද පොඩි jQuery වැඩ කෑලි ටිකක්‌ ලියන්න. jQuery ගැන කෙටි හැදින්වීමක්‌ සහ කෙටි ලිපියක්‌ මීට කලින් මම ලිව්වා. පහත සබැදි වලින් ඒවා බලන්න පුලුවන්.

jQuery javascript එකතුව ගැන කෙටි හැදින්වීමක්‌
jQuery එක්‌ක ලස්‌සන වෙන්න!
ඕනම element එකකට hover effect

අද අපි බලමු slide effect එකක්‌ කරන්නෙ කොහොමද කියලා.

උදාහරණය:

මගේ වෙබ් පිටුවේ ඉහල දකුණු කෙලවරේ contact me, click කර බලන්න. contact ෆෝරමයක්‌ පහලට එනු පෙනේවි. අද අපි හදන්න යන්නේ මීට සමාන දෙයක්‌.

අපි මුලින්ම පිටුවට toggle button එකක්‌ එකතු කරමු. මේ සදහා මම භවිතා කරන්නේ සාමාන්‍ය ලින්ක්‌ එකක්‌. මෙය වරක්‌ එබූ විට my_slide div එක පෙන්වීමටත් නැවත එබූ විට my_slide div එක නොපෙනී යාමටත් සකස්‌ කරමු.

html

<a href="#" class="my_button">show me the slide</a>

<div id="my_slide">
    <div id="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

css

#my_slide { 
    width:300px; 
    margin-top:20px; 
    background:#CDEB8B; 
    overflow:hidden; 
}

#container { 
    padding:20px; 
}

අලුත්ම jQuery සංස්‌කරණය jQuery.com වෙතින් ලබා ගන්නට පුලුවන්. එය ඔබේ පිටුවට අමුණූ පසු පහත පරිදි කේතය ලියන්න.

javascript

<script type="text/ecmascript">
$(document).ready(function(){
    $('#my_slide').hide();
    $('.my_button').click(function(){
        $('#my_slide').slideToggle('slow');
        return false;
    });
});
</script>

මෙහි $('#my_slide').hide(); මගින් my_slide, div එක සගවනවා. ඉතිරි පේලි වලින් කියන්නේ ලින්ක්‌ එක එබූ පසු my_slide, div එකට ස්‌ලයිඩ් වෙන ලෙසයි.

සබැදිය බලන්න

නැවත හමුවෙමු !

css | css කෙටියෙන් ලියමු !

css හිදී සමහර අවස්‌ථා වල අපට පේලි කිහිපයකින් ලියන දෙයක්‌ තනි පේලියකින් ලියන්නට පුලුවන්. මෙහි වාසි කිහිපයක්‌ තියෙනවා. ප්‍රධානම කරුන වන්නේ css ගොනුවේ ප්‍රමාණය (file size) අඩු වීමයි. මෙමගින් වෙබ් පිටු පරිශීලනය කරන විට ගොනු බාගත වීමට යන කාලය සැලකියයුතු ලෙස අඩු වෙනවා. තවත් කරුණක්‌ වන්නේ පසුව ගොනු වෙනස්‌ කිරීමට යාමේදී පහසුවෙන් අදාල අගයන් සොයාගැනීමට ඇති පහසුවයි.

padding

#myelement {
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
}

මෙම අගයන් හතරම තනි පේලියකින් ලිවිය හැකියි.මෙහි අගයන් යොදන්නේ දක්‍ෂිණාවර්තවයි. පලවෙනි අගය top-padding සදහාත් දෙවැනි අගය right-padding සදහාත් තුන්වෙනි අගය bottom-padding සදහාත් හතරවෙනි අගය left-padding සදහාත් යොදගන්නවා. එනිසා ඉහත පේලි හතර කෙටියෙන් මෙසේ ලියන්න පුලුවන්.

#myelement {
    padding:10px 20px 10px 20px;
}

මෙම උදාහරනයේ top-padding සහ bottom-padding දෙකම එක සමාන අගයක්‌. එලෙසම left-padding සහ right-padding සමාන අගයන්. එනිසා මෙය පහත පරිදි තවත් කෙටියෙන් ලියන්නට පුලුවන්. මෙසේ ලිවේම සදහා එකිනෙකට විරුද්ධ පැති වල අගයන් සමාන විය යුතුයි.

#myelement {
    padding:10px 20px;
}

margin

margin සදහාත් කෙටි ක්‍රම ඉහත padding පරිදිමයි.

#myelement {
    margin:10px 20px 10px 20px;
}

මෙමගින් කියවෙන්නේ top-margin, right-margin, bottom-margin, left-margin සදහා අගයන් පිලිවෙලින් 10px, 20px, 10px 20px වන බවයි.

background (පසුබිම)

#myelement {
    background-color: #356AA0;
    background-image: url("mybackground.jpg");
    background-position: top left;
    background-repeat: no-repeat;
}

background සදහා දීර්ඝ ක්‍රමය මෙවැනියි. මෙහි පසුබිම් වර්ණය, පසුබිම් රූපය, පසුබිම පිහිටවියයුතු ස්‌තානය සහ පසුබිම repeat වෙනවාද යන්න දක්‌වලා තියෙනවා.

එයම කෙටියෙන් මෙලෙස ලියන්න පුලුවන්.

#myelement {
    background:#356AA0 url("mybackground.jpg") no-repeat top left;
}

මේකෙදි මුල්ම අගය වෙන් වන්නේ පසුබිම් වර්නයට..ඊට පසු අගය පසුබිම් රූපය සදහා.. ඉතිරි අගයන් පිලිවෙලින් පසුබිම් රූපය repeat විය යුතු ආකාරය සහ පසුබිම් රුපයේ පිහිටීම පෙන්වනවා. මෙම පිහිටීම පික්‌සල් අගයකින් හෝ ප්‍රතිශතයක්‌ වශයෙනුත් ලබා දෙන්න පුලුවන්. 0 0 යනු ඉහල වම් කෙලවරයි. එලෙසම 0% 0% ඉහල වම් කෙලවරයි.

තවත් කෙටි මං ඉදිරියට !

පුලුවන්නම් විසදන්න - දෙවන කොටස

ඔන්න මේ පාර දානව ලේසි එකක්‌. පැල ගැන කතාවක්‌.

කතන්දරය

රුක්‌ රෝපන දිනය දවසෙ මට පැල හතරක්‌ හම්බුනා හිටවන්න. අපේ තාත්තා ගණන් සර්. මට අවිත් කියනවා පුලුවන් නම් ඔය පැල හතර එකිනෙකට සම දුරින් හිටවන්න කියල. මම කල්පනා කරල කරල කරල කරල කොහොමහරි වැඩේ කෙරුව.

ප්‍රශ්නය

මම කොහොමද පැල හතර එකිනෙකට සම දුරින් පැල කරේ ?

පුලුවන්නම් විසදන්න - පලමු කොටස - පිලිතුර

ප්‍රශ්නය

පුලුවන්නම් විසදන්න - පලමු කොටස

පිලිතුර

ඔන්න එහෙනම් මම දාන්නම් උත්තරේ පින්තූරයකුත් එක්‌ක.

පෘතුවිය ගෝලාකාරයි. මිනිස්‌සු විවිධාකාරයි. :D. මේ ගැටලුව විසදද්දි පෘතුවියේ ගෝලාකාර බව අනිවාර්යෙන් සැලකිල්ලට ගන්න ඕන. මධ්‍යහ්න රේඛා උතුරු පැත්තට යද්දි ලං වෙනවා. එනිසා රූපයේ පෙනෙන විදිහට ලෙනින්ග්‍රාද් වලට නැගෙනහිර දෙසින් තමයි හෙලිකොප්ටරය ගොඩබාන්නේ. ගොඩ බෑ ස්‌තානයේ සිට ගමන පටන් ගත් තැනට දුර අක්‍ෂාංශ දේශාංශ ඇසුරෙන් සොයන්න පුලුවන් :D
*පින්තූරෙ ගත්තෙ අර මම කියපු වයි. පෙරල්මාන් ගෙ රුසියන් ගනන් පොතෙන්

මුලින්ම නිවැරදි පිලිතුර දුන්නෙ චිරාන් මල්ලිට සුබපැතුම්. පස්‌සෙ නිවැරදි පිලිතුරු දීපු යාලුවන්ටත් මෙන්න සැනසිලි සුබපැතුම්. හික්‌. උත්සාහ කල සැමටත් ස්‌තුතියි.

තවත් ගැටලුවක්‌ ලගදීම බලාපොරොත්තු වන්න!

පුලුවන්නම් විසදන්න - පලමු කොටස

මම පොඩි කාලෙ ඉදන් ආස වැඩක්‌ තමයි ගණිත ගැටලු විසදන එක. අපේ බ්ලොගර් කට්‌ටිය එක්‌කත් බෙදාගන්න හිතුන. මුලින්ම මම අහන්න හදන්නෙ පරන රුසියන් ගණන් පොතක තිබ්බ ප්‍රශ්නයක්.comments වල උත්තරේ දාන්න. කාටවත් බැරි උනොත් ඉතින් මම දානව උත්තරේ හෙට (08).

කතන්දරය

ලෙනින්ග්‍රාද්* වල ඉදලා හෙලිකොප්ටරයක්‌ කෙලින්ම උතුරට කිලෝමීටර 500 ගියා. ඊට පස්‌සෙ නැගෙනහිර දිශාවට හැරිලා තවත් කිලෝමීටර 500 ගියා. ආපසු දකුනු දිශාවට හැරිලා තවත් කිලෝමීටර 500 ගියා. අන්තිමට බස්‌නාහිර දිශාවට කිලෝමීටර 500 ගිහින් ගොඩබෑවා.
* ලෙනින්ග්‍රාද් කියන්නේ රුසියාවේ ශාන්ත පීටර්ස්‌බර්ග් නගරයටමයි

ප්‍රශ්නය

හෙලිකොප්ටරය ගොඩබෑවේ කොහාටද ?

google එකේ කැත වැඩ

youtube එකේ දැන් හරියකට එකක්‌ බලාගන්න බෑ. This video is not available in your country කියල පනිවිඩයක්‌ එනව නේ. proxy අස්‌සෙ රිංගන්න ඕන ඒක බලන්න. එපා වෙනව

ඒ අස්‌සේ firefox එකේදි google toolbar එකේ gamil icon එක එබුවමත් එනව පනිවිඩයක්‌ chrome දාගන්න කියල (supported browser list එකේ උඩින්ම තියෙන්නෙ chrome) .පිටුව ආපහු refresh කලාම තමයි ඒක වැඩ කරන්නේ.

ඒත් ඉතින් අපි හැමදාම google ට අදරෙයි :D. google වලින් තොර ලොවක්‌ නැහැ නෙ දැන්