Udvikleren.dk - Seneste [css3] forum tr�de

K�bt template med JQ har sat mig helt af sporet.

Wed, 06 Jul 2016 13:38:35 GMT

Hej

Jeg har k�bt et Template, jeg virkelig pr�ver at forst� for at jeg kan rettet det til som �nsket, men jeg er desv�rre st�et helt af.

I kan se det her: http://www.dinnyhedsportal.com/testquiz/

Det skal forst�es som en quiz..

Det jeg fors�ger at at g�re er at p� side 4 i quiz'en. vil jeg have fjernet knapperne i bunden hvor man kan trykke n�ste og tilbage men istedet efter et hvis antal sekunder sende dem automatisk videre til side 5.. alts� p� side 4 st�r den og loader knapperne bliver fjernet og s� hopper den over p� side 5 selv.

Jeg er villig til at betale lidt for at f� den n�dvendige hj�lp til at f� det til at fungere..

H�ber der sidder en venlig sj�l der ude der er klar til at hj�lpe mig.

Mvh.

Styling a twitch chat

Sun, 17 Jan 2016 02:33:07 GMT

K�re udviklere,

Jeg sidder og roder med styling til et plugin, der viser twitch chatten for den kanal der er tilknyttet. Jeg bruger programmet OBS, og har derfor installeret CLR plugin'et. Dette er irrelevant for jer, da dette er et CSS sp�rgsm�l.

I dette plugin indtaster man url-adressen for twitch chatten, som er blevet vist af NightDev.

I dette CLR plugin har man mulighed for at style p� chatten, da det bliver afviklet som alm. html og css. Chatten har simple effekter som standard, lavet i javascript.

Eksempel p� en twitch chat, afviklet af NightDev: Link

Source Code:

HTML kode

 <div class="chat_line">
     <span class="time_stamp"></span>
     <span class="nick"></span>
     <span class="colon"></span>
     <span class="message"></span>
 </div>

Jeg vil gerne lave en lidt federe styling, ligesom livestreameren Trick2g har. Her har jeg optaget en lille bid af hans livestream. L�g m�rke til chatten i �verste venstre hj�rne: Link

Man har kun mulighed for at arbejde med CSS, s� mit sp�rgsm�l er om man kan lave den effekt i CSS som han har. Jeg har ingen mulighed for at tilg� javascript-delen, efter hvad jeg ved.

S� hvis der er nogle der har nogle fifs til hvordan jeg l�ser dette, s� er jeg lutter �re.

H�ber at det er uddybet nok :-)

Hj�lp med skift af farve

Mon, 30 Nov 2015 10:23:11 GMT

Hej alle sammen :-)

P� min hjemmeside billigmobilabonnement.dk har jeg 4 links i bunden som p� nuv�rende tidspunkt st�r med gr� skrift. Jeg �nsker gerne at g�re dem hvide i stedet for, ogs� n�r man k�re musen over at de evt. bliver den samme gr� farve.

Har ikke super meget forstand p� kodning, s� h�bede der var en venlig sj�l eller to herinde, der nemt kunne forklare mig hvordan det bedst og nemmest kunne klares :-)

P� forh�nd tak

Mvh

CSS3 animations variable

Mon, 13 Apr 2015 11:12:53 GMT

Hejsa

Jeg er ved at lave en dynamisk CSS3 animation til nogle dynamiske data.
Problemet kommer s� i den CSS3 animation der laves, fordi jeg kan bruge :nth-child til at lave en select p� hver x element, MEN kan ikke bruge den i data.

Problemet er at jeg ikke gider lave en CSS3 selector klasse til hver.

http://jsfiddle.net/L2xo2e7e/4/

Jeg har jo mulighed for at s�tte delay p� hver klasse via jQuery, men vil blot h�re herinde om det lyder som en god l�sning?
Er der en bedre/smartere m�de at l�se det p�?

------------------------------------------------

Har nu lavet l�sningen, s� den er dynamisk.
Den kan ses her: http://jsfiddle.net/L2xo2e7e/13/

Det l�kre i den er at fordi jeg ved hvor mange elementer der er i, s� kan jeg tilpasse l�ngden p� hele animationen til at passe s� det ligner den k�rer i ring.
0.2 sek pr. kasse x 11 kasser giver 2.2 sekundt, og har s� lagt 0.1 oveni (0.2 / 2) for at der bliver mellemrum fra sidste kasse til f�rste starter.
Nu er det s� jeg ogs� gerne vil lave den dynamisk, men er jo en CSS selector som ser s�ledes ud:
.bumpycontainer:hover .bumpyride-animation
{
-webkit-animation: bumpyride 2.3s ease-out forwards;
}

