How to hide and display a full-screen content

@hardik_chinoyMay 14.2015

How can i display a content when i click on an image?

Basically the content should be a fullscreen content.It should be hidden and as soon as I click on the image the content gets displayed in full screen.

Pls help.

to post a comment

JavaScript

10 Comments(s) _↴

@fcomstocMay 15.2015 — #I would think that the best way to do that would be to use jQuery on the image id:

if the id (or class) on the image is #image and the content is #content then:

[CODE]
 <script>
 $('#image').click(function()
 {
 $('#content').css('display', 'inline-block');
 });
 </script>
 [/CODE]

@fcomstocMay 15.2015 — #Sorry, forgot to mention, set the css on the hidden content to

#content {

display:none

}

or inline

<div id="content" style="display:none;"></div>

@hardik_chinoyauthorMay 15.2015 — #I will send you the piece of code and the css file.pls help

html code

[CODE]
  <ul class="ch-grid">
 <li>
 <div class="ch-item ch-img-1" >
 <div class="ch-info">
 <h3>Use what you have</h3>
 <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
 
   </div>
   </div>
  </li>
  <li>
   <div class="ch-item ch-img-2">
   <div class="ch-info">
   <h3>Common Causes of Stains</h3>
   <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
   </div>
   </div>
  </li>
  <li>
   <div class="ch-item ch-img-3">
   <div class="ch-info">
   <h3>Pink Lightning</h3>
   <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
   </div>
   </div>
  </li>
 </ul>
 
 [/CODE]

As soon as i click on the circles the respective divisions should appear that to full screen.

Css code

[CODE]
 .ch-grid {
 margin: 0 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
 }
 
 .ch-grid:after,
 .ch-item:before {
 content: '';
 display: table;
 }
 
 .ch-grid:after {
 clear: both;
 }
 
 .ch-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin: 50px;
 margin-top:250;
 }
 .ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 
 inset 0 0 0 0 rgba(200,95,66, 0.4),
 inset 0 0 0 16px rgba(255,255,255,0.6),
 0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 }
 .ch-img-1 { 
 background-image: url(images/7.jpg);
 }
 
 .ch-img-2 { 
 background-image: url(images/5.jpg);
 }
 
 .ch-img-3 { 
 background-image: url(images/6.jpg);
 }
 .ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 opacity: 0;
 transition: all 0.4s ease-in-out;
 transform: scale(0);
 backface-visibility: hidden;
 }
 .ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 22px;
 margin: 0 30px;
 padding: 65px 0 0 0;
 height: 110px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
 0 0 1px #fff, 
 0 1px 2px rgba(0,0,0,0.3);
 }
 
 .ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
 }
 
 .ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
 }
 
 .ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
 }
 .ch-item:hover {
 box-shadow: 
 inset 0 0 0 110px rgba(200,95,66, 0.4),
 inset 0 0 0 16px rgba(255,255,255,0.8),
 0 1px 2px rgba(0,0,0,0.1);
 }
 .ch-item:hover .ch-info {
 opacity: 1;
 transform: scale(1); 
 }
 
 
 [/CODE]

@hardik_chinoyauthorMay 15.2015 — #didnot work

@fcomstocMay 15.2015 — #I took the code that you sent and added the scripting needed, you can take the CSS and put that in a separate file, I just put it in the primary file for quick editing,

Main things, you need the jQuery script <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>, the divs for the content that appears, and I added the js to the bottom of the file, when you click the circles the text appears,

Hope this helps,

[CODE]
 <html>
 <head>
 <!-- ADD THIS TO THE HEAD TAG -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
 <style>
 .ch-grid {
 margin: 0 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
 }
 
 .ch-grid:after,
 .ch-item:before {
 content: '';
 display: table;
 }
 
 .ch-grid:after {
 clear: both;
 }
 
 .ch-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin: 50px;
 margin-top:250;
 }
 .ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 
 inset 0 0 0 0 rgba(200,95,66, 0.4),
 inset 0 0 0 16px rgba(255,255,255,0.6),
 0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 }
 .ch-img-1 { 
 background-image: url(images/7.jpg);
 }
 
 .ch-img-2 { 
 background-image: url(images/5.jpg);
 }
 
 .ch-img-3 { 
 background-image: url(images/6.jpg);
 }
 .ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 opacity: 0;
 transition: all 0.4s ease-in-out;
 transform: scale(0);
 backface-visibility: hidden;
 }
 .ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 22px;
 margin: 0 30px;
 padding: 65px 0 0 0;
 height: 110px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
 0 0 1px #fff, 
 0 1px 2px rgba(0,0,0,0.3);
 }
 
 .ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
 }
 
 .ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
 }
 
 .ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
 }
 .ch-item:hover {
 box-shadow: 
 inset 0 0 0 110px rgba(200,95,66, 0.4),
 inset 0 0 0 16px rgba(255,255,255,0.8),
 0 1px 2px rgba(0,0,0,0.1);
 }
 .ch-item:hover .ch-info {
 opacity: 1;
 transform: scale(1); 
 }
 </style>
 
 </head>
 <body>
 <ul class="ch-grid">
 <li>
 <div class="ch-item ch-img-1" >
 <div class="ch-info">
 <h3>Use what you have</h3>
 <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
 
   </div>
   </div>
  </li>
  <li>
   <div class="ch-item ch-img-2">
   <div class="ch-info">
   <h3>Common Causes of Stains</h3>
   <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
   </div>
   </div>
  </li>
  <li>
   <div class="ch-item ch-img-3">
   <div class="ch-info">
   <h3>Pink Lightning</h3>
   <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
   </div>
   </div>
  </li>
 </ul>
 
 <div id="content1" style="display:none">
 <h1>Sample Content</h1>
 </div>
 <div id="content2" style="display:none">
 <h1>Sample Content</h1>
 </div>
 <div id="content3" style="display:none">
 <h1>Sample Content</h1>
 </div>
 </body>
 </html>
 <script>
 $('.ch-img-1').click(function()
 {
 $('#content1').css('display', 'inline-block');
 });
 $('.ch-img-2').click(function()
 {
 $('#content2').css('display', 'inline-block');
 });
 $('.ch-img-3').click(function()
 {
 $('#content3').css('display', 'inline-block');
 });
 </script>

