Develop Reference

How can I implement this horizontal search result bar?

I essentially have a horizontal div that populates content from omdb API. It dynamically generates a bunch of search results, and displays them all; however the overflow: hidden is active.
I have 2 questions:
I have two custom "buttons" that I made with an empty div and icon. I gave it a bit of a box-shadow to give it the illusion that it's hovering. Is it better practice to use a button element instead, or does it matter?
My main question is this: I want to be able to navigate back and forth between my search results using my arrow buttons. What would be the best way to implement this? The only thing I can think of is using the buttons to adjust the left or right margins of my search results. (ie. pressing the left button would adjust the margin-left of my results with a negative margin, and the right arrow would adjust it with a positive margin)
However, this feels crude and not very accurate. Meaning with a few extra clicks, the content could be pushed out of the view entirely (either by accident or on purpose).
Is there a way to set this up more efficiently?
Here is some code as an example:
const leftArrow = document.querySelector("#left-arrow");
const rightArrow = document.querySelector("#right-arrow");
const marginSelector = document.querySelector("#nav-margin");
var marginValue = -20;
leftArrow.addEventListener('click', () => {
marginSelector.style.marginLeft = marginValue + "px";
marginValue += -20;
});
.scrollbar-container {
width: 800px;
display: flex;
border: 1px #5e9af9 solid;
position: relative;
top: 100px;
overflow: hidden;
margin: auto;
align-items: center;
}
.result-container {
display: inline-block;
margin: 2px;
}
img {
display: inline-block;
vertical-align: middle;
position: relative;
}
.nav-button {
position: absolute;
width: 50px;
height: 50px;
background: rgba(230, 232, 237, .5);
text-align: center;
margin: auto 0;
}
.left-arrow {
left: 1%;
}
.right-arrow {
right: 1%;
}
.margin-start {}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="scrollbar-container">
<div id="nav-margin" class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div id="left-arrow" class="nav-button left-arrow">
<i class="fas fa-angle-left fa-3x"></i>
</div>
<div id="left-arrow" class="nav-button right-arrow">
<i class="fas fa-angle-right fa-3x"></i>
</div>
</div>

I've written script to move back and forth the search results. You just need to check and adjust the marginLeft value for your marginSelector. I've added transition into the CSS of #nav-margin so that it looks smooth. marginValue is been initialized with 0. max-width of container has been set to 500px for convenience. When you change your max-width do not forget to change it in addEventListener for rightArrow. You can also make the value inside if condition to dynamic so that it actually takes the value from .scrollbar-container.
Let me know if you have any queries.
const leftArrow = document.querySelector("#left-arrow");
const rightArrow = document.querySelector("#right-arrow");
const marginSelector = document.querySelector("#nav-margin");
var marginRightValue = 0;
rightArrow.addEventListener('click', () => {
if(-(marginRightValue) <= (500+20))
marginRightValue += -100;
marginSelector.style.marginLeft = marginRightValue + "px";
});
leftArrow.addEventListener('click', () => {
if(marginRightValue < 0)
marginRightValue += 100;
marginSelector.style.marginLeft = marginRightValue + "px";
});
.scrollbar-container {
max-width: 500px;
display: flex;
border: 1px #5e9af9 solid;
position: relative;
top: 100px;
overflow: hidden;
margin: auto;
align-items: center;
}
#nav-margin{
transition: all 1s;
}
.result-container {
display: inline-block;
margin: 2px;
}
img {
display: inline-block;
vertical-align: middle;
position: relative;
}
.nav-button {
position: absolute;
width: 50px;
height: 50px;
background: rgba(230, 232, 237, .5);
text-align: center;
margin: auto 0;
cursor: pointer;
}
.left-arrow {
left: 1%;
}
.right-arrow {
right: 1%;
}
.margin-start {}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="scrollbar-container">
<div id="nav-margin" class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div class="result-container">
<img src="https://i.imgur.com/dA3tjxl.gif">
</div>
<div id="left-arrow" class="nav-button left-arrow">
<i class="fas fa-angle-left fa-3x"></i>
</div>
<div id="right-arrow" class="nav-button right-arrow">
<i class="fas fa-angle-right fa-3x"></i>
</div>
</div>

I'm not entirely sure if this would be the best response, but:
Point 1 - I don't think it matters here. A <button> is meant for a form, from a semantics point of view. For more context, read: https://css-tricks.com/use-button-element/
Point 2 - I can already scroll/swipe from left to right (in your code demo when I run the snippet), using my mouse/trackpad. So having extra buttons to do that job seems unnecessary. I would think rather to make a Javascript carousel (or slider) like effect when clicking the right button takes me to the next "slide", or the next chunk of your results. You could then disable buttons when there is no more content on the right (or left), or have them cycle back to the beginning. Effectively you want to think of a fixed width "slide" window (responsive for different viewports) and "slide" accordingly. Does that make sense for your problem?

Why my jQuery effect not performing like it state?