Er det muligt for mig at s�tte animation duration, nu n�r den er lagt p� hover? S� kan den laves ultimativt dynamisk s� den passer til uanset hvor mange elementer jeg f�r.

animation af element

Wed, 08 Apr 2015 08:13:29 GMT

Hejsa

Jeg har set p� f�lgende side: http://webthemez.com/preview/?john-bootstrap-one-page-html5-free-resume-template/

Hvor n�r man kommer ned i bunden til kontakt s� "flyder" alt flot til siden og kommer frem.

Har sv�rt ved at se hvordan det kommer frem, og er ikke sikker p� om det er jQuery der animerer noget eller CSS3 noget?

Nogen der kan hj�lpe?

Hj�lp med koding

Mon, 16 Mar 2015 11:07:53 GMT

Hej

Jeg sidder og laver p� en hjemmeside og ude i venstre side er der plads til et lille box, men n�r jeg inds�tter den s� rykker den resten som der skal v�re der ned og mit sp�rgsm�l er om man kan hvordan kode jeg den box til venstre uden at rykke p� noget p� hjemmesiden?

CSS3 animations input (del 2)

Sun, 09 Nov 2014 21:36:11 GMT

Hejsa

I forbindelse med den forrige tr�d jeg havde l�ste det mit problem.
Nu er sagen s� blot at jeg er st�dt p� et nyt problem i forbindelse med videreudviklingen.
Nu skal hver linie udvikle sig til en forskellig bredde, og s� er sp�rgsm�let s� hvordan det nemmest g�res?

Bruger ASP.NET MVC hvor hver linie har en %-sats som beregner bredden dynamisk for hver linie og s�tter den p� style.
Nu er sp�rgsm�let s� hvordan f�r jeg min css3 animation til at ende p� den beregnede bredde?
Har bredder der adskiller sig i % med 5% af gangen fra 75-100. Skal jeg s� lave en til 75, en til 80, en til 85 etc. til jeg n�r til 100 ? Er det den eneste m�de at g�re det p�?

CSS3 animations input

Thu, 06 Nov 2014 08:40:58 GMT

Hejsa

Jeg sidder og roder med en del CSS3 i �jeblikket og er ved for alvor at f� �jnene op ALLE de steder det kan lige g�re lidt for at f� noget aktivitet ind som g�r alt lidt mere sp�ndende.
Sidder derfor med et lille fors�g jeg har lavet for at udforske muligheder, og er nu st�dt p� et sted hvor mine evner bare ikke er gode nok indenfor CSS3 endnu.

Problemet er at jeg vil lave en dynamisk liste med indhold, som skal bev�ge sig forskelligt og give en effekt. Desv�rre kan jeg ikke finde ud af og give noget input videre til min animation, s� den ved hvilken start farve den skal have.
Derfor har jeg nu to animationer, hvilket jeg synes er helt til grin, og vil jo altid gerne optimere og g�re det mere effektivt.

S� er der nogen kloge hoveder der kan hj�lpe mig med at opdatere min kode s� jeg kan f� nogle flere parametre med ned i min animation, s� jeg kan n�jes med en enkelt metode.

Se min kode: http://jsfiddle.net/z9t86xb6/7/

Blev inspireret af (transitions og ikke animations): http://www.the-art-of-web.com/css/timing-function/

Link fungerer forkert med hover

Sun, 19 Oct 2014 16:01:55 GMT

Jeg har opdelt min navigation i 2 dele. En i h�jre og en i venstre. I venstre side st�r mine links opstillet i lister. Jeg vil have en effekt p�, s� n�r man k�rer musen henover linksne kommer min 'cl-effect-3' p�. Det g�r den skam ogs�, men den st�r forkert. Se billede herunder:
http://prntscr.com/4xoyot Det er den hvide streg der st�r ved siden af linket jeg holder over. Jeg vil have stregen til at st� under med en bredde som min tekst.
Min HTML kode ser s�ledes ud:

HTML kode

 <nav class="cl-effect-3">
 <div class="wrapper">
  <div id="left_menu">
   <h1>Navn</h1>
  </div>
  <div id="right_menu">
   <ul>
    <li><a href="index.php" title="HOME">HOME</a></li>
    <li><a href="about.php" title="ABOUT">ABOUT</a></li>
    <li><a href="gallery.php" title="GALLERY">GALLERY</a></li>
   </ul>
  </div>
 </div>
 </nav>

Og min CSS kode for links og lister s�dan:

