Nice Scripts

Những bài viết hay nên đọc về performance tại client

by saosangmo on Mar.07, 2009, under CLB Webmaster, Nice Scripts

Thời gian gần đây, làm cho khách chủ yếu là dùng hosting Việt Nam, tốc độ load về máy rất nhanh nên không thấy đáng bận tâm lắm về vấn đề giao diện, chủ yếu là dùng template có sẵn rồi customize thêm (dành thời gian vào hack code, ). Nhưng câu chuyện shared hosting, khi khách hàng của bạn làm ăn phát đạt, nhiều người truy cập, ối giời, băng thông, sức chịu tải và cả kết quả do của hệ thống. Tối ưu hóa thật là 1 câu chuyện nhức đầu. Nhân tìm hiểu và sửa chữa sai lầm, mình tìm được 1 số bài khá hay để giới thiệu với các bạn:
(continue reading…)

Leave a Comment :css, javascript, performance more...

Javascript Expand and Collapse (sử dụng thẻ DIV)

by saosangmo on Mar.04, 2009, under Nice Scripts

This JS code, actually looks for PRE tag and check if has a class name “csharpcode” and do some little work around to add

Anyways, here’s the code … Hope you guys like it


var pres = document.getElementsByTagName('pre');

var plen = pres.length;

for(var i = 0; i < plen; i++)
{
    if(pres[i].getAttribute('class') == 'csharpcode')
    {
        var tempObj = pres[i].innerHTML;
        pres[i].innerHTML = "";

        var aLinkEC = "<a id='xCode" + i + "' href=\"javascript:doMenu('Code" + i + "')\">[-] Collapse code ...</a>";
        var newLineStyle = '<br/>';
        var newCode = '<div id=\'Code' + i + '\' >' + tempObj + '</div>';

        var build = aLinkEC + newLineStyle + newCode

        pres[i].innerHTML = build;
    }
}

and here’s a little example of everything

