CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
sripriya
sripriya

Reputation: 131

Filter By Image Don't want show all image

I am creating Filter Image Gallery .by Default when the page is loading showing all images. I have two four different tabs

1. Show all 2.Nature 3. Cars 4. People

Now I don't want all image showing. by default, I want to show Nature filter images by default after the page loaded.

please check my Code : Code is here

also, attach my Code 

   filterSelection("all")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("column");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }
    
    function w3AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
      }
    }
    
    function w3RemoveClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 1);     
        }
      }
      element.className = arr1.join(" ");
    }
* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Arial;
}

/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}
<div class="main">

	<h1>MYLOGO.COM</h1>
	<hr>

	<h2>PORTFOLIO</h2>
	<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
	<input type="radio" onclick="filterSelection('nature')" name="category"> Nature
	<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
	<input type="radio" onclick="filterSelection('people')" name="category"> People

<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>
<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
<input type="radio" onclick="filterSelection('nature')" name="category"> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

<!-- Portfolio Gallery Grid -->
<div class="row">
	<div class="column nature">
		<div class="content">
			<img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
			<h4>Mountains</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
			<h4>Lights</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
			<h4>Forest</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
			<h4>Retro</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
			<h4>Fast</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
			<h4>Classic</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column people">
		<div class="content">
			<img src="/w3images/people1.jpg" alt="Car" style="width:100%">
			<h4>Girl</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people2.jpg" alt="Car" style="width:100%">
			<h4>Man</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people3.jpg" alt="Car" style="width:100%">
			<h4>Woman</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

how to change nature by default i don't want showing all images . i tired but still showing all images. thank you advance

Upvotes: 2

Views: 1680

Answers (4)

Ezzuddin
Ezzuddin

Reputation: 665

You have to use window.onload function

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

window.onload = function () {
 document.getElementById('nature').checked=true;
filterSelection('nature');
}
* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Arial;
}

/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}
<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>
<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
<input type="radio" id="nature" onclick="filterSelection('nature')" name="category"> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
      <h4>Mountains</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
      <h4>Lights</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
      <h4>Forest</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  
  <div class="column cars">
    <div class="content">
      <img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
      <h4>Retro</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
      <h4>Fast</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
      <h4>Classic</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column people">
    <div class="content">
      <img src="/w3images/people1.jpg" alt="Car" style="width:100%">
      <h4>Girl</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="/w3images/people2.jpg" alt="Car" style="width:100%">
      <h4>Man</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="/w3images/people3.jpg" alt="Car" style="width:100%">
      <h4>Woman</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

Hope it will help you

Upvotes: 1

Balwant
Balwant

Reputation: 755

Try this : add an id on nature input and window onload trigger a click event on this element. 

<input type="radio" onclick="filterSelection('all')"  name="category" checked> Show all
<input type="radio" onclick="filterSelection('nature')" id="nature" name="category"> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

window.onload = function(e){ 
    var l = document.getElementById('nature');
   l.click();
}

Upvotes: 0

P. Frank
P. Frank

Reputation: 5745

modify this line in js file:

filterSelection("all")

by

filterSelection("nature")

and remove checked in "all" radio and add checked in "nature" radio

filterSelection("nature")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("column");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }
    
    function w3AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
      }
    }
    
    function w3RemoveClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 1);     
        }
      }
      element.className = arr1.join(" ");
    }
* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Arial;
}

/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

	<h1>MYLOGO.COM</h1>
	<hr>

	<h2>PORTFOLIO</h2>
	<input type="radio" onclick="filterSelection('all')" name="category"> Show all
	<input type="radio" onclick="filterSelection('nature')" name="category" checked> Nature
	<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
	<input type="radio" onclick="filterSelection('people')" name="category"> People

<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>
<input type="radio" onclick="filterSelection('all')" name="category" > Show all
<input type="radio" onclick="filterSelection('nature')" name="category" checked> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

<!-- Portfolio Gallery Grid -->
<div class="row">
	<div class="column nature">
		<div class="content">
			<img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
			<h4>Mountains</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
			<h4>Lights</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column nature">
		<div class="content">
			<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
			<h4>Forest</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
			<h4>Retro</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
			<h4>Fast</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column cars">
		<div class="content">
			<img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
			<h4>Classic</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>

	<div class="column people">
		<div class="content">
			<img src="/w3images/people1.jpg" alt="Car" style="width:100%">
			<h4>Girl</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people2.jpg" alt="Car" style="width:100%">
			<h4>Man</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<div class="column people">
		<div class="content">
			<img src="/w3images/people3.jpg" alt="Car" style="width:100%">
			<h4>Woman</h4>
			<p>Lorem ipsum dolor..</p>
		</div>
	</div>
	<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

Upvotes: 2

Tavish Aggarwal
Tavish Aggarwal

Reputation: 1060

I hope this will work for you:

window.onload = function () {
 document.getElementById('nature').checked=true;
filterSelection('nature');
}

I have created forked link: https://codepen.io/tavishaggarwal/pen/RLevRg. Please let me know if still your issue is not resolved.

Upvotes: 1

Related Questions