Geek asks and answers

Apple store style fixed div at LEFT

I am pulling my hair out because of this. I have a webpage where I would like to have a fixed div position on the left (parrot and translator), following the page when it scrolls down. http://www.cartoonizemypet.com/new/help/

I managed to trace this http://jqueryfordesigners.com/fixed-floating-elements/ and get what I thought was the perfect effect! Then I tried to view it on my phone ... As soon as I increased the size of the exploded div, I moved above the text! :( You can see the effect on a normal browser by reducing the browser window and scrolling to the right.

Does anyone know how to prevent a parrot from moving horizontally? I searched high and low for a solution, but it began to seem impossible.

Here is the relevant CSS

#content {
    padding-top:20px;
    padding-bottom:713px;   /* Height of the footer element */
    width:888px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#help-col1 {
    left:0;
    width:218px;
    position:absolute;
    height:500px;
}

#parrot-box {
    position:absolute;
    top:0;
    margin-top: 20px;
}

#parrot-box.fixed {
    position:fixed;
    top:0;
}

#help-col2 {
    width:634px;
    float:right;
}

Remember to check the source of the page (http://www.cartoonizemypet.com/new/help/) to see SCRIPT and HTML. Any help is appreciated.

+5
source share
3 answers

In order not to worry everyone, my husband understood an alternative way to do this job! :)

Instead of moving a parrot with a page; I will have several versions of the parrot inside the response divs. Thus, when the user clicks on the answer, he pops up, and a parrot appears next to him.

Not as I originally planned it, but I think I can make this new way even better!

Thanks for the help, anyway! :)

-1

"" , ( # help-col1) "" 0. , ... .

, , - , , . , . ... x y.

( ), javascript . , javascript , , , .

css media-, . CSS , , , ( ) =)

!

+3

JS, , , . , -, , (, , / , ).

In fact, you can leave the parrot at the top for narrow screens and save some real estate, as well as refuse to misinterpret the version position:fixedfor older versions of the Safari browser. Of course, you could implement a more advanced approach, but this should be a good starting point - try it out, run the following script on your page (just the console is ok):

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>');

First, it redefines the original ad #parrot-box.fixed, and then applies your floating style to each window with a width of at least 982 pixels (the width of the page wrapper).

+1
source

More articles:


All Articles