jquery - HTML&CSS: Foundation as floating div on the fullpage.js plugin -
i'm trying use foundation floating div on top of fullpage foundation has interactive elements in (changing text sizes, etc)
example can seen here: http://goedgevonden.net/laurent/examples/index.html
everything working far problem content of slides moves aswel when text in foundation div moves... (i'd content of slides stay @ same place)
is div not floating afterall? been looking hours , cant find problem. has clue i'm doing wrong?
the interactive foundation btw not affecting on scroll rotating 'athene' text (= good)
this css used foundation div
#foundation { position:absolute; height: 100%; display:block; width: 100%; background: transparent; z-index:999; }
thanks in advance & best regards of you
the page disorganized. should never writing css using <style>
in middle of body inside elements. should never linking entire css libraries inside middle of body either.
all relevant css belongs in 1 <style>
inside head. linked libraries belong in head in order based upon dependancies on another.
same javascripts. if javascript library determines how rest of scripts react 1 another, jquery, belong individually linked in head. otherwise, need in dependency order @ bottom of body, above </body>
.
your #foundation
element may not working because of disorganization. follow foundation's getting started second chapter learn should putting these scripts , linked libraries. suggest reading whole docs before use massive framework.
lastly, elements have position: absolute
should consider defining position:
#foundation { position: absolute; top: 0 left: 0 }
when have done of this, , problem not fixed, update question , further it. have mess of css rules clashing each other , creating problem can't seen.
Comments
Post a Comment