Repository: joshje/Responsive-Enhance
Branch: master
Commit: 907f2592280a
Files: 3
Total size: 3.7 KB
Directory structure:
gitextract_5zblforw/
├── index.html
├── readme.md
└── responsive-enhance.js
================================================
FILE CONTENTS
================================================
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body {
font-family: sans-serif;
}
.wrap {
width: 75%;
max-width: 800px;
margin: 2em auto;
}
img {
width: 100%;
border: none;
}
pre {
overflow: auto;
padding: 1em;
border: 1px solid #999;
}
</style>
<title>Responsive Enhance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrap">
<h1>Responsive Enhance</h1>
<p>Depending on the size of your viewport, you may see a 400px by 300px wide image, or a 800px by 600px image. Try refreshing the page with a small or wide browser window. The standard image is always downloaded, full images are then downloaded as needed.</p>
<p><img id="demo1" src="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600"></p>
<p><pre><code><img id="demo1" src="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600">
<script>responsiveEnhance(document.getElementById('demo1'), 400);</script></code></pre></p>
<p>Here's a photo of some lovely star biscuits that <a href="http://twitter.com/qwertykate">@qwertykate</a> bought us. Image courtesy of <a href="http://www.flickr.com/photos/adactio/">adactio</a>.</p>
<p><a href="http://www.flickr.com/photos/adactio/6806617685"><img id="demo2" src="http://farm8.staticflickr.com/7022/6806617685_3be0d007c3_m.jpg" alt="Responsive Image" data-fullsrc="http://farm8.staticflickr.com/7022/6806617685_b793771008_o.jpg"></a></p>
<p><pre><code><img id="demo2" src="http://farm8.staticflickr.com/7022/6806617685_3be0d007c3_m.jpg" alt="Responsive Image" data-fullsrc="http://farm8.staticflickr.com/7022/6806617685_b793771008_o.jpg">
<script>responsiveEnhance(document.getElementById('demo2'), 240);</script></code></pre></p>
</div>
</body>
<script src="responsive-enhance.js"></script>
<script>
responsiveEnhance(document.getElementById('demo1'), 400);
responsiveEnhance(document.getElementById('demo2'), 240);
</script>
</html>
================================================
FILE: readme.md
================================================
Responsive Enhance
==================
This script will check whether an image is larger than a specified width and load a full resolution image if necessary.
<img id="demo" src="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600">
<script>responsiveEnhance(document.getElementById('demo'), 400);</script>
This will replace the image with the image defined in the `data-fullsrc` when the image is wider than 400 pixels.
================================================
FILE: responsive-enhance.js
================================================
var addEvent=function(){return document.addEventListener?function(a,c,d){if(a&&a.nodeName||a===window)a.addEventListener(c,d,!1);else if(a&&a.length)for(var b=0;b<a.length;b++)addEvent(a[b],c,d)}:function(a,c,d){if(a&&a.nodeName||a===window)a.attachEvent("on"+c,function(){return d.call(a,window.event)});else if(a&&a.length)for(var b=0;b<a.length;b++)addEvent(a[b],c,d)}}();
var responsiveEnhance = function(img, width, monitor) {
if (img.length) {
for (var i=0, len=img.length; i<len; i++) {
responsiveEnhance(img[i], width, monitor);
}
} else {
if (((' '+img.className+' ').replace(/[\n\t]/g, ' ').indexOf(' large ') == -1) && img.clientWidth > width) {
var fullimg = new Image();
addEvent(fullimg, 'load', function(e) {
img.className += ' large';
img.src = this.src;
});
fullimg.src = img.getAttribute('data-fullsrc');
}
}
if (monitor != false) {
addEvent(window, 'resize', function(e) {
responsiveEnhance(img, width, false);
});
addEvent(img, 'load', function(e) {
responsiveEnhance(img, width, false);
});
}
};
gitextract_5zblforw/ ├── index.html ├── readme.md └── responsive-enhance.js
Condensed preview — 3 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4K chars).
[
{
"path": "index.html",
"chars": 2077,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<style>\nbody {\n font-family: sans-serif;\n}\n.wrap {\n "
},
{
"path": "readme.md",
"chars": 480,
"preview": "Responsive Enhance\n==================\n\nThis script will check whether an image is larger than a specified width and load"
},
{
"path": "responsive-enhance.js",
"chars": 1217,
"preview": "var addEvent=function(){return document.addEventListener?function(a,c,d){if(a&&a.nodeName||a===window)a.addEventListener"
}
]
About this extraction
This page contains the full source code of the joshje/Responsive-Enhance GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 3 files (3.7 KB), approximately 1.2k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.