I want the screen to scroll down to the div. This div has an ID of 'weather-data'
I have tried the following;
document.getElementById('weather-data').scrollIntoView();
I have also tried using anchor tags this did not seem to work
The button which the user will click:
<button id="submit" onclick="myFunction()">
Submit
</button>
The function that runs when the button is clicked:
function myFunction(){
cityName();
getData();
clear();
document.getElementById('weather-data').scrollIntoView();
}
This is the div I want the screen to scroll to:
<div id="weather-data">
</div>
use the anchor tag to link the the div
body{
margin: 0;
}
div{
height: 100vh;
border: 1px solid black;
}
<html>
<body>
<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>
<div id='e'>e</div>
<button><a href='#c'>go to c</a></button>
</body>
</html>
I fixed the issue I had to write an if statement to check if there was any text in the h1 element.
if(weatherMain != null){
document.getElementById('icon').scrollIntoView();
document.getElementById('weather-main').scrollIntoView();
}
Related
I have list and each list has "move top" button.
when click "move top" button, div element shoul be move to top(in DOM).
But I am getting little trouble to make it.
Also when using keyboard tabbing to the button and press enter key, the focus has to be keep to the button, after press the keyboard enter.
This is what I tried so far here
Please help.
$('.btnTop').on('click', function() {
$(this).parent().prepend(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
You are prepending the wrong item. You need to prepend the parent div of the button, not the button itself. Also, you need to prepend to the .wrap div, which is the button's parent parent rather than to the button's parent which is just the div wrapping the button.
Lastly, you need to focus() on this (which is the button you clicked) to get the tab button working. At the moment you are not focusing on the button you clicked on.
See working example below:
$('.btnTop').on('click', function() {
let this_div = $(this).parent();
this_div.parent().prepend(this_div);
$(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
I have a list of DIVS that have buttons inside. By default, all buttons are hidden. When I click within a DIV area, the current button inside of this clicked DIV are should show (class='.db') AND all previously clicked/shown buttons should be hidden (class='.dn'). In other words, at any time there should be only one button (currently clicked) shown and all other should be hidden.
I want to use vanilla Javascript and tried this below, but it won't work. I feel there is some small error but don't know where.. Note - the DIVS and buttons don't have their own unique IDs (they only have the same CSS (.posted) classes.
PS - maybe it'd be better not to add this onClick="t();" to each DIV and use an 'addEventListener' function, but this is way too much for me ; )
CSS:
.dn {display:none}
.db {display:block}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
HTML:
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
JAVASCRIPT:
function t()
{
var x=document.getElementsByClassName("posted"),i,y=document.getElementsByTagName("button");
for(i=0;i<x.length;i++)
{
x[i].y[0].className="dn";
};
x.y[0].className='db';//make sure the currently clicked DIV shows this button (?)
}
You might want to read more about selector, how to select class, block level etc.
some link might be helpful:
CSS selector:
https://www.w3schools.com/cssref/css_selectors.asp
jQuery selector:
https://api.jquery.com/category/selectors/
Solution - Using jQuery:
$('.posted').on('click', function() {
//find all class called posted with child called dn, then hide them all
$('.posted .dn').hide();
//find this clicked div, find a child called dn and show it
$(this).find('.dn').show();
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>
Solution - Pure js version:
//get list of div block with class="posted"
var divlist = Array.prototype.slice.call(document.getElementsByClassName('posted'));
//for each div
divlist.forEach(function(item) {
//add click event for this div
item.addEventListener("click", function() {
//hide all button first
divlist.forEach(function(el) {
el.getElementsByTagName('button')[0].classList.add('dn');
});
//show button of the div clicked
this.getElementsByTagName('button')[0].classList.remove('dn');
}, false);
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>
You can do this with with plain JavaScript using Event Bubbling, querySelector and the element classList attribute like this.
Change your HTML to look like this:
<div class="posts">
<div class="posted">
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
</div>
Then use JavaScript like this:
var posts = document.querySelector('.posts');
var allPosted = document.querySelectorAll('.posted');
//clicks bubble up into the posts DIV
posts.addEventListener('click', function(evt){
var divClickedIn = evt.target;
//hide all the buttons
allPosted.forEach(function(posted){
var postedBtn = posted.querySelector('button');
postedBtn.classList.remove('db');
});
// show the button in the clicked DIV
divClickedIn.querySelector('button').classList.add('db')
});
You can find a working example here: http://output.jsbin.com/saroyit
Here is very simple example using jQuery .siblings method:
$(function () {
$('.posted').click(function () {
$('button', this).show();
$(this).siblings().find('button').hide();
});
});
https://jsfiddle.net/3tg6o1q7/
Been trying to make a button which opens a div containing another html page. I had the button working but the main page was opening with the div shown already, I needed it hidden. After messing it all up I'm stuck on this. The button doesn't work.
html
<p>Press the button</p>
<button id="button1" onClick="show()">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/"></object>
</div>
css
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
}
js
$('#button1').click(function(){
$('#Ahover').toggle()
});
Fiddle
Any help, what I'm I doing wrong? And is this even possible.
Thanks, got it working in the end by moving the script into tag.
Try This code:
HTML:
<p>Press the button</p><button id="button1">Show / Hide</button>
<div id="Ahover">
<object type="text/html" data="http://validator.w3.org/" >
</object></div>
CSS:
#Ahover {
display:none;
overflow: hidden;
border:1px ridge blue;
}
object {
width:760px;
height:600px;
display:inline-block
}
JS:
$('#button1').on('click',function(e){
$('#Ahover').toggle();
});
Demo is here:
https://jsfiddle.net/Dee0565/aaqfykz3/2/
html:
<p>Press the button</p><button id="button1" >Show / Hide</button>
<div id="Ahover"></div>
js:
$('#button1').click(function(){
$('#Ahover').toggle();
$("#Ahover").html('<object data="http://validator.w3.org/" />');
});
css:
div {
height: 100%;
}
object {
width: 100%;
min-height: 100%;
}
js fiddle: http://jsfiddle.net/SsJsL/
Check out the working demo here - http://jsfiddle.net/x2qjdfwk/
The only change is to remove the show() function from the button as you are already applying the jQuery click event to it.
<p>Press the button</p><button id="button1">Show / Hide</button>
And make sure you include the jQuery library.
its an i tag
(the image is)
which uses css to display the icons
through a cdn hosted stylesheet and how would I incorporate that.
So lets say there is a magnifying glass icon on the web page, we the user clicks on the icon , a div dropdown search box appears. that is what i am asking help for.
not sure how to do it but I know I am close.
The icon is the
<section class="search">
<div id="searchbar"><i class="search-bar"></i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
//// javascript////
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Don't know what your goal is, but your code seems to work.
Have you checked so your div wraps around the image so when you click it you click inside the div (try to do as I in the fiddle, a border around the div so you can see).
else it should work just fine.
What is the css for the .hidden class?
<style>
.hidden
{
background-color: yellow;
}
#searchbar
{
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="searchbar"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
Script:
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Check this jsfiddle out!
I am writing a code with multiple divs that uses a button to change the background colors of divs when clicked. The background of the divs are hard coded into the html:
ex:
<div style="background-color: grey">
</div>
When I click the button, I want the background color to be permanently changed to white. However, the color only changes to white for an instant. the code is as such:
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
<form>
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
</form>
Any help would be appreciated
Remove the form tag:
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
<div style="width: 100px;height: 100px; background-color: red"></div>
<div style="width: 100px;height: 100px; background-color: yellow"></div>
<div style="width: 100px;height: 100px; background-color: blue"></div>
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
when the form tag is used and you click on the button the colors change but the form also submits, which leads to reload of the page. This way you loose the colors of the div elements.