أرشيف التصنيف: أكواد

كود css تحويل القالب من اليسار الى اليمين

كود تحويل القالب من اليسار الى اليمين طبيعة الكود css

نتيجة بحث الصور عن تحويل القالب من اليسار الى اليمين

بالنسبة لنقل العامود الى اليمين
ابحث فى ملف ال css عن اسم الدايف div الذي يحتوي العامود
وقم بتغيير

 

float:left;

 

الى

 

float:right;

 

أما لتحويل اتجاه الكتابة و النصوص ليكون من اليمين الى اليسار
فابحث عن كل السطور المكتوب فيها

 

text-align: left;

واستبدلها بـ

 

text-align: right;

فتح روابط خارجية في صفحة جديدة مع إعطائها الوسم Nofollow

نتيجة بحث الصور عن روابط الخارجية في صفحة جديدة
الروابط الخارجية احد المكونات التي لا مفر من استخدامها في المدونات إما لشرح او لتحميل لكن هناك مشكلتين مرتبطتان بالروابط الخارجية
  1. عدم الفتح في نافذة المدونة وهذا يجعل الزائر يترك المدونة وربما يكون ما يزال يقرأ
  2. ان تصبح الروابط الخارجية Dofollow مما يؤثر سلباً على المدونة ان كثر وجودها
طبعا هناك الطريقة اليدوية لجعل الروابط الخارجية تفتح في صفحة جديدة وتعطى الوسم Nofollow
مثال لرابط سيفتح في صفحة جديدة وله وسم Nofollow

<a href=’#’ target=”_blank” rel=”nofollow”>الرابط</a>

الكود الاحمر يعني ان الرابط سيفتح في صفحة جديدة
والكود الاخضر يعني انه Nofollow
والطريقة اليدوية هي الأفضل من ناحية انك لا تحتاج تركيب أكواد
لكن هناك من لم يكن يعرف بتلك الأمور ومدونته ممتلئه بالروابط ولا يستطيع تعديلها كلها
او مدونات تخص تحميل فيكون استخدام الروابط الخارجية كثيراً ويصعب وسمها كلها
او من مدونته جماعية فيصعب ان يراجع وراء كل كاتب الحل في الكود التالي


<script type=’text/javascript’>
$(document).ready(function() {
$(“a[href^=’http://’]”).each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr(‘target’, ‘_blank’);
$(this).attr(‘rel’, ‘nofollow’);
}
}
);
$(“a[href^=’https://’]”).each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr(‘target’, ‘_blank’);
}
}
);
});
</script>
الكود يجمع بين الامرين الفتح في صفحة جديدة والـ Nofollow
لانني وجدت كثير من المدونين يستخدمون كودين منفصلين مما يجعل الأمر ثقيل
وقد حدد الجزء الخاص بالـ Nofollow باللون الأصفر لمن اراد حذف هذا الأمر

طريقة تغير اندكس موقعك عن طريق .htaccess

هل فكرت يوما بوضع صفحه رئيسيه لموقعك غير الاندكس.
 الحل بسيط للغايه. الكود التالى يوضع بملف .htaccess وسيقوم بتحويل الصفحه الى التى ذكرتها برابط التحويل
 

DirectoryIndex filename.html 


مع استبدال filename.html برابط الصفحه التى تريد أن تظهر كصفحه رئيسيه لموقعك

أكواد .htaccess لتسريع مدونات وردبرس الجزء1

Speed up WordPress site - htaccess optimization WordPress

Nowadays an eye catching look of your website or a perfect content can be not enough to attract the potential users. If you are a site owner you need to know that Google uses an algorithm which makes a site loading speed one of the factors influencing the site’s position in the search results. So when the site loading time takes few seconds only, for internet users and google it’s often too long.
Statistics say that almost a half of Internet users expect a site to load in two seconds or less.
It’s important to take care of this, particularly that the results can be improved without much effort.
There are many techniques to improve the loading time of your site. Some of theme are a basic and relatively simple. One of the solutions is a .htaccess file, which allows to introduce the basic site optimization in minutes.

What is a .htaccess file?

.htaccess is a configuration file for use on Apache web servers located in the root directory. It gives the ability to control a specific folder or the piece of server. Using .htaccess file we may modify the configuration of the server software to stop or start running some server functionality and features, for example (taking into account the purpose of this tutorial) we may:

  • optimize your site
  • improve page loading speed
  • create a diversion (internal and external)
  • create password protected directories
  • block specific IP
  • and many more

