RSS

avoid centered div shifting

0 comments By Wayne Wang Filed in div+css Tagged with , April 28th, 2012 @ 14:34

I have this page which contains a centered div, this div contains a button. You click the button and a drop-down list will come out.It’s a very common feature.
But I found a strange problem.
When you click the drop-down list becomes visible, the whole div moves left for like 10px, and moves back when the list disappears.

This seems stupid and I spend a lot of time on finding what happened.
As everybody can predict, the reason is as stupid as the problem.

That’s because of the scrollbar of body element.
By default, the scrollbar is invisible because the body height is less than your screen height, it becomes visible as the body height increases. In my case, the drop-down list has a very huge height which is bigger than the browser’s height.
This will cause a decrease of page width, so all elements in the div move left because this div is centered.

The solution is make the scrollbar always visible and only active when needed.
CSS code will go like that:

html {overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;
}

as far as I know, no site did that, except Google homepage.

btw:

You can test this using Developer Tools:
1st Pin Debug window to bottom.
2nd Browse Google and Bing and turn Developer Tools to change body height.

Python Challenge – Level 8

0 comments By Wayne Wang Filed in python Tagged with , , , April 8th, 2012 @ 10:37

found three hints in the source:

  1. a area tag. has two attributions: coords and href
  2. comment: un and pw

coords seems to be useless (if anyone know something, please leave your comment.)
enter the url of the href. came out a page require username and pw.

<!--
un: 'BZh91AY&SYA\xaf\x82\r\x00\x00\x01\x01\x80\x02\xc0\x02\x00 \x00!\x9ah3M\x07<]\xc9\x14\xe1BA\x06\xbe\x084'
pw: 'BZh91AY&SY\x94$|\x0e\x00\x00\x00\x81\x00\x03$ \x00!\x9ah3M\x13<]\xc9\x14\xe1BBP\x91\xf08'
-->

‘BZh91AY&SY’ is the flag of bzip2 compress method. while ‘PK/x03/x04′ for zip, ‘/x25/xD5/b/b’ for gzip.
(and also “bee”,”buzy” sounds like “bzip2″?)
so code:

import bz2
if __name__ == '__main__':
    un='BZh91AY&SYA\xaf\x82\r\x00\x00\x01\x01\x80\x02\xc0\x02\x00 \x00!\x9ah3M\x07<]\xc9\x14\xe1BA\x06\xbe\x084'
    pw='BZh91AY&SY\x94$|\x0e\x00\x00\x00\x81\x00\x03$ \x00!\x9ah3M\x13<]\xc9\x14\xe1BBP\x91\xf08'
    print bz2.decompress(un)
    print bz2.decompress(pw)

Result:
username: huge
password: file
Enter and go.

–
UPDATE: I found how the coords works in the wiki page.
it’s only for fun. this code will draw the outline of the bee in the picture.

import sys,  urllib2,  bz2
from PIL import Image
 
page = urllib2.urlopen("http://www.pythonchallenge.com/pc/def/integrity.html").read()
un = page.splitlines()[20][5:-1]
pw = page.splitlines()[21][5:-1]
 
i = Image.open("integrity.jpg")
p = i.load()
 
# what's the size of the image?
print i.size
 
# grab coordinates from source
coords = eval(page.splitlines()[11][10:-2])
# couldn't remember html map notation, but as there are an even number of ... numbers, lets guess at x,y,x,y,x,y,x,y...
 
# lets color all pixes coordinate positions red
for x in range(len(coords)/2):
    p[coords[x*2],coords[x*2+1]] = (255, 0, 0)
i.show()

Python Challenge – Level 7

0 comments By Wayne Wang Filed in python Tagged with , , April 8th, 2012 @ 01:30

easy one.
the header picture seems strange.
pc-lv7-oxygen
using PIL to process.

#wget http://www.pythonchallenge.com/pc/def/oxygen.png
import Image,re
if __name__ == '__main__':
    img = Image.open('oxygen.png')
    "height:95 so try 45, width seems like the same, try 7 because this is the 7th"
    row = [img.getpixel((x, 45)) for x in range(0, img.size[0], 7)]
    ords = [r for r, g, b, a in row if r == g == b]
 
    "chr(115) -> s"
    "got 'smart guy, you made it. the next level is [105, 110, 116, 101, 103, 114, 105, 116, 121]'"
    "use regex to process it"
    print "".join(map(chr, map(int, re.findall("\d+", "".join(map(chr, ords))))))

The result is
integrity

Python Challenge – Level 6

0 comments By Wayne Wang Filed in python Tagged with , , April 8th, 2012 @ 01:05

This is a …. challenge.

saw this in the source:

<html> <!-- <-- zip -->

try this url:
./channel.zip
and it’s not a 404!

download it, unzip, found thousands of text files says:
“Next nothing is 16870″
and a readme file says:
“begin with 90052″

that’s easier than level 4, solve it and get this:

collect the comments.

what the hell are the comments?

try use ZipFile module.
here cames the code:

filename = './channel.zip'
 
def download_zipfile():
    import urllib2
    zf = urllib2.urlopen('http://www.pythonchallenge.com/pc/def/channel.zip')
    output = open(filename,'wb')
    output.write(zf.read())
    output.close()
 
