Side badge for my website

Discussion in 'HTML & Website Design' started by mekerica, Mar 11, 2011.

0
  1. #1
    Hi!

    You probably have seen badges like RadarURL or Twitter which are on the left/right side of and website and they are static, independent of scrolling.

    How to create it, using CSS or Javascript (if it's neccesary)? I found a website that had this badge and I had 'stollen' the code from them and just exchanged the link and picture and now it works but it's positioned on the bottom right corner and I want it to be on middle left. But the CSS code is tooooo complicated for me and lots of tags I've never seen so I don't now how to change it's position.

    If you can, you can just change the code to get middle left position or tell me how to create a new one. Here is the HTML:

    <a href="dodajstatus.php" target="kampyleWindow" id="kampylink" class="k_float k_bottom k_right"><img src="img/dodajstatus.png" alt="Napiši nam status" /></a>
    HTML:
    And here is the CSS:

    
.k_float{z-index:9999999;position:fixed !important;position:absolute;cursor:hand;cursor:pointer;}#kampylink img{border:0;}.k_top{top:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop :document.body.scrollTop);}.k_bottom{bottom:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 1 :document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 1);}.k_right{right:0px;}.k_left{left:0px;}#k_close_button{color:gray;border:1px solid gray;display: none;width:11px;height:16px;font-size:12px;text-align:center;}.kc_top{top:80px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + 80 :document.body.scrollTop + 80);}.kc_bottom{bottom:80px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 80 :document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 80);}.kc_right{right:10px;}.kc_left{left:10px;}
    Code (markup):
    Thank you!
     
    mekerica, Mar 11, 2011 IP
  2. kiranchandra

    kiranchandra Member

    Messages:
    133
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    46
    #2
    Hey dude i can create a badge for ur website.But u need to buy from me.Pming u
     
    kiranchandra, Mar 18, 2011 IP
  3. boundlessmartin

    boundlessmartin Active Member

    Messages:
    714
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    Useful scripting.
     
    boundlessmartin, Mar 18, 2011 IP
  4. mekerica

    mekerica Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    What? Could somebody help me?
     
    mekerica, Mar 19, 2011 IP
  5. eruct

    eruct Well-Known Member

    Messages:
    1,189
    Likes Received:
    49
    Best Answers:
    0
    Trophy Points:
    108
    #5
    Can you link to the actual site you are trying to get this to work on? Reading the script in line like that makes it a bit more confusing...

    Try this though:

    HTML:
    <a href="dodajstatus.php" target="kampyleWindow" id="kampylink" class="k_float"><img src="img/dodajstatus.png" alt="Napiši nam status" /></a>
    Code (markup):
    CSS:
    .k_float{z-index:9999999; top:50%; left: 0; position:fixed !important;position:absolute;cursor:hand;cursor:pointer;}#kampylink img{border:0;}.k_top{top:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop :document.body.scrollTop);}.k_bottom{bottom:0px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 1 :document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 1);}.k_right{right:0px;}.k_left{left:0px;}#k_close_button{color:gray;border:1px solid gray;display: none;width:11px;height:16px;font-size:12px;text-align:center;}.kc_top{top:80px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + 80 :document.body.scrollTop + 80);}.kc_bottom{bottom:80px;_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) - 80 :document.body.scrollTop + (document.body.clientHeight-this.clientHeight) - 80);}.kc_right{right:10px;}.kc_left{left:10px;}
    Code (markup):
    Since I can't see the rest of the code I assume that 'kampylink' with the class k_float is what needs changing. Try the code and let me know...
     
    eruct, Mar 19, 2011 IP
  6. mekerica

    mekerica Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thank you! I'll try it when I come on my PC. Now I'm on my mobile phone. I can't give you the URL yet since it's on my localhost but I've bought the domain so it will be online soon.
     
    mekerica, Mar 20, 2011 IP
  7. fokerss

    fokerss Active Member

    Messages:
    1,068
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    98
    #7
    nice script , it really work.
     
    fokerss, Mar 20, 2011 IP