MediaWiki:Common.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */
/* === Viewport Meta Tag Injection for Mobile Responsiveness - START === */
$(document).ready(function() {
if ($('meta[name="viewport"]').length === 0) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
console.log('Viewport meta tag added dynamically');
}
// Inject responsive CSS dynamically
var responsiveCSS = `
<style>
/* Make images and videos scale on smaller screens */
img, video {
max-width: 100%;
height: auto;
}
/* Make tables scrollable horizontally */
table {
width: 100%;
border-collapse: collapse;
overflow-x: auto;
display: block;
}
/* Base font and container styling */
body {
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Navigation menu styling */
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
nav ul li {
margin-right: 20px;
}
/* Stack navigation on small screens */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
nav ul li {
margin-bottom: 10px;
margin-right: 0;
}
}
/* Responsive headings */
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
@media (max-width: 600px) {
body { font-size: 14px; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
}
/* Layout for main content and sidebar */
.main-content {
display: flex;
flex-wrap: wrap;
}
.sidebar, .content-area {
box-sizing: border-box;
}
/* Desktop layout: sidebar 30%, content 70% */
.sidebar {
flex: 0 0 30%;
padding: 15px;
}
.content-area {
flex: 0 0 70%;
padding: 15px;
}
/* Mobile stacked layout */
@media (max-width: 768px) {
.sidebar, .content-area {
flex: 0 0 100%;
padding: 10px;
}
}
</style>
`;
$('head').append(responsiveCSS);
});
/* === Viewport Meta Tag Injection for Mobile Responsiveness - END === */
$(document).ready(function() {
if (mw.config.get('wgNamespaceNumber') === 120) {
var warningHtml = '<div class="template-td" style="background-color: #ffcc00; color: black; padding: 10px; border-radius: 5px; font-weight: bold; text-align: center; margin-bottom:10px;">⚠ This is a draft article created for review. It is not yet published in the main space. Once approved, it will be moved to the main site and become publicly visible. ⚠</div>';
// Insert after the subtitle, which is below the title and action tabs
$('#mw-content-subtitle').after(warningHtml);
}
});
$(document).ready(function() {
var footerDisclaimer = $('<div style="text-align:center; font-size:12px; padding:10px; background:#f9f9f9; border-top:1px solid #ccc;">This website is not affiliated with Wikipedia or the Wikimedia Foundation. Content is independently published.</div>');
$('#footer').append(footerDisclaimer);
});
$(document).ready(function () {
if (mw.config.get("wgNamespaceNumber") === 0) { // Main/article pages only
var title = $('#firstHeading');
var badgeUrl = 'https://globalwiki.org/images/2/22/Verified.png';
$('<img>', {
src: badgeUrl,
alt: 'Verified',
style: 'margin-left: 10px; height: 20px; vertical-align: middle;'
}).appendTo(title);
}
});
$(document).ready(function () {
if (mw.config.get('wgPageName') === 'Prasad') {
// Create a container for custom header and title
var headerContainer = $('<div class="custom-header-container" style="width: 100%; display: block; margin-bottom: 15px;"></div>');
// Create header box with button
var customHeader = $('<div class="custom-header" style="background: #e0f7fa; padding: 10px; text-align: center;">' +
'<h2 style="margin: 5px 0;">🌟 Featured Profile</h2>' +
'<p style="margin: 5px 0;">This is the official profile of Prasad Khanna.</p>' +
'<button onclick="alert(\'Header button clicked!\')" style="margin-top: 10px; padding: 8px 16px; font-size: 14px; background-color: #0288d1; color: white; border: none; border-radius: 4px; cursor: pointer;">Know More</button>' +
'</div>');
// Move the page title and wrap everything
var $title = $('#firstHeading');
$title.before(headerContainer);
headerContainer.append(customHeader);
headerContainer.append($title);
// Create footer box with button
var customFooter = $('<div class="custom-footer" style="background: #f1f8e9; padding: 10px; text-align: center; margin-top: 20px;">' +
'<h3 style="margin: 5px 0;">📌 More About Prasad</h3>' +
'<p style="margin: 5px 0;">Scroll through his achievements, contributions, and recognitions below.</p>' +
'<button onclick="alert(\'Footer button clicked!\')" style="margin-top: 10px; padding: 8px 16px; font-size: 14px; background-color: #689f38; color: white; border: none; border-radius: 4px; cursor: pointer;">Contact</button>' +
'</div>');
// Insert the footer
customFooter.insertAfter('#mw-content-text');
}
});
/* === Sticky Footer with WhatsApp CTA button on Prasad page - START === */
$(document).ready(function () {
var pageName = mw.config.get('wgPageName');
console.log('Common.js loaded on page:', pageName);
if (pageName === 'Prasad') {
console.log('On Prasad page - adding sticky footer');
// Responsive CSS for footer and button
var responsiveCSS = `
<style>
#custom-sticky-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #f1f8e9;
color: white;
text-align: center;
padding: 20px 0;
z-index: 99999;
box-shadow: 0 -2px 5px rgba(0,0,0,0.15);
box-sizing: border-box;
}
#sticky-footer-button {
padding: 15px 40px; /* half size padding on desktop */
font-size: 20px; /* half font size desktop */
background: #044b4f;
color: white;
border: 3px solid #30a0a2;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
max-width: 90%;
width: 350px; /* half width desktop */
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out;
}
#sticky-footer-button:hover {
box-shadow: 0 0 12px #30a0a2;
}
/* Mobile styles */
@media (max-width: 600px) {
#sticky-footer-button {
padding: 30px 80px !important; /* original larger padding */
font-size: 40px !important; /* original font size */
width: 90% !important; /* full width on mobile */
max-width: none !important;
}
#custom-sticky-footer {
padding: 15px 0;
}
}
</style>
`;
$('head').append(responsiveCSS);
// Create sticky footer HTML without inline styles (styles are in CSS above)
var stickyFooter = $(
'<div id="custom-sticky-footer">' +
'<button id="sticky-footer-button">Publish My Profile</button>' +
'</div>'
);
// Append footer and add bottom padding to body to avoid overlap
$('body').append(stickyFooter);
$('body').css('padding-bottom', '120px');
// Button click event opens WhatsApp chat in new tab
$('#sticky-footer-button').click(function () {
window.open('https://api.whatsapp.com/send?phone=918464032709&text=Hi,%20I%20checked%20the%20sample%20profile%20and%20would%20like%20to%20publish%20my%20profile.', '_blank');
});
// Show footer always on scroll (both up and down)
var footer = $('#custom-sticky-footer');
$(window).on('scroll', function () {
footer.show();
});
}
});
/* === Sticky Footer with WhatsApp CTA button on Prasad page - END === */
$(document).ready(function () {
if (mw.config.get('wgPageName') === 'Prasad') {
// Hide the Table of Contents (usually has id="toc")
$('#toc').hide();
// Optional: if your skin uses a different TOC class or id, adjust the selector
// Example for Vector skin: $('.mw-parser-output .toc').hide();
}
});