WN - Div som man kan sätta vart som helst

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Div som man kan sätta vart som helst (https://www.wn.se/forum/showthread.php?t=1058968)

spyvingen

2013-08-29 15:15

Div som man kan sätta vart som helst

1 bifogad(e) fil(er)

Hej håller på att bygga ett schema som skall se ut typ som bilden.

Min tanke är att man bör kunna göra en div som man väljer vart den skall vara och hur stor den skall vara enbart med divar.

Så att jag bara i höjdled sätter diven på 100 och sedan plussar på 15 varje gång det skall läggas på en ny rad och varje div skall vara lika många pixlar bred som passaet är minuter och placering i horesontal läge skall vara antal pixlar från sidan som det är minuter mellan klockan 6 och tiden passet börjar.

Nån som fattar är inte så bra på att förklara.

Men om vi tar ett exempel jag har ett pass som börar 8 som skall visas på första raden och den skall vara en timme långt.

Då skall den vara 100 px från överkant och 120 minuter in i schemat (alltså 120px) och den skall vara 60px bred och sedan ett fast värde på 15 px som är höjden på varje rad.

Monkboll

2013-08-29 15:28

Sätt storleken med width, height....
position: fixed
top: antal pixlar från toppen
left: antal pixlar från vänster
i ditt fall:

width: 60px;
height 15px;
position: fixed;
top: 0px; //översta raden??
left: 120px;

Nått sånt kanske?

hnn	2013-08-29 15:36

Inte bättre att använda en Gantt-chart plugin?

Typ:
http://taitems.github.io/jQuery.Gantt/

spyvingen

2013-08-29 16:05

Monkboll : tack för tips skall labba lite och se om jag får ihop det :)

hnn : det ser ju riktigt bra ut men frågan är om jag för dum för att förstå hur jag skall putta in data i den och hur man konfar den :)
Behöver ha ner det i minut/kvart format med. OM du kollar bilden så er de fyrkantiga blåa en kvart. Ser bara ut som man kan komma ner på timme enligt det jag ser på den länken.

spyvingen

2013-08-29 16:50

Har fått ihop nu så jag kan sätta divar överallt.

Men jag har sedan tidigare en tooltip som vet fungerar med divar på ett annat ställe men får inte det att funka nu

html : http://pastebin.com/Cyf8Ezm1
tooltip.js : http://pastebin.com/sdYEe0JG

Kan nån se något som inte stämmer har som sagt detta på en annan sida och har gjort likadant.

spyvingen

2013-08-30 10:16

Hittade felet längst ner skulle det vara en osynlig div med :)

spyvingen

2013-08-31 07:41

Hsr fått ihop det nu med hjälp av divar :)
Tack för hjälpen.

Men nu när jag har placerat ut massa divar verkar mobiler inte fatta att divar finns där så det går inte att scroll för mobilen tror att den visar hela sidan redan.

Hur kan man lösa detta enklast?

jonas.o

2013-09-04 15:13

Kolla om du har en sådanhär rad

HTML-kod:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

mellan <head> elementen. I sådana fall kan du ta bort den. Så ska det funka.

Om inte så skicka gärna länken till sidan så kan vi nog hjälpa dig ännu mer.

allstars

2013-09-04 16:19

eller sätta en min-height på body

Alla tider är GMT +2. Klockan är nu 16:46.