• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Próba umieszczenia canvas w tym samym miejscu co div

VPS Starter Arubacloud
+1 głos
204 wizyt
pytanie zadane 18 kwietnia 2019 w JavaScript przez Kubs Mądrala (5,190 p.)

Witajcie,

próbuje umieścić canvas w tym samym miejscu co div, ale coś tu nie gra. Canvas wyświetla się zaraz pod divem.

//przeźroczysty div

         var div = document.createElement("div");
            div.style.width = "500px";
            div.style.height = "500px";
            div.style.background = "red";
            div.style.opacity = .5;


            document.getElementById("main").appendChild(div);


         //tworzenie canvas i umieszczenie go w tym samym miejscu co <div
         var canvas = document.createElement('canvas');
            canvas.id     = "myCanvas";
            canvas.width  = 500;
            canvas.height = 500;
            canvas.style.border   = "1px solid";

            document.body.appendChild(canvas);

 

komentarz 18 kwietnia 2019 przez mitelak Pasjonat (23,330 p.)

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning
Polecam poczytać o pozycjonowaniu ogólnie, a w tym przypadku o pozycjonowaniu absolutnym ;) Dodatkowo, dlaczego diva dodajesz do czegoś z id main, a canvas do body? 

komentarz 18 kwietnia 2019 przez Kubs Mądrala (5,190 p.)
Ok, dziekuje, przeczytam.

Co do tego 'main' to po prostu w <body> mam `<div id="main"></div>` stąd potem to `document.getElementById("main").appendChild(div);`

No wlasnie a jaka jest roznica miedzy tym

`document.getElementById("main").appendChild(div);`

a

`document.body.appendChild(canvas);`

Cos chyba juz miesza mi sie za bardzo :)
komentarz 18 kwietnia 2019 przez mitelak Pasjonat (23,330 p.)

https://developer.mozilla.org/pl/docs/Web/API/Element/appendChild

Po prostu jest to element, do którego środka na końcu dorzucasz kolejny element. 
Pierwsza opcja wstawi Ci div do środka diva z #main, a druga wstawi Ci canvas na końcu body.

 

komentarz 18 kwietnia 2019 przez Kubs Mądrala (5,190 p.)
Dzięki, czyli te dwie linijki mają sens w tym moim kodzie czy raczej są zle napisane?
1
komentarz 18 kwietnia 2019 przez mitelak Pasjonat (23,330 p.)
To zależy ;) Co chcesz dokładnie osiągnąć i dlaczego w ten sposób.
komentarz 19 kwietnia 2019 przez Kubs Mądrala (5,190 p.)

Wlasnie to chce osiagnac, a dokladnie punt 3, czyli umieszczenie jednego zdjecia w tym zoltym ksztalcie. Po nacisnieciu na zdjecie otworzy sie to tak, jak w punkcie  4.

Proces tworzenia w pozostalych punktach.

 

1 odpowiedź

0 głosów
odpowiedź 19 kwietnia 2019 przez Ajver Bywalec (2,430 p.)

Jeśli chcesz położyć je na sobie, to łatwiej będzie, jeśli wrzucisz je do jednego kontenera, np. diva o id "main".

Akurat odradzam stylowanie przez JS, lepiej przez JS dodać klasę do poszczególnych elementów w taki sposób:

// Gdy stworzysz zmienne div i canvas

div.classList.add('div-under-canvas')
canvas.classList.add('canvas-on-my-website')

Więcej o klasach dodawanych przez JS poczytasz tu: https://developer.mozilla.org/pl/docs/Web/API/Element/classList

A na koniec wrzucisz je do jednego kontenera pozycjonując canvas absolutnie, jak proponowali moi poprzednicy :)

 

W css możesz je sobie wystylować tak samo, jak chciałeś to zrobić w JS, tylko po klasach:

.canvas-on-my-website,
.div-under-canvas {
  width: 500px;
  height: 500px;
}

.canvas-on-my-website {
  border: 1px solid;
}