Where to find .htaccess file in WordPress?

The file should be located be in the root folder of your WordPress installation.
.htaccess file name starts with a dot (.) at the beginning, which specifies that it is a hidden file. Remember to turn on “show hidden file feature” when you are trying to access your .htaccess file using FTP client or cPanel of your hosting.

Why You can not find .htaccess file?

It may occure that your WordPress site has not generated a .htaccess file yet. It is generated when you set up permalinks on Settings >> Permalinks settings. Simply click on “Save Changes” button to force WordPress to generate a .htaccess file in your site’s root directory.

If at this step you got a problem with file genereting, at first check permissions of the directory, must be writable.

Optionally if .htaccess file does not exists, you can create it and upload.
It’s worth to mention that not all servers support using .htaccess file (for example free servers) and the service may be blocked – take it into account when something goes wrong while creating the file.

Optimization code for .htaccess file 

Compression

Compression simply reduces the size of document. Is most effective for HTML files, JavaScripts, CSS stylesheets and XML files. Generally compression reduces 60% to 80% size of data. This reduces also server response time and bandwidth – volume of data which must be sent by server to client browser.

The best way to enable compression is using mod_gzip or mod_deflate for Apache software (or equivalent for other web server). Both modules basically do the same thing, compress data, but mod_deflate is better supported and documented, also easier to configure. If mod_deflate doesn’t work correctly on your website or web server for some reason of course you can use mod_gzip. Both compressions methods can be enabled by adding a simple code in WordPress .htaccess file:

DEFLATE

# BEGIN DEFLATE COMPRESSION
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml
</IfModule>
# END DEFLATE COMPRESSION

GZIP

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Browser Caching

By setting browser caching you’re telling browser to keep some kind of files for a specified period of time in local memory (cache). When cached file is needed again, the browser will load from its local drive instead of requesting it from the server.
We can use for that purpose two Apache modules – mod_expires and mod_headers (or equivalent for other web server).
Both methods can be set at the same time in .htaccess file:

Expires headers

#BEGIN EXPIRES HEADERS
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"
# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
# Webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</IfModule>
#END EXPIRES HEADERS

Cache-Control

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
 <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
 Header set Cache-Control "public"
 </filesMatch>
 <filesMatch "\.(css)$">
 Header set Cache-Control "public"
 </filesMatch>
 <filesMatch "\.(js)$">
 Header set Cache-Control "private"
 </filesMatch>
 <filesMatch "\.(x?html?|php)$">
 Header set Cache-Control "private, must-revalidate"
 </filesMatch>
</ifModule>
# END Cache-Control Headers

Note: There is no need to set the max-age directive with the Cache-Control header since it is already set by the mod_expires module. In other case we should use :

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
 <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
 Header set Cache-Control "max-age=2592000, public"
 </filesMatch>
 <filesMatch "\.(css)$">
 Header set Cache-Control "max-age=604800, public"
 </filesMatch>
 <filesMatch "\.(js)$">
 Header set Cache-Control "max-age=216000, private"
 </filesMatch>
 <filesMatch "\.(x?html?|php)$">
 Header set Cache-Control "max-age=600, private, must-revalidate"
 </filesMatch>
</ifModule>
# END Cache-Control Headers

 

إضافة كود صندوق الدردشة Chat إلى المواقع و المدونات

تعبتر خاصية الدردشة من بين اكثر الأشياء التي يحب المستخدمون القيام بها على شبكة الأنترنت ، حيث أن الدردشة تمنح المستخدمين فرصة التحدث مع بعضهم البعض و التعرف على بعضهم ، و كي تستطيع تحويل موقعك إلى منصة للدردشة و الشات فإن كل ما تحتاج إليه هو كود صغير تقوم بإضافته إلى الموقع أو المدونة الخاصة بك ليظهر صندوق الدردشة في زاوية الموقع بحيث يمكن لزوار موقعك التحدث مع بعضهم بشكل حي أو أون لاين ضمن مجموعة .

و من اجل إضافة صندوق الدردشة في الزاوية الجانبية لموقعك أو مدونتك فإن كل ما عليك القيام هو النقر على الرابط أسفل التدوينة و ذلك من أجل الدخول إلى موقع chatango و هو عبارة عن موقع يتيح لك إمكانية الحصول على كود صندوق الدردشة من أجل إضافته إلى منصة موقعك من أجل السماح لزوار موقعك بالدردشة فيما بينهم أون لاين .