@fcomstocMay 15.2015 — #Sorry code tags ?

[CODE]
 <html>
 <head>
 <!-- ADD THIS TO THE HEAD TAG -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
 <style>
 .ch-grid {
 margin: 0 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
 }
 
 .ch-grid:after,
 .ch-item:before {
 content: '';
 display: table;
 }
 
 .ch-grid:after {
 clear: both;
 }
 
 .ch-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin: 50px;
 margin-top:250;
 }
 .ch-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 cursor: default;
 box-shadow: 
 inset 0 0 0 0 rgba(200,95,66, 0.4),
 inset 0 0 0 16px rgba(255,255,255,0.6),
 0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 }
 .ch-img-1 { 
 background-image: url(images/7.jpg);
 }
 
 .ch-img-2 { 
 background-image: url(images/5.jpg);
 }
 
 .ch-img-3 { 
 background-image: url(images/6.jpg);
 }
 .ch-info {
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 opacity: 0;
 transition: all 0.4s ease-in-out;
 transform: scale(0);
 backface-visibility: hidden;
 }
 .ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 position: relative;
 letter-spacing: 2px;
 font-size: 22px;
 margin: 0 30px;
 padding: 65px 0 0 0;
 height: 110px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
 0 0 1px #fff, 
 0 1px 2px rgba(0,0,0,0.3);
 }
 
 .ch-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: 0 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
 }
 
 .ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 9px;
 letter-spacing: 1px;
 padding-top: 4px;
 font-family: 'Open Sans', Arial, sans-serif;
 }
 
 .ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
 }
 .ch-item:hover {
 box-shadow: 
 inset 0 0 0 110px rgba(200,95,66, 0.4),
 inset 0 0 0 16px rgba(255,255,255,0.8),
 0 1px 2px rgba(0,0,0,0.1);
 }
 .ch-item:hover .ch-info {
 opacity: 1;
 transform: scale(1); 
 }
 </style>
 
 </head>
 <body>
 <ul class="ch-grid">
 <li>
 <div class="ch-item ch-img-1" >
 <div class="ch-info">
 <h3>Use what you have</h3>
 <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
 
   </div>
   </div>
  </li>
  <li>
   <div class="ch-item ch-img-2">
   <div class="ch-info">
   <h3>Common Causes of Stains</h3>
   <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
   </div>
   </div>
  </li>
  <li>
   <div class="ch-item ch-img-3">
   <div class="ch-info">
   <h3>Pink Lightning</h3>
   <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
   </div>
   </div>
  </li>
 </ul>
 
 <div id="content1" style="display:none">
 <h1>Sample Content</h1>
 </div>
 <div id="content2" style="display:none">
 <h1>Sample Content</h1>
 </div>
 <div id="content3" style="display:none">
 <h1>Sample Content</h1>
 </div>
 </body>
 </html>
 <script>
 $('.ch-img-1').click(function()
 {
 $('#content1').css('display', 'inline-block');
 });
 $('.ch-img-2').click(function()
 {
 $('#content2').css('display', 'inline-block');
 });
 $('.ch-img-3').click(function()
 {
 $('#content3').css('display', 'inline-block');
 });
 </script>
 
 [/CODE]

@hardik_chinoyauthorMay 18.2015 — #It didn't work the circular images are not getting clicked.

Thanq you.

@hardik_chinoyauthorMay 18.2015 — #not working

@fcomstocMay 21.2015 — #Sorry but I am not really sure what you are trying to do here, I created an example of the scripting you would need to hide and show things, but if you need any further help I will need you to explain what you are trying to do, if you do not want to post it here, feel free to PM me.

@hardik_chinoyauthorMay 21.2015 — #Can you send me ur email id so that i can mail you my problems with attachments and all.

Also in #JavaScript _↴

Help... script for directories How to create a custom 404 message page Need to pass proper data to heading title.

Success!

Help @hardik_chinoy spread the word by sharing this article on Twitter...

Tweet This

How to hide and display a full-screen content

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to hide and display a full-screen content

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