CodingForums.com
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   jQuery Help with unique site coding (http://www.codingforums.com/showthread.php?t=227216)

Psionicsin 05-18-2011 06:35 PM
Help with unique site coding
 
Hey guys! I was told to try posting this subject in the JS forum, so hopefully yo guys can help lol.

This is an image of the site design we want to go with;

http://www.rutholsonphoto.com/rop-build/idea.jpg

And this is how we want it to function:

http://www.rutholsonphoto.com/rop-build/animation.gif

The main idea being that there's an extra div attached to the tail-end of the footer. That extra div just has a background color tag to "cover" the tiled background in the inner div. How can I accomplish something like this? I'm so lost.

The footer needs to be a specific distance away from the main-content div, and also obey the fact that it CANNOT cover any of the contents of the main-content div. So therefore no sticky footers or anything. And adding further difficulty is the need for the generated height of the extra div to NOT affect the overall height of the page. But to maybe add 30-50px to it.

I need this because I'm not a fan of the titled image on a page being seen after the footer. It's something that I've been wanting to do for a while, but can't figure out how.

VIPStephan 05-18-2011 06:44 PM
You have posted this in the JavaScript Frameworks section. Which JS framework are you using or going to use or talking about?

Psionicsin 05-18-2011 06:46 PM
Quote:
Originally Posted by VIPStephan (Post 1092048)
You have posted this in the JavaScript Frameworks section. Which JS framework are you using or going to use or talking about?
I'm comfortable using JQuery, so I'll stick with that IF possible.

VIPStephan 05-18-2011 06:55 PM
OK, suppose you have a div with ID “footer” which holds your footer content. You’d add another div at the end (dynamically with jQuery) and animate the height of that div. For example (untested):

Code:
$('#footer').append($('<div>', {id: 'footer_bottom'}));
$('#footer_bottom').animate({height: 100}, 1000);
Now, I don’t know in which context the div should be animated (on click of something? after a certain time?) so I haven’t included any event handler for now. With the above code it just animates right away.

Of course, the rest is all done with CSS (applying background etc.).

Edit: Actually, reading your post again, I’m not sure if I’ve understood correctly what you are trying to achieve. How is the footer supposed to be movable?

Psionicsin 05-18-2011 07:05 PM
Quote:
Originally Posted by VIPStephan (Post 1092054)
Edit: Actually, reading your post again, I’m not sure if I’ve understood correctly what you are trying to achieve. How is the footer supposed to be movable?
The site is going to be AJAX'd near the end of completion, lol sorry I didn't explain that well. That's what i meant by moveable. The y-position is going to be dynamically changing depending on what content is presented.

Edit: So basically I want the site to look and function like this site here, but with the added benefit of the footer-bottom div thing you are talking about. However the triggering of the event SHOULD be automatic. This is so confusing, I hope I'm talking about this right.

AndrewGSW 05-18-2011 10:22 PM
Perhaps I've misunderstood, but do you really need to do anything special for this?

Could you not just have four separate (perhaps static) divs? When (ajax) content is loaded into the main content div it will automatically expand to contain the content and the footer div will always be below it - it won't overlap.

If you give the content div a background it will not spill over into the footer, nor into the following tail div with the other background pattern.

You could perhaps give the footer and tail divs a specific height, and maybe give the footer div a top-margin so it is slightly separated from the content above it.

As I say, perhaps I've misunderstood. Maybe you want the final (tail) div to automatically expand. Soz, Andy.

AndrewGSW 05-18-2011 10:34 PM
.. the last tail div would need a specific height (or perhaps a minimum-height) otherwise.. how would you know when to finish it?

Again, apologies if I've mis-understood. Andy.

Psionicsin 05-18-2011 10:56 PM
Quote:
Originally Posted by AndrewGSW (Post 1092137)
.. the last tail div would need a specific height (or perhaps a minimum-height) otherwise.. how would you know when to finish it?

Again, apologies if I've mis-understood. Andy.
Hey Andy. I totally understand where you're coming from lol.

Here's the site THUS far

See how you can see the patterned background image after the footer? Well I want it to be just a flat color after that. Partly an aesthetic thing for me more than anything.

AndrewGSW 05-18-2011 11:59 PM
Well I had to zoom in and remove my status bar to see it, but ;)

The grey pictured background is a background for the body so will extend to the full height of the page. The 'p' element within your footer has a 27 pixel bottom margin, so this background shows through the margin.

Use css to remove this:
Code:
footer p { margin-bottom: 0; }

Psionicsin 05-19-2011 12:22 AM
Quote:
Originally Posted by AndrewGSW (Post 1092159)
The grey pictured background is a background for the body so will extend to the full height of the page.
Exactly, which is why I'm trying to device a way to cover this up after the footer element.

Quote:
Originally Posted by AndrewGSW (Post 1092159)
The 'p' element within your footer has a 27 pixel bottom margin, so this background shows through the margin.

Use css to remove this:
Code:
footer p { margin-bottom: 0; }
This didn't work. You might wanna hit ctrl+F5 though as I've been updating code since my last response.

AndrewGSW 05-19-2011 01:36 PM
You now have a table in your footer which is taller than the footer section, causing the body background to again show after the grey band of the footer. So either increase the height of the footer to contain the table or reduce the height of elements within the table that cause it to expand beyond the footer container.

