How to do Style to jquery code

Question

I am trying to add some style elements to my jquery code.

My objective is to be able to position a box absolutely after the person has scrolled down the screen after 200px.

The box reduces in size after a 200px scroll but i want to have the ability to position the box where i want.

Here is my code.

Can some one guide me on where I am going wrong.

  $( window ).scroll(function() {
     if($(window).scrollTop() > 200){
       $('#profile-pic-bg').css({'width': '50'});
        $("#profile-pic-bg").css({ position: "absolute", top: "20", left:"5" });
     }else{
         $('#profile-pic-bg').css({'width': '145'});
     }

});

I didn't understand the point here, your code works fine unless you mean that you want a "floating box" PS: Remove Java Tag. — ImadBakir, Nov 22 '13 at 11:49
@user2965875, Jquery Is a `Javascript` library, Java is a thing, and Javascript is something else. — ImadBakir, Nov 22 '13 at 11:50
@user2965875 Jquery is a framework with base in javascript, not java. — Rayf, Nov 22 '13 at 11:50
Somewhat off topic but [Java and Javascript are similar like Car and Carpet are similar](http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java) — Liam, Nov 22 '13 at 11:52
What a useless discussion, just change the tag and be done with it. — David Hellsing, Nov 22 '13 at 11:53
Ok thanks for your java comments, can anybody help me with positioning my element absolutely though? my code doesnt seem to work? — user2965875, Nov 22 '13 at 11:53
your fiddle seems to work, if you inspect the element after you have scrolled 200px you will see it gets absolutely positioned. just add px to your top and left (or remove the quotes) — Pete, Nov 22 '13 at 11:53

score 4 · Answer 1 · answered Nov 22 '13 at 11:52

4

Remove the quotes from the top and left property values, or they wont work:

$("#profile-pic-bg").css({ position: "absolute", top: 20, left: 5 });

answered Nov 22 '13 at 11:52

David Hellsing

106,495
44
176
212

`top: "20", left:"5"` -> `top: 20, left: 5` – David Hellsing Nov 22 '13 at 11:54
1

Yeah I seen... thought you meant the actual properties, but you meant the property values – musefan Nov 22 '13 at 11:54
2

@David also if he wants it with quote then he should use px like "20px" – Bhojendra Rauniyar Nov 22 '13 at 11:58
1

@C-Link true, but unless you are using other units than pixels it doesn’t make a difference. I prefer integers, some prefer strings... – David Hellsing Nov 22 '13 at 12:07

score 1 · Answer 2 · answered Nov 22 '13 at 12:00

1

Try with this

$( window ).scroll(function() {
     if($(window).scrollTop() > 200){

        $("#profile-pic-bg").css({ 
            "position": "absolute", 
            "top": "20px", 
            "left":"5px" ,
            "width":'50px'
        });
     }else{
         $('#profile-pic-bg').css({'width': '145px'});
     }

});

DEMO

answered Nov 22 '13 at 12:00

Sridhar R

20,190
6
38
35

Thanks for this ! great help. Can you show me how you would add style to the box width 145px too? – user2965875 Nov 22 '13 at 12:10
if scroll return again 200 below the height is set it to the selector see fiddle – Sridhar R Nov 22 '13 at 12:12
if you check the fiddle the and move back up the screen the box does not pick up the original style. it moves out of place. – user2965875 Nov 22 '13 at 12:45
"background-image": "url('../img/assets/profile-pic-bg.png') 0px 0px no-repeat !important;" – user2965875 Nov 22 '13 at 12:59
I have tried to add a background image into the jquery but its not working? have i done somthing wrong? – user2965875 Nov 22 '13 at 13:00

How to do Style to jquery code

2 Answers2