I'm trying to get a photo description happening when you hover over the image. This sounds like an easy task but I can't get it to work. I've tried several different methods and none work or the pop up shows up all over the place or messes up my divs.
Here is my HTML:
<div id="box">
<div class="mainimg">
<a href="url" target="_blank">
<img src="'thumbnail">
</a>
<span class="text">
<p>'item.comment'</p>
</span>
</div>
<div class="pfooter">
<img src="avatar">
username
</div>
</div>
And my CSS:
#box {
width:180px;
height:260px;
display:inline-block;
margin-left:20px;
margin-bottom:10px;
}
#box .mainimg img {
width: 160px;
height 160px;
margin-bottom:10px;
border:1px solid #;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
}
#box .mainimg span.text {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#box mainimg:hover span.text {
opacity: 1;
}
#box .pfooter img {
width: 50px;
height: auto;
position;
absolute;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
float: left;
color: #333;
font-weight: bold;
}
#box .pfooter {
height: 50px;
width: 160px;
font-size:0.75em;
}
#box .pfooter a {
color: #808080;
text-decoration: none;
}
You are missing a dot on one of your .mainimg selectors
Here is what you want: Working CodePen demo
#box {
width:180px;
height:260px;
display:inline-block;
margin-left:20px;
margin-bottom:10px;
position: relative;
}
#box .mainimg img {
width: 160px;
height 160px;
margin-bottom:10px;
border:1px solid #;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
}
#box .mainimg .text {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 142px;
left: 0;
position: absolute;
top: 0;
width: 152px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
border:1px solid #;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 4px;
}
#box .mainimg:hover .text {
opacity: 1;
}
#box .pfooter img {
width: 50px;
height: auto;
position;
absolute;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
float: left;
color: #333;
font-weight: bold;
}
#box .pfooter {
height: 50px;
width: 160px;
font-size:0.75em;
}
#box .pfooter a {
color: #808080;
text-decoration: none;
}
Looks like you were doing fine and just need to adjust the text box position. Add position: relative; to #box is a good start. I also rounded the corners.
See my codepen demo linked above for more tweaks.
The are three problems
is that you don't have a . before mainimg:hover
#box .mainimg:hover span.text {
opacity: 1;
}
you need to add some value to the top and left in the #box .mainimg span.text
#box .mainimg span.text {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 34px;
position: absolute;
top: 12px;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
Some of your HTML was incorrect username should be username
I fixed those three problems in this demo
Related
I have a div which when clicked, height changes so that the rest of the content becomes visible.
But I have a button inside this div which I would like to use as a "close-button", to change the height back to it's original value so the content is hidden again, but it's not working.
Here is the code:
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function() {
$('.scrollClick').css("height", "27px");
});
.scrollClick{
font-family:inherit;
background-color: #000E52;
color: #fff;
text-align: center;
display: inline-block;
position: fixed;
z-index: 9999;
cursor: pointer;
right: 20px;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
transition: all 0.5s ease;
font-size: 16px;
max-width: 240px;
box-sizing: border-box;
text-align: center;
height: 27px;
overflow: hidden;
}
.dropContentBox{
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta{
display: inline-block;
position: relative;
background-color: #7CBD2B;
color: #333;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
transition: all 0.5s ease;
z-index:10;
}
.acceptCta:hover{
background-color: #88D41B;
}
.acceptCta:hover .arrow{
opacity: 1.0;
}
.arrow {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
opacity: 0;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.bouncer {
position: relative;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: border-color 0.5s ease;
animation: bouncer 2s infinite;
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollClick">
Viktig informasjon! Les her <i class="bouncer"></i>
<div class="dropContentBox"><img src="/content/cnm/137449/600x600-banner-include-info-dishwasher-2019-no.png?$banner$">
<div class="acceptCta">Jeg har lest og forstått <i class="arrow"></i></div>
</div>
</div>
</div>
So as you see in my jQuery code, I want the .scrollClick class to go back to it' original height, when clicking the .acceptCta div.
What am I doing wrong? Ty
The problem is that the click on your second button also triggers a click on your first button as the second button is within the first button. you can restructure your html or can stop propagation.
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function(e) {
e.stopPropagation();
$('.scrollClick').css("height", "27px");
});
I have tried lot, but didn't get any proper solution.
Here is my code:
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
$(".img").toggleClass("active", 1000);
});
});
body {
background: red;
width: 100%;
margin: 0;
}
.col {
width: 30%;
}
.img {
display: block;
transition: all 0.5s ease;
position: relative;
transition: all 0.5s ease;
-webkit-transition: 1s
}
.img img {
width: 100%;
}
.img.active {
position: absolute;
left: 0;
top: 0;
transform: scale(2.5);
-webkit-transform-origin: top left;
transition: all 0.5s ease;
}
.img.active img {
transition: all 0.5s ease;
}
.zoom-close {
position: absolute;
right: 10px;
bottom: 10px;
background: #eee;
border: 0;
width: 32px;
height: 32px;
padding: 8px 8px 15px;
cursor: pointer;
outline: 0;
border-radius: 0;
transition: all 0.5s ease;
}
.zoom-close.transform {
border-radius: 100%;
transition: all 0.5s ease;
z-index: 10;
background: #fff;
position: absolute;
right: 5px;
top: 18px;
}
.zoom-close.transform .zoom-inner {
opacity: 0;
transition: all 0.5s ease;
}
.zoom-close.transform .zoom {
border: 0;
}
.zoom-close.transform .zoom:before {
width: 2px;
height: 17px;
top: 1px;
left: 7px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom-close.transform .zoom:after {
height: 2px;
width: 17px;
top: 9px;
left: -1px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom {
width: 10px;
height: 10px;
border-radius: 8px;
position: relative;
border: 2px solid #000;
}
.zoom:before {
content: '';
width: 2px;
height: 8px;
background: #000;
display: block;
top: 1px;
left: 4px;
position: absolute;
transition: all 0.5s ease;
}
.zoom-inner {
width: 8px;
height: 3px;
display: block;
background: #000;
position: absolute;
top: 10px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom:after {
content: '';
height: 2px;
width: 8px;
background: #000;
display: block;
top: 4px;
left: 1px;
position: absolute;
transition: all 0.5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250">
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
</div>
Could anyone help me in the below case:
<div class="img"> should be fit in to the window size (100% width), when we click on the <button class="zoom-close"> with the same transform effect.
(Please note: CSS transform property is not compulsory but I need the similar effect as it is..)
You need to get the screen sizes like width and height on zoom event
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250" >
</div>
<br><br><br>
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
JS
var flag=0;
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
// $(".img").toggleClass("active", 1000);
var height= window.screen.height;
var width = window.screen.width;
if(flag == 0){
$("img").css("width", "15vw");
$("img").css("height", "15vw");
flag=1;
}
else{
$("img").css("width", "100vw");
$("img").css("height", "100vw");
flag=0;
}
});
});
I've added a LightBox correctly, but there's something wrong when I click a photo, because there's like a blue border in Google chrome and then another type of border in Internet Explorer that I don't want to see:
https://imgur.com/9dQngUM
How can I remove this?
I've used this lightbox https://lokeshdhakar.com/projects/lightbox2/
Thank you! :D
.lb-loader, .lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10
}
.lb-container > .nav {
left: 0
}
.lb-nav a {
outline: 0;
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-next, .lb-prev {
height: 100%;
cursor: pointer;
display: block
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-prev:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-next:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}
.lb-data .lb-caption a {
color: #4ae
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: alpha(Opacity=100);
opacity: 1
}
Without seeing "the full picture" i.e. your code; you could try this:
.lightbox * { border: none !important; }
This assumes it really is a border problem and not some background image or something of that nature.
I have assembled a modal with embedded video using Iframe.
It opens and closes on desktop but does not close on mobile.
Here is the code:
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
var iframe = document.getElementById('demo');
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
img {
width: 420px;
height: 345px;
border-radius: 10px;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scaleX(1.1) scaleY(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}
iframe {
width: 420px;
height: 345px;
border: 0px;
border-radius: 10px;
box-shadow: 0 0 20px 0px black;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scaleX(1.0) scaleY(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
.thumb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
}
.round-button {
box-sizing: border-box;
display: block;
width: 80px;
height: 80px;
padding-top: 14px;
padding-left: 8px;
line-height: 20px;
border: 6px solid #fff;
border-radius: 50%;
color: #f5f5f5;
text-align: center;
text-decoration: none;
background-color: #3fa6d9;
font-size: 20px;
font-weight: bold;
transition: all 0.3s ease;
}
.round-button:hover {
background-color: #2b7dff;
box-shadow: 0px 0px 1px rgba(255, 255, 10, 1);
text-shadow: 0px 0px 1px rgba(255, 255, 1, 1);
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="trigger ">
<img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" />
<a class="round-button thumb"><i class="fa fa-play fa-2x"></i></a>
</div>
<div class="modal">
<div class="modal-content close">
<iframe id="demo" src="https://www.youtube.com/embed/CxnaPa8ohmM"></iframe>
</div>
</div>
Is there a way to make it work on mobile without using library like Bootstrap?
I just need to be able to close the window with a modal when on mobile phone.
Please help.
Simple X could solve your issue. I used symbol from font-awesome in given example.
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.getElementById("closediv");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
var iframe = document.getElementById('demo');
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
img {
width: 420px;
height: 345px;
border-radius: 10px;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scaleX(1.1) scaleY(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
}
iframe {
width: 420px;
height: 345px;
//border-style: solid;
//border-width: thin;
border: 0px;
border-radius: 10px;
box-shadow: 0 0 20px 0px black;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scaleX(1.0) scaleY(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
.thumb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
cursor: pointer;
}
.round-button {
box-sizing: border-box;
display: block;
width: 80px;
height: 80px;
padding-top: 14px;
padding-left: 8px;
line-height: 20px;
border: 6px solid #fff;
border-radius: 50%;
color: #f5f5f5;
text-align: center;
text-decoration: none;
background-color: #3fa6d9;
font-size: 20px;
font-weight: bold;
transition: all 0.3s ease;
}
.round-button:hover {
background-color: #2b7dff;
box-shadow: 0px 0px 1px rgba(255, 255, 10, 1);
text-shadow: 0px 0px 1px rgba(255, 255, 1, 1);
}
.fa {
color: white;
cursor: pointer;
display: block;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="trigger">
<img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" />
<a class="round-button thumb"><i class="fa fa-play fa-2x"></i></a>
</div>
<div class="modal">
<div class="modal-content" id="closediv">
<i class="fa fa-times fa-2x " aria-hidden="true"></i>
<iframe id="demo" src="https://www.youtube.com/embed/-3wlroM2gZ8" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
</div>
</div>
function searchToggle(obj, evt) {
var container = $(obj).closest('.search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('.search-input').val('');
}
}
.search-wrapper {
position: absolute;
left: 79%;
top: -25px;
transform: translate(-50%, 50%);
}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: black;
border-radius: 16px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 400px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0 70px 0 20px;
position: absolute;
top: 0;
left: 0;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
opacity: 0;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #fff;
padding: 0;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
background: #FE5F55;
border-radius: 2px;
left: 9px;
top: 18px;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
border: 4px solid #FE5F55;
border-radius: 50%;
left: 0;
top: 0;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="search-wrapper">
<div class="input-holder">
<input type="text" class="search-input" placeholder="Type to search" />
<button class="search-icon" onclick="searchToggle(this, event);"><span></span>
</button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>
After a lot of research, changes I finally managed to make and position my search bar. But according to me it is not performing the search function. for example, if I type anything in it like 'home' and press the search icon nothing happens. So I want to ask whether I am wrong i.e. the search function is working and secondly I want to make it responsive like Google's search bar. I mean I want it to remember searches and also shorten the results as I type.
Any help would be highly appreciated. Thanks :)
I highly recommend you to use Bootstrap. It only uses CSS and is leightweight. You can find it well documented at Bootstrap Forms and W3S. If you don't want to use a Framework you can try building something for yourself. For that purpose you can simply look again at bootstrap (or another CSS Framework) and copy whatever you want to use.
Again, you should use a CSS Framework for responsive designs, they help alot and make your life easier.
Regards, Megajin