kiến thức Tổng hợp những addon chất cho Firefox / Chromium

haidangtueba said:

Code đó ẩn sidebar, bác xem có cách nào làm sidebar ẩn hiện hoặc hiện cuối trang thì ngon

Click to expand...

toi la gay :sosad: said:

Muốn không ẩn sidebar thì theo cách của thằng Old Lander nó biến Sidebar thành position: fixed, rồi ẩn qua bên phải và hiện ra khi kéo chuột từ phải qua trái. Đó là cách dễ nhất và an toàn nhất.

Có vẻ hỏng trên trang này: https://old.reddit.com/r/DotA2/

Nó thành thế này:

View attachment 2032960

Để sửa thêm:

.content {margin-right: 0px!important;} hay thế này ngon hơn (hoạt động trên nhiều trang): .content {margin: 0px!important;}

Kết đắng xè lưỡi:
View attachment 2032965

Click to expand...

haidangtueba said:

Ngon, để em quote lên post trên

Click to expand...

body {min-width: unset; max-width: device-width;}
.side {position: fixed!important;left:-300px;top:0px;}
.side:hover {left:unset}
#header-bottom-right {position: relative;}
.content {margin: 0px!important;}

haidangtueba said:

Mobile làm gì có chuột bác.

Click to expand...

body {min-width: unset; max-width: device-width;}
.side {position: fixed!important;left:-300px;top:0px;}
.side:hover, .side:active {left:unset}
#header-bottom-right {position: relative;}
.content {margin: 0px!important;}

toi la gay :sosad: said:

Nhấp vào thanh sidebar vẫn được tính là rê chuột vào đó: https://streamable.com/6nbvtv

Code:

body {min-width: unset; max-width: device-width;}
.side {position: fixed!important;left:-300px;top:0px;}
.side:hover, .side:active {left:unset}
#header-bottom-right {position: relative;}
.content {margin: 0px!important;}

Tối ưu cho nó dùng % màn hình cho nó responsive nữa là ok, dùng px nghĩa là không responsive.

Click to expand...

haidangtueba said:

Ngon, quote lên post trên, thật ra để -300px là phải rồi đó bác, vì chiều ngang màn điện thoại có là 1440px thì lên web vẫn là 320 thôi.

Click to expand...

.premium-banner-outer {
  visibility: hidden;
  height: 300px;
}

body {min-width: unset; max-width: device-width;}
.side {position: fixed!important;left:-300px;top:0px;overflow-x:scroll;height:100%;}
.side:hover, .side:active {left:unset}
#header-bottom-right {position: relative;}
.content {margin: 0px!important;}
.premium-banner-outer {
  visibility: hidden;
  height: 300px;
}

toi la gay :sosad: said:

Ở cái sidebar tối ưu lại chút là ngon, ví dụ ẩn Premium rồi tạo khoảng trống cho tiện nhấp vào, có chút khoảng trống sẽ tốt hơn là ẩn hoàn toàn, chính cái ô Premium mà ẩn kiểu giữ khoảng trống là tiện nhất.

Code:

.premium-banner-outer {
  visibility: hidden;
  height: 300px;
}

Code mới ẩn đi premium, scroll được:

Code:

body {min-width: unset; max-width: device-width;}
.side {position: fixed!important;left:-300px;top:0px;overflow-x:scroll;height:100%;}
.side:hover, .side:active {left:unset}
#header-bottom-right {position: relative;}
.content {margin: 0px!important;}
.premium-banner-outer {
  visibility: hidden;
  height: 300px;
}

Click to expand...

haidangtueba said:

Lên post gốc.

Click to expand...

haidangtueba said:

Lên post gốc.

Click to expand...

body{min-width:unset;max-width:device-width}.side{position:fixed!important;left:-300px;top:0;overflow-x:scroll;height:100%}.side:active,.side:hover{left:unset}#header-bottom-right{position:relative}.content{margin:0!important}.premium-banner-outer{visibility:hidden;height:300px}

toi la gay :sosad: said:

Ngoài ra để code CSS/JS thành một dòng, dùng cái này nhé: https://minifier.app/

Ví dụ code trên:

Code:

body{min-width:unset;max-width:device-width}.side{position:fixed!important;left:-300px;top:0;overflow-x:scroll;height:100%}.side:active,.side:hover{left:unset}#header-bottom-right{position:relative}.content{margin:0!important}.premium-banner-outer{visibility:hidden;height:300px}

Như thế có thể mạnh tay dùng JS luôn, tăng thêm ý tưởng sáng tạo.

Thật ra code ẩn hiện sidebar phải là JS mới chuẩn kia, ẩn hiện kiểu dùng gesture xoẹt phải 2 lần liên tiếp ấy, đó mới là tiện nhất.

Click to expand...

haidangtueba said:

Mời bác biểu diễn kỹ xảo, em dân kinh tế nên chỉ mò đến đoạn này thôi, xin phép làm khán giả cổ vũ .
Mà minify thì mới cần vào trang kia chứ chỉ xóa line break thì copy paste vào thanh địa chỉ trình duyệt là được bác ạ .

Click to expand...

toi la gay :sosad: said:

.side{position:fixed!important;left:-300px;top:0;overflow-x:scroll;height:100%}.side:active,.side:hover{left:unset}

Click to expand...

psnplus said:

Mình mới biết reddit vài tháng đổ lại nên ko rõ cái old reddit có gì hay hơn reddit new nhỉ. Tạm xem new reddit tháy dễ dòm hơn.

Click to expand...

toi la gay :sosad: said:

Old Reddit nhẹ hơn do ít chạy nền, ít dùng JS, không bị cấm vào một số trang (rất khó chịu), không quảng cáo app tắt mỏi tay.

Tuy nhiên Old không hỗ trợ responsive nên gần như không thể dùng trên điện thoại trừ khi dùng code trên mới khá lên nhiều.

Click to expand...

psnplus said:

Cảm ơn thím, đã hiểu nếu thế code trên phừ hợp cho mobile. Topic này chắc thuộc trending thread views rồi.

Click to expand...

Old reddit (mặc định show 25 post/page)	New reddit (setup show 6 post, cuộn đến đâu load thêm đến đấy )
>
6 script 9/.34 = 27 request 27 - 9 = 18 request được fetch 4 domain	11 script 10/.03 = 333 request 333 - 10 = 323 request được fetch 6 domain

haidangtueba said:

So thử trên mobile, chỉ truy cập vào 2 phiên bản, chưa cuộn.
Đừng hỏi vì sao nhanh hết pin

Old reddit (mặc định show 25 post/page)	New reddit (setup show 6 post, cuộn đến đâu load thêm đến đấy )
View attachment 2033309>	View attachment 2033310
6 script 9/.34 = 27 request 27 - 9 = 18 request được fetch 4 domain	11 script 10/.03 = 333 request 333 - 10 = 323 request được fetch 6 domain

Click to expand...

nhoxbuondkny said:

Ủa, sao em ko làm đc như bác nhỉ, vẫn ra bản old pc

Click to expand...