CODEWITHSUNDEEP
javascriptjqueryhtmlcssdirectory
MBJH
MBJH

Reputation: 1639

Loop through local folder & dynamically create elements

I want to make a jquery-ui tabs menu including 54 images on each tab. I have 880 images in a folder, and it will take ages to use an <img> for each of them. Can I cycle through each one and dynamically append them to the tabs? This is what I want one tab to look like.

img {
    width: 35px;
    height: 35px;
}
#tabs {
    width: 420px;
    height: 300px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	  float: left;
	  padding: .1em .175em;
	  text-decoration: none;
}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
      img {
          width: 35px;
          height: 35px;
      }
      #tabs {
          width: 420px;
          height: 300px;
      }
      .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	  float: left;
	  padding: .1em .175em;
	  text-decoration: none;
      }
  </style>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">1</a></li>
    <li><a href="#tabs-2">2</a></li>
    <li><a href="#tabs-3">3</a></li>
    <li><a href="#tabs-4">4</a></li>
    <li><a href="#tabs-5">5</a></li>
    <li><a href="#tabs-6">6</a></li>
    <li><a href="#tabs-7">7</a></li>
    <li><a href="#tabs-8">8</a></li>
    <li><a href="#tabs-9">9</a></li>
    <li><a href="#tabs-10">10</a></li>
    <li><a href="#tabs-11">11</a></li>
    <li><a href="#tabs-12">12</a></li>
    <li><a href="#tabs-13">13</a></li>
    <li><a href="#tabs-14">14</a></li>
    <li><a href="#tabs-15">15</a></li>
    <li><a href="#tabs-16">16</a></li>
    <li><a href="#tabs-17">17</a></li>
  </ul>
  <div id="tabs-1">
    <img src="emojis-master/100.png"/>
    <img src="emojis-master/1234.png"/>
    <img src="emojis-master/8ball.png"/>
    <img src="emojis-master/a.png"/>
    <img src="emojis-master/ab.png"/>
    <img src="emojis-master/abc.png"/>
    <img src="emojis-master/abcd.png"/>
    <img src="emojis-master/accept.png"/>
    <img src="emojis-master/aerial_tramway.png"/>
    <img src="emojis-master/airplane.png"/>
    <img src="emojis-master/alarm_clock.png"/>
    <img src="emojis-master/alien.png"/>
    <img src="emojis-master/ambulance.png"/>
    <img src="emojis-master/anchor.png"/>
    <img src="emojis-master/angel.png"/>
    <img src="emojis-master/anger.png"/>
    <img src="emojis-master/angry.png"/>
    <img src="emojis-master/anguished.png"/>
    <img src="emojis-master/ant.png"/>
    <img src="emojis-master/apple.png"/>
    <img src="emojis-master/aquarius.png"/>
    <img src="emojis-master/aries.png"/>
    <img src="emojis-master/arrow_backward.png"/>
    <img src="emojis-master/arrow_double_down.png"/>
    <img src="emojis-master/arrow_double_up.png"/>
    <img src="emojis-master/arrow_down.png"/>
    <img src="emojis-master/arrow_down_small.png"/>
    <img src="emojis-master/arrow_forward.png"/>
    <img src="emojis-master/arrow_heading_down.png"/>
    <img src="emojis-master/arrow_heading_up.png"/>
    <img src="emojis-master/arrow_left.png"/>
    <img src="emojis-master/arrow_lower_left.png"/>
    <img src="emojis-master/arrow_lower_right.png"/>
    <img src="emojis-master/arrow_right.png"/>
    <img src="emojis-master/arrow_right_hook.png"/>
    <img src="emojis-master/arrow_up.png"/>
    <img src="emojis-master/arrow_up_down.png"/>
    <img src="emojis-master/arrow_up_small.png"/>
    <img src="emojis-master/arrow_upper_left.png"/>
    <img src="emojis-master/arrow_upper_right.png"/>
    <img src="emojis-master/arrows_clockwise.png"/>
    <img src="emojis-master/arrows_counterclockwise.png"/>
    <img src="emojis-master/art.png"/>
    <img src="emojis-master/articulated_lorry.png"/>
    <img src="emojis-master/atm.png"/>
    <img src="emojis-master/b.png"/>
    <img src="emojis-master/baby.png"/>
    <img src="emojis-master/baby_bottle.png"/>
    <img src="emojis-master/baby_chick.png"/>
    <img src="emojis-master/back.png"/>
    <img src="emojis-master/bad.png"/>
    <img src="emojis-master/baggage_claim.png"/>
    <img src="emojis-master/balloon.png"/>
    <img src="emojis-master/ballot_box_with_check.png"/>
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
  <div id="tabs-4">
  </div>
  <div id="tabs-5">
  </div>
  <div id="tabs-6">
  </div>
  <div id="tabs-7">
  </div>
  <div id="tabs-8">
  </div>
  <div id="tabs-9">
  </div>
  <div id="tabs-10">
  </div>
  <div id="tabs-11">
  </div>
  <div id="tabs-12">
  </div>
  <div id="tabs-13">
  </div>
  <div id="tabs-14">
  </div>
  <div id="tabs-15">
  </div>
  <div id="tabs-16">
  </div>
  <div id="tabs-17">
  </div>
</div>
 
 
</body>
</html>

Thanks in advance. I need to write this otherwise I can't post this question, because I have lots of code in it. Just ignore this part.

Upvotes: 3

Views: 2037

Answers (1)

Brian Peacock
Brian Peacock

Reputation: 1849

You'll need a server-side solution if your files are on a server and you want to dynamical populate an HTML file, or if your files are on a regular (not server) device you'll need to run some file operations. Unfortunately, neither option are available from a browser environment.

Server-side you could use the PHP scandir() method or the Node.js fs.readdir() method to dump a list of files to your page as text to, say, insert a list of JavaScript variables or an array of URLs. Or you could use one of these to compile a JSON representation of your files or file structure and AJAX that into your application.

In a non-server environment I would suggest creating a list of your files for use in your application, either with the command line ls function, or often if you highlight all your files, Ctrl+C copy them, and paste that into a text document you get a list file addresses, which can be easily turned into an JavaScript array or a JSON file. Personally I'd look into going down the JSON route.

You might also find these links useful...

;)

Upvotes: 1

Related Questions