Background issues... - Githubissues

GoogleCodeExporter commented 9 years ago

I was reading through your issue log and I didn't find anyone else having 
this issue.

I modified the CSS & JS code and still come up with 1 of 3 results.

1. Background Image stays at the top while the rest of the site is 
scrollable.
2. The whole site stops being scrollable and your bar goes away.
3. The site works perfectly but your bar is just icons setup vertically 
below everything.

I've probably went through your code and mine about 6 different times and 
now I am a little stuck, so wondering if you could help. 

www.personalitforyou.com is my site. I kept it scrollable, with the 
background being static, I even tried modifying my css to enable 
background-position:top and background-attachment:scroll; with still no 
luck.

I also included the code to populate inside your JS code, but again maybe 
I am doing it wrong?

$("html").css({"overflow" : "inherit", "height" : "100%"});
$("body").css
({"margin": "0px", "overflow": "scroll", "height": "100%", "background": "#
ccc url(../images/body-bg.jpg) repeat-x", "overflow": "scroll"});

Pointers and info would be great. I have probably over looked something 
simple and stupid so again thank you for your review.

keep up the good work..
Brad

Original issue reported on code.google.com by theocitg...@gmail.com on 1 Jan 2010 at 1:14

GoogleCodeExporter commented 9 years ago

1. Move bar's DIV element before the closing BODY tag. (</body>)
2. Remove the style attributes on your BODY tag (<body>) and "masthead" DIV 
element.
(We'll be moving the background image on the stylesheet)
3. Create a DIV wrapper right after the BODY tag (<body>), plus create a DIV 
element
for the top/menu background and another DIV wrapper for the rest of the 
contents:

-------------HTML code-------------
<body> 
    <div id="wrapper">
        <div id="top_header"></div>
        <div id="content_wrapper">

        <!-- the rest of the contents here -->        
        <div id="container">
             .
             .
             .
            </div>

        </div>
    </div>

    <!-- jixedbar -->
    <div id="demo-bar">
    .
    .
    .
    </div>

</body>
</html>    
-------------HTML code-------------

4. And then lastly, replace and/or add the style attributes in your stylesheet
(template.css) with the CSS code below:

-------------CSS code-------------
body {
    background-color:#ccc;
}

#wrapper {
    position:absolute;
    width:100%;
    height:100%;
    overflow:scroll;
    overflow-x:hidden; /* hide IE's horizontal scrollbar */
}

#top_header {
    position:absolute;
    top:0px;
    width:100%;
    height:121px;
    background:#ccc url(../images/body-bg.jpg) repeat-x;
}

#content_wrapper {
    position:absolute;
    width:100%;
}

/* 
   changed from "div.masthead" to "#masthead" 
   to fix the empty space on Firefox (fill menu with background image)
*/
#masthead {
    background:#ccc url(../images/body-bg.jpg) repeat-x;
    height:121px;
}

-------------CSS code-------------

Note: If you have modified the jixedbar JS script, please replace it with the
original script.

Though the steps above would fix the issue you've posted, I've noticed that 
there's
another bug that you need to look into. The bug is not related to jixedbar or 
its
associated themes but rather a IE hover bug. If you point your mouse over the 
top
menu (HOME, PORTFOLIO, etc) the contents move slightly to the left. To fix this 
IE
hover bug, please read the solution in this URL:
http://www.webmasterworld.com/css/3402174.htm

Cheers!

Original comment by rawsw...@gmail.com on 1 Jan 2010 at 4:10

GoogleCodeExporter commented 9 years ago

...will be setting this as "done".
As there are no more reply to this issue/problem.

Original comment by rawsw...@gmail.com on 11 Jan 2010 at 4:10

Changed state: Done

GoogleCodeExporter commented 9 years ago

Sorry about that I have been busy with other projects.  Yes, I want to thank 
you for 
your time in helping me. Everything worked as you mentioned, I wanted to ask 
was it 
by your eye or do you use something to help you code and if so could I get a 
personal email of what you use so I could be as effective as yourself?

Thanks again,
Brad

Original comment by theocitg...@gmail.com on 11 Jan 2010 at 6:31

GoogleCodeExporter commented 9 years ago

Hi Brad,

Actually I don't know. =)
But I think it's from years of experience and it's always been a passion for 
me, ever
since. In every project that I've handled, I make sure that I get a hands-on
experience in planning, coding, testing, and production deployment.

Here's a list of some software/applications I am using, recently:

1. Aptana Studio (Community edition) - For coding PHP, Javascript, and other 
languages
2. Adobe Dreamweaver - For XHTML and CSS
3. IETester - http://www.my-debugbar.com/wiki/IETester/HomePage

...and a lot of patience.

Just never give up on something and continue with whatever you want to achieve.
Remember that in programming/development, there's no problem/issue that cannot 
be
solved. There's always a solution and/or workaround to that.

Cheers!

- "If You Want Something Done Right, Do It Yourself"

Original comment by rawsw...@gmail.com on 14 Jan 2010 at 12:27

rayantony / jixedbar

Background issues... #4