جاوا اسڪرپٽ ۽ jQuery ۾ انٽينٽ پاپ اپ ڪوڊ سنيپٽ مان نڪرڻ
هڪ پروجيڪٽ جنهن تي آئون هن سائيٽ لاءِ ڪم ڪري رهيو آهيان ان سان گڏ هڪ پاپ اپ ڊيو آهي سي ٽي جيڪو نئين سياحن کي حوصلا افزائي ڪري ٿو رڪنيت حاصل ڪرڻ Martech Zone اي ميل ذريعي. هتي اضافي ترقي آهي جنهن تي آئون ڪم ڪري رهيو آهيان ته جيئن آئون ڪري سگهان widgetize ڪرڻ هن طريقيڪار لاء WordPress ۽ ٻاهر نڪرڻ جي ارادي واري حصي کي اصل سائڊبار هجڻ گهرجي… پر مان jQuery فنڪشن ۽ مثال ڪوڊ اسنيپٽ کي حصيداري ڪرڻ چاهيان ٿو جيڪو ٻين کي ٺاهڻ ۾ مدد ڪري ٿو. نڪرڻ جو ارادو واقعي
نڪرڻ جو ارادو ڇا آهي؟
نڪرڻ جو ارادو هڪ ٽيڪنڪ آهي ويب سائيٽون استعمال ڪندڙ صارف جي مائوس جي حرڪت کي ٽريڪ ڪرڻ ۽ معلوم ڪرڻ لاءِ جڏهن صارف صفحي کي ڇڏڻ وارو آهي. جڏهن ويب سائيٽ کي معلوم ٿئي ٿو ته صارف ڇڏي رهيو آهي، اهو هڪ پاپ اپ يا ٻئي قسم جي پيغام کي ٽريڪ ڪري سگهي ٿو صارف کي صفحي تي رکڻ جي ڪوشش ڪرڻ يا بعد ۾ واپس موٽڻ لاء.
نڪرڻ جو ارادو ٽيڪنالاجي مائوس جي حرڪت کي ٽريڪ ڪرڻ لاءِ JavaScript استعمال ڪري ٿو ۽ اهو طئي ڪري ٿو ته جڏهن صارف هڪ صفحو ڇڏڻ وارو آهي. جڏهن ويب سائيٽ معلوم ڪري ٿي ته صارف ڇڏڻ وارو آهي، اهو هڪ پاپ اپ پيغام ڏيکاري سگهي ٿو، هڪ خاص ڊيل پيش ڪري سگهي ٿو، يا صارف کي صفحي تي رهڻ يا بعد ۾ واپس اچڻ جي حوصلا افزائي ڪرڻ لاء ڪجهه ٻين قسم جي ترغيب فراهم ڪري سگهي ٿي.
نڪرڻ جو ارادو اڪثر ڪري استعمال ڪيو ويندو آهي اي ڪامرس ويب سائيٽن کي روڪڻ جي ڪوشش ڪرڻ لاء شاپنگ ڪارٽ ڇڏڻ يا خاص ڊيلز ۽ رعايتن کي فروغ ڏيڻ لاءِ گراهڪن لاءِ جيڪي سائيٽ ڇڏڻ وارا آهن. اهو پڻ استعمال ڪري سگهجي ٿو مواد ويب سائيٽون نيوز ليٽر سائن اپ کي فروغ ڏيڻ لاءِ يا صارفين کي سوشل ميڊيا تي سائيٽ جي پيروي ڪرڻ جي حوصلا افزائي ڪرڻ لاءِ.
JavaScript جي مائوسليو فنڪشن
سمجھڻ لاء ڪيئن mouseleave
ڪم ڪري ٿو، اهو ڄاڻڻ مددگار آهي ته عام طور تي مائوس جي واقعن کي ڪيئن سنڀاليو وڃي ٿو. جڏھن توھان پنھنجي ماؤس کي ھڪڙي ويب پيج تي ھلايو ٿا، واقعن جو ھڪڙو سلسلو برائوزر طرفان شروع ڪيو ويندو آھي، جيڪي جاوا اسڪرپٽ ڪوڊ پاران قبضو ۽ ھٿ ڪري سگھندا آھن. انهن واقعن ۾ شامل آهن mousemove
, mouseover
, mouseout
, mouseenter
، ۽ mouseleave
.
هن mouseenter
۽ mouseleave
واقعا ساڳيا آهن mouseover
۽ mouseout
واقعا، پر اهي ٿورڙي مختلف طريقي سان عمل ڪن ٿا. جڏهن ته mouseover
۽ mouseout
ٽرگر جڏهن ماؤس ڪنهن عنصر ۾ داخل ٿئي ٿو يا ڇڏي ٿو، ترتيب سان، اهي پڻ ٽرگر ڪندا آهن جڏهن ماؤس ان عنصر ۾ داخل ٿئي ٿو يا ڇڏي ٿو. اهو ٿي سگهي ٿو اڻڄاتل رويي جي ڪري جڏهن پيچيده سان ڪم ڪندي HTML بناوتون.
mouseenter
۽ mouseleave
واقعا، ٻئي طرف، صرف ان وقت ٽرگر ڪندا آهن جڏهن ماؤس داخل ٿئي ٿو يا ان عنصر کي ڇڏي ٿو جنهن سان ايونٽ جڙيل آهي، ۽ ٽرگر نه ڪريو جڏهن ماؤس داخل ٿئي ٿو يا ڪنهن ٻار جي عنصر کي ڇڏي ٿو. اهو انهن کي وڌيڪ پيش گوئي ڪري ٿو ۽ ڪيترن ئي ڪيسن ۾ ڪم ڪرڻ آسان بڻائي ٿو.
هن mouseleave
ايونٽ سڀ کان جديد برائوزرن جي مدد سان آهي، بشمول ڪروم، فائر فاکس، سفاري، ۽ ايج. بهرحال، اهو شايد ڪجهه پراڻن برائوزرن سان سهڪار نه ڪري سگھي، جهڙوڪ انٽرنيٽ ايڪسپلورر 8 ۽ اڳوڻو.
جاوا اسڪرپٽ نڪرڻ جو ارادو ڪوڊ جو ٽڪرو
جڏهن ته mouseleave
هڪ ڏنل div تي ڪم ڪرڻ لڳي، توهان ان کي پوري ويب پيج تي پڻ لاڳو ڪري سگهو ٿا.
ڪوڊ نئون ٺاهي ٿو div
عنصر سڏيو ويندو آهي overlay
جيڪو سڄو صفحو ڍڪي ٿو ۽ هڪ نيم شفاف ڪارو پس منظر آهي (80٪ اوپيسيٽي). اسان هن اوورلي کي شامل ڪيو پاپ اپ سان گڏ صفحو حصا.
جڏهن صارف پنهنجي ماؤس کي صفحي جي ٻاهران منتقل ڪندي نڪرڻ واري ارادي کي متحرڪ ڪري ٿو، اسان پاپ اپ ۽ اوورلي ٻنهي کي ڏيکاريون ٿا. اهو صارف کي صفحي تي ڪٿي به ڪلڪ ڪرڻ کان روڪي ٿو جڏهن پاپ اپ نظر اچي رهيو آهي.
جڏهن صارف پاپ اپ کان ٻاهر يا بند بٽڻ تي ڪلڪ ڪري ٿو، اسان صفحي تي عام ڪارڪردگي بحال ڪرڻ لاءِ پاپ اپ ۽ اوورلي ٻنهي کي لڪائيندا آهيون.
document.addEventListener('DOMContentLoaded', function() {
// Create a div element with the desired dimensions and styling
var popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.backgroundColor = '#fff';
popup.style.border = '1px solid #ccc';
popup.style.width = '1200px';
popup.style.height = '630px';
popup.style.padding = '20px';
// Create a close button element with the desired styling
var closeButton = document.createElement('span');
closeButton.style.position = 'absolute';
closeButton.style.top = '10px';
closeButton.style.right = '10px';
closeButton.style.fontSize = '24px';
closeButton.style.cursor = 'pointer';
closeButton.innerHTML = '×';
// Add the close button to the popup div
popup.appendChild(closeButton);
// Create an overlay div with the desired styling
var overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
overlay.style.zIndex = '999';
// Add the overlay and popup to the page
document.body.appendChild(overlay);
document.body.appendChild(popup);
// Hide the popup and overlay initially
popup.style.display = 'none';
overlay.style.display = 'none';
// Show the popup and overlay when the user tries to leave the page
document.addEventListener('mouseleave', function(e) {
if (e.clientY < 0) {
popup.style.display = 'block';
overlay.style.display = 'block';
}
});
// Hide the popup and overlay when the user clicks outside of it
document.addEventListener('click', function(e) {
if (!popup.contains(e.target)) {
popup.style.display = 'none';
overlay.style.display = 'none';
}
});
// Hide the popup and overlay when the close button is clicked
closeButton.addEventListener('click', function() {
popup.style.display = 'none';
overlay.style.display = 'none';
});
});
وڌ ۾ وڌ برائوزر مطابقت لاءِ، مان jQuery استعمال ڪرڻ جي صلاح ڏيندس ان جي بدران، جيتوڻيڪ.
jQuery نڪرڻ جو ارادو ڪوڊ جو ٽڪرو
ھتي آھي jQuery ڪوڊ جو snippet، جيڪو سڀني برائوزرن سان تمام گھڻو مطابقت رکي ٿو (جيستائين توھان پنھنجي صفحي ۾ jQuery شامل ڪري رھيا آھيو).
jQuery(document).ready(function() {
// Create a div element with the desired dimensions and styling
var popup = jQuery('<div></div>').css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'transform': 'translate(-50%, -50%)',
'background-color': '#fff',
'border': '1px solid #ccc',
'width': '1200px',
'height': '630px',
'padding': '20px'
});
// Create a close button element with the desired styling
var closeButton = jQuery('<span></span>').css({
'position': 'absolute',
'top': '10px',
'right': '10px',
'font-size': '24px',
'cursor': 'pointer'
}).html('×');
// Add the close button to the popup div
popup.append(closeButton);
// Create an overlay div with the desired styling
var overlay = jQuery('<div></div>').css({
'position': 'fixed',
'top': '0',
'left': '0',
'width': '100%',
'height': '100%',
'background-color': 'rgba(0, 0, 0, 0.8)',
'z-index': '999'
});
// Add the overlay and popup to the page
jQuery('body').append(overlay, popup);
// Hide the popup and overlay initially
popup.hide();
overlay.hide();
// Show the popup and overlay when the user tries to leave the page
jQuery(document).on('mouseleave', function(e) {
if (e.clientY < 0) {
popup.show();
overlay.show();
}
});
// Hide the popup and overlay when the user clicks outside of it
jQuery(document).on('click', function(e) {
if (!jQuery(e.target).closest(popup).length) {
popup.hide();
overlay.hide();
}
});
// Hide the popup and overlay when the close button is clicked
closeButton.on('click', function() {
popup.hide();
overlay.hide();
});
});