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

فتح روابط خارجية في صفحة جديدة مع إعطائها الوسم 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 باللون الأصفر لمن اراد حذف هذا الأمر

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

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

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

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

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

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

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

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

 

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 🙂

3D لوحة قابلة للطي مع تأثيرات CSS و jQuery

3D لوحة قابلة للطي مع تأثيرات CSS و jQuery


A secondary content panel that folds flat, powered by CSS Transformations and jQuery.

3D fold effects are pretty popular nowadays, mostly because they have been integrated quite often in mobile apps. A beautiful example is the iOS Peek Calendar app. Thanks to CSS3 transformation and transitions, we can create a similar interaction in the browser!

Sometimes these 3D effects feel too strong, unnecessary. It’s a point I can’t argue with. However, there will be cases when you need to load content, a process that requires time (even if it’s just half a second). In these cases an animation can be a nice way to replace a loading bar, or a loading gif. Besides, with the growth of native apps built on top of web frameworks, learning how to create complex CSS transformations is an ace up your sleeve 😉

Source: 3D Folding Panel in CSS and jQuery


Like it? Share it!