و أكثر ما يميز موقع chatango هو سهولة و بساطة إستخدامه حيث أنك بعد الدخول إلى الموقع سوف تجد واجهته على الشكل التالي ، و كل ما عليك القيام به الآن هو إختيار نوع صندوق الدردشة الذي تراه مناسبا لموقعك حسب إختيارك ، حيث يتيح لك الموقع 3 أنواع من صناديق الدردشة أو الشات :

بعد قيامك بإختيار نموذج صندوق الدردشة و النقر عليه ، سوف ينتقل بك الموقع إلى صفحة التعديل على الصندوق ، بجيث يمكنك تغيير الألوان و المقاسات الخاصة بالصندوق ، كما يمكنك معاينة شكل ظهور صندوق الدردشة في الهواتف الذكية على موقع ، من خلال النقر على Mobile View .

بعذ الإنتهاء قم بوضع إسم صندوق الدردشة في خانة Group Name ثم قم بالظغط على Create Group ، بعد ذلك سوف يتوجب عليك التسجيل قبل الحصول على كود إضافة صندوق الدردشة إلى موقعك أو مدونتك :

و بهذا سوف تحصل على الكود بعد التسجيل مما يتيح لك إمكانية إضافته إلى منصة موقعك أو مدونتك ، و بما ان أغلب المستخدمين يستعملون منصة البلوجر فإنه من أجل إضافة الكود إلى بلوجر يكفي أن تذهب إلى قسم ” تخطيط ” ثم تقوم بإضافة نافذة HTML/JavaScript و تقوم بنسخ الكود بداخلها .

الدخول إلى موقع chatango

 

شرح الروابط الدائمة Permalinks بالتفصيل الممل والتحويل لأي امتداد

بسم الله الرحمن الرحيم
السلام عليكم
كثيراً منا يجهل التعامل مع الروابط الدائمة (Permalinks) وان شاء الله في هذا الدرس سأشرحها بالكامل مع شرح كل نوع وشكل وكيف نستخدمه …..

شكل الروابط الإفتراضي:

الشكل المختصر للروابط الإفتراضية دائما يكون على هذا الشكل:

 http://example.com/?p=10

P اختصار Post معناها تدوينة أو المشاركة .. والرقم 10 هو رقم التدوينة (معرف)…

  • تركيبة روابط مخصصة:

الكثيرين منا يريدون تركيبة روابط مخصصة ولا يريدون التركيبة الإفتراضية اللي اتكلمت عليها سابقاً .. لذلك عليك الذهاب للوحة تحكم موقعك ثم إعدادات >روابط دائمة …. سترى كما في الصورة التالية … واضع الخيار على تركيبة مخصصة .. ومختار تركيبة الروابط كما ترى

%category%/%postname%/

يعني بعد رابط موقعنا ثم القسم ومن ثم اسم التدوينة يعني العنوان …. وبعد الصورة ساضع كل التركيبات المخصصة اللي تستطيعون استخدامها وتقدرو تختارو اللي بتريدوه وتسووها على كيفكم ….
الإختصارات والتركيبات المخصصة:
طبعاً بعد اختيارك لـ تركيبة مخصصة هناك اختصارات (علامات) متاحة وجميلة .. أترككم معها ومع الشرح

اقتباس

%year% = السنة اللي كتبت فيها التدوينة (مثال. 2012)
%monthnum% = الشهر في السنة (مثال. 04)
%day% = اليوم في الشهر (مثال. 22)
%hour% = الساعة في اليوم (مثال. 11)
%minute% = الدقيقة في الساعة (مثال. 26)
%second% = الثانية في الدقيقة (مثال. 53)
%postname% = اسم التدوينة (عنوان التدوينة)
%post_id% = الـ id الخاص بالتدوينة يعني رقمها (معرف التدوينة)
%category% = القسم الخاص او كما يعرف (تصنيف) اللي اخترته للتدوينة
%author% = اسم مؤلف أو كاتب التدوينة

أيضا يمكنكم اختيارالبعض من هذه التركيبات كـ %post_id% أو %postname% مع بعضهما البعض … إليكم بعض الأمثلة:

اقتباس

/%post_id%/%postname% = تكون بهذا الشكل: رابط موقعك/معرف التدوينة/عنوان التدوينة
/%category%/%postname% = تكون بهذا الشكل: رابط موقعك/القسم اللي اخترته للتدوينة/عنوان التدوينة
/%year%/%postname% = تكون بهذا الشكل: رابط موقعك/السنة اللي كتبت فيها تدوينتك/عنوان التدوينة

