ამ გაკვეთილში, ჩვენ განვიხილავთ ფანჯრის ობიექტის თვისებებს, რომელთანაც შეგიძლიათ მიიღოთ ბრაუზერის ფანჯრის სამუშაო გარემოს ფანჯრის ზომა, ფანჯრის ზომა (outerwidth და outerheight), მისი ადგილმდებარეობა ნათესავი მარცხენა ზედა კუთხე მომხმარებლის ეკრანი (Screenleft და Screenont) და Scroll დებულებები (Pagxoffset და Pagetyoffset).
Innerwidth და innerheight თვისებები
ისინი მიზნად ისახავს ბრაუზერის ხილული სამუშაო ადგილის ზომების მიღებას. ისინი. Innerwidth და InnerHeight თვისებები განკუთვნილია მიიღონ სიგანე და სიმაღლე ფართობი, რომელშიც HTML დოკუმენტი არის ნაჩვენები. ეს თვისებები კითხულობს მხოლოდ პიქსელებში მხოლოდ და დაბრუნების ღირებულებებს.
მაგალითად, ბრაუზერის ხილული სამუშაო ადგილის სიმაღლე და სიგანე მიიღე:
ხილული ხედვის სიგანე (Widthcontenarea):
ხილული ხედვის სიგანე (HearContenarea):
Outerwidth და outerheight თვისებები
ისინი განკუთვნილია მიიღონ მთელი ბრაუზერის ფანჯრის ზომა, ანუ. მათ შორის Toolbars, Scroll ბარი, სტატუსის ბარი, ფანჯრის საზღვრები და ა.შ. Outerwidth და OuterHeight თვისებები წაკითხული მხოლოდ და დაბრუნდა სიგანე და სიმაღლე ფანჯარა პიქსელებში.
მაგალითად, ბრაუზერის ფანჯრის სიმაღლე და სიგანე:
ბრაუზერის Windows Width (Widthwindow):
ბრაუზერის ფანჯარა სიმაღლე (ჰაიივინი):
თვისებები screenleft (screenx) და screenont (screeny)
ისინი მიზნად ისახავს მომხმარებლის ეკრანის ზედა მარცხენა კუთხეში ბრაუზერის ფანჯრის მარცხენა ზედა კუთხის კოორდინატებს.
ამ შემთხვევაში, screenleft და screentop თვისებები მუშაობს Internet Explorer- ში და Mozilia Firefox- ში Screenx და Screeny- ის თვისებები. -ში chrome ბრაუზერები, Safari და სხვა მსგავსი ბრაუზერები შეიძლება გამოყენებულ იქნას როგორც screenleft და screenont- ის თვისებები და Screenx და Screeny- ის თვისებები.
ამ თვისებების გამოყენებისას აუცილებელია იმის გათვალისწინებით, რომ ზოგიერთ ბრაუზერს შეუძლია დააბრუნოს დოკუმენტის მარცხენა ზედა კუთხის კოორდინაცია და ზოგიერთი ბრაუზერი კოორდინაციას უწევს ფანჯრის ზედა მარცხენა კუთხეში. Screenleft Properties (Screenx) და Screencont (Screeny) წაკითხული მხოლოდ და დაბრუნდა მანძილი ღირებულებები მარცხენა კუთხეში ჰორიზონტალურად და ვერტიკალურ პიქსელებში.
მაგალითად, კოორდინაციის X- ის გაგზავნა და ეკრანის ზედა მარცხენა კუთხეში არსებული ბრაუზერის ფანჯრის (დოკუმენტის) მარცხენა კუთხეში:
გაეცანით კოორდინატებს
PageXoffSet Properties (Scrollx) და Pagetyoffset (Scrollx)
ისინი მიზნად ისახავდნენ რიგი პიქსელების მიღებას, რომელსაც დოკუმენტი ჰორიზონტალურ (Pagneffset) ან ვერტიკალურ (Pagetyoffset) მიმართულებით ფანჯრის შედარებით ზედა მარცხენა კუთხეში. თვისებები scrollx და scrolllly არიან ეკვივალენტები მიხედვით თვისებები pagexoffset და pagetyoffset. ეს თვისებები მხოლოდ წაკითხული.
მაგალითად, პიქსელების რაოდენობის გამოვლენა, რომელსაც დოკუმენტი ჰორიზონტალურ (PageXoffset) და ვერტიკალური (Pagetyoffset) მიმართულებით აკონტროლებდა.
ვისწავლოთ Scroll Bar- ის პოზიციები
გამარჯობა! ამ გაკვეთილში თემის გაგრძელებისას, ჩვენ განვიხილავთ ისეთ კითხვას, როგორც ვებ-გვერდის სენსორული და მანიპულირება ბრაუზერის ზომებს. როგორ შემიძლია ბრაუზერის სიგანე? როგორ გადაახვიეთ JavaScript ვებ გვერდი? ამ კითხვებზე პასუხები მე ვფიქრობ, რომ თქვენ იპოვით ამ გაკვეთილს.
ბრაუზერის ფანჯრის სიგანე / სიმაღლე
ელემენტის კლიენტის / სიმაღლის თვისებები მხოლოდ ხილული ფანჯრის სიგანე / სიმაღლეა.
არა window.innerwidth / სიმაღლე
უნდა აღინიშნოს, რომ ყველა ბრაუზერი, გარდა IE8- ით, ასევე შეუძლია ხელი შეუწყოს ფანჯრის თვისებებს .ინერნერვის / ინერჰეშის თვისებები. ისინი დაზოგავთ მიმდინარე ფანჯრის ზომას.
Რა არის განსხვავება? თქვენ სთხოვეთ. ეს, რა თქმა უნდა, პატარა, მაგრამ ძალიან მნიშვნელოვანია.
კლიენტის / სიმაღლის თვისებები, თუ არსებობს Scroll ბარი, დაბრუნების სიგანე / სიმაღლე შიგნით, ხელმისაწვდომი მთელი დოკუმენტი და window.innerwidth / სიმაღლე - იგნორირება მისი ყოფნა.
Თუ მარჯვენა ნაწილი გვერდები გადაღება გრაგნილი ბარი, მაშინ ეს ხაზები ამოიღებს სხვადასხვა რამ:
Alert (window.innerwidth); // ყველა სრული alert ფანჯარა სიგანე (document.documentelement.Clientwidth); // სიგანე ნაკლები გადახვევა
როგორც წესი, ჩვენ მხოლოდ დაინტერესებულია ხელმისაწვდომი ფანჯრის სიგანე, მაგალითად, რაღაც, რაც არის, მინუს გრაგნილი ბარი. აქედან გამომდინარე, ხშირად გამოიყენება დოკუმენტაცია. Clientwidth ხშირად გამოიყენება.
ვებ გვერდის სიგანე / სიმაღლე ანგარიშზე
დიახ, თეორიულად, გვერდების თვალსაჩინო ნაწილი არის დოკუმენტური სისტემა. ClientWIDTH / სიმაღლე, მაგრამ სრული ზომა გათვალისწინებით Scroll Bar არის ანალოგია, doogalelement.scrollwidth / scrollheight.
ეს მართალია ყველა ჩვეულებრივი ნივთისთვის.
მაგრამ ამ თვისებებთან გვერდზე, შეიძლება იყოს პრობლემა, როდესაც სენსორული არის, მაშინ ეს არ არის. ამ შემთხვევაში, ისინი არასწორად მუშაობენ. მე უნდა ვთქვა, რომ Chrome / Safari და Opera Browsers, არარსებობის scroll ბარი, ღირებულება dupporelement.Scrollheight ამ შემთხვევაში შეიძლება იყოს ნაკლები დოკუმენტური %.ClientHeight, რომელიც, როგორც ჩანს, რაღაც არ ლოგიკური
ეს პრობლემა შეიძლება მოხდეს სპეციალურად დოკუმენტაციისთვის.
მაგრამ შესაძლებელია საიმედოდ განსაზღვროთ გვერდი, რომელიც ითვალისწინებს გადახვევას, უბრალოდ ამ რამდენიმე თვისების მაქსიმუმს:
Var scrollvisota \u003d math.max (document.body.scrollvisota, document.documentelement.scrollheight, document.body.offsetvisota, document.documentelement.offsetheight, document.body.clientvisota, document.documentelement.clientHeight); Alert ("სიმაღლე, გათვალისწინებით scroll:" + Scrollvisota);
მიმდინარე გადახვევის მოპოვება
თუ ჩვეულებრივი ელემენტის აქვს მიმდინარე სენსორული scrollleft / scrolltop.
რაც შეეხება გვერდს?
ფაქტია, რომ ყველაზე ბრაუზერები სწორად აკონტროლებენ დოკუმენტალურენანსს. Scrolllell / Top შეკითხვა, თუმცა, Safari / Chrome / Opera- ს შეცდომები აქვს, რადგან დოკუმენტი უნდა გამოიყენოთ.
კარგად, რათა მთლიანად გვერდის ავლით ეს პრობლემა, შეგიძლიათ გამოიყენოთ ფანჯრის თვისებები. PageXoffset / Pagetyoffset:
Alert ("მიმდინარე სენსორული ზემოთ:" + window.pageoffset); Alert ("მიმდინარე სენსორული მარცხნივ:" + window.pagexoffset);
ეს ყველა თვისება:
- IE8 არ არის მხარდაჭერილი.
- მათ შეუძლიათ მხოლოდ წაიკითხონ, მაგრამ შეუძლებელია შეცვალოს.
თუ IE8 არ არის შეშფოთებული, მაშინ ჩვენ უბრალოდ ამ თვისებების გამოყენება.
Cross-Browser Version ერთად IE8 უზრუნველყოფს ვარიანტი დოკუმენტური%:
Var scrollltop \u003d window.pageyoffset || document.documentelement.scrolltop; გაფრთხილება ("მიმდინარე გრაგნილი:" + Scrolltop);
Scroll შეცვლა გვერდი: Scrollto, Scrollby, Scrollintoview
იმისათვის, რომ გადაახვიოთ გვერდი JavaScript- ის გამოყენებით, ეს ყველაფერი უნდა იყოს სრულად დატვირთული.
Scrolltop / Scrollleft- ის ჩვეულებრივი ელემენტების შესახებ, პრინციპში, შეგიძლიათ შეცვალოთ და ამავე დროს საქონელი გადაახვიოს.
არავის არ აწუხებს თქვენ ისევე და გვერდზე. ყველა ბრაუზერში, გარდა Chrome / Safari / Opera, თქვენ შეგიძლიათ გადახვიდეთ მარტივი ინსტალაციის დოკუმენტით. ყველაფერი კარგად იმუშავებს.
მაგრამ არსებობს კიდევ ერთი, უნივერსალური გამოსავალი - სპეციალური მეთოდები გადაახვიეთ გვერდები window.scrollby (x, y) და window.Scrollo (Pagec, Pageang).
- Scrollby (X, Y) მეთოდი გადაახვიოს მისი ამჟამინდელი კოორდინატებით.
- Scrollto (Pagex, Paget) Scrolls გვერდზე მითითებული კოორდინატები მთელი დოკუმენტის შესახებ. ეს იქნება ექვივალენტი scrolllelft / scrolltop თვისებების ინსტალაცია. დოკუმენტის დასაწყისში გადახვევა, შეგიძლიათ მიუთითოთ კოორდინატები (0.0).
scrollindoview.
Elem.scrolllintoview მეთოდი (TOP) უნდა მოუწოდოს ელემენტს და გადააადგილეთ გვერდზე ისე, რომ ელემენტი არის ზედა, თუ ზედა პარამეტრი არის ჭეშმარიტი, და ბოლოში, თუ ზედა ტოლია ყალბი. უფრო მეტიც, თუ ეს ყველაზე პარამეტრი არ არის მითითებული, ეს იქნება ჭეშმარიტი.
აკრძალვა გადახვევა
არსებობს სიტუაციები, როდესაც აუცილებელია დოკუმენტის "არასამთავრობო გაანადგურა". მაგალითად, როდესაც დიდი დიალოგური ფანჯარა გამოჩნდება დოკუმენტზე, ისე, რომ სტუმარს შეუძლია ამ ფანჯარაში გადაახვიოს, მაგრამ არა დოკუმენტი.
იმისათვის, რომ კრძალავს სენსორული გვერდს, საკმარისია დოკუმენტის გადაცემისას. Body.Style.Overflow \u003d "ფარული" ქონება.
დოკუმენტის ნაცვლად. შეიძლება იყოს ნებისმიერი ელემენტი, რომლის სენსორული უნდა იყოს აკრძალული.
მაგრამ ამ მეთოდის არახელსაყრელი ის არის, რომ თავად გრაგნილი ბარი გაქრება. თუ მან ოკუპირებული ზოგიერთი სიგანე, მაშინ ეს სიგანე გათავისუფლებულია და გვერდის შინაარსი გაფართოვდება, ტექსტი "ნახტომი", ვაკანტური ადგილის აღებისას.
შედეგები
- ფანჯრის ხილული ნაწილის ზომის მისაღებად ქონებას იყენებს: Document.Documentelement.clientwidth / სიმაღლე
- Scroll Bar- ის ზომის გათვალისწინებით უნდა იქნას გამოყენებული: var scrollheight \u003d math.max (document.body.scrollheight, document.documentelement.scrollheight, document.body.offsetheight, document.documentelement.offsetheight, document.body.cliodeHeight , document.documentelement .ClientHeight);
ინტერფეისების განვითარებისას საიტებზე ხშირად იყენებთ JavaScript- ს. რა თქმა უნდა, ეს ცუდია, მაგრამ ზოგიერთ სიტუაციაში უბრალოდ შეუძლებელია ყველაფრის განხორციელება CSS- ზე.
ყველაზე ტყვე მჭირდება ჩემთვის ბრაუზერის ფანჯრის სიგანე ან სიმაღლის განსაზღვრა შემდგომი მანიპულაციებისათვის. ამ თემის შესახებ ყველა ინფორმაციის ქვეშ.
სად შეიძლება მოსახერხებელი?
მე არ ვსაუბრობ ყველასთვის, მაგრამ მე შთაბეჭდილება მოახდინა მეპატრონთან ერთად Textpattern- თან ერთად ყველა სახის გალერეა, სლაიდერები და ა.შ., სადაც ყველაფერი დაწერილია Pure JS- ზე. რამ, რაც მჭიდროდ მიბმული JS იშვიათია, მაგრამ მაინც შეხვდა, ასე რომ ეს შენიშვნა გამოჩნდა.
შეგიძლიათ განსაზღვროთ 2 გზა: JS ან jQuery.
სიგანე ან სიმაღლის განსაზღვრა სუფთა JS- ის გამოყენებით
ეს არის ყველაზე სასურველი გზა, რადგან JavaScript ძრავა თითქმის ყველა თანამედროვე ბრაუზერი. მაშინაც კი, მობილური ბრაუზერები კი ისწავლეს მუშაობა JS.
რა თქმა უნდა, არსებობს შესაძლებლობა, რომ მომხმარებელი გადალახოს ბრაუზერში JS- ის დამუშავების გამორთვა, მაგრამ მეჩვენება, ასეთი "უცნაური ხალხი" არ არის იმდენად, რადგან თითქმის ყველა საიტი იყენებს JS- ზე.
JS- ში, რათა დადგინდეს ეკრანის ზომებითქვენ უნდა გამოიყენოთ ფუნქციები:
Screen.width // ეკრანის სიგანე ეკრანი
აქ არის უაზრო მაგალითი:
თუ თქვენ გამოიყენებთ მას პოზიციონირების ზოგიერთი ელემენტი გვერდზე, მაშინ უკეთესი გადაწყვეტილება გამოიყენებს ეკრანის ზომებს, მაგრამ ბრაუზერის ფანჯარა ზომები. JS- ში ეს ასეა:
Document.body.clientwidth // ბრაუზერის სიგანე document.body.clientHeight // ბრაუზერის სიმაღლე
შესაბამისად, აქ არის უაზრო მაგალითი:
განმარტება ბრაუზერის ზომის გამოყენებით jQuery
პირადად, მე გამოვიყენებ მეთოდს, რომელიც აღწერილია ქვემოთ. ეს მეთოდი მხოლოდ იმ შემთხვევაში, თუ თქვენ ადრე უკავშირდება jQuery ბიბლიოთეკა საიტზე. ყველა საიტებზე, რომ მე უნდა გავაკეთოთ ეს ბიბლიოთეკა არის სტანდარტული de / infact.
ჩვენი JQuery- ის ამოცანისთვის გამოიყენეთ კოდი:
$ (ფანჯარა) .width (); // ბრაუზერის სიგანე $ (ფანჯარა) .მისი (); // ბრაუზერის სიმაღლე
და ბოლოს მინდა ვთქვა, რომ თუ შესაძლებელია გარეშე JS და jQuery ზოგადად ან ნაწილობრივ, მაშინ აუცილებელია იმოქმედოს.
გითხრათ სოციალურ. ქსელები
რა არის საჭირო ეს? მაგალითად, ჩვენ გვყავს ლამაზი განლაგება საიტი, რომელიც ყველა მისი სილამაზის ექსპონატები მხოლოდ მაშინ, როდესაც გადაწყვეტა, ამბობენ, 1600 თითო 1200. მაგალითად, მას აქვს ძალიან დიდი ლამაზი ქუდი. რა მოხდება, თუ ადამიანი მიდის საიტზე 1024-დან 768 რეზოლუციაში? დიახ, მხოლოდ ქუდი გამოჩნდება. Არ არის კარგი? Ალბათ. მაშინ რატომ არ გააკეთოთ ისეთი რამ, რომ როდესაც ბრაუზერის სიმაღლე / ეკრანი, ქუდი უბრალოდ შეწყვიტა და წავიდა მენიუში და დანარჩენი საიტი? რა არის საჭირო.
სინამდვილეში, მე აღვნიშნე ერთ-ერთი მაგალითი, რომელიც პრაქტიკაში მე მქონდა (იხ. კარტიგინკკა). პრობლემის მოგვარება უბრალოდ - JavaScript- ის მეშვეობით. და იქნებ მეშვეობით jQuery, მე არ მახსოვს. მე აღწერს ორივე მეთოდს.
უპირველეს ყოვლისა აუცილებელია განსაზღვროს განმარტება " Ეკრანის გარჩევადობა"და" ბრაუზერის ფანჯრის ზომა"(რადგან ზოგიერთ სტატიაში იყო ინციდენტები - მარტოხელა მეთოდები, მათ სთავაზობდნენ სხვები, თუმცა ერთ შემთხვევაში მე გავზომოთ ბრაუზერის რეზოლუცია, მეორე - მონიტორის რეზოლუცია).
აუცილებელია თავიდან იქნას აცილებული თავიდანვე, რომ ეს თქვენთვის უფრო მნიშვნელოვანია. მაგალითად, მაგალითად, ეკრანის რეზოლუციაზე (მონიტორი): ყველა იგივე, საიტი არის ლამაზი, თუ ბრაუზერის ფანჯარა მცირდება ხელით, მაშინ ბრაუზერი დაიწყოს, როდესაც ამ საიტის ნახვა (არაფერია ჭამა დაახ.). მაგრამ, მაგალითად, გალერეის გაფართოებული სურათის შესაცვლელად jquery lightbox ბრაუზერის სიგანე და სიმაღლე გამოვიყენე.
და მას შემდეგ, რაც თქვენ არჩეული, დაწერეთ კოდი, შეგიძლიათ სათაურში საიტზე. პირველი, მაგალითად ორიენტირებული ეკრანის გარჩევადობა.
3-6 ხაზი - სუფთა JavaScript, 7-11 ხაზი - მაგალითად jQuery. სიგანე და სიმაღლის განსაზღვრა javaScript მეთოდები Screen.Width და Screen.Height. რა რიგები გააკეთებს, ნათელია: პირველი სკრიპტი განსაზღვრავს გზას დამატებით cSS ფაილიდა სხვა - ბლოკის მთლიანი იდენტიფიკატორი აყენებს cSS ქონება "ფონის პოზიცია".
ჩვენ ვნახავთ მეორე მაგალითს, მაგრამ რაც ყურადღებას გაამახვილებს ბრაუზერის რეზოლუციაზე. ყველა იგივე, მეთოდები შეიცვალა.
ასე რომ, ორი მაგალითიდან მოკლე მიმოხილვა - რა უნდა გამოიყენოთ:
- screen.width. განსაზღვრავს ეკრანის სიგანე (მონიტორი).
- screen.Height. განსაზღვრავს ეკრანის სიმაღლე (მონიტორი).
- document.body.clientwidth.. განსაზღვრავს ბრაუზერის სიგანეს.
- document.body.clientHeight. განსაზღვრავს ბრაუზერის სიმაღლეს.
- $ (ფანჯარა) .ვიდი (). განსაზღვრავს ბრაუზერის სიგანე, მაგრამ მხოლოდ იმ შემთხვევაში, თუ თქვენ გაქვთ jQuery.
- $ (ფანჯარა) .მისი (). განსაზღვრავს ბრაუზერის სიმაღლე, მაგრამ მხოლოდ იმ შემთხვევაში, თუ თქვენ გაქვთ jQuery.
ნათელია, რომ თუ თქვენ იყენებთ jQuery, სასურველია 5 ვარიანტი, ვიდრე 3, და 6, ვიდრე 4 - ისინი მოკლეა. კარგად, და ასე - გემო და ფერი.
რაც შეეხება კონკრეტულ სიმაღლე ჩანაწერებს და ეკრანების სიგრძეზე, მაშინ, სინამდვილეში, მე არ ვიცი მათ. თეორიულად, ტიპის 5-6 რიგის დიზაინი უნდა იყოს, მაგრამ რატომღაც ეს არ იყო პრაქტიკაში, მე მომეცი, ისინი არ არიან. დიახ, და არ არის საჭირო, ეკრანზე. ეს არის მოკლე საკმარისი დიზაინი, საკმარისია.
დიახ, ჯერ კიდევ $ (დოკუმენტი) .დატი () - განსაზღვრავს სიგანე HTML დოკუმენტი. პრაქტიკაში გამოყენება - რატომღაც საეჭვოა. ვინ იცის - მოხარული ვიქნები, თუ თქვენ გაზიარებთ.
დღეს ყველაფერი! შეინახეთ შაბათ-კვირას და მასიურად წასვლა ქაბაბებზე! (თუ არ ხართ ავადმყოფი რაღაც მსგავსი - დაახლოებით.). Წარმატებები!
