I am building a simple website for a client, they have two studios and they would like to display them on googleMaps in the contact section. Problem is, I cannot display two maps at once. So I would like to make it so that when you click on one address it hides a map and displays the other and vice-versa. Here is the code:
function showMapOne() {
document.getElementById("mapOne").style.display = "block";
document.getElementById("mapTwo").style.display = "none";
}
function showMapTwo() {
document.getElementById("mapOne").style.display = "none";
document.getElementById("mapTwo").style.display = "block";
}
#addressOne {
padding-left: 20px;
font-family: "arial";
}
#mapOne {
display: block;
position: absolute;
width: 1050px;
height: 500px;
}
#addressTwo {
position: relative;
padding-left: 20px;
padding-top: 500px;
font-family: "arial";
}
#mapTwo {
display: none;
position: relative;
width: 1050px;
height: 500px;
}
<div id="addressOne">
Via G. Mattei, 114 - Arese - MI
</div>
<div id="addressTwo">
Via Miralago, 12 - Laveno Mombello - VA
</div>
<div id="mapDivOne">
<div id="mapOne"></div>
</div>
<div id="mapDivTwo">
<div id="mapTwo"></div>
</div>
You are missing the () in the function call onClick="showMapOne()" and onClick="showMapTwo()"
Perhaps you mean this?
window.onload=function() {
document.getElementById("address_One").onclick=document.getElementById("address_Two").onclick=function() {
var id = this.id.split("_")[1];
document.getElementById("mapOne").style.display = id=="One"?"block":"none";
document.getElementById("mapTwo").style.display = id=="Two"?"block":"none";
}
}
#addressOne {
padding-left: 20px;
font-family: "arial";
}
#mapOne {
display: block;
position: absolute;
width: 1050px;
height: 500px;
}
#addressTwo {
position: relative;
padding-left: 20px;
padding-top: 500px;
font-family: "arial";
}
#mapTwo {
display: none;
position: relative;
width: 1050px;
height: 500px;
}
<div>
<a id="address_One" href="#">Via G. Mattei, 114 - Arese - MI</a>
</div>
<div id="mapOne">Map 1</div>
<div id="addressTwo">
<a href="#" id="address_Two" >Via Miralago, 12 - Laveno Mombello - VA</a>
</div>
<div id="mapTwo">Map 2</div>
Related
I am implementing a simulation of a Dutch- and an English-auction in otree.
For the interface, I am using a progress bar for the price that the supplier gets.
In the English-auction the price increases every half second and in the Dutch-auction the price decreases every half second.
Now I want to add a vertical line for the costs of the supplier, which changes every round.
How can i add a vertical line to the progress bar?
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myCosts {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 100%;
height: 30px;
background-color: #40bf80;
text-align: center;
line-height: 30px;
color: white;
}
#costLine{
width: 0%;
height: 30px;
background-color: #FF0000;
text-align: center;
line-height: 30px;
color: white;
}
.bg-info{
background-color: #ddd;
}
</style>
Your costs for this round are:
<div id="myCosts">
<div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
<div id="myBar">$200</div>
</div>
<p></p>
<p id="Message"></p>
<script>
var left_line = ({{player.cost|json}}-101);
var right_line = (200-{{player.cost|json}});
let cost = {{player.cost|json}}
let bot_stop = {{player.bot_stop|json}};
let price = {{Constants.start_value|json}};
var Auction;
var Auction2;
document.getElementById("costLine").innerHTML = "$"+cost;
document.getElementById("costLine").style.width = cost-100+'%';
function startAuction(){
document.getElementById("stop_button").disabled = false;
document.getElementById("start_button").disabled = true;
Auction = setInterval(function(){
if(price == bot_stop){
document.getElementById("Message").innerHTML = 'The other supplier has dropped out. You win with a price of ' + bot_stop;
document.getElementById("stop_button").innerHTML = 'Next Page'
stopAuction();
}
if(price != bot_stop){
price = price -1;
document.getElementById("myBar").innerHTML='$'+price;
document.getElementById("myBar").style.width = (price-100) +'%';
}
},500)
}
function stopAuction() {
document.querySelector("[name=winning_price]").value = price;
document.getElementById("stop_button").innerHTML = 'Next Page'
clearInterval(Auction);
}
</script>
<button type="button" class="otree-btn-next btn btn-primary" id="start_button" onclick="startAuction()">Start Auction</button>
<button class="otree-btn-next btn btn-primary" disabled id="stop_button" onclick="stopAuction()">Drop Out</button>
<p></p>
<p></p>
<input type="hidden" name="winning_price" />
Add a child element <div id=myBarPrice></div> to <div id="myProgress">.
Add position: relative; attribute to the #myProgress selector.
Add new style block for a new element:
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 100%;
top: 0;
}
Set #myBarPrice position with js:
...
document.getElementById("costLine").innerHTML = "$"+cost;
document.getElementById("costLine").style.width = cost-100+'%';
document.getElementById("myBarPrice").style.right = cost+'%'; // <=====
function startAuction(){
document.getElementById("stop_button").disabled = false;
document.getElementById("start_button").disabled = true;
...
Here is a mockup in codepen.io
CSS code:
#myProgress {
width: 100%;
background-color: #ddd;
position: relative;
}
#myCosts {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 80%;
height: 30px;
background-color: #40bf80;
text-align: center;
line-height: 30px;
color: white;
}
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 40%;
top: 0;
}
#costLine{
width: 60%;
height: 30px;
background-color: #FF0000;
text-align: center;
line-height: 30px;
color: white;
}
.bg-info{
background-color: #ddd;
}
HTML code:
Your costs for this round are:
<div id="myCosts">
<div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
<div id="myBar">$200</div>
<div id=myBarPrice></div>
</div>
I have a button of fixed size and various chunks of text. The length of the texts is different. How can I make the size of the text font change dynamically according to its length in order to fit the button boundaries properly? Thank you.
Well, depends. Is the height fix as well? If both height and width are fixed, you will have to calculate the fontsize via javascript.
In most of the cases two or three if conditions should be absolutely sufficient for the specific usecase.
function font_size_adjust () {
// Grab the string
var string = $('#button_text').text()
// Get the length in characters of the string
var string_size = string.length
// Build variable to change attribute
var font_size = 0
// Define logic for resizing, adapt this to your personal needs
if (string_size < 60) {
fontsize = '2vw';
} else if (string_size > 60) {
fontsize = '4vw';
} else {}
// Change fontsize
$('#button_text').css('font-size', fontsize)
}
// Call the function where- and whenever needed:
font_size_adjust();
// Example stuff
$('#toggle_small').click(function () {
$('#button_text').text('Now I am small again!')
font_size_adjust();
})
$('#toggle_big').click(function () {
$('#button_text').text('Now I am large again! Lets get this rollin! rollin! rollin! rollin!')
font_size_adjust();
})
#ctn {
display: flex;
float: left;
}
#button {
width: 45vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
font-family: Varela Round;
color: #FFF;
background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgba(101,34,162,1) 72%);
}
#ctn_toggle {
display: flex;
float: left;
}
.toggle {
background-color: lightblue;
font-size: 3vw;
padding: 10px;
border-radius: 25px;
width: 11vw;
text-align: center;
margin-right: 2vw;
font-family: Varela Round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Make me small and big all day long this is so exciting! Let's go broooh!</p>
</div>
</div>
<div id="ctn_toggle">
<div id="toggle_small" class="toggle">
<p id="button_small">Click me to shrink!</p>
</div>
<div id="toggle_big" class="toggle">
<p id="button_big">Click me to expand!</p>
</div>
</div>
</body>
</html>
Otherwise, these are the options... :
#ctn {
display: flex;
float: left;
}
#button {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text {
font-size: 4vw;
}
#button2 {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text2 {
}
#button3 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text3 {
font-size: 4vw;
}
#button4 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
}
#button_text4 {
}
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Fix button width and fix font-size</p>
</div>
<div id="button2">
<p id="button_text2">Fix button width and no specific font-size</p>
</div>
<div id="button3">
<p id="button_text3">Fix button width, fix button height and fix font-size</p>
</div>
<div id="button4">
<p id="button_text4">Fix button width, fix button height and no font-size</p>
</div>
</div>
</body>
</html>
I have a panel which contains some options as shown in the image :
There is a arrow button on header , what I am looking for is , if I click on that button it should expand to the left as shown :
Example : If I have lets suppose 20 options it will open to the left like that showing 5 image in each part and if I again click on it it will collapse like 1st image .
How it could be done using javascript , html and css only provided everything is dynamic in nature. Any help would be appreciated .
Thanks
you can use the flex-flow: column wrap and overflow: hidden to make something like this.
POC:
const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;
function expendOrRetract() {
if (isExpened) {
expend.innerHTML = ">";
tools.classList.remove("extend");
} else {
expend.innerHTML = "<";
tools.classList.add("extend");
}
isExpened = !isExpened;
}
* {
box-sizing: border-box;
}
.tools {
position: relative;
width: 20px;
display: flex;
flex-flow: column wrap;
height: 80px;
overflow: hidden;
}
.tools.extend {
width: 40px;
}
.expend {
cursor: pointer;
height: 20px;
width: 20px;
border: solid 1px;
}
.tool {
height: 20px;
width: 20px;
border: solid 1px;
}
<div class="expend" onclick="expendOrRetract()">></div>
<div class="tools">
<div class="tool">t1</div>
<div class="tool">t2</div>
<div class="tool">t3</div>
<div class="tool">t4</div>
<div class="tool">t5</div>
<div class="tool">t6</div>
<div class="tool">t7</div>
<div class="tool">t8</div>
</div>
you can use diraction: rtl
to the left:
const expend = document.querySelector(".expend");
const tools = document.querySelector(".tools");
let isExpened = false;
function expendOrRetract() {
if (isExpened) {
expend.innerHTML = "<";
tools.classList.remove("extend");
} else {
expend.innerHTML = ">";
tools.classList.add("extend");
}
isExpened = !isExpened;
}
* {
box-sizing: border-box;
}
.tools {
direction: rtl;
position: absolute;
right: 10px;
top: 30px;
width: 20px;
display: flex;
flex-flow: column wrap;
height: 80px;
overflow: hidden;
}
.tools.extend {
width: 40px;
}
.expend {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
height: 20px;
width: 20px;
border: solid 1px;
}
.tool {
height: 20px;
width: 20px;
border: solid 1px;
}
<div class="expend" onclick="expendOrRetract()">
< </div>
<div class="tools">
<div class="tool">t1</div>
<div class="tool">t2</div>
<div class="tool">t3</div>
<div class="tool">t4</div>
<div class="tool">t5</div>
<div class="tool">t6</div>
<div class="tool">t7</div>
<div class="tool">t8</div>
</div>
I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>
I am curious...do the CSS scroll-snap properties have a API (events) that can be hooked into via JavaScript?
I am tinkering with the idea of creating a website that uses scroll-snap to move between 100vh "slides". After each slide is done "scroll-snapping" I would like to trigger an animation.
I am sure there are crafty ways I could check each "slide" to see if it is taking 100% of the viewport, but that sort of sucks. It would be far better to fire a function after the scroll event is complete.
Here is a super simple example:
$(document).ready(function() {
let slideNumber = $('.container > .slide').length;
if (slideNumber > 0) {
$('.container > .slide').each(function() {
$('#dotNav').append('<li></li>');
});
}
//DO SOMETHING AFTER SCROLL-SNAP IS COMPLETE.
});
html {
scroll-behavior: smooth;
}
body {
box-sizing: border-box;
scroll-snap-type: y mandatory;
}
.container {
width: 100%;
scroll-snap-type: y mandatory;
position: relative;
.slide {
height: 100vh;
width: 100%;
background: #cccccc;
scroll-snap-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
&:nth-child(odd) {
background: blue;
h2 {
color: #ffffff;
}
}
h2 {
margin: 0;
font-size: 40px;
text-transform: uppercase;
}
}
ul#dotNav {
position: fixed;
top: 50%;
right: 20px;
list-style: none;
li {
width: 20px;
height: 20px;
margin-bottom: 10px;
cursor: pointer;
a {
display: block;
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 50%;
}
}
li.active {
background: #000000;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slide" id="slide0">
<h2>Slide 1</h2>
</div>
<div class="slide" id="slide1">
<h2>Slide 2</h2>
</div>
<div class="slide" id="slide2">
<h2>Slide 3</h2>
</div>
<ul id="dotNav">
</ul>
</div>
You can see it working here:
https://codepen.io/trafficdaddy/pen/BMGBBg
Hope someone out there has an answer! :)
You can do this with an IntersectionObserver:
document.addEventListener("DOMContentLoaded", () => {
(function scrollSpy() {
const targets = document.querySelectorAll(".section"),
options = {
threshold: 0.5
};
// check if IntersectionObserver is supported
if ("IntersectionObserver" in window) {
(() => {
const inView = target => {
const interSecObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting) {
fireyourfunction();
}
});
}, options);
interSecObs.observe(target);
};
targets.forEach(inView);
})();
}
})();
});