how did digitalpoint do this ?

Discussion in 'HTML & Website Design' started by muchochiz, Jan 26, 2011.

0
  1. #1
    i would like to know how digitalpoint did this . the image below . please i would appreciate if you guys explain this to me thanks
     

    Attached Files:

    muchochiz, Jan 26, 2011 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What exactly are you looking for? How they did the design, or the popup function?
     
    steelfrog, Jan 26, 2011 IP
  3. muchochiz

    muchochiz Active Member

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    the black stuff on the side with the red line pointing @ it
     
    muchochiz, Jan 26, 2011 IP
  4. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #4
    It's done with jQuery and some CSS... that's it
     
    CSM, Jan 26, 2011 IP
  5. muchochiz

    muchochiz Active Member

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    CSM any simple code please??
     
    muchochiz, Jan 26, 2011 IP
  6. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #6
    LOL

    Ask DP yourself or strip the code yourself. It's really easy!
     
    CSM, Jan 26, 2011 IP
  7. muchochiz

    muchochiz Active Member

    Messages:
    148
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #7
    strip the code myself ? i inspected the object and it showed as a floating object
     
    muchochiz, Jan 26, 2011 IP
  8. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #8
    jQuery code

    
function did_you_know_slide_in() {
    $("#did_you_know").animate({
        left: 0
    }, 2E3)
}
function did_you_know_slide_out() {
    $("#did_you_know").animate({
        left: -450
    }, 1E3)
}
    Code (markup):
    CSS code

    
#did_you_know{position:fixed;left:-450px;top:10%;border:0;width:350px;margin:0px;background-color:#000;color:#ddd;font-size:14px;z-index:9999;opacity:0.92;-moz-border-radius-topright:15px;-webkit-border-top-right-radius:15px;-moz-border-radius-bottomright:15px;-webkit-border-bottom-right-radius:15px;padding:25px;-moz-box-shadow:#999 5px 5px 10px;-webkit-box-shadow:#999 5px 5px 10px;}#did_you_know img.phonehome{width:145px;height:101px;float:right;margin-left:10px;}#did_you_know img.advertising{width:153px;height:78px;float:right;margin-left:10px;}
    Code (markup):
     
    CSM, Jan 26, 2011 IP