I have 3 questions about my jQuery study today.
Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.
I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?
$(document).ready(function() {
$('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});
.panel {
display: inline-block;
width: 80px;
height: 60px;
border: 1px solid green;
position: relative;
top: 20px;
margin-left: 45px;
border-radius: 5px;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>

For your first question
Why my jQuery code not have the animation effect as it should be? for
example, .slideUp() and .slideDown(), my code shows something strange
instead of slideUp animation.
The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.
Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.
What display none does ?
display:none means that the tag in question will not appear on the
page at all
Now for second and third question
I understand, the .hide() or .slideUp() function is only to HIDE the
div box, not DELETE them, however, in my code, why the position of
other div boxes changed after a DIV .hide()? Shouldn't it stay at
their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position,
when one DIV box has been hided?
The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now
Now what can you do to let them stay there, But hidden from view ?
You can use visibility or opacity property instead rather than using display
property.
For example: visibility: hidden; will just hide it from the view.
Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.
$(document).ready(function() {
setInterval(function(){
$('#panel1').slideUp(1000).delay(500).slideDown(1000);
}, 3000);
});
.outer-div
{
position: relative;
display: inline-block;
min-height: 1px;
margin-right: 15px;
margin-left: 15px;
width: 130px;
height: 90px;
}
.panel {
border: 1px solid green;
margin-left: 45px;
border-radius: 5px;
position:absolute;
top:0;
width: 100%;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div class="outer-div">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
</div>

You should use display:flex on .panels, that solves your first question.
For second question you should use visibility or opacity.
With current code you are removing it, although it is called hide() it is equivalent to CSS display:none; which doesn't keep space of element.
Although you actually don't need to set visibility in your case because sliding it up will hide element and down show.
Something like this:
$('#panel1').animate({
top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
top: 0
}, 1000);
Also you have to change CSS a bit.
Add this to your CSS:
.panels {
display: flex;
overflow: hidden;
margin-top: 20px;
}
And from .panel remove top: 20px;
Full example is here https://jsfiddle.net/_jakob/cphptby3/1/

fullpage.js slider. problems with absolute blocks. Chrome

I have a problem with slider controls and any block with position: absolute on slider section.
$(document).ready(function() {
$('#fullpage').fullpage();
});
.slide {
text-align: center
}
.section {
text-align: center;
}
.absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
text-align: center;
background: red;
z-index: 2;
}
.slide1 {
background: #cccccc;
}
.slide2 {
background: #C3C3C3;
}
.section2 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.fullpage/2.5.0/jquery.fullPage.min.css" />
<div id="fullpage">
<div class="section section1">
<div class="absolute">position: absolute</div>
<div class="slide slide1"> Slide 1 </div>
<div class="slide slide2"> Slide 2 </div>
</div>
<div class="section section2">Some section</div>
</div>
If you slide down and up - everything is ok. But if you use slider and then will slide down and up. The page will show without slider controls(and absolute block).
I can't find why it is happening. Problems occurs only in Chrome and Opera.
UPDATES:
Here is jsfiddle for example: https://jsfiddle.net/nfL5w9yL/1/

Fullpage adds z-index:1 to fp-slides
Had the same issue recently, i don't know if you found a solution, but my solution was to remove z-index from fp-slides!
the weird part is that in my case the navigation buttons were not affected, only my position absolute div

animate out image on click function while overlapping its sibling elements

First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.

z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>

For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/

Covering images from both sides

I have this menu, that (when you hover over an icon) makes the icon bigger. What I tried to achieve is, to have it display correctly from both sizes, which doesn't quite work. It only works from the left side, because of the unordered list, but is there a way to make it work from both sides? (basically so the icon covers the one to the right and the one to the left without pushing it). I have this:
HTML:
<!-- START OF THE MENU !-->
<div class="menu-outer" style="font-family: 'Open Sans', sans-serif;;">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav>
<ul class="menu">
<center>
<img class="icon" src="games.png">
<img class="icon" src="home.png">
<img class="icon" src="contact.png">
<img class="icon" src="wai.png">
<img class="icon" src="wita.png">
</center>
</ul>
</nav>
</div>
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
<!-- END OF THE MENU!-->
CSS:
.icon{
display: inline-block;
margin-right: -5;
}
.icon:hover{
width: 155px;
margin: -15px -22px -15px -13px;
}
.menu{
z-index: 10;
}
Thanks for all the help.
If anything, it's all uploaded here (in the right corner menu):
http://goolag.pw/delete2.html

Add the following to your CSS:
.icon{
position: relative;
z-index: 10;
}
.icon:hover{
z-index: 100;
}
By increasing the z-index, the hovered icon is moved up in the DOM-layer, and displayed above the other icons.

You need to use z-index, but in order to do that, you need to add the element a positioning. I tried this and worked:
.menu a:hover{
z-index: 150;
position: relative;
}

You may want to set all the images' z-index property to a negative value and when the image hovers, set it to a positive one. I don't know if this is a bug but that's how it behaves, take a look at this fiddle:
#one {
width: 100px;
height: 40px;
background: red;
z-index: 10;
}
#two {
width: 100px;
height: 40px;
background: blue;
position: relative;
top: -20px;
left: 20px;
z-index: -1;
}
If you set the first element's z-index to a >0 value, it won't show over the second one until it's z-index is set to something <0.