وبهذا الشكل تستطيع تركيبة الروابط الدائمة كما تشاء …..

  • كيفية جعل الروابط PHP أو HTML:

كما نعلم أن تركيبة الروابط سهلة بل سهلة جداً وتستطيع تغييرها كما شئت فالشرح التالي يوضح كما ذكرت اني نجعله PHP و HTML كما نحب أو تركها بلا الاثنتان
فرضاً نريد هذه التركيبة

/%category%/%postname% = تكون بهذا الشكل: رابط موقعك/القسم اللي اخترته للتدوينة/عنوان التدوينة (الشرح سيتم عليها)

اذا أردناه PHP فتصبح التركيبة على الشكل التالي:

رمز Code:
/%category%/%postname%.php

اذا أردناه HTML فتصبح التركيبة على الشكل التالي:

/%category%/%postname%.html

يعني نفس التركيبة العادية فقط مع اضافة الإمتداد .php أو .html في نهايتها …..
ملف .htaccess:

ماذا يحدث في حال أضفت تركيبة مخصصة جديدة ولم تعمل؟؟

هذا يعني أن مدونتك تفتقد ملف الهتكس .htaccess الموجود في الـ Public_html رئيسية ملفات موقعك أو مدونتك أو تفتقد للكود التالي:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
—————
عليك انشاء ملف الهتكس وادخال هذا الكود به ورفعه لرئيسية ملفات موقعك …
واذا موجود فقط قم بتحريره واضافة الكود في اخره ..
————-

ملاحظة: التغيير لا يؤثر بالنسبة لأرشفتكم في جوجل لأنه النسخ الحديثة من ووردبريس تحول تلقائياً … يعني لا تخاف من تغيير تركيبة روابطك اذا أحببت …

طبعاً لمن يريد الإطلاع على التفاصيل في موقع ووردبريس الاساسي يتفضل يضغط هنا

——————————————————————-

بالنسبة للأشخاص اللي يعانون من مشكلة بتعديل الهتكس …. وكتير منهم لما يضيفون الكود للهتكس بعد تغيير التركيبة للروابط العربية مثلاً يتوقف الموقع كلياً مع أنهم طبقو كل شيء حرفياً …
السبب ممكن تطبيق غير ناجح أو فراغ في السطور أو أو … يعني اي شيء ممكن يأثر كما نعلم ملف الهتكس حساس جداً.

  • الحل:
  1. قبل تغيير تركيبة الروابط … الدخول للـ FTP وإعطاء التصريح 777 لملف الهتكس “.htaccess” نغير التصريح ونجعله يسمح للكتابة على الملف حتى يتم التعديل عليه بشكل اوتوماتيكي وصحيح.
  2. بعد تغيير تصريح الهتكس .. اذهب واختار تركيبة الروابط التي تريد ومن قم قم بالحفظ.
  3. بعد الإنتهاء وتغيير تركيبة الروابط الذهاب للموقع وان شاء الله سيعمل بالتأكيد 100% الرجوع للـ FTP وارجاع التصريح القديم لملف الهتكس على الأغلب 644.

Block nuisance requests for .well-known, apple-app, etc.

Block nuisance requests for .well-known, apple-app, etc.

[ Block Nuisance Requests ] Anyone who is paying attention to their  has probably noticed that Google and other bots have been making endless requests for .well-known, apple-app-site-association, and various related files. This quick post explains how to save some server bandwidth and resources by blocking such repetitive requests, and also looks at a related problem with certain search engines <cough> not respecting a standard “410 Gone” server response.

What’s up

For the past several months I’ve noticed an uptick for requests for the following resources:

apple-app-site-association
.well-known/apple-app-site-association
.well-known/assetlinks.json

Googlebot especially is continually snooping for these files, even if there is nothing that actually links to them. I first noticed this trend while examining my sites in Google Webmaster Tools. Every site, every crawl, googlebot and others are requesting these files.

And that’s not a bad thing IF the files actually exist. But they don’t on my server, and I am getting tired of googlebot not heeding a simple “410 Gone” response, which I serve here on this site for example, for any/all requests for any of the above files.

Wake up

And why is Google reporting 410 responses as if they were 404? By definition a 410 response is designed to convey a clear message that the resource does not exist; i.e., it’s GONE. 410 is meant to provide webmasters with a way to clean up their servers. According to specification:

The requested resource is no longer available at the server and no forwarding address is known. This condition is expected to be considered permanent.