CSS kode

 .cl-effect-3 a {
     float:left;
 }
 
 .cl-effect-3 a::after {
     position: absolute;
     top: 80%;
     width:50px;
     height: 2px;
     background:rgba(255,255,255,.30);
     content: '';
     opacity: 0;
     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
     -moz-transition: opacity 0.3s, -moz-transform 0.3s;
     transition: opacity 0.3s, transform 0.3s;
     -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
     transform: translateY(10px);
 }
 
 .cl-effect-3 a:hover::after,
 .cl-effect-3 a:focus::after {
     opacity: 1;
     -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
     transform: translateY(0px);
 }
 nav {
     width:100%;
     min-height:67px;
     max-height:67px;
     position:relative;
     background-image:url(../img/nav_bg.png);
     background-repeat:repeat-x repeat-y;
 }
 li {
     display:inline;
     list-style:none;
 }
 nav a {
     float:left;
     margin-right:20px;
     color:white;
     text-decoration:none;
 }

S�ger udviklingspartner til eksisterende firma

Tue, 29 Jul 2014 14:54:09 GMT

Jeg leder i �jeblikket efter en udviklingspartner for at tage min virksomhed til det n�ste niveau, fra N�stved, K�ge eller KBH omr�det da virksomheden befinder sig i K�ge, som har lyst til at tage denne udfordring sammen med mig. Udviklingspartneren skal prim�rt fungere som backend udvikler samt tovholder i samarbejdspartners udviklingsafdelinger.

Dette skal v�re en person som br�nder for det han / hun laver og som er indstillet p� at uddanne sig og v�re med p� teknologierne som de skifter. En som har interesse i at pr�ve nye ting og ikke bare altid g�r det de er bekvemt med, da vi ikke skal v�re dem som f�lger alle andre, men alle andre skal helst f�lge os. En som ikke g�r i st� ved et problem fordi de mener det ikke kan l�ses, men som igennem opfindsomhed, erfaring og trial and error finder en god l�sning.

Det skal v�re en person som ser design og udvikling med de samme �jne som mig, at kvalitet tager tid og den tid skal vi give os selv i de tilbud vi laver. Kvalitet og ikke kvantitet er det der f�r kunderne til at komme igen.

Kompetencer som han / hun skal besidde er f�lgende:
HTML5, CSS3, PHP, Sequle med erhvervserfaring, samt viden indenfor hvordan man system og database udvikler igennem udviklings metoder, for at overholde standarder samt den afsatte tid i projektstyringen.

Bonus kompetence, men ikke n�dvendige JavaScript.

Der bliver p� nuv�rende tidspunkt ikke givet fast l�n, men man f�r som partner en procentdel i virksomheden, hvor overskuddet deles ud fra denne procentdeling. N�r virksomheden f�r en st�rre oms�tning end nu, s� bliver der givet fast l�n og procentdelen bliver herefter en partnerbonus.

Udover at jeg s�ger denne udviklingspartner, skal det siges at jeg ogs� har en partner med henblik p� salg & reklame, og forh�bentlig har jeg snart et strategisk samarbejde med et andet bureau.

Lidt omkring mig selv
Efter flere �r i st�rre virksomheder hvor jeg har opbygget en solid viden inden for mit fag samt udviklet mig rent personligt, har jeg valgt jeg at det var p� tide at blive selvst�ndig. Da det er en dr�m jeg har g�et med i flere �r.

Mit firma laver det samme som s� mange andre, nemlig hjemmesider & webshops, prim�rt for virksomheder og iv�rks�ttere som allerede er kommet galt afsted med en leverand�r. Her har jeg s�rlig fokus p� det tekniske design imellem AWD, RWD, Gracefull Degradation, Progressive Enhancement, EER & RDS, s� der skabes en solid og velgennemt�nkt platform som jeg kan arbejde ud fra.

Grunden til at jeg har valgt min prim�re kundegruppen hvor firmaer / iv�rks�ttere som allerede er kommet galt afsted med en leverand�r, er at jeg ikke vil k�mpe med 100 andre firmaer for de selektive f� der starter fra bunden, uden eksisterende hjemmesider eller webshops, samt jeg ligeledes besidder s�rlige gode kompetencer for at bj�rge eksisterende projekter.

Derudover yder firmaet konsulentydelser, f.eks. hvis et firma vil beholde sin nuv�rende leverand�r men have en tredje part med ind over projektet som teknisk designer, tovholder og eller kommunikationsled imellem �n selv og leverand�ren.

Hvis overst�ende p� nogen m�de lyder interessant, s� kan jeg kontaktes p�
42 71 88 58 eller via PM.