<html>
    <head>
        <script type='text/javascript'>
            function doMenu(item)
            {
                obj=document.getElementById(item);
                col=document.getElementById("x" + item);

                if (obj.style.display=="none")
                {
                    obj.style.display="block";
                    col.innerHTML="[-] Collapse code ...";
                }
                else
                {
                    obj.style.display="none";
                    col.innerHTML="[+] Expand code ...";
                }
            }

            function addExpColelem()
            {
                var pres = document.getElementsByTagName('pre');

                var plen = pres.length;

                for(var i = 0; i < plen; i++)
                {
                    if(pres[i].getAttribute('class') == 'csharpcode')
                    {
                        var tempObj = pres[i].innerHTML;
                        pres[i].innerHTML = "";

                        var aLinkEC = "<a id='xCode" + i + "' href=\"javascript:doMenu('Code" + i + "')\">[-] Collapse code ...</a>";
                        var newLineStyle = '<br/>';
                        var newCode = '<div id=\'Code' + i + '\' >' + tempObj + '</div>';

                        var build = aLinkEC + newLineStyle + newCode

                        pres[i].innerHTML = build;
                    }
                }
            }
        </script>

        <style type="text/css">
            .csharpcode, .csharpcode pre
            {
                font-size: small;
                color: black;
                font-family: consolas, "Courier New", courier, monospace;
                background-color: #ffffff;
                /*white-space: pre;*/
            }

            .csharpcode pre { margin: 0em; }
            .csharpcode .rem { color: #008000; }
            .csharpcode .kwrd { color: #0000ff; }
            .csharpcode .str { color: #006080; }
            .csharpcode .op { color: #0000c0; }
            .csharpcode .preproc { color: #cc6633; }
            .csharpcode .asp { background-color: #ffff00; }
            .csharpcode .html { color: #800000; }
            .csharpcode .attr { color: #ff0000; }
            .csharpcode .alt
            {
                background-color: #f4f4f4;
                width: 100%;
                margin: 0em;
            }
            .csharpcode .lnum { color: #606060; }
        </style>
    </head>

    <body>
        <div id="posts">
            <strong>Javscript Expand/Collapse Code</strong>
            <pre class="csharpcode">
<span class="kwrd">function</span> ExpandCollapse(item)
{
content = document.getElementById(item);
ec = document.getElementById(<span class="str">&quot;ec|&quot;</span> + item);

<span class="kwrd">if</span> (content.style.display == <span class="str">&quot;none&quot;</span>)
{
    content.style.display = <span class="str">&quot;block&quot;</span>;
    ec.innerHTML = <span class="str">&quot;[-]&quot;</span>;
}
<span class="kwrd">else</span>
{
    content.style.display = <span class="str">&quot;none&quot;</span>;
    ec.innerHTML = <span class="str">&quot;[+]&quot;</span>;
}
}
            </pre>

            <strong>and a little bit of HTML sample</strong>
            <pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span><span class="kwrd">=&quot;javascript:ExpandCollapse('main');&quot;</span> <span class="attr">id</span><span class="kwrd">=&quot;ec|main&quot;</span><span class="kwrd">&gt;</span>[-]<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span> Main Item
<span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">id</span>=<span class="attr">main</span> <span class="attr">style</span><span class="kwrd">=&quot;margin-left:1em&quot;</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span>=#<span class="kwrd">&gt;</span>Item 1<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;&lt;</span><span class="html">br</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span>=#<span class="kwrd">&gt;</span>Item 2<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;&lt;</span><span class="html">br</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">a</span> <span class="attr">href</span>=#<span class="kwrd">&gt;</span>Item 3<span class="kwrd">&lt;/</span><span class="html">a</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
            </pre>
        </div>

        <script type='text/javascript'>addExpColelem();</script>
    </body>
</html>
sưu tầm từ http://heresmycode.blogspot.com/2008/09/javascript-expand-and-collapse-part-2.html

How To Use Google AdSense Within XML/XHTML

by saosangmo on Mar.02, 2009, under Nice Scripts, SEO

First, How Does AdSense Work?

You set up an account with Google and specify the ads you want. I said “Images if you have them but text if not” and specified some medium and large banners and squares in certain color schemes. Google then generated some small JavaScript blocks for me to place as I want within my pages.

The JavaScript I place within my page is short and simple so that I and my server have little to do.

When you view my page, you direct your browser to retrieve data from a specified URL. My server sends over an XHTML document. If you have JavaScript enabled in your browser, it then executes each JavaScript block on your computer.

The simple JavaScript blocks I added to my pages just set four variables and then it retrieves and executes a program from pagead2.googlesyndication.com. That automatically retrieved JavaScript program does the real work of getting the ad itself.

The ad retrieved is the result of doing something like the reverse of the typical Google search. Instead of answering the question, “What pages related to this search string?” it’s more like “To which search strings or ad descriptions would this page relate?” Put another way, it tries to automatically select ads on topics similar to the topic of the page. One of those four original variables specifies my Google account, so if you happen to retrieve an ad that interests you and you click on it, Google knows whom to credit.

A side effect that I didn’t anticipate is that it shows me what Google thinks my pages are about. It does a good job selecting relevant ads on many of my pages, like TCP/IP, Unix/Linux, some of my information security pages, my attempts to understand Turkish grammar, travel suggestions, and Toilets of the World.

It gets a little confused on many of my information security pages, obsessing on the term “security” appearing in the URL and throughout the page, and frequently offering ads for the vast and largely non-technical physical security industry in the U.S.

It just can’t figure out what some pages are about, like one explaining how to create Cyrillic text in Unicode, the L_AT_EX markup language, and Postcript. If it cannot decide what the page might be about, it tends to offer “public service ads”, generally promotions for charities.

OK, that’s what AdSense is and how it works. Why is this page here?

The Problem and the Solution

Google AdSense ads are based on JavaScript using document.write() calls. However, that doesn’t work within an XML/XHTML document. Here is the workaround!

In more detail, a Google AdSense ad looks like the following within a web page. The first block sets values for four variables, and the second effectively says “Set some variables, and then retrieve a JavaScript program from the following location and execute it.” Google suggests that you simply insert this JavaScript into an HTML file, but that doesn’t necessarily work — hence the reason for this page!

<script type="text/javascript">
    <!--
        google_ad_client = "pub-5845932372655417";
        /* Top Banner */
        google_ad_slot = "1979399418";
        google_ad_width = 728;
        google_ad_height = 90;
    //-->
</script>
<script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The problem is that the retrieved program show_ads.js contains calls to JavaScript’s document.write() function, and that is not allowed within an XHTML or XML page. Depending on your browser and how strict it is, you might get the ad, or maybe an error message, or maybe nothing at all.

How do I know what’s in the JavaScript program? I wondered why it didn’t work and so I retrieved a copy with wget:

$ wget http://pagead2.googlesyndication.com/pagead/show_ads.js
$ vim show_ads.js

Sure enough, document.write(); plays a crucial role. Some XML/XHTML solution is needed….

Here is the workaround: step by step:

Create a Proper HTML Document Containing the JavaScript

I created the below HTML file as:
/var/www/html/ads/banner-728x90.html
so it could be retrieved as:
http://cromwell-intl.com/ads/banner-728x90.html
It’s just the JavaScript from above as the body of a small HTML file:

<?php header("Content-Type: text/html;charset=utf-8"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sponsorship</title>
        <style type="text/css">
            body { margin: 0; padding: 0; }
        </style>
    </head>
    <body>
        <script type="text/javascript">
        <!--
            google_ad_client = "pub-5845932372655417";
            /* Top Banner */
            google_ad_slot = "1979399418";
            google_ad_width = 728;
            google_ad_height = 90;
        //-->
        </script>
        <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
    </body>
</html>

Create a “Wrapper” to Minimize Code Maintenance

I next created the below HTML file as:
/var/www/html/ads/banner-728x90-wrapper.html
Note that it specifies the width and height of the included HTML object in pixels, and it sets the MIME type of just this encapsulated object as text/html so that document.write(); will work. Without the explicit definition of width and height, the browser will not know in advance how to lay out the page and the result may look very strange.

<div style="width: 728px; height: 90px">
	<object data="/ads/banner-728x90.html"
		type="text/html"
		style="width: 728px; height: 90px">
	</object>
</div>

I can make a number of wrappers to pull in the same file and underlying ad code with different styles. For example, those wrappers could make the ad “float” to the left margin of the page:
<div style="width: 728px; height: 90px; float: left;">
or to the right margin:
<div style="width: 728px; height: 90px; float: right;">

I could have put the six-line block of <div>...<div> directly in an HTML file, but then I have six-line blocks to maintain! The next step makes it much easier.

Include The Ad by Pulling in the Wrapper with PHP

All I have to do now is add one PHP line to a file to include the wrapper and let it pull in the code. This page, for example, literally begins as shown here. See how it pulls in two ads at the very beginning, before the large header “How To Use Google AdSense Within XML/XHTML“ — a 728×90 banner across the top and a 200×200 box that floats to the right:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>How To Use Google AdSense Within XML/XHTML</title>
		<meta name="description" content="How to use Google AdSense
			within XML/XHTML pages.
			Google AdSense uses JavaScript document.write();,
			which is not allowed within XML/XHTML.
			Here is a simple solution to the problem." />
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
	</head>

	<body style="background: #f4e4b0">

		<?php @ include ('../ads/banner-728x90-wrapper.html'); ?>
		<?php @ include ('../ads/square-200x200-wrapper.html'); ?>

		<h1>How To Use Google AdSense Within XML/XHTML</h1>

The overall result making up the entire page is a valid XML/XHTML document encapsulating a short HTML block of specified size containing nothing but Google’s JavaScript program.

The only remaining annoyance, and it’s fairly minor, is PHP’s inability to easily deal with absolute paths. The include is relative to that page’s location, so I need the ../ shown above.

The supposedly “easy” fix it to instead use all this:

<?php include($_SERVER['DOCUMENT_ROOT'].'/ads/banner-728x90-wrapper.html'); ?>

Ugh. I’ll just keep track of how many instances of ../ are needed….

Leave a Comment :adsense, ga conflic, xhtml more...

Chained Selects – Tạo hộp chọn nhiều cấp

by saosangmo on Feb.26, 2009, under Nice Scripts

Khi customize ứng dụng rao vặt, do khách hàng có quá nhiều danh mục và danh mục con, vì thế, mình phải chia lớp cho các cấp danh mục. Mỗi một cấp danh mục được chọn thì phía dưới chỉ hiện ra các danh mục con tương ứng. Sau khi google 1 ngày, các lựa chọn sau là có vẻ hợp lý nhất: (continue reading…)

Leave a Comment :hộp chọn nhiều cấp, multi-level select list more...

Fancy Sliding Tab Menu V2

by saosangmo on Jan.11, 2009, under Giao diện - đồ họa web, Nice Scripts

The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time I’ve included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window. (continue reading…)

Leave a Comment :menu nổi, menu trượt, sliding bar more...

10 Advanced PHP Tips To Improve Your Programming

by saosangmo on Dec.31, 2008, under CLB Webmaster, Nice Scripts

By Glen Stansberry

PHP programming has climbed rapidly since its humble beginnings in 1995. Since then, PHP has become the most popular programming language for Web applications. Many popular websites are powered by PHP, and an overwhelming majority of scripts and Web projects are built with the popular language. (continue reading…)

Leave a Comment :kỹ thuật lập trình more...

PHP Script đơn giản để backup file online

by saosangmo on Aug.15, 2008, under Nice Scripts

Mình đọc diễn đàn và thấy 1 script hay hay, nhỏ gọn nên đã copy về đây để mọi người tham khảo:

Nội dung

<?php
$Filename = $dbname . ‘-’ .date(“Y-m-d-H-i-s”) . ‘.gz’;
$command = “mysqldump –user=DBUSERNAME –password=DBPASSWORD –quick –add-drop-table –add-locks –extended-insert –lock-tables –all DATABASENAME | gzip > $Filename”;
system($command);
?>

(continue reading…)

Leave a Comment :backup, database backup, php scripts more...

Virtuemart hack – Hiển thị sản phẩm liên quan trong cùng 1 category

by saosangmo on Aug.12, 2008, under Nice Scripts, Open source CMS

Áp dụng cho Virtuemart 1.1, bản 1.0 chúng tôi chưa kiểm tra

Đặt vấn đề: bạn có rất nhiều sản phẩm trong shop và muốn đặt 1 sản phẩm (related products) bạn cần phải tìm kiếm rồi thêm vào sản phẩm đang soạn thảo và nữa là có cả tình huống phải mở sản phẩm cũ ra để thêm mới các sản phẩm liên quan vào. Vì vậy, việc này sẽ làm mất khá nhiều thời gian của bạn. Có một cách khá hay để hiển thị các sản phẩm liên quan tới sản phẩm hiện tại là hiển thị ngẫu nhiên các sản phẩm khách hàng đang xem đồng thời không làm ảnh hưởng tới các sản phẩm đã được bạn thêm sản phẩm liên quan vào rồi. (continue reading…)

6 Comments :hack virtuemart, joomla, virtuemart more...

28 AJAX Scripts for Designers

by saosangmo on Jul.11, 2008, under Giao diện - đồ họa web, Nice Scripts

Một số tab và tooltip sử dụng công nghệ AJAX sưu tầm được từ blog của http://outlawdesignblog.com/2008/28-ajax-scripts-for-designers/

Xin giới thiệu cùng các bạn nhằm trang trí cho website của bạn thêm sinh động. (continue reading…)

Glassbox – Chiếc hộp cỏ của tự nhiên

by saosangmo on Mar.02, 2008, under Giao diện - đồ họa web, Nice Scripts

Một project bằng javascript với nhiều hiệu ứng tự nhiên đến chuyên nghiệp, kéo và thả, mờ và tỏ,….

Bạn có thể click đúp.

Cơ chế AJAX.

Uyển chuyển và sinh động.

Hoàn toàn miễn phí.

Tất cả được thể hiện trên 1 trang duy nhất. (continue reading…)

Leave a Comment :ajax, glassbox, glassbox-js, javascript more...

« Older Entries

Mục tiêu
Đã quan tâm tới không gian mã nguồn mở của saosangmo trên net

You can also subscribe by email by filling the field below:
Categories
sponsor
My Twitter Updates
follow me on Twitter
Tag Cloud
alexa rank bảo mật bảo mật máy chủ backup buttons công cụ code hay css database giảm dung lượng giao diện google hack hack virtuemart icons interface javascript joomla joomla 1.5 joomla module khái niệm lang việt màu sắc menu module page rank performance photoshop php sửa giao diện smf security SEO Simple Machine Forums tối ưu hóa tìm kiếm tab template templates thiết kế tiếng Việt tiện ích utf-8 Việt hóa virtuemart wordpress wordpress-plugin
Recent Posts
Blogroll
Tools
- Giảm dung lượng javascript

Categories

Meta

I'm saos@ngmo

Nice Scripts

Những bài viết hay nên đọc về performance tại client

Javascript Expand and Collapse (sử dụng thẻ DIV)

How To Use Google AdSense Within XML/XHTML

First, How Does AdSense Work?

The Problem and the Solution

Create a Proper HTML Document Containing the JavaScript

Create a “Wrapper” to Minimize Code Maintenance

Include The Ad by Pulling in the Wrapper with PHP

Chained Selects – Tạo hộp chọn nhiều cấp

Fancy Sliding Tab Menu V2

10 Advanced PHP Tips To Improve Your Programming

PHP Script đơn giản để backup file online

Virtuemart hack – Hiển thị sản phẩm liên quan trong cùng 1 category

28 AJAX Scripts for Designers

Glassbox – Chiếc hộp cỏ của tự nhiên

Mục tiêu

Categories

sponsor

My Twitter Updates

Recent Posts

Blogroll

Tools

Categories

Meta

Looking for something?

Visit our friends!

Archives

Nice Scripts

First, How Does AdSense Work?

The Problem and the Solution

Create a Proper HTML Document Containing the JavaScript

Create a “Wrapper” to Minimize Code Maintenance

Include The Ad by Pulling in the Wrapper with PHP

Mục tiêu

Categories

sponsor

My Twitter Updates

Tag Cloud

Recent Posts

Blogroll

Tools

Categories

Meta

Looking for something?

Visit our friends!

Archives