So please pay attention and make a note, googlebot. 410 does NOT mean please keep checking over and over and over again because the resource is not found — it means that the resource is GONE. Please wake up, Google.

Shut up

So after a few months of getting these endless requests for this particular set of files, I finally decided to do something about it. Here is a quick snippet that I’ve been adding to my sites, basically telling unruly bots to shut up:

# Block nuisance requests
<IfModule mod_alias.c>
	RedirectMatch 403 (?i)\.well-known
	RedirectMatch 403 (?i)apple-app-site-association
</IfModule>

That will block all requests for .well-known and apple-app-site-association. So only implement these directives if you’re sure that these files do not exist on your server. Notice that we’re serving a crystal-clear 403 forbidden response. At the time of this writing, Google seems to understand and respect the meaning of this particular response code, and thus the requests do not appear in the “errors” section of Webmaster Tools.

[ Google Webmaster Tools - Not Understanding the Meaning of a 410 Response ]Case in point: these stupid 410 URLs are IMPOSSIBLE to get rid of because Webmaster Tools doesn’t respect 410

Technically a 410 Gone response would be more accurate, but as explained Google doesn’t seem to comprehend the meaning of an explicit message telling them that the requested resource is GONE. Most good bots understand and respect 410, and remove the resource from memory, so as to not keep endlessly requesting it. You know, so they’re not wasting time, energy, and resources.

Thus the whole point and not-so-hidden moral of the story:

410 was once used to erase a resource from memory, but now alas it’s meaningless because the largest search engine in the world treats it like a common 404.

And there’s nothing that any of us can do about it.

Replace contenteditable with textarea

Working on my WordPress plugin, Dashboard Widgets Suite, I needed a solid way of replacing contenteditable with a textarea on form submit. Here is a simple solution along with some bonus notes on dealing with certain HTML tags.

HTML

First, add the following HTML:

<form method="post" action="">
.
.
.
<textarea name="example" class="hidden"></textarea>
<div class="example" contenteditable="true"></div>
.
.
.
</form>

 

This markup represents your form with a textarea and contenteditable div included. The form can contain whatever else you need, but these two elements are required for this technique. Also make sure that the page includes a hidden class to hide the textarea. It will be hidden and used only when the form is submitted.

jQuery

Once the HTML is in place, add the following jQuery:

$('form').on('submit', function() {
	
	var textarea = $(this).find('textarea');
	var content  = $(this).find('.example').text();
	
	textarea.val(content);
	
});

 

his jQuery snippet copies the value of the contenteditable div to the textarea when the form is submitted. So whatever content the user adds to the contenteditable div will be submitted along with the form via the textarea.

Notes

When using jQuery’s .text() function as in the previous technique, HTML tags are preserved only for the first/initial form submission. This is fine for one-time forms, but forms designed for multiple submissions (e.g., content editing forms) will lose the HTML tags if the content is submitted more than once.

Fortunately, using jQuery’s .html() function escapes and retains the HTML tags. This enables us to enhance our previous jQuery function:

$('form').on('submit', function() {
	
	var textarea = $(this).find('textarea');
	var content  = $(this).find('.example').html();
	
	var escaped = decode_html(content);
	var escaped = remove_tags(escaped, 'textarea');
	
	textarea.val(escaped);
	
});

 

..this script calls the following two functions:

function decode_html(html) {
	var txt = document.createElement('textarea');
	txt.innerHTML = html;
	return txt.value;
}

function remove_tags(text, selector) {
	var wrapped = $('<div>' + text + '</div>');
	wrapped.find(selector).remove();
	return wrapped.html();
}

The first of these two extra functions decodes any HTML included in the passed string. The second function removes problematic tags such as textarea, which otherwise could break page layout.

jQuery Auto Resize Multiple Textareas

The User Notes Widget that’s included in my Dashboard Widgets Suite plugin enables users to edit notes right on the WP Dashboard. To make things extra awesome, each note automatically expands as the user types more lines of text. This post explains how I achieved this trick, aka multiple auto-resize textareas.

HTML/PHP

Let’s say that you’re generating a series of HTML textareas via PHP loop. Along with each textarea, include a hidden input field like so:

<textarea name="dws-notes-user[note]" class="dws-note-id-<?php echo $key; ?>" rows="3" data-min-rows="3"></textarea>
<input name="dws-notes-user[count]" type="hidden" value="<?php echo intval($key); ?>">

