NZMAI NZMAI - 3 months ago 8
CSS Question

Change id of click event for browsers with max-width less than 420px

I want to make my project responsive. For large screens my search button looks like this.

enter image description here

For small devices search button is replaced by glass search glyphicon. Like that.

enter image description here

The issue is i cannot change id of click event. I have written the following code but it does not work.

if (window.innerWidth < 420) {

document.getElementById("glass-search").addEventListener("click", searchFunction);

} // end of "if statement"


Please can you suggest me a right way to implement this feature. Thanks!
If you want more details see my project on codepen.

Full Javascript code

var apiKey = "z4pn22dn47rc7bsjw4jwxv9q";
var appendApiKeyHeader = function(xhr) {
xhr.setRequestHeader('Api-Key', apiKey)
};

document.getElementById("search").addEventListener("click", searchFunction);

if (window.innerWidth < 420) {

document.getElementById("glass-search").addEventListener("click", searchFunction);

} // end of "if statement"

function searchFunction() {

var foundArticle = $("#query").val();

console.log(foundArticle);

var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback';

// Clear content before AJAX call
$(".list-container").html("");

$.ajax({
url: wikiUrl,
dataType: "jsonp",
success: function(response) {
var artList = response[1];
//console.log(artList);
for (var i = 0; i < artList.length; i++) {
var title = artList[i];
//console.log("Number" + " " + i + " " + title);
var titleDesc = response[2][i];
//console.log("Number" + " " + i + " " + titleDesc);
var url = 'http://en.wikipedia.org/wiki/' + title;
/////////////////////////////////////////////////////////////////////////
/////////// Append title div and description div to ".list-container" calss
/////////////////////////////////////////////////////////////////////////
$(".list-container").append(
'<div class="result-item">' +
'<div class="each-list">' +
'<a href="' + url + '" target="_blank" >' + title +
'</a>' +
'<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>' +
'<div class="show-more">' +
'<div id="show-more-inner">MORE</div>' +
'</div>' +
'</div>' +
'<div class="titleDesc">' + '<p>' + titleDesc + '</p>' +
'</div>' +
'</div>'
);

} // end of "for" loop

/////////////////////////////////////////////////////////////////////////
/////////// ------- Display description div on hover--------------------
/////////////////////////////////////////////////////////////////////////
$('.show-more').hover(
function() {
$(this) // the ".show_more" element which triggered the "hover" event
.parent(".each-list") // the enclosing ".each-list" <span> (*)
.next(".titleDesc") // the next sibling with class "titleDesc"
.show();
}
);
/////////////////////////////////////////////////////////////////////////
/////////// ------- Hide description div on mouseout--------------------
/////////////////////////////////////////////////////////////////////////
$(".show-more").mouseout(
function() {
$(this) // the ".show_more" element which triggered the "hover" event
.parent(".each-list") // the enclosing ".each-list" <span> (*)
.next(".titleDesc") // the next sibling with class "titleDesc"
.hide();
}
);
/////////////////////////////////////////////////////////////////////////
/////////// Not to show "MORE" on "title" div if "title-desc" p is empty
/////////////////////////////////////////////////////////////////////////
$('.result-item>div.titleDesc>p').each(function() {
if ($(this).is(':empty')) {
$('.show-more', $(this).parents('.result-item')).hide();
}
})

var name = foundArticle;
var searchRequest = {
"phrase": name
}

function GetSearchResults() {
// Clear content before AJAX call
$(".wrapper").html("");
$.ajax({
type: "GET",
beforeSend: appendApiKeyHeader,
url: "https://api.gettyimages.com/v3/search/images",
data: searchRequest
}).success(function(data, textStatus, jqXHR) {
var images = data.images;
for (var i = 0; i < images.length; i++) {
var uri = images[i].display_sizes[0].uri;
var caption = images[i].title;
$(".wrapper").append(
'<div class="item">' +
'<div class="polaroid">' +
'<img src = "' + uri + '" />' +
'<div class="caption">' + caption + '</div>' +
'</div>' + // polaroid
'</div>' // end of "item"
);
console.log(caption);
}

//console.log(data.images);

}).fail(function(data, err) {

console.log(data);

});
} // end of "GetSearchResults" function

GetSearchResults();

} // success function end

}) // ajax function

return false;

} // click function


HTML

<section class="top-bar">
<div class="container">
<p id = "top-bar-paragraph">this is not official wikipedia page please refer to <a href="https://www.wikipedia.org/" target="_blank">wikipedia.org</a></p>
</div>
</section>

<section class="project-name-class">

<div class="container">

<div class="row">

<div class="col-md-8 col-md-offset-2">

<img src="http://res.cloudinary.com/nzmai/image/upload/v1471508759/Wikipedia-Search_n8wfpx.png" alt="image" />

</div>

</div>

</div>


</section>

<section class="searched-section">

<div class="container">

<div class="row">

<div class="col-md-6 col-md-offset-3">

<div class="input-container">
<input id="query" type="search" placeholder="Kanye West" />
<div class="button" type="submit" id="search">
<p>search</p>
</div>
<span id = "glass-search" class="glyphicon glyphicon-search" aria-hidden="true"></span>
</div>

</div>

</div>

<div class="row">
<div class="col-md-8 col-md-offset-2 list-container">

</div>
</div>


</div>

</section>

<section class="related-images">
<h1>Realated images</h1>
<div class="wrapper">

</div> <!--end of "wrapper"-->

</section>


CSS

* {
padding:0;
margin:0;
}
.top-bar {
background-color:#e0f2f1;
height:50px;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
position: relative;
}

.paragraph-container {
margin:0 auto;
}