def process():
    from zipfile import ZipFile
    file_list = ZipFile(filename)
 
    import re
    regex = re.compile(r'(\d+)$')
 
    comments = []
    nothing = '90052'
 
    try:
        for info in file_list.infolist():
            fn = '%s.txt' % nothing
            comments.append(file_list.getinfo(fn).comment)
            nothing = regex.search(file_list.read(fn,'r')).group()
    except:
        print ''.join(comments)
 
if __name__ == '__main__':
    process()

after that you get a picture like this:

****************************************************************
****************************************************************
**                                                            **
**   OO    OO    XX      YYYY    GG    GG  EEEEEE NN      NN  **
**   OO    OO  XXXXXX   YYYYYY   GG   GG   EEEEEE  NN    NN   **
**   OO    OO XXX  XXX YYY   YY  GG GG     EE       NN  NN    **
**   OOOOOOOO XX    XX YY        GGG       EEEEE     NNNN     **
**   OOOOOOOO XX    XX YY        GGG       EEEEE      NN      **
**   OO    OO XXX  XXX YYY   YY  GG GG     EE         NN      **
**   OO    OO  XXXXXX   YYYYYY   GG   GG   EEEEEE     NN      **
**   OO    OO    XX      YYYY    GG    GG  EEEEEE     NN      **
**                                                            **
****************************************************************
 **************************************************************

try hockey.html and get this:
“it’s in the air. look at the letters.”

so it’s oxygen.

Python Challenge – Level 5

0 comments By Wayne Wang Filed in python Tagged with , , April 7th, 2012 @ 23:50

in source code found these hints:

  • peak hell sounds familiar ?
  • a tag named “peak” with a src attribution.

so use pickle.
code:

import pickle,urllib
f = urllib.urlopen('http://www.pythonchallenge.com/pc/def/banner.p')
obj = pickle.load(f)
f.close()
"obj is an list. print it"
for ele in obj:
    print ''.join(e[0]*e[1] for e in ele)

Result:
channel

Python Challenge – Level 4

0 comments By Wayne Wang Filed in python Tagged with , April 7th, 2012 @ 23:34

request a url and get a response that contains the next clue.
generally, the response contains four conditions:

  1. “and the next nothing is 44827″
  2. Your hands are getting tired and the next nothing is 94485
  3. “Yes. Divide by two and keep going.”
  4. “There maybe misleading numbers in the text. One example is 82683. Look only for the next nothing and the next nothing is 63579″

code:

def get_next(id):
    url = 'http://www.pythonchallenge.com/pc/def/linkedlist.php?nothing=%s'\
            % id
    data = getContent(url)
    if "and the next nothing is" in data:
        return re.findall("\d+" ,data)[-1]
    if "Yes. Divide by two and keep going." in data:
        return str(int(id)/2)
    else:
        print data
        return None
if __name__ == '__main__':
    startIndex = 12345
    count = 1
    while count < 400 and startIndex is not None:
        print count, startIndex
        count += 1
        startIndex = get_next(startIndex)

Result:
peak.html

Python Challenge – Level 3

0 comments By Wayne Wang Filed in python Tagged with , April 7th, 2012 @ 22:41

Again, the picture is useless.
Our original data lives in the source code.
The hints says:
“One small letter, surrounded by EXACTLY three big bodyguards on each of its sides.”

I was stuck of understanding this sentence for a while.
Finally found our target is to find characters like this “mmAAAaBBBmm” (a is the one we are looking for).
The page title says “re”.
so this:

import re
print "".join(re.findall("[^A-Z]+[A-Z]{3}([a-z])[A-Z]{3}[^A-Z]+", data))

Result:
linkedlist

Python Challenge – Level 2

0 comments By Wayne Wang Filed in python Tagged with , April 7th, 2012 @ 22:35

The picture is useless.
Find a long string in the comment, our traget is find all the characters.

import re
print "".join(re.findall("[A-Za-z]", data))

Result:
equality

Python Challenge – Level 1

0 comments By Wayne Wang Filed in uncategoried Tagged with , April 7th, 2012 @ 22:26

Find string in the source code of the html page.
using getComment() to get it.

pc-lv1-hints
the hints above are implying you should translate each char to his next two bro.
I wrote this function:

def trans(char):
    if ord(char) > ord('z') or ord(char) < ord('a'):
        return char
    else:
        return chr(ord('a') + (ord(char) - ord('a') + 2) % 26)
 
print ''.join(trans(char) for char in data)

turns out the following function works more efficiently

import string
table = string.maketrans(  
    "abcdefghijklmnopqrstuvwxyz", "cdefghijklmnopqrstuvwxyzab"  
) 
print data.translate(table)

got this:

i hope you didnt translate it by hand. thats what computers are for. doing it in by hand is inefficient and that’s why this text is so long. using string.maketrans() is recommended. now apply on the url.

now apply on the url:

print ''.join(trans(char) for char in 'map')
#print data.translate('map')

Result:
ocr

Python Challenge – Lib

0 comments By Wayne Wang Filed in python Tagged with , April 7th, 2012 @ 22:11

There are some common functions for the coming questions.

def getContent(url):
    from urllib2 import urlopen
    return urlopen(url).read()

def filterContent(data,tag,index=0):
    from BeautifulSoup import BeautifulSoup
    return BeautifulSoup(data).findAll(tag)[index].text

def getComment(data,index=0):
    from BeautifulSoup import BeautifulSoup,Comment
    return BeautifulSoup(data).\
            findAll(text = lambda text:isinstance(text, Comment))\
            [index]
Read previous entries

Copyright © Wayne's
Wayne's blog

↑ 回到页首 ↑