Develop Reference

I want to add next and previous buttons to an enlarged image

I am creating my website portfolio and I have an image that when you click on it opens in another window but enlarged, I want to add next and previous symbols/buttons to that enlarged image so that all the other images can be viewed instead of having to go back and click on the next image etc.. This is my code so far.
<div class="grid-item">
<img src="img/6.JPG" width="440" height="180" alt="Building in Paris">
</div>
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 10px;
font-size: 30px;
text-align: center;
max-height: 200px;
max-width: 460px;
overflow: hidden;
box-sizing: border-box;
}
.grid-item > img:hover{
transform:scale(2.5);
}

How to style the borders using javascript?

I have a css piece of code like this:
.profile img.profilePic {
position: absolute;
margin: -50px 70px 50px 50px;
background: #2f293d;
border: 1px solid #2f293d;
padding: 1px;
border-radius: 50%;
box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}
Now, what if I want to change the border: 1px solid #2f293d; in Javascript...???
I've tried :
var colorA = document.getElementsByClassName("profile img.profilePic")[userA_Index];
colorA.style.border = "1px solid #000";
and also:
var colorA = document.querySelector(".profile img.profilePic")[userA_Index];
colorA.style.border = "1px solid #000"
With no success.
Note: I already did such styling using the code below but borders...
var colorA = document.getElementsByClassName("level")[userA_Index];
colorA.style="font-family:verdana; color:red; font-size:20;"
Any help to solve this is greatly appreciated...

$(".row").css({"border" : "1px solid #000","padding" : "5px"});
You can use JQuery as well
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script>
$(".row").css({"border" : "1px solid #000","padding" : "5px"});
</script>
<div class="row"> Hello World</div>

Another approach to solve this problem is by Creating a custom css class like custom-border
img.profilePic.custom-border {
border: 1px solid #000
}
and in javascript
document.querySelector(".profile img.profilePic").classList.add("custom-border");
To avoid undefined error you have to be sure about the path in querySelector
https://codepen.io/anon/pen/LvrxyG

So you only want change the border color. If then you can achieve it easily by "borderColor" property. See following snippet:
document.querySelector("#setBorder").addEventListener("click", myFunction);
function myFunction() {
document.querySelector(".profilePic").style.borderColor = "#000";
}
.profile img.profilePic {
position: aabsolute;
margin: -50px 70px 50px 50px;
background: #2f293d;
border: 1px solid #f00;
padding: 1px;
border-radius: 50%;
box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}
<div class="profile">
<img class="profilePic" src="https://via.placeholder.com/150" />
</div>
<button id="setBorder"> Click on me</button>

Position div at bottom of containing div

I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.

Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}

Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.

You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}

use position property like position absolute or position relative so as to work with top, left,right,bottom properties

Image wont fit into div properly

so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height: 350px;
}
<div class="ibox-content" id="ibox-1">
<div class="active content" id="elementMap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>

Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.
Add overflow: auto; to the container:
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height:350px;
overflow: auto;
}

Div with overflow: scroll or overflow: auto will solve your problem.

How to animate the contents of a button?

Go to google, and without typing anything in, hover your mouse over the "I'm Feeling Lucky" button. See what it does?
I can't think how to do that...on:hover....but the actual content and animation itself, how?

It's not the button that's animating.
They have a hidden div, positioned over the button. It's absolutely positioned.
It contains a lot of spans with all the messages.
On hover, they use a function to move that div around, and make it visible.
It looks like the contents of the button are moving, but they aren't really.
<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
<div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
<!-- spans go here -->
</div>
</div>
See the value, -29px? That's all that's changing.

Add a class, ie: focus, for the borders and bold face and the toggle it with jQuery:
$('#button').hover( function () {
$(this).addClass('focus');
}, function () {
$(this).removeClass('focus');
} );
The actual rules you can see Google is using with Chrome are:
.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,.1)
}