#top-bar-paragraph {
text-align:center;
margin-top:10px;
font-family: 'Roboto', sans-serif;
font-weight:bold;
font-size:14px;
opacity:0.7;
}

.project-name-class {
background-color:white;
height:200px;
}

.col-md-8 img {
margin-top:30px;
width:100%;
}

.searched-section {
min-height:630px;
background-color:#6ca19c;
background-image:repeating-radial-gradient(
circle,
#34495e, #34495e 45%,
transparent 45%, transparent 60%,
#34495e 60%, #34495e 100%
);
background-size: 3px 3px;
}

.input-container {
width:100%;
margin:0 auto;
position: relative;
background-color:#afdcd8;
border:2px solid #7d8382;
margin-top:60px;
height:70px;
border-radius:5px;
}

input {
position: absolute;
height:55px;
width:80%;
top:5px;
left:6px;
border:2px solid #7d8382;
border-radius:5px;
line-height:30px;
font-size:22px;
padding-left:10px;
color:#009688;
font-size:30px;

}

::-webkit-input-placeholder {
font-family: 'Roboto', sans-serif;
opacity:0.7;
}

.button {
width:90px;
height:40px;
background-color:#6e56b8;
position:absolute;
border-radius:5px;
margin-top:12px;
right:10px;
cursor:pointer;
text-indent: 10px;
}

.button p {
font-size:24px;
text-align:center;
font-family: 'Roboto', sans-serif;
color:#a7e3dc;
}

.each-list {
margin-top:20px;
position:relative;
display:block;
width:100%;
height:60px;
background-color:#6e56b8;
border:0.3px solid #E1F5FE;
padding-left:10px;
}

.each-list:hover > .show-more {
width:150px;
-webkit-transition: width 500ms ease-in-out;
}


.each-list a {
font-size:28px;
margin-top:10px;
color:#b2dfdb;
text-decoration:none;
}

.each-list a:hover {
text-decoration:underline;
}

.show-more {
position:absolute;
cursor:pointer;
height:100%;
width:0;
background-color:#e0e0e0;
display:inline;
right:0;
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
-webkit-box-shadow: -4px 1px 6px 2px rgba(122,55,122,0.55);
-moz-box-shadow: -4px 1px 6px 2px rgba(122,55,122,0.55);
box-shadow: -4px 1px 6px 2px rgba(122,55,122,0.55);
}

.show-more #show-more-inner {
width:80px;
font-weight:bold;
margin:10px auto;
color:#9e9e9e;
font-size:28px;
font-family: 'Lato', sans-serif;
}

.titleDesc {
width:500px;
height:auto;
background-color:#6e56b8;
margin-top:20px;
margin-left:100px;
display:none;
}
.titleDesc p {
text-align:center;
font-size:28px;
color:#b2dfdb;
font-family: 'Lato', sans-serif;
}
.list-container {
margin-bottom:200px;
}

.glyphicon-search {
position:absolute;
font-size:30px;
right:5%;
top:20px;
display:none;
}

.glyphicon-chevron-down {
right:10px;
display:none;
position:absolute;
font-size:24px;
top:15px;
color:#00BFA5;
opacity:0.3;
}
.glyphicon-chevron-down:hover {
opacity:1;
}


/*****PARALOID*****/
* {
box-sizing: border-box;
}
body {
background-color: #e4d4bb;
background-image: repeating-radial-gradient(circle,
#E4D4BB, #E7DAC6 50%, #E7DAC6 100%
);
background-size: 10px 10px;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
width: 100%;
padding: 0 2rem;
text-align: center;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.2);
}
.caption {
font-size: 1.125rem;
text-align: center;
line-height: 2em;
}
.item {
display: inline-block;
margin-top: 2rem;
filter: grayscale(100%);
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all 0.35s;
}
.item:nth-of-type(4n+1) {
transform: scale(0.8, 0.8) rotate(5deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
transform: rotate(6deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+2) {
transform: scale(0.8, 0.8) rotate(-5deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
transform: rotate(-6deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+4) {
transform: scale(0.8, 0.8) rotate(3deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
transform: rotate(4deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:nth-of-type(4n+3) {
transform: scale(0.8, 0.8) rotate(-3deg);
transition: all 0.35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
transform: rotate(-4deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:hover {
filter: none;
transform: scale(1, 1) rotate(0deg) !important;
transition: all 0.35s;
}
.item:hover .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0deg);
height: 90%;
width: 90%;
bottom: 0%;
right: 5%;
box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
transition: all 0.35s;
}

.caption {
max-width:200px;
}
.related-images h1 {
font-family: 'Roboto', sans-serif;
opacity:0.7;
text-align:center;
}

@media all and (max-width: 1199px) {
.button {
width:70px;
height:40px;
}
.button p {
font-size:20px;
}

@media all and (max-width: 991px) {
.button {
width:90px;
height:40px;
}
.button p {
font-size:24px;
}

}

@media all and (max-width: 600px) {
.button {
display:none;
}
.button p {
font-size:24px;
}
.glyphicon-search {
display:block;
}

}

@media all and (max-width: 420px) {
.show-more {
display:none;
}
.glyphicon-chevron-down {
display:block;
}

.each-list a {
font-size:16px;
}


}

Answer

You can use Window.matchMedia() method :

var searchClickEvent = function() {
  if (window.matchMedia("(min-width: 420px)").matches) {
    document.getElementById("search").addEventListener("click", searchFunction);
  } else {
    document.getElementById("glass-search").addEventListener("click",   searchFunction);
  }
}

window.onresize = function() {
  searchClickEvent();
};
Comments