.div-under-canvas {
  background-color: red;
  opacity: .5;
}

Nie jestem w 100% pewien, że ten kod działa, bo piszę go z głowy (bez sprawdzenia). Jak coś, to jeszcze go poprawię, gdyby gdzieś był błąd :)

(Nie napisałem jak pozycjonować absolutnie - to zostawiam Tobie ;) )

Zaznaczam, że możesz uzyskać taki sam efekt nawet jeśli wrzucisz te elementy do osobnych kontenerów, ale w przyszłości, gdy będziesz rozbudowywać stronę może to spowodować problemy (może się to rozjechać) i generalnie trudniej będzie Ci coś tam zrobić :)

Ale znów, jak napisał @mitelak to zależy od tego co chcesz osiągnąć. 

komentarz 19 kwietnia 2019 przez Kubs Mądrala (5,190 p.)
Witaj,

serdeczne dzięki za pomoc i wyjasnienie. Moglbys jeszcze zerknac na moj komentarz do postu @mitelaka ,tam zamiescilem co chce dokladnie osiagnac. Nie za bardzo wiem jak to zrobic.
komentarz 20 kwietnia 2019 przez Ajver Bywalec (2,430 p.)

Pamiętam, że ten poradnik pomógł mi nauczyć się pozycjonowania: https://www.youtube.com/watch?v=bOEmA3B1OBE

Generalnie ten kod JS, który zaproponowałem pozwoli Ci stworzyć strukturę, która będzie wyglądać mniej więcej tak:

<div id="main">
  <div class="div-under-canvas"></div>
  <canvas class="canvas-on-my-website"></canvas>
</div>

I teraz proponuję zrobić takiego css:

Niech div o id main ma position: relative (z filmiku dowiesz się dlaczego)

A canvas ma position: absolute

Jeśli canvas i div-under-canvas mają tę samą wielkość, to div-under-canvas rozciągnie rodzica (czyli div o id main), a canvas będzie na tym divie i będzie go przykrywać

 

Jeśli chodzi o sam żółty kształt, to najłatwiej będzie przygotować go sobie w programie graficznym (gimp / photoshop / etc.) i ustawić jako tło dla div-under-canvas właściwością background-image.

 

Można też zrobić tak, żeby się otworzył, gdy go wciśniesz. Czy to też chcesz zrobić?

komentarz 20 kwietnia 2019 przez Kubs Mądrala (5,190 p.)
Ok, te wskazowki brzmia dobrze. Moze dam rade :)

Tzn. ma otwierac sie po na cisnieciu tylko ten div ze zdjeciem w srodku i dynamicznie przechodzic w pozycje nr 4. Natomiast zolty ksztalt ma zostac nieruchomy.
1
komentarz 20 kwietnia 2019 przez Ajver Bywalec (2,430 p.)

Takie naciskanie i zmienianie się możesz zrobić np. w ten sposób:

1. wykrywając event przez JS: https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

2. Dodając do odpowiedniego elementu klasę css: https://developer.mozilla.org/pl/docs/Web/API/Element/classList


Generalnie podobną rzecz widziałem na tym tutorialu: https://www.youtube.com/watch?v=FhrNpYyyPlk

Miej na uwadze, że filmiki z kanału Kodu.je są już trochę stare i pewne rzeczy mogą być nieaktualne. Polecam Ci poszukać trochę nowszych kursów (dość dobrym źródłem wiedzy wydają się być kanały na YouTube: Samuraj Programowania i Hello Roman)

komentarz 20 kwietnia 2019 przez Kubs Mądrala (5,190 p.)
Super, sprobuje tak jak piszesz. W razie czego zglosze sie do Ciebie z zagwostka, jesli mozna.

Podobne pytania

–1 głos
0 odpowiedzi 321 wizyt
0 głosów
2 odpowiedzi 320 wizyt
0 głosów
0 odpowiedzi 233 wizyt
pytanie zadane 6 lipca 2021 w C i C++ przez Nekronomik Użytkownik (600 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...