Good day, i'm hoping someone can help, i'm trying to recreate the effect on this page. About half way down the website where it says Stream your music/sports/podcasts etc
https://store.google.com/us/product/google_nest_mini?hl=en-US
I have added the bootstrap code that i have come up with, not sure if it will help but anyway.
It's not quite achieving the desired effect.
Thanks
here is a jsfiddle
https://jsfiddle.net/ev7y2tuL/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-light" style="height:100vh;background:#001d2f;">
<div class="row h-100">
</div>
</div>
<script>
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>
<style>
.make-me-sticky2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
padding: 0 15px;
/* z-index: 9999; */
}
.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 55%;
padding: 0 15px;
}
.fade {
margin: 50px;
padding: 50px;
opacity: 1;
}
</style>
<div class="container-fluid text-light" style="background:#001d2f;">
<div class="row ">
<div class="col-md-12 text-center" style="background:#000;">
<div class="make-me-sticky2">
<div style="background:#f0a;height:45vh;display:flex;">
</div>
<h1>LISTEN TO YOUR</h1>
</div>
<div class="make-me-sticky">
<div class="col-md-12 my-auto text-center" style="position: relative;height:70vh; ">
<h2 class="fade">1 MUSIC</h2>
</div>
</div>
<div class="make-me-sticky">
<div class="col-md-12 my-auto text-center" style="position: relative;height:70vh; ">
<h2 class="fade">2 NEWS</h2>
</div>
</div>
<div class="make-me-sticky">
<div class="col-md-12 my-auto text-center" style="position: relative;height:70vh; ">
<h2 class="fade">3 PODCASTS</h2>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<h2 class="fade">Play music and entertainment from your favorite apps with your voice</h2>
</div>
</div>
</div>
</body>
Related
I would like that after selecting an item from the menu, the latter closes to display the desired section
JS code :
$('#toggle').click(function(){
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
HTML code:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset='UTF-8'/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="icon" type="image/gif" href="images/animated_favicon1.gif">
<title>Piero Sabino</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#600&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<meta name="keywords" content="HTML5, CSS3">
<meta name="author" content="Piero Sabino">
<meta name="description" content="My website">
</head>
<body>
<div class='container'>
<!-- HEADER -->
<header id='about'>
<!-- ABOUT-->
<div class='content-wrap'>
<img class='profile-img col narrow' src='images/Piero Sabino.jpeg'>
<div class='col-wide'>
<h1>Piero Sabino</h1>
<p>Hi, my name's Piero Sabino, I'm 30 years old and live in Turi, Puglia. I have been passionate about website development since I went to school and today I decided to enroll the web programming course Start2impact to deepen my Web apps development skills and, at the same time, to become a full-stack developer, a figure sought after by companies operating on the web. Some time ago I took an online course about the Swift programming language. I like football and in my spare time I read or repair damaged objects.
</p>
</div>
</div>
<!-- END OF ABOUT -->
</header>
<!-- END OF HEADER -->
<main>
<!-- PROJECTS-->
<section id='projects'>
<div class='content-wrap'>
<h2>PROJECTS</h2>
<h3>Work in progress</h3>
</div>
</section>
<!-- END OF PROJECTS -->
<!-- CONTACT-->
<section id='contact'>
<div class='content-wrap'>
<div class='contacts'>
<h2>CONTACT</h2>
<form action='' method='get'>
<label for='name'>Name:</label><br />
<input id='name' type='text' name='name' placeholder='John Doe'/><br/>
<label for='email'>E-mail:</label><br/>
<input id='email' type='email' name='email' placeholder='john.doe#example.com'/><br />
<label for='message'>Message:</label><br/>
<textarea id='message' name='message' rows='10' cols='30' placeholder='Leave your message here...'></textarea><br/>
<button id='submit' value='submit' class='btn'>Send</button>
</form>
</div><br/>
<p>Or </p><br/>
<div class='email'>
<p>Send an e-mail to:<address><a href='mailto:piero.sa#icloud.com'>piero.sa#icloud.com</a></address></p>
</div>
</div>
</section>
<!-- END OF CONTACT-->
<!--FOOTER-->
<footer>
<div class='content-wrap'>
<div class='footer'>
<p>Created by Piero Sabino © 2020</p>
<a href='https://www.facebook.com/sabino.piero' target='_blank'><img src='images/social_facebook_box_blue_256_30649.png'/></a>
<a href='https://www.instagram.com/p13rr390/' target='_blank'><img src='images/3721672-instagram_108066.png'/></a>
<a href='https://www.linkedin.com/in/piero-sabino-15a1b671/' target='_blank'><img src='images/sociallinkedin_member_2751.png'/></a>
<a href='https://github.com/pierre1590' target='_blank'><img src='images/github-logo_icon-icons.com_73546.png'/></a>
</div>
</div>
</footer>
<!-- END OF FOOTER-->
</main>
</div>
<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li>
<a href='#about'>About</a>
</li>
<li>
<a href='#projects'>Projects</a>
</li>
<li>
<a href='#contact'>Contact</a>
</li>
</ul>
</nav>
</div>
<script src='scripts/menu.js' type='text/javascript'></script>
</body>
</html>
I want to close the menu after selecting an item from the menu itself, For example, if I select the "about" item, the menu must close showing me the desired section.
For example if I click on link About, it must show my description.
Although your question is not completely clear what you want, as much I understood by your question, you want something like this, So create a custom select like this, and show the selected item
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown-at > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents: function() {
var obj = this;
obj.dd.on('click', function(event) {
$(this).toggleClass('active');
return false;
});
obj.opts.on('click', function() {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue: function() {
return this.val;
},
getIndex: function() {
return this.index;
}
}
$(function() {
var dd = new DropDown($('#dd'));
$(document).click(function() {
$('.wrapper-dropdown-3').removeClass('active');
});
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper-dropdown {
position: relative;
display: inline-block;
}
.wrapper-dropdown > span {
display: inline-block;
padding: 2px 10px;
border: 1px solid;
}
.dropdown-at {
position: absolute;
width: 100%;
left: 0;
list-style: none;
padding: 0;
display: none;
}
.wrapper-dropdown.active .dropdown-at {
display: block;
border: 1px solid;
border-top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dd" class="wrapper-dropdown" tabindex="1">
<span>option 1</span>
<ul class="dropdown-at">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</div>
I'm a absolute beginner to Tizen. I want to make a little app. For this app, I want to add "More Options". It's not working and I really don't know. I followed each step in the documentation (I also followed this: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options) but this didn't help me either. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/more_options.css">
</head>
<body>
<div id="moreoptionsPage" class="ui-page">
<header class="ui-header ui-has-more">
<h2 class="ui-title">Einkaufsliste</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content">
<ul class="shopping_list ul-listview">
</ul>
</div>
<!--Rectangular profile-->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li>Hinzufügen</li>
<li>Entfernen</li>
</ul>
</div>
</div>
<!--Circular profile-->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item add-icon" data-title="Hinzufügen"></div>
<div class="ui-item remove-icon" data-title="Entfernen"></div>
</div>
</div>
</div>
</body>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/more_options.js"></script>
</html>
here's my more_options.js:
(function() {
var page = document.querySelector('#moreoptionsPage'),
popup = page.querySelector('#moreoptionsPopup'),
handler = page.querySelector('.ui-more'),
drawer = page.querySelector('#moreoptionsDrawer'),
selector = page.querySelector('#selector'),
helper,
clickHandlerBound;
function clickHandler(event) {
alert("calling");
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
page.addEventListener('pagebeforeshow', function() {
if (tau.support.shape.circle) {
helper = tau.helper.DrawerMoreStyle.create(drawer, {
handler: '.drawer-handler'
});
} else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener('click', clickHandlerBound);
}
});
page.addEventListener('pagebeforehide', function() {
if (tau.support.shape.circle) {
handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
}
});
})();
and here's my more_options.css:
#moreoptionsDrawer {
display: none;
}
#media all and (-tizen-geometric-shape: circle) {
#moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup {
display: none;
}
}
I get errors when using tau.helper.DrawerMoreStyle.create and in the examples on Github it is not used at all. Check it out:
https://github.com/Samsung/TAU/tree/tau_1.2/examples/wearable/UIComponents/contents/assistviews
I built this so far with w3.css:
$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
var h = $("#navi").height();
var z = $("#topper").height();
if (x >= z) {
//$("#header").hide();
$("#navi").addClass("w3-top");
$("#content").css("margin-top", h);
} else {
//$("#header").show();
$("#navi").removeClass("w3-top");
$("#content").css("margin-top", 0);
}
});
});
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<header class="w3-container" id="topper">
<span>HEADER HEADER HEADER</span>
</header>
<div class="" id="navi">
<div class="w3-bar w3-pink">
<span class="w3-bar-item" style="display: none; width:">SOLI</span>
<div class="w3-dropdown-hover">
<button class="w3-button w3-mobile">1</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
1a
1b
1c
1d
</div>
</div>
<div class="w3-dropdown-hover" id="navi">
<button class="w3-button">2</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
2a
2b
2c
2d
2e
2f
</div>
</div>
3
4
5
6
</div>
</div>
<div class="" id="content">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
</div>
</body>
But the problem is whenever I scroll down the content (eagle pictures) scolls, too, and hides behind the navbar...
I want the site to behave similar like this page when I scoll down.
Does anyone know what to do here? :)
sorry: ddddddd dddddddddddddddddd dddddddddddddddd ddddddddddddddddddddddddddd dddddd
It's hard to tell what you want, but I think this is it. You need to add background through CSS and use fixed property on it.
$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
var h = $("#navi").height();
var z = $("#topper").height();
if (x >= z) {
//$("#header").hide();
$("#navi").addClass("w3-top");
$("#content").css("margin-top", h);
} else {
//$("#header").show();
$("#navi").removeClass("w3-top");
$("#content").css("margin-top", 0);
}
});
});
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body style='background: url(https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg) no-repeat center center fixed; background-size: cover; height: 200em;'>
<header class="w3-container" id="topper">
<span>HEADER HEADER HEADER</span>
</header>
<div class="" id="navi">
<div class="w3-bar w3-pink">
<span class="w3-bar-item" style="display: none; width:">SOLI</span>
<div class="w3-dropdown-hover">
<button class="w3-button w3-mobile">1</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
1a
1b
1c
1d
</div>
</div>
<div class="w3-dropdown-hover" id="navi">
<button class="w3-button">2</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
2a
2b
2c
2d
2e
2f
</div>
</div>
3
4
5
6
</div>
</div>
</body>
Im working on a webpage that should look like this: https://imgur.com/a/eW3gK
And I'm trying to use bootstrap grids but the map is just not resizing and shows up right below the columns and it's not working.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css">
<script src="~/js/googleMap.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-6">Google Maps</div>
</div>
<div class="row">
<div class="col-md-6">Contact Information</div>
<div class="col-md-6">
<div id="map"></div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-giuXPLWpnFxLjk&callback=initMap"></script>
</body>
</html>
CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}
JS
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
How can I use the Google Maps with the Bootstrap grid according to the mockup?
Check this working example http://jsbin.com/capetay/edit?output
Here is the updated html, Map and the Contact Info container should be in the same row
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>
Here is the code snippet as well: (try running in full screen)
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
#map {
width: 100%;
height: 400px;
background-color: grey;
}
.row.body > div {
padding: 30px;
border: 1px solid
}
.with-border h3 {
border: 1px solid black;
max-width: 300px;
margin: auto auto 20px auto;
padding: 15px;
}
ul {
list-style: none;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Google Maps API in Bootstrap</title>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-12 text-center with-border">
<h3>Google Maps</h3>
</div>
</div>
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>
</html>
I'm teaching myself JavaScript and I'm trying to make a random background color appear when a button is clicked. Below you can find my code:
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center" onclick="randomColors">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
<script src="js/random-color.js"></script>
</body>
</html>
Here is my CSS Code:
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
And lastly, my JavaScript Code. This is where I'm having most of my trouble to be honest.
function randomcolor(){
document.getElementById('background').style.color =randomColors();
}
function randomColors(){
return '#' + Math.floor(Math.random() * 16777215).toString(16);
console.log("I'm working now")
}
Any help you can provide would be extremely helpful as this is all a learning experience for me. Thanks in advance!
It seems like its basically already been answered by others, but there is nothing wrong with repetition.
You are calling randomColors() instead of randomcolor().
You really shouldn't be using getElementById on the body tag. You can just use document.body to get the body.
You need to use style.background or style.backgroundColor to get the background color instead of text color.
You should be including your js scripts in <head> instead of near the bottom of your html document to ensure they are loaded before functions from them are called.
What happened is when your html loads, the onclick handler is undefined because your script hasn't been loaded as yet.. .hence you will get an an error in your console.log stating that your function is undefined. Move script tag above your onclick handler.
Snippet using .onclick
document.getElementById('button').onclick=randomcolor;
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
Snippet using addEventListener
document.getElementById('button').addEventListener('click',randomcolor,false)
function randomcolor(){
document.getElementById('background').style.backgroundColor =randomColors();
}
function randomColors(){
var result='#' + Math.floor(Math.random() * 16777215).toString(16);
console.log(result);
return result;
}
.background{
background-color: #ECECEA;
}
.text-padding{
padding: 50px;
}
input{
width:250px !important;
padding-left: 50px;
}
.inline{
list-style-type: none;
}
.container{
margin-left: 500px;
}
<title>Day 4</title>
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="background">
<div class="row">
<div class="columns small-12">
<ul class="menu">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="row">
<div class="columns small-12">
<div class="container center">
<button id="button"class="button center">Click Here for Color of the Day</button>
</div>
</div>
</div>
</div>
</html>
First, you're using the wrong function in your callback. Use onclick='randomcolor()'. Make sure your JS functions are defined in the <head> of the document. Finally, document.getElementById('background').style.color is the text color, not the background color. Use document.getElementById('background').style.background = randomColors();