Venlig hilsen
Cristian.

Horizontal Rule - Hvordan styler jeg den s� den har et ikon i midten?

Fri, 18 Jul 2014 13:10:03 GMT

Hej allesammen

Jeg har et m�ske lidt simpelt sp�rgsm�l, men har dog brug for hj�lp, da jeg ikke lige kan greje hvordan det l�ses.

Jeg har fundet f�lgende billede - Icon Finder

Jeg vil nu gerne have lavet en horizontal Rule ( <HR> ), hvor den g�r fra h�jre side til venstre side af sk�rmen, ligesom den g�r normalt, men nu skal jeg bare have den til at stoppe i midten, lave et hul, hvor billed ikonet bliver indsat, og herefter forts�tte som normalt igen.

Hvordan g�r jeg det?

Mvh
Martin Rohwedder

Datas�gning i en app

Wed, 07 May 2014 09:24:08 GMT

Hejsa.

Jeg ved jeg har en anden tr�d om noget andet, men er blevet bedt om at lave en app.

Data i app'en bliver opdateret ca 1 gang om �ret, s� ikke de store udsving i data.

Jeg vil dog gerne kunne s�ge i den data der er i appen og kunne vise omr�der hvor mit s�geord indg�r.

Basalt handler det om at jeg gerne vil lave en app med fodboldloven s� jeg kan s�ge igennem indholdet og hurtigt finde frem til det jeg s�ger efter.

Hvordan g�r jeg det bedst?
Skal jeg lave det s� den s�ger p� min server, eller kan jeg bygge det ind i telefonen s� den kun skal opdatere for diverse appstores en gang om �ret og jeg derved har alt data p� telefonen.

Kom meget gerne med l�sningforslag p� hvordan jeg g�r det.

Jeg har t�nkt mig at skrive det med PhoneGap.

Hj�lp til Design af Hjemmeside !

Tue, 29 Apr 2014 19:05:09 GMT

Hej jeg Hedder Nicolaj og har en go ide til en hjemmeside, har udarbejde det mest af designet men mangler en som er frisk p� at g�re dette til en flot Hjemmeside og s� f� den igang og online for at se om vi kan f� noget godt ud af det. vi kommer til at snakke over skype hvis du er boende p� fyn eller jylland men eller frisk p� at sl� hovedet sammen for at hj�lpe til.
Hilsen Nicolaj Dahl

Animere exspand

Thu, 30 Jan 2014 15:16:20 GMT

Har en liste af elementer p� en side som skal udvide sig n�r siden loades.
Det er en s�jle diagram p� siden s� lige nu er kasserne/s�jlerne bare i fast bredde n�r siden loades.
Ville gerne have at de "loadede" random, og udvidede sig til den endelige st�rrelse med forskellige delays.

Det er lidt ligesom det her: http://www.justinaguilar.com/animations/scrolling.html

Jeg har nu kunne lavet koden der laver animationen, men mangler lidt hvordan jeg p� en p�n/nem m�de laver random delay p� elementerne s� uanset hvor mange data man putter i s� kommer de forskudt og ikke skal g�re noget specielt jeg manuelt skal s�tte op p� hver linie data.

Min kode: http://jsfiddle.net/272g9/

Sidder og t�nker om jeg skal lave noget javascript der via jquery s�tter en data attribut p� hver linie om hvor l�nge den skal vente, eller hvordan g�r jeg det nemmest/smartest?
Pr�vede med noget delay via jquery, men kunne ikke f� det helt til at virke.

N�ste udfordring er s� at udbygge det s�dan s� linierne reagerer p� at blive synlige. Alts� at de ikke popper ud f�r du scroller ned til dem hvor de er synlige.

retina display media query - androids

Wed, 22 Jan 2014 19:41:34 GMT

Jeg er i gang med Retina Display, men har et problem ved androids tablets og f.eks. HTC mobiler. Der g�r den ikke ind og reagere. Jeg har s�gt p� google og pr�vet en masse forskellige.

Er der nogle her inde der ved, hvad -webkit-min-device-pixel-ratio: og min-resolution: (dpi) skal v�re, for at det virker p� androids telefoner og tablets?

Billedet/dokment skifter

Tue, 07 Jan 2014 10:18:55 GMT

Hej.

Hvordan laver man en Billedet/dokment skifter som denne p� http://www.hockeyligaen.dk/
P� denne side er der en box hvor Billedet/dokment skifter rundt mellem 5 stk f�rdige Billedet/dokment med nyheder for ishockey.
Er der nogle som ved hvordan man laver det?

Hilsen Henrik