Note that $key is an index marker as would be generated via foreach() loop (e.g., $key => $value). So when included in a foreach() or while() loop, this code would generate multiple pairs of textarea/input fields, as many as desired.

jQuery

Once the page includes multiple pairs of the textarea/input fields, we can finish the technique with the following slab of jQuery:

$('input[name="dws-notes-user[count]"]').each(function(index, value) {
		
		window.$dws_note_ids = { note_id: '.dws-note-id-'+ index };
		
		var note_id = window.$dws_note_ids.note_id;
		
		jQuery(document).one('focus.textarea', note_id, function() {
			
			var savedValue = this.value;
			this.value = '';
			this.baseScrollHeight = this.scrollHeight;
			this.value = savedValue;
			
		}).on('input.textarea', note_id, function() {
			
			var minRows = this.getAttribute('data-min-rows') | 0, rows;
			this.rows = minRows;
			
			// console.log(this.scrollHeight, this.baseScrollHeight);
			
			rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
			this.rows = minRows + rows;
			
		});
		
	});

 

That’s the magic right there. This snippet loops through the hidden inputs and resizes each associated textarea as the user types. To see this snippet in action, check out the User Notes Widget in my plugin, Dashboard Widgets Suite.

CSS (Optional)

Once you get the auto-resize height functionality dialed in, you may want to customize the display of the multiple textareas. Here is some CSS to get you going in the right direction.

form textarea {
	width: 100%; min-height: 50px; box-sizing: border-box; margin: 3px 0; padding: 5px; 
	overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; overflow: hidden;
	}

 

Here, the overflow:hidden removes the vertical scrollbar, so remove that property if vertical scrollbars are desired. Obviously there are many factors to consider when working with multiple auto-resizing textareas, so you’ll want to experiment and customize as needed. The technique provided in this tutorial should give you a good starting point for further development and fine-tuning.

JavaScript redirect to URL on select

JavaScript redirect to URL on select

JavaScript and jQuery techniques for redirecting to the specified URL when the user makes a selection.

I use a variation of this technique in my Theme Switcha plugin.

JavaScript

Using regular JavaScript:

<form>
	<select onChange="window.document.location.href=this.options[this.selectedIndex].value;">
		<option vlaue="http://example.com/">Option 1</option>
		<option vlaue="http://example.net/">Option 2</option>
		<option vlaue="http://example.org/">Option 3</option>
		.
		.
		.

 

Basically the bit of inline JavaScript loads the URL specified by whichever option the user selects. As soon the selection is made, the browser loads the URL.

jQuery

If you are using jQuery, you can do something like this:

jQuery(function($) {
	$('select').on('change', function() {
		var url = $(this).val();
		if (url) {
			window.location = url;
		}
		return false;
	});
});

 

Where select is the selector for the select field 🙂

htaccess block spammer

.htaccess block spammer

نتيجة بحث الصور عن ‪.htaccess block spammer‬‏

Quick tutorial showing how to block a specific spammer via .htaccess. This technique is perfect for forum and site owners who want to block access to pesky visitors based on their reported IP address.

Block any spammer from accessing your site

First, here is the general technique for blocking a specific spammer from accessing anything on your domain:

<Limit GET POST>
	Order Allow,Deny
	Allow from all
	Deny from 123.456.789
</Limit>

 

his .htaccess code snippet allows all IP addresses except for the one specified, 123.456.789. So to block a spammer from your site, get their IP from your site’s access log and use it to replace 123.456.789 in the previous code. Once the code is ready, it should be included anywhere in the site’s root .htaccess file. Not sure about .htaccess files? Check out my book »

To deny access to multiple IPs, you can do this:

<Limit GET POST>
	Order Allow,Deny
	Allow from all
	Deny from 123.456.789
	Deny from 456.789.123
	Deny from 789.123.456
</Limit>

 

These techniques use Apache’s <Limit> directive to block the two most common types of requests, GET and POST. You can add other types of requests as needed, but for most spammers blocking GET and POST should be sufficient.

Block any spammer from accessing a specific file

This second technique can be used to block access to any specific file:

<Files anyfile.ext>
    Order Allow,Deny
    Allow from all
    Deny from 123.456.789
</Files>

To use this snippet, change the IP address to match the one you would like to block, and also change the anyfile.ext to match the actual file for which you would like to deny access. When ready, add the code to the .htaccess file that is located in the same directory that contains anyfile.ext, the file you would like to block. As before, you can add multiple IPs by simply replicating the Deny from line (see previous example).