So after completing some crazy coding, got the pages for the chapters added in, I clicked Chapter two and it broke. cries
Profile here: http://subeta.net/pets/Papaya.
I'm not new to chapters, been doing them for years, but this profile is a little special in it's setup and so things aren't playing nice of course. I could really use some help/advice maybe some pain killers for my headache... :P
The profile is basically 2 profiles layered on top of each other which is why I couldn't use the regular code that I would use. I've tried all sorts of things but I can't get it to work. :C Maybe I over coded, not really sure, so I'm hope a fresh pair of eyes might find where I went wrong! ;)
Thanks!!!
Well, it looks like some sort of what I lovingly call a 'jump effect'. How tall is your screen/can you screenshot how it breaks for you to make sure we are talking about the same thing? There might be a solution, but a pretty weird one.
Really nice profile btw, I coded something like that once, except without the really pretty graphics~
Thanks! Yes! It is totally doing a screen jump! screen shot
Yeaaah, jump effect all right. With complications. Okay, so I assume the size of the graphics is something the client wanted and/or you have no particular interest in redoing it smaller at this point xD There is totally a weird cheating cheater fix for this buut I have to go out now, I can show you when I get back. Do you know how anchor link tags work/why the element you link to ('chapter 2' etc?) jumped to the top?
Thanks for your help with this! They wanted the profile background to change on a click not just the images or it would have been easier. Because of the "rotating" background I had to code it differently than I normally would with chapters. I really don't have a clue why it's happening. Too many divs are confusing me. :P The funny thing is that the chapters actually work and you can still advance through them. It's the backgrounds that are doing weird things. :C
Okay, so the thing is you didn't actually make any mistakes in the coding, in fact it's more like it's working a little too well xD Also, sorry in advance, I am going to get into a bit of a lecture mode here, hope you can forgive me.
rambling under the cut
Right then. I assume you never tried to implement those tabbed boxes/chapters/target class element on a profile with its entire side scrolling before.
a /a tags, when used to link to something within the same page are generally meant to work like a table of contents in wikipedia or sth, bringing you to the particular place on the page. You click a link and suddenly it's aligned with the top part of your screen... unless the page is too short to actually scroll. So this is number one bad thing your profile currently does, there is side scrolling and the 'chapter' element jumped to the top like it technically should, except we already established we don't want that P= The number two bad thing it does is that instead of actually scrolling it dragged the "sun" div element up with it, messing up your background.
To get rid of the problem you need to get rid of the jump effect and it can be done in two ways a) make the profile smaller than your screen, eliminate side scrolling b) make the jump unnecessary by dirty cheating
a) is unfortunately out of the question because you don't want to make the graphics smaller or permanently cut off some parts of the bg for all the people out there with small screens, so that leaves us b).
This is how your chapters work right now:
This is what the stupid cheat to make this work properly looks like, more or less:
The numbers are sort of random because I just threw them in there to make sure it works and at least for me, [here], it does?
(yes, I know there is that div css in there and the dimensions property'd have to have !important to work, this is just an example. This is also what is overlapping your sun/moon navigation right now, making it unclickable...)
But yeah, idk if you can see what it does? It's a big transparent div positioned at top:0px with equally big divs inside that are also technically positioned at top:0px and to which we actually link. And only inside that you have your actual text, positioned wherever you want it. There is no jump effect because they are already aligned with the top part of the screen.. aka dirty cheating.
ANYWAY YES here is to hoping it made some sort of sense, please tell me if it didn't.
- Okay! I'm going to try this out a little later today when the lag hopefully slows down. And I appreciate the lecture! ;) My knowledge of this stuff is nowhere near as good as it should be. Everything I know is what I've picked up along the way as needed from doing web layouts and then profiles on here for the last dozen years or so. Thanks again and I'll let you know how it goes!
I wouldn't get my hopes up about the lag slowing down but good luck P= and be sure come yell at me if I wrote something stupid in there, I was kind of typing it at 2am.
Oh, right, one more comment about your code.. thought any more help and I should maybe be asking for a percentage from that commission xD from what I remember your story divs for both moon and sun sections have the same ids? I don't really think it's a good idea.
I think I got it? lol! It's working and now I'm just waiting to hear back if the user wants any changes. :P Thank you so much for your help on this! I really need to spend some time expanding my education on divs and learning more than just the bare basics. Thanks again!!!
Just an fyi, the alignment for your chapter 6 on both day and night are a little off. For day: A little snip of the night background appears at the bottom when you scroll down, and the text doesn't fix in the box. For night: The moon and sun anchor link images aren't aligned properly.