Posts

  • 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 see, the text is clipped. This div uses "text-overflow:clip": This is some long text that will not fit in the box This div uses "text-overflow:ellipsis": This is some long text that will not fit in the box more words Code <p>The following two divs contains a long text that will not fit...
  • 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. Code (In Preview, height = "100%" has revised as height =...
  • 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 is not supported in Internet Explorer 8 and earlier versions. Example Play a video: <video width="320" height="240" controls>   <source src="movie.mp4" type="video/mp4">   <source src="movie.ogg" type="video/ogg">   Your browser does not support...
  • How to create a Slideshow with CSS and JavaScript

  • Automatic Slideshow Change image every 2 seconds: 1 / 3 Sea 2 / 3 Sunshine 3 / 3 Text Create A Slideshow Step 1) Add HTML: Example <div class="slideshow-container">   <div class="mySlides fade">     <div class="numbertext">1 / 3</div>     <img src="img1.jpg" style="width:100%">     <div class="text">Caption Text</div>   </div>   <div class="mySlides fade">     <div class="numbertext">2 / 3</div>     <img src="img2.jpg" style="width:100%">     <div class="text">Caption Two</div>   </div>   <div class="mySlides fade">     <div class="numbertext">3 / 3</div>     <img src="img3.jpg" style="width:100%">     <div class="text">Caption Three</div>   </div>   <a class="prev" onclick="plusSlides(-1)">&#10094;</a>   <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center">   <span...
  • How to change the font size on a matplotlib plot

  • For example, like this import matplotlib matplotlib.rc('xtick', labelsize=20) matplotlib.rc('ytick', labelsize=20) From the matplotlib documentation font = {'family' : 'normal', 'weight' : 'bold', 'size' : 22} matplotlib.rc('font', **font) This sets the font of all items to the font specified by the kwargs object, font. Alternatively, you could also use the rcParams and update method as suggested in this answer: matplotlib.rcParams.update({'font.size': 22}) You can find a full list of available properties on the Customizing matplotlib page. If you want to change the fontsize for just a specific plot that has already been created, try this: import matplotlib.pyplot as plt ax = plt.subplot(111,...