We Keep Coding

This attribute work but id attribute not work in jQuery

I will use ajax for input messages and append that message but I want scroll bottom to chat but simple document ready - scroll top function does not work
Here is the working code
$(document).ready(function(event){
$('#chatboxouter').mouseenter(function (event) {
event.preventDefault()
$(this).scrollTop(400);
});
});
But not work in
$(document).ready(function(){
$('#chatboxouter').scrollTop(400);
});
Here is CSS code:
#chatboxouter{
position: fixed;top: 80px;height: 80vh;width: 100%;
overflow-y: scroll;background-color: navy;
}
here Is the html code
<div class="mainouter" style=" position: fixed;top: 80px;height: calc(100vh - 160px);width: 100%;
background-color: red;">
<div class="chatboxouter" id="chatboxouter">
<div class="allmessageview" style="background-color: yellow;">
Here Php input by ajax
</div></div>
</div>

If you don't mind you can use javascript like:-
<script>
document.querySelector(document).ready(function(){
document.querySelector('#chatboxouter').scrollTop(400);
});
</script>

I want to remove only the parent tag I clicked

There are 3 buttons in my code.
One is to add more files. (.btn-plus)
One is to remove the one added. (.btn-minus)
One is to reset the file. (.btn-reset)
I could add more input with (.btn-plus) button.
How could I delete only the one I click among every input I add with (.btn-plus)?
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".btn-minus").click(function(){
$(this).nextUntil('li').remove()
})
$(".btn-reset").click(function(){
$(".board-box__attachments input").value = "";
})
li {
width : 60%;
background : lightblue;
list-style : none;
padding : 0.5em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
<button class="btn-reset">Reset</button>
</div>
</li>
</ul>

You have to use on() to attach event to dynamically added element. Then use closest() to find currently clicked element's parent.
$("body").on("click", ".btn-minus", function(){
$(this).closest('li').remove();
})

$(this).nextUntil("li") doesn't match anything. It only searches siblings of this, and the button doesn't have any li siblings. If you want to select the li containing the button, use $(this).closest("li").
You also need to use event delegation to bind an event handler to dynamically-created elements.
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".board-box__attachments").on("click", ".btn-minus", function(){
$(this).closest("li").remove()
})
li {
width : 50%;
background : lightblue;
list-style : none;
padding : 1em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
</div>
</li>
</ul>

There are 2 issues with you code:
Your element which contains btn-minus is being created dynamically. So the click event would not work instead you need to use on event.
$(".btn-minus").click(function(){
So instead of this you need to use
$(document).on('click', '.btn-minus', function() {
Also you need to use following code to remove element.
$(this).closest('li').remove();
Please see the updated JSFiddle

Here you can creating elements dynamically so once the page is loaded, browser has no knowledge of '.btn-minus'
Try this:
$(document).on('click', '.btn-minus', function(){
$(this).closest('li').remove()
})
Hope this helps!

Change href when anchor is clicked

I have a question about how I can dynamically change a href="" in a button.
The jsfiddle below shows a button fixed at the bottom of the viewport starting at the landing page:
http://jsfiddle.net/Hm6mA/3/
The html of the button is like so:
<div class="button">
<a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
<img src="img/down.png" alt="down">
</a>
</div>
When it is clicked I want it to scroll to the next section and change the href="" to the following section of the page. So, when it is first clicked, the href will change to #second. It would obviously also need to change when the user manually scrolls past a section.
This is for a single page website. How would I go about such a thing?

Use .prop() to change its value
$(".button").on('click', function(){
$('.button').find('a').prop('href', '#services');
});
Demo

You can use fullPage.js plugin to achieve what you want. Maybe it is faster than coding it from cero :)
Demo fullPaje.js
Page

I am not used to jquery. Here is a pure javascript solution. It surely changes the hash value.
<body>
<div id="sections">
<section id="s100">asdfasd</section>
<section id="s101"></section>
<section id="s102"></section>
<section id="s103"></section>
<section id="s104">asdfasdasdfsdf</section>
<section id="s105"></section>
</div>
<div class="nav-bar">
<a id="next-button" class="button" href="#s100">Next</a>
</div>
<script type="text/javascript">
var sections = document.getElementById("sections");
var nextButton = document.getElementById('next-button');
sections.onscroll = function (evt) {
}
var counter = 100;
var limit = 105;
// closure
nextButton.onmouseup = function (evt) {
var incCounter = function () {
// add your custom conditions here
if(counter <= limit)
return counter++;
return 0;
};
var c = incCounter();
if(c != 0)
this.setAttribute('href', "#s" + c);
}
</script>
</body>
CSS
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sections {
height: 50%;
width: 100%;
overflow: scroll;
}
.nav-bar {
margin: 30px 20px;
}
.button {
text-decoration: none;
border: 1px solid #999;
padding: 10px;
font-size: 120%;
}

I have written a small jQuery plugin for that, just pushed it to GitHub. https://github.com/ferdinandtorggler/scrollstack
What you basically want to do is calling
$('.button').scrollstack({stack: ['#first', '#second', ... ]});
You dont even need the link when you call it on the button. So check it out and let me know if it works for you. ;)
Here you can try it and read more: http://ferdinandtorggler.github.io/scrollstack/

Writing a JavaScript function to open an image in (css)pop up with a close button?

I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?

Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>

FanyBox, which is uses the jQuery library is the right tool for that.

In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.

I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>

Wrong box being hidden

I have an array of links that when clicked will bring up a hidden div with information related to it. Each link, when clicked, will bring up a different div associated with it. I'm trying to make an image (closelabel.png) on every div with the class 'countystats' act as a close button to hide the divs. I can't get the image in every div to act as a clickable link yet. More importantly, when I click on link one nothing happens. When I open up two hidden divs and try to close one, the opposite one closes (if I click on 'one' and 'two' to make the divs appear, and then I lick on the "a" (for purposes of a closing link) the opposite div is closed. So the button for two closes one.
<style type="text/css">
.county{
color:blue;
display:block;
}
.countystats{
background-image:url('../../../../../closelabel.png') ;
background-position:top right;
border:3px black inset;
background-repeat:no-repeat;
background-color:#ccc;
display:none;
right:250px;
margin: 5px 5px 5px 5px;
padding:5px 5px 5px 5px;
width:200px;
}
</style>
<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black; overflow-x:hidden;">
<a class="county" href="#">one</a>
<a class="county" href="#">two</a>
<a class="county" href="#">three</a>
<a class="county" href="#">four </a>
<a class="county" href="#">five</a>
<a class="county" href="#">six</a>
</div>
<div class="countystats">stats one<p>woot</p><a class="closediv" href="#">a</a></div>
<div class="countystats">stats two <a class="closediv" href="#">a</a></div>
<div class="countystats">stats three</div>
<div class="countystats">some other stuff</div>
<div class="countystats">even more other stuff</div>
<script type="text/javascript">
$('a.county').each( function(e){
$(this).bind('click', function(e){
var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250);
});
});
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index(); $('.countystats').eq(toClose).hide(250);
});
});
</script>
jsfiddle demo

Your problem is a bit of confusion about what this is in the click handler in here:
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index();
$('.countystats').eq(toClose).hide(250);
});
});
You're calling index on the <a> that you're using to hide the <div> rather than on the <div> itself.
The simplest solution is, as other people have noted, to use closest:
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
No one else noticed what the real root of your problem was so I thought I'd mention it.

You are trying to bind event handlers incorrectly (for what you want the code to do). Also, just use .closest() to figure out which element to hide.
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
http://jsfiddle.net/mattball/tbNvn/4/

Just use parent():
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).parent().hide(250);
});