Menu

Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

responsive iframe

When we create an iframe in our site or page, the layout of iframe is always challenging for our site if our site is responsive and device friendly. I faced this issue many time when I try to embed any other site of doc in my blog post.

But then I found a solution for this, which is simple and easy. With the help of few line of simple css code we could make our iframe responsive. Without any delay lets see an example.

I have created an iframe here and embed my blog in this. This is fully responsive you may browse this page on different resolution and size of screen(like mobile, tablet, netbook, and PC). 





Here is the CSS style code snippet which we need to include in head or body section of html code.

<style>
.iframe-container { 
  /* this class will make the div container based on the size of the screen.
     we can adjust the padding-top to give a fixed height to div. 
 */
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%; 
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Below is the code to create iframe using html iframe tag. In this code you just have to update the src. src (source) attrubute will hold the source url which you want to show in this iframe.



</style>
<!--responsive iframe section -->
<div class="iframe-container"> 
  <iframe class="responsive-iframe" src="https://rashidjorvee.blogspot.com/"></iframe>
</div>


Hope this helps you! Thank You!


at No comments:
Labels: ,

Responsive and rich accordion design

Responsive and rich accordion design using HTML and CSS:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #A678CF;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-top: 1px dotted #0069b9;
  margin: 5px 0 0 5px;
}

.accordion:before {
  content: '>';
  color: white;
  font-weight: bold;
  float: left;
  margin-right:10px;
  margin-left: 0px;
}

.active:before {
  content: "^";
}
.active, .accordion:hover {
  background-color: green; 
}

.panel {
  padding: 0px 18px;
  margin-left: 25px;
  margin-right: -5px;
  display: none;
  background-color: green;
  overflow: hidden;
  color: white;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Accordion component using HTML and CSS
Accordion component

at No comments:
Labels: , , , ,

Accordion using simple html and css

In this tutorial we are going to create an accordion just using the simple HTML, JavaScript and CSS, as shown below Accordion example picture.

simple accordion example
Accordion example
Here is the complete code snippet which we could use to design the same accordion as shown above.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: chartreuse;
  color: #444;
  cursor: pointer;
  padding: 18px;
  margin: 5px 0px 0 5px;
  width: 100%;
  border-top: 1px dotted #0069b9;
  text-align: left;
  
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  transform: skew(-20deg);
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:before {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: left;
  margin-right:10px;
  margin-left: 0px;
}

.active:before {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button on the left side of the accordion section. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Accordion 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Accordion 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Accordion 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>


You can browse this live example and try and play with this on W3School.com. Click here to open the example.
at No comments:
Labels: , , ,

Student registration form in HTML

Create a simple student registration form using HTML. This form should have option to fill the following:
  1. Student Name
  2. Student Email
  3. Program Type
  4. Interested in doing which course
  5. Day preference
  6. Submit and Clear button  

Below is the HTML code. You could copy and paste the complete content and run in your machine.

You HTML form will look like as below:

Student registration form


Hope this helps you to create and understand the different input fields of HTML and how to develop a HTML form using all kind of input fields.

at 4 comments:
Labels: , ,
Subscribe to: Posts (Atom)