I would re-design it but it would involve a bit of effort:

Don't put the background image on the body;
I would remove the float: left that you've applied to a number of elements - I'm not sure why this is needed;
Have a header div that contains the banner and nav bar and has the thin, repeating image as a background;
A main content area that has the gray graphic as a background;
A footer area (as you have currently) - although I probably wouldn't use a table for layout but float elements and use margins to space them (possibly);
A fourth section (if you still want it) after the footer that contains the plain colour or background image that you want and has a specific height.

Psionicsin 05-19-2011 03:46 PM
Ok a couple questions here, as I'm trying these out with firebug as I read and weird things are happening...

Quote:
Originally Posted by AndrewGSW (Post 1092316)
You now have a table in your footer which is taller than the footer section, causing the body background to again show after the grey band of the footer. So either increase the height of the footer to contain the table or reduce the height of elements within the table that cause it to expand beyond the footer container.
I'm not seeing this. My footer is 60px tall, and the table (when I switch to topographical view) looks to be confined perfectly within the footer. Although, yes, I agree that floating would be better to a fault.

Quote:
Originally Posted by AndrewGSW (Post 1092316)
I would re-design it but it would involve a bit of effort:
Are you talking from the ground up, or the elements you've mentioned below?

Quote:
Originally Posted by AndrewGSW (Post 1092316)
Don't put the background image on the body;
If I don't place it on the body, then i only have one other infinite element to apply two graphics to which we presently cannot do. The tiled graphic which tiles infinitely, and the graphic behind the menu that needs to stretch infinitely on the x-axis.

Quote:
Originally Posted by AndrewGSW (Post 1092316)
I would remove the float: left that you've applied to a number of elements - I'm not sure why this is needed;
Tried removing it from some, but then the site design breaks so I think they're needed.

If I take it off of #page-wrap then the background image vanishes.
If I take it off of #nav, nothing happens.
If I take it off of #content-group then the graphic from #page-wrap returns, but distorted.
#content needs it. #specs needs it on both or else the [a] will slip out of the images.
Same with #attn.
If footer doesn't have it, it goes to the top of the page.

Quote:
Originally Posted by AndrewGSW (Post 1092316)
Have a header div that contains the banner and nav bar and has the thin, repeating image as a background;
Makes perfect sense. Last time I looked at the spec that wasn't allowed, but they seemed to have changed it so ok to that. ALTHOUGH am I now placing the header in the #page-wrap instead of the #container? Because the graphic can't be truncated by the containers width.

Quote:
Originally Posted by AndrewGSW (Post 1092316)
A main content area that has the gray graphic as a background;
Now I currently have 4 "nested" divs (I count html and body as divs also).
1-html>2-body>3-page-wrap>4-container.
So are you proposing that I create another 100% width div between the 2&3 or 3&4 to apply the background image onto?

Quote:
Originally Posted by AndrewGSW (Post 1092316)
A fourth section (if you still want it) after the footer that contains the plain colour or background image that you want and has a specific height.
And this is what we keep coming back to. Using html and css I can see the reason why having another div with a constant height is needed, but I'm still afraid that that background image will show even after that div.

Psionicsin 05-19-2011 03:54 PM
So are saying I should structure it like this?

Code:
<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8">
</head>

<body oncontextmenu="return false;">

<div id="page-wrap">
        <header>
                <nav>
                </nav>
        </header>
        <div id="main-container">
                <div id="container">
                        <div id="content-group">
                                <div id="content">
                                </div>
                                <div id="specs">
                                </div>
                                <div id="attn">
                                </div>
                        </div>
                </div>
        </div>
</div>
<footer>
</footer>

</body>

</html>

AndrewGSW 05-19-2011 07:46 PM
Quote:
Originally Posted by Psionicsin (Post 1092363)
So are saying I should structure it like this?
I am not saying you should do this, just that this is how I might approach it ;)
Code:
<!DOCTYPE HTML>
<html>
<head>
        <meta charset="utf-8">
</head>

<body oncontextmenu="return false;">
<header>
        <nav>
        </nav>
</header>
<div id="main-container">
        <div id="container">
                <div id="content">
                </div>
                <div id="specs">
                </div>
                <div id="attn">
                </div>
        </div>
</div>
<footer>
</footer>
</body>
</html>
I am not a fan of divitis and can't see the need for a page wrapper div.

Psionicsin 05-19-2011 08:11 PM
Quote:
Originally Posted by AndrewGSW (Post 1092421)
I am not a fan of divitis and can't see the need for a page wrapper div.
Ok now I can see what you're getting at. Would me applying that tileable image to the #main-container block the image that's to be applied to the header? I ask because I've tried a FORM of this with other divs and such and it always seems to c*ck-block the under-graphic. Or, is it because the header isn't an actual #div that it'll work?

UPDATE: Also, if this works (now let's get to the java part of this lol), is there a way using jQuery to make java render a solid color between the end of the footer and the bottom of the page/window? I tried some prelim tests and using another div, if the page was shorter than the default size of the window...some of the graphic was still showing. Meaning I'll need something dynamic to pull this off.

UPDATE 2: Nevermind that last question. I went ahead with the rebild and NOW I don't need jquery to fix the problem. I guess I had some faulty code.

Thanks for your help, AndrewGSW!:)


All times are GMT +1. The time now is 02:17 PM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.