A Pen by Shidhin

Developer
Shidhin
Size
5,015 Kb
Views
50,600
  1. A Pen by Shidhin Previews
  2. A Pen by Shidhin HTML Codes
  3. A Pen by Shidhin CSS Codes
  4. A Pen by Shidhin JS Codes

How do I make an a pen by shidhin?

What is a a pen by shidhin? How do you make a a pen by shidhin? This script and codes were developed by Shidhin on 18 July 2022, Monday.

A Pen by Shidhin Previews
IQ Test

A Pen by Shidhin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Shidhin</title> <meta name="viewport" content="width=device-width" />
<meta http-equiv="x-ua-compatible" content="IE=edge" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 20px; height: 400px;
}
.trigger, .content { border: 2px dotted #333; padding: 5px; width: 300px;
}
.trigger { curspor: pointer; background-color: orange; display: inline-block; -ms-touch-action: none;
}
.content { border: 1px solid black; height: 400px;
}
.content.hidden { display: none;
}
.some-top-padding { padding-top: 500px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a class="trigger" href="/edit">Click me to <span>Show</span></a>
<div class="content hidden">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script>
;(function($){ var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture function swipeDirection(x1, x2, y1, y2) { return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down') } function longTap() { longTapTimeout = null if (touch.last) { touch.el.trigger('longTap') touch = {} } } function cancelLongTap() { if (longTapTimeout) clearTimeout(longTapTimeout) longTapTimeout = null } function cancelAll() { if (touchTimeout) clearTimeout(touchTimeout) if (tapTimeout) clearTimeout(tapTimeout) if (swipeTimeout) clearTimeout(swipeTimeout) if (longTapTimeout) clearTimeout(longTapTimeout) touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null touch = {} } function isPrimaryTouch(event){ return (event.pointerType == 'touch' || event.pointerType == event.MSPOINTER_TYPE_TOUCH) && event.isPrimary } function isPointerEventType(e, type){ return (e.type == 'pointer'+type || e.type.toLowerCase() == 'mspointer'+type) } $(document).ready(function(){ var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType if ('MSGesture' in window) { gesture = new MSGesture() gesture.target = document.body } $(document) .bind('MSGestureEnd', function(e){ var swipeDirectionFromVelocity = e.velocityX > 1 ? 'Right' : e.velocityX < -1 ? 'Left' : e.velocityY > 1 ? 'Down' : e.velocityY < -1 ? 'Up' : null; if (swipeDirectionFromVelocity) { touch.el.trigger('swipe') touch.el.trigger('swipe'+ swipeDirectionFromVelocity) } deltaX = deltaY = 0; }) .on('touchstart MSPointerDown pointerdown', function(e){ if((_isPointerType = isPointerEventType(e, 'down')) && !isPrimaryTouch(e)) return firstTouch = _isPointerType ? e : e.touches[0] if (e.touches && e.touches.length === 1 && touch.x2) { // Clear out touch movement data if we have it sticking around // This can occur if touchcancel doesn't fire due to preventDefault, etc. touch.x2 = undefined touch.y2 = undefined } now = Date.now() delta = now - (touch.last || now) touch.el = $('tagName' in firstTouch.target ? firstTouch.target : firstTouch.target.parentNode) touchTimeout && clearTimeout(touchTimeout) touch.x1 = firstTouch.pageX touch.y1 = firstTouch.pageY if (delta > 0 && delta <= 250) touch.isDoubleTap = true touch.last = now longTapTimeout = setTimeout(longTap, longTapDelay) // adds the current touch contact for IE gesture recognition if (gesture && _isPointerType) gesture.addPointer(e.pointerId); }) .on('touchmove MSPointerMove pointermove', function(e){ if((_isPointerType = isPointerEventType(e, 'move')) && !isPrimaryTouch(e)) return firstTouch = _isPointerType ? e : e.touches[0] cancelLongTap() touch.x2 = firstTouch.pageX touch.y2 = firstTouch.pageY deltaX += Math.abs(touch.x1 - touch.x2) deltaY += Math.abs(touch.y1 - touch.y2) }) .on('touchend MSPointerUp pointerup', function(e){ if((_isPointerType = isPointerEventType(e, 'up')) && !isPrimaryTouch(e)) return cancelLongTap() // swipe if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) || (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) swipeTimeout = setTimeout(function() { touch.el.trigger('swipe') touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2))) touch = {} }, 0) // normal tap else if ('last' in touch) // don't fire tap when delta position changed by more than 30 pixels, // for instance when moving to a point and back to origin if (deltaX < 30 && deltaY < 30) { // delay by one tick so we can cancel the 'tap' event if 'scroll' fires // ('tap' fires before 'scroll') tapTimeout = setTimeout(function() { // trigger universal 'tap' with the option to cancelTouch() // (cancelTouch cancels processing of single vs double taps for faster 'tap' response) var event = $.Event('tap') event.cancelTouch = cancelAll touch.el.trigger(event) // trigger double tap immediately if (touch.isDoubleTap) { if (touch.el) touch.el.trigger('doubleTap') touch = {} } // trigger single tap after 250ms of inactivity else { touchTimeout = setTimeout(function(){ touchTimeout = null if (touch.el) touch.el.trigger('singleTap') touch = {} }, 250) } }, 0) } else { touch = {} } deltaX = deltaY = 0 }) // when the browser window loses focus, // for example when a modal dialog is shown, // cancel all ongoing events .on('touchcancel MSPointerCancel pointercancel', cancelAll) // scrolling the window indicates intention of the user // to scroll, not tap or swipe, so cancel all ongoing events $(window).on('scroll', cancelAll) }) ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){ $.fn[eventName] = function(callback){ return this.on(eventName, callback) } })
})(Zepto)
</script>
<div class='some-top-padding'>Ithokke enthu ??</div> <script src='http://jsconsole.com/remote.js?EFF2450B-F14D-4F16-94A4-9928C5101C7E'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Shidhin - Script Codes CSS Codes

body { padding: 20px; height: 400px;
}
.trigger, .content { border: 2px dotted #333; padding: 5px; width: 300px;
}
.trigger { curspor: pointer; background-color: orange; display: inline-block; -ms-touch-action: none;
}
.content { border: 1px solid black; height: 400px;
}
.content.hidden { display: none;
}
.some-top-padding { padding-top: 500px;
}

A Pen by Shidhin - Script Codes JS Codes

(function() { var $; $ = Zepto; $(".trigger").on("tap", function(e) { var $span, $this; $this = $(this); $span = $this.find("span"); $(".content").toggleClass("hidden"); $span.html($(".content").hasClass("hidden") ? "Show" : "Hide"); e.preventDefault(); alert(9); });
}).call(this);
A Pen by Shidhin - Script Codes
A Pen by Shidhin - Script Codes
Home Page Home
Developer Shidhin
Username shidhincr
Uploaded July 18, 2022
Rating 3
Size 5,015 Kb
Views 50,600
Do you need developer help for A Pen by Shidhin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shidhin (shidhincr) Script Codes
Name
Handle Icons in Pure CSS
Simple material ripple
Click FaceBook Like to Unlock the Offer
FlipJS Demo
Single DIV Love Symbol in CSS
Fire using CSS animations
HTML Textbox with a clear button in Pure CSS and without JavaScript
Simple Timer Display using RiotJS
Transition Spring animation - webkit
Transition Spring animation - webkit
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!