Dreamweaver Guideles?

Thu, 19 Dec 2013 13:32:15 GMT

Hej.

Jeg legede med muligheden for at bygge Fluid Grid Layout i Dreamweaver og fandt de "guidelines" der er meget nyttige. Men er mest tilh�nger af at benytte et normalt blank html/php dokument og benytte Bootstrap. S� mit sp�rgsm�l er, kan det lade sig g�re at f� dem i en blank html dokument?

Se guidelines her: http://niluan.dk/guidelines.jpg

P� forh�nd mange tak for hj�lpen og gl�delig jul!

responsive menu virker ikke helt

Tue, 17 Dec 2013 01:18:29 GMT

Hej

jeg er i gang med at bygge min nye hjemmeside op til mobil ogs�, derfor vil jeg h�re jer ad hvordan det kan v�re at jeg har det her problem som bliver vist p� linket.

http://billedeupload.dk/?v=auFEW.png

Til ventre kan du se n�r jeg bruger computer og til h�jre s�dan ser det ud n�r jeg er p� f.eks mobil.

Computer style hvis jeg kan kalde det.

CSS kode

 .menu{
     height:42px;
     background:#333; 
     border-bottom:solid 3px red;
     }
 .menu ul{
     margin:0; 
     padding:0; 
     float:left; 
     list-style:none;
     }
 .menu ul li{
     position:relative;
     float:left; 
     }
 .menu ul li a{
     display:block;
     height:42px; 
     padding:0 15px; 
     font:15px/45px 'Anaheim', sans-serif; 
     color:#fff; 
     text-transform:uppercase; 
     text-decoration:none;
     -webkit-transition:background 190ms ease-in, color 190ms ease-in;
     -moz-transition:background 190ms ease-in, color 190ms ease-in;
     -ms-transition:background 190ms ease-in, color 190ms ease-in;
     -o-transition:background 190ms ease-in, color 190ms ease-in;
     transition:background 190ms ease-in, color 190ms ease-in;
     }
 .menu ul:hover li.active > a{
     background:#333; 
     color:#fff; 
     }   
 .menu ul li.active > a, .menu ul li:hover > a, .menu ul li.active:hover > a{
     background:red; 
     color:#FFF; 
     }   
 .menu ul li a:active, .menu ul li.active a:active{
     color:#CCC;
     }

Mobil style here.

CSS kode

 .menu {
     width: 95%;
 }
 .menu li {
     clear: both;
     padding: 5px 15px;
 }
 .menu li a{
     text-decoration: none;
     color: #ffffff;
 }

S�dan ser hele kode ud med mobil style

CSS kode

 @media screen and (max-width: 524px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }
 @media screen and (max-width: 758px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }
 @media screen and (max-width: 960px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }

H�ber du kan hj�lpe mig videre til at hjemmesiden snart kan komme online.

Indhold scroll bag fixed gennemsigtig header

Sun, 03 Nov 2013 00:25:50 GMT

Hej Udviklere.

Jeg er st�dt p� et problem, som jeg, selvom jeg har s�gt nettet tyndt, ikke har kunnet finde en l�sning p�. Jeg er igang med at lave en side, hvor n�r man scroller, skal indholdet p� siden gemme sig bag en gennemsigtig header, da baggrunden er et full screen billede kan jeg ikke bare smide en baggrund ind i header elementet.

Eksempel: http://anvo.dk/test

Som I kan se kunne jeg godt t�nke mig at teksten blev gemt n�r den kommer op under den dashede linje, jeg har l�st utallige indl�g p� stackoverflow, men har ikke kunne finde en l�sning, som har virket for mig.

Jeg h�ber at der er nogen der kan hj�lpe mig i den rigtige retning, jeg vil helst have det gjort i ren CSS(3) og HTML(5) men hvis det er helt umuligt, s� vil ledetr�de til noget javascript der kan klare arbejdet, ogs� v�re en k�mpe hj�lp!

Mvh. Andreas Voss

Sticky Nav p� tv�rs

Sat, 26 Oct 2013 10:50:53 GMT

Hey folkens.

Jeg vil sku v�re lidt mere kreativ med html og css og ville h�re om der nogen der vidste hvordan man laver en div, der g�r p� tv�rs af hele siden, da jeg skal lave en navigation helt i toppen som skal v�re sticky, men samtidig skal menuen ogs� v�re centreret som resten af indhold i wrapperen, og planen var s� ogs� at have en login knap udenfor det centrerede omr�de

Har pr�vet at google lidt, men har ikke rigtig kunne finde noget.
H�ber at nogen kan hj�lpe