Posts

  • Pure CSS read more toggle

  • Preview Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt... Read more
  • How to set the read more feature in the content

  • Preview ... Read more Code <p> word word word <div id = "more_content"> <a onclick = "show_more_content()"> Read more </a> </div></p> <script> function show_more_content(){ document.getElementById('more_content').innerHTML = additional_content; } </script> Preview The following two divs contains a long text that will not fit in the box. As you can... Read more
  • Embedding PDFs without JavaScript

  • PDFs can be embedded into HTML pages without JavaScript. Below are four examples of the most common techniques. Note: these examples work in all modern desktop browsers, but results will vary in older desktop browsers and mobile browsers. As of iOS 9, none of these examples work properly in Safari for iOS. <object> Using an <object> enables you to leave fallback content if the browser doesn’t support PDF embedding. PDF Preview Example fallback content: This browser does not support PDFs. Please download the PDF to view it: Download PDF. ... Read more
  • How to play audio and video in html

  • Audio Preview Your browser does not support the audio element. Note: The audio tag is not supported in Internet Explorer 8 and earlier versions. Example An audio file that will automatically start playing: <audio controls autoplay>   <source src="audio.ogg" type="audio/ogg">   <source src="audio.mp3" type="audio/mpeg">   Your browser does not support the audio element. </audio> Video Preview Your browser does not support the video tag. Note: The video tag... Read more
  • How to create a Slideshow with CSS and JavaScript

  • * {box-sizing:border-box} /*body {font-family: Verdana,sans-serif;}*/ .mySlides {display:none} /* Slideshow container */ .slideshow-container { max-width: 950px; position: relative; margin: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name:... Read more