I'm new in HTML and Javascrit and I need to scrool sections using two buttons. I wrote a code which works with one two sections. How can I use it with more than two?
<body>
<button id="a1" onclick="f1()"><img width="100%" height="100%"
<button id="a2" onclick="f2()"><img width="100%" height="100%"
</body>
function f1() {
var elmnt1 = document.getElementById("sez1");
elmnt1.scrollIntoView();
}
function f2() {
var elmnt2 = document.getElementById("sez2");
elmnt2.scrollIntoView();
}
How about having target element's id as a parameter?
function scrollTo(id) {
document.getElementById(id).scrollIntoView();
}
Then you can use it as:
onclick="scrollTo('sez3')"
I assume you want to write a generic function which will call 'scrollIntoView' on the clicked Element, you can do something like:
<body>
<button id="a1" onclick="genericfunc(event, 'id1')"><img width="100%" height="100%" /></button>
<button id="a2" onclick="genericfunc(event, 'id2')"><img width="100%" height="100%" /></button>
</body>
<script>
function genericfunc(event, id) {
var elmnt = document.getElementById(id);
elmnt.scrollIntoView();
}
</script>
I don't know if I understand the question correctly, maybe you're looking for something like this:
<body>
<button id="a1" onclick="f1('divID1')">
<button id="a2" onclick="f1('divID2')">
</body>
function f1(divID) {
var elmnt1 = document.getElementById(divID);
elmnt1.scrollIntoView();
}
However, there are several ways to scroll, for example:
Via Anchor
<div id="myDiv"></div>
location.href = "#myDiv";
Via offsetTop
<div id="myDiv">
<div id="myInnerDiv"></div>
</div>
let myElement = document.getElementById('myInnerDiv');
let topPos = myElement.offsetTop;
document.getElementById('myDiv').scrollTop = topPos;
function GetDisplayed(id) {
var element = document.getElementById(id);
element.scrollIntoView();
}
#sez1{
position: absolute;
top: 1000px;
left: 2000px; ;
}
#sez2{
position: absolute;
top: 2000px;
left: 1000px; ;
}
#sez3{
position: absolute;
top: 500px;
left: 2500px; ;
}
<body>
<button id="a1" onclick="GetDisplayed('sez1')">Button 1</button>
<button id="a2" onclick="GetDisplayed('sez2')">Button 2</button>
<button id="a3" onclick="GetDisplayed('sez3')">Button 3</button>
<section id="sez1">First section</section>
<section id="sez2">Second section</section>
<section id="sez3">Third section</section>
</body>
Related
I don't know very much about coding, but I would like to be able to make it so when I click one of the "test" buttons, the image moves. I would like it to be a variable, so that it is constantly checking the variable (I have no idea how to use variables), and at any given moment, when variable = number, it is in a specific position I have designated. And when I click test 1, that variable goes up by one, and when I click test 2, it goes down by one. And at any given variable from 0-10, there is a specific place the image should be for each number. And once the variable reaches 11, the variable will instantly reset to 0 as if in a loop. It can include HTML, CSS and Javascript, sorry if this is confusing I really am a noob at coding :(
This is all the code I have so far, it really isn't helpful but I thought I should add it anyway.
<img id="img01" src="https://cdn.shopify.com/s/files/1/0080/8372/products/tattly_triangle_yoko_sakao_ohama_00_1200x1200.png?v=1575322215" height="300">
<button id="test1" type="button">test 1</button>
<button id="test2" type="button">test 2</button>
Thank you for any help :)
Take a look at the code below. I hope this example will help you to undestand a block move principe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>moved image</title>
</head>
<body>
<div class="wrapper">
<div>
<img class="image" src="" width="50" style="left: 200px;">
</div>
</div>
<button class="button" type="button" id="left-button" onclick="moveLeft()">Left</button>
<button class="button" type="button" id="right-button" onclick="moveRight()">Right</button>
<style>
.wrapper {
position: relative;
width: 500px;
min-height: 200px;
background-color: yellow;
}
.image {
position: absolute;
top: 40px;
width: 100px;
height: 70px;
background-color: blue;
}
</style>
<script>
'use strict'
const getNumber = function(str) {
return parseInt(str, 10);
}
const transformToString = function(num) {
return num + 'px';
}
const SHIFT = 10;
const MARGIN = 10;
const element = document.querySelector('.image');
const LEFT_MARGIN = getNumber(element.style.left) - SHIFT * MARGIN;
const RIGHT_MARGIN = getNumber(element.style.left) + SHIFT * MARGIN;
const moveLeft = function() {
if (getNumber(element.style.left) > LEFT_MARGIN) {
element.style.left = transformToString(getNumber(element.style.left) - SHIFT);
}
}
const moveRight = function() {
if (getNumber(element.style.left) < RIGHT_MARGIN) {
element.style.left = transformToString(getNumber(element.style.left) + SHIFT);
}
}
</script>
</body>
</html>
I can't understand why the functions are not being called or if not that why the background image isn't being changed?
script tags:
<script type="text/javascript" >
function start()
{
document.body.style.backgroundImage = "url('sothback.png')";
document.body.style.backgroundSize = "100%";
document.body.style.backgroundRepeat = "repeat-y";
}
window.onload = start;
function cartman()
{
document.getElementById("image").style.src = "cartman.png";
}
function kenny()
{
document.getElementById("image").style.src = "kenny.png";
}
</script>
body:
<body>
<div style="width: 100%; height: 700px;">
<button onclick="kenny()">Kenny</button>
<button onclick="cartman()">cartman</button>
<div style="height: 400px;"></div>
<center><img src="kenny.png" alt="img" id="image" ></center>
</div>
</body>
Try with this
function cartman() {
document.getElementById("image").setAttribute('src','cartman.png');
}
function kenny() {
document.getElementById("image").setAttribute('src','kenny.png');
}
function start()
{
document.body.style.backgroundImage = "url('sothback.png')";
document.body.style.backgroundSize = "100%";
document.body.style.backgroundRepeat = "repeat-y";
}
window.onload = start;
function cartman()
{
document.getElementById("image").setAttribute('src',"cartman.png");
document.getElementById("image").setAttribute('alt',"Image of cartman");
}
function kenny()
{
document.getElementById("image").setAttribute('src',"kenny.png");
document.getElementById("image").setAttribute('alt',"Image of kenny");
}
</script>
<div style="width: 100%; height: 700px;">
<button onclick="kenny()">Kenny</button>
<button onclick="cartman()">cartman</button>
<div style="height: 400px;"></div>
<center><img src="kenny.png" alt="img" id="image" ></center>
</div>
Update the style.src to setAttribute.
Also consider setting alt tags and title for accessibility and screen readers.
Is it possible to change the background image of a div when a button outside of the div is selected?
e.g.
HTML
<div id="change"></div>
<div id="buttons">
<button class="button1">this</button>
<button class="button2">that</button>
<button class="button3">there</button>
<button class="button4">then</button>
</div>
CSS
#change{
background-image: url("this.jpg")
}
Desired effect when clicking button 2 (same for each button; 3 = there.jpg, 4 = then.jpg)
#change{
background-image: url("that.jpg")
}
Using javascript you can set the backgroundImage. Using jQuery you'd use $.css('background-image');
You could also use JS/jQuery to add a class to the element, and you can set the background-image in CSS for that class.
document.getElementById('button').addEventListener('click',function() {
document.getElementById('change').style.backgroundImage = 'url(https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg)';
})
#change {
background: #eee;
width: 600px;
height: 375px;
}
<button id="button">button</button>
<div id="change"></div>
document.getElementById('button').addEventListener('click',function() {
document.getElementById('change').classList.add('bg');
})
#change {
background: #eee;
width: 600px;
height: 375px;
}
#change.bg {
background-image: url(https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg)
}
<button id="button">button</button>
<div id="change"></div>
You can do this but it will require JavaScript:
Your HTML:
<div id="buttons">
<button class="button1" onclick="changeBG('image1.jpg')">this</button>
<button class="button2" onclick="changeBG('image2.jpg')">that</button>
<button class="button3" onclick="changeBG('image3.jpg')">there</button>
<button class="button4" onclick="changeBG('image4.jpg')">then</button>
</div>
<script>
function changeBG(image) {
var urlString = "url(" + image + ")";
document.getElementById('change').style.backgroundImage = urlString;
}
</script>
This is not the prettiest way to do this but it should accomplish getting you started.
This is what you need in jQuery :D
$('#buttons button').on('click',function() {
var val = $(this).text();
$('#change').css('background-image','url('+val+'.jpg)');
});
put the script inside $(document).ready(function() {
Here is my code:
<!DOCTYPE html>
<html>
<body>
<script>
function light() {
if (document.getElementById("push").value == "OFF") {
document.getElementById("bulb").style.backgroundImage = url("1.png");
document.getElementByID("push").value = "ON";
}
else {
document.getElementById("bulb").style.backgroundImage = url("2.png");
document.getElementByID("push").value = "OFF";
}
}
</script>
<center>
<input type="button" id="push" onclick="light()" value="OFF" />
<div id="bulb" style="background-image:url(2.png);width:320px;height:420px">
</div>enter code here
</center>
</body>
</html>
This line:
document.getElementById("bulb").style.backgroundImage = url("1.png");
attempts to call a function called url and pass a string to it, and then assign the result of that to the backgroundImage property.
Instead, you want to assign a string to backgroundImage directly:
document.getElementById("bulb").style.backgroundImage = "url(1.png)";
// Note ------------------------------------------------^----^----^^
Example:
document.getElementById("bulb").style.backgroundImage = "url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32)";
<div id="bulb" style="width: 32px; height: 32px"></div>
That said, it would be better to define your styling and such in CSS and then associate those styles with elements using selectors, for instance via a class association:
CSS:
.class-saying-what-the-image-represents {
background-image: url(1.png);
}
JavaScript:
document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");
Example:
document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");
.class-saying-what-the-image-represents {
background-image: url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32);
}
<div id="bulb" style="width: 32px; height: 32px"></div>
I have an element that contains multiple elements inside it, what I need is to clone the element, but on every "new" element, I need to increment an element (the object number -see my script please-)
In the script I'm adding I need (every time I click on the button) to have : Hello#1 (by default it's the first one) but the first click make : Hello#2 (and keep on top Hello#1) second click = Hello#1 Hello#2 Hello#3 ... We need to keep the oldest hellos and show the first one.
var count = 1;
$(".button").click(function(){
count += 1;
num = parseInt($(".object span").text());
$(".object span").text(count);
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
cont.append(div);
});
.object{
width:100px;
height:20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>
You just have to change a little:
var count = 1;
$(".button").click(function() {
count += 1;
num = parseInt($(".object span").text());
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
div.find('span').text(count); // <------here you have to put the count
cont.append(div);
});
.object {
width: 100px;
height: 20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>
and if you want to simplify this more use this:
$(".button").click(function() {
var idx = ++$('.object').length; // check for length and increment it with ++
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
div.find('span').text(idx); // <------here you have to put the count
cont.append(div);
});
.object {
width: 100px;
height: 20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>
Use the following function, this is more modular and you can use it to update the count if you remove one of the elements
function updateCount() {
$(".object").each(function(i,v) {
$(this).find("span").text(i+1);
});
}
$(".button").click(function() {
num = parseInt($(".object span").text());
var cont = $(".container"),
div = cont.find(".object").eq(0).clone();
cont.append(div);
updateCount();
});
.object {
width: 100px;
height: 20px;
background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button type="button" class="button">
create object
</button>
<div class="container">
<div class="object">
<p>
hello#<span>1</span>
</p>
</div>
</div>