jlindblom Posted December 18, 2012 Share Posted December 18, 2012 Hello! Hope you're fine! And really hope you can help me! The example. I've got a problem to set the position for my "logo", right now it's a square. Is it possible to get a position for this square, about 40px from the left and maybe 40px from the top, and still have the function with invert logo and 100% height sections? If i use "position: fixed;", the invert-function not work any longer. How to do? Or can I make this effect in another way? Please see the example here, scroll threw the website to see the effect on the square. If I forgot to explain something correct, please ask me, and I will try to explain it in a better way. Thanks for all kind helping! Have a nice day! Sincerly,J Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 18, 2012 Share Posted December 18, 2012 Can you post your code please? And push your image you can user margins, or make the box a relative or absolute position then add the values to the left and top. Link to comment Share on other sites More sharing options...
jlindblom Posted December 18, 2012 Author Share Posted December 18, 2012 Thanks for your answer DarkxPunk. Here is the code. I have tried to do positioning with both absolute and relative. But when making it, the invert-function stop working, or the square will be hiding.When putting margins to it, it doesn't work as it is right now. <!DOCTYPE HTML><html><head><style>/* RESET STYLES */body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { margin: 0; padding: 0; }table { border-collapse: collapse; border-spacing: 0; }fieldset,img { border: 0; }address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var { font: inherit; }del, ins { text-decoration: none; }li { list-style: none; }caption, th { text-align: left; }/* MAIN STYLES */html {margin: 0;height: 100%;/* overflow: hidden; */}body { margin: 0;height: 100%;}section {height: 100%;position: relative;}section#top {background-color: #f26d93;z-index: 0;}section#middle {background-color: #ffffff;z-index: 0;}section#bottom {background-color: #f26d93;z-index: 0;}.white, .pink {behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );}.white:after, .pink:after, .white .after, .pink .after {position: absolute;content: '';top: 0; left: 0;height: 100%;width: 118px;background: transparent url('logo_pink.png') no-repeat fixed 0 0;z-index: 5;}.white:after, .white .after {background-image: url('logo_white.png');}</style></head><body> <section id="top"> <div class="white"></div> </section> <section id="middle"> <div class="pink"></div> </section> <section id="bottom"> <div class="white"></div> </section></body></html> Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 18, 2012 Share Posted December 18, 2012 (edited) With how your code it i am not grasping what your attempting to achieve with all this before after and expressions and such. Seems overly complicated for something as simple as putting one logo in one div and another logo in another.Either way here: <!DOCTYPE HTML><html><head><style>/* RESET STYLES */body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { margin: 0; padding: 0; }table { border-collapse: collapse; border-spacing: 0; }fieldset,img { border: 0; }address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var { font: inherit; }del, ins { text-decoration: none; }li { list-style: none; }caption, th { text-align: left; }/* MAIN STYLES */html {margin: 0;height: 100%;/* overflow: hidden; */}body { margin: 0;height: 100%;}section {height: 100%;position: relative;}section#top {background-color: #f26d93;z-index: 0;}section#middle {background-color: #ffffff;z-index: 0;}section#bottom {background-color: #f26d93;z-index: 0;}.white, .pink {behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );}.white:after, .pink:after, .white .after, .pink .after {position: absolute;content: '';top: 0; left: 0;height: 100%;width: 158px;background: transparent url('https://dl.dropbox.com/u/101235437/invertlogo/logo_pink.png') no-repeat 40px 40px;z-index: 5;}.white:after, .white .after {background-image: url('https://dl.dropbox.com/u/101235437/invertlogo/logo_white.png');}</style></head><body> <section id="top"> <div class="white"></div> </section> <section id="middle"> <div class="pink"></div> </section> <section id="bottom"> <div class="white"></div> </section></body></html> Edited December 18, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
jlindblom Posted December 19, 2012 Author Share Posted December 19, 2012 Hello. Thanks for your helping DarkxPunk. Here is the new result. Now the logo is positioned. But the invert effect doesn't work anymore, like it did in this link. If you scroll smoothly down in first version, you see the logo be inverted when coming in a new section. So when between two section, the logo is 50% pink, and 50% white. But I can't set a position of it and "floating" over all sections. Understand how I mean? Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 19, 2012 Share Posted December 19, 2012 Maybe since I am on my iPad it don't work for me.... When I get on my desktop I will play some more. Link to comment Share on other sites More sharing options...
Ingolme Posted December 19, 2012 Share Posted December 19, 2012 I can't imagine how your invert effect would work without using Javascript. When the logo is over two different sections you're going to need to create additional elements to show the colors over both sections. Link to comment Share on other sites More sharing options...
jlindblom Posted December 20, 2012 Author Share Posted December 20, 2012 Otherwise I can put the space in the image-file maybe? I tried to put the logo into another div called "logo" and tried to set position for this. But the function will be broken then. I found the script here from the beginning, http://stackoverflow.com/questions/7273348/invert-change-logo-on-scroll Link to comment Share on other sites More sharing options...
Ingolme Posted December 20, 2012 Share Posted December 20, 2012 I see this has to do with background-attachment. I haven't looked deeply into how it works. Have you tried changing the background-position of the image? Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 20, 2012 Share Posted December 20, 2012 I can tell you for certain now don't work on iPad. May be cool on desktop but your really alienating allot of people if you use this... Tool?Anyway as I said when I get to a desktop I will play some more. Link to comment Share on other sites More sharing options...
jlindblom Posted December 20, 2012 Author Share Posted December 20, 2012 DarkxPunk. Haha! My next question I will ask is: How to get this to work on iphone/ipad. Because I also test it, but didn't get it to work. Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 21, 2012 Share Posted December 21, 2012 (edited) I don't think you can. CSS3 limitation on iOS, Edited December 21, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now