Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I couldn't get this right. I'm doing my business website for our project this coming finals. What I wanted to do is that when the user clicks the homepage for the first time (home.html), it will load a centered button on the middle of the page and the main content is opaque. I tried an IF statement for JS but I couldn't get the logic. Everytime I click the homepage, it continues to load the button. I just wanted it to load once whenever the home.html file is opened.
<style>
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 3%;
margin-bottom: 0;
font-size: 13px;
}
ul#features li::before {
content: "\2713 "; /* inserts a check mark */
color: green;
font-weight: bold;
font-size: 14px;
}
ul#features {
list-style-type: none;
}
#textOpener {
display:none;
position: absolute;
/* all four properties tries to center the button in the middle */
top: 40%;
bottom: 40%;
left: 40%;
right: 40%;
}
div#mainContent {
opacity: 0.2;
visibility: visible;
background-color: gray;
}
</style>
</head>
<body>
<script>
if(!localStorage["firstLoad"]) {
document.getElementById("textOpener").style.display = "block";
localStorage["firstLoad"] = true;
}
</script>
<p id="textOpener">Proceed to site</p> <!-- this would show up first before the rest of the content -->
<div id="mainContent">
jsfiddle
Here's how you could do it with localStorage:
if(!localStorage["firstLoad"]) {
document.getElementById("textOpener").style.display = "block";
localStorage["firstLoad"] = true;
}
In the CSS set display:none; on the textOpener div:
#textOpener {
display:none;
position: absolute;
/* all four properties tries to center the button in the middle */
top: 40%;
bottom: 40%;
left: 40%;
right: 40%;
}
This code checks to see if there's a key called firstLoad in localStorage, if there's not, then the button is displayed and the key is created(so that the next time the person visits the site, providing they haven't cleared their cache, the code that displays the button will not fire).
JSFiddle
Well, the script is executed before the dom is ready.
$(document).ready(function(){
//do your code here.
})
Otherwise, document.getElementById("textOpener") returns nothing.
Related
This might be a simple issue to fix but I struggled:
On this website index page, if you scroll a bit down to interactive map.
This problem also arises on web browser on laptop as well.(just discovered!
ps. This was an embedded map as iframe html!
See source html:
<iframe id="iframe" width="100%" height="620px" src="leaflet_v1/index.html"></iframe>
Basically after you click a lot (area), the info section will show up. (this is made from leaflet web map from QGIS)--> I changed JS code here to make slider info appear:
function popup(){
document.getElementById('slider').style.width='75%';
document.getElementById('slider').style.zIndex='1000';
//..then insert data
//.. put a inline html for js Close function
}
layer.bindPopup(popup, {maxHeight: 400});
At the end of the leaflet index page, I got a section closer JS function:
<script>
function CloseSlider(){
document.getElementById('slider').style.width='1px';
}
</script>
BUT weird thing is that when you close the section using that button on "MOBILE DEVICES", the screen will JUMP UP and make the map stick at the top of the screen.
I wish I can cancel this effect.
:) Can anyone solve it ? :)
If you need to see the css setting for that slider , here you go:
<style>
.slider{
height: 100%;
width:2px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:rgb(39,57,66);
opacity: 0.90;
padding-left: 20px;
padding-top: 20px;
overflow-x: hidden;
transition: 0.3s;
}
.slider a{
padding: 5px 20px 5px 0px;
text-decoration: none;
font-size: 15px;
color: pink;
display: block;
transition: 0.3s;
}
.slider a:hover{
background-color:rgb(39,57,66);
color: white;
}
.slider .btn-close{
position: absolute;
top:0;
right: 10px;
font-size: 35px;
margin-left: 30px;
}
</style>
Hope this is not too complex :)
Surprisingly, the Solution is so silly:
Get rid of the:
href="#"
from <a> element...
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am creating a 'One Page' navigation on my homepage.
I have a 'Books' button in my menu navigation.
What I'm trying to achieve is that if the visitor 'hovers' over the Books button, the homepage scrolls down to where the 'books' section is on the homepage, so this should be an anchor link - #books
But then when the user clicks the button, it will take them to the actual 'books' page - example.com/books
So I need an anchor link on hover, and regular link on click.
Is this possible?
Other that creating the regular link on click, I haven't tried much unfortunately, I don't really know where to start with the hover action.
This will scroll down to the div but remember I added one second delay to the scroll so the user can click on it. you can increase/decrease delay as you wish.
$(document).ready(function () {
$('div.top').mouseenter(function() {
$('html, body').stop(true, true).delay(1000).animate({
scrollTop: $("div.middle").offset().top
}, 1000);
})
});
body,
html {
width: 100%;
height: 100%;
margin: 0;
display: inline;
}
.top {
background-color: green;
height: 20%;
width: 20%;
display: flex;
margin: 15px auto 55px auto;
padding: 15px;
}
.middle {
background-color: yellow;
height: 100%;
width: 100%;
display: flex;
}
a {
color: white;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
Hover for scroll or Click for Google
</div>
<div class="middle">
<h1>Hello!</h1>
</div>
This is possible, though might not be overly user-friendly (touch-screens don't have 'hovers', after all). To do this, you will need to use JavaScript, and can do something like this:
// Get all 'hover' links
let hoverLinks = document.querySelectorAll('[data-scrollto]');
// Loop through, and add 'mouseenter' events
Array.from(hoverLinks).forEach(link => {
// Add hover state
link.addEventListener('mouseenter', () => {
// Find associated div
let div = document.getElementById(link.dataset.scrollto) || null;
// If div doesn't exist, return
if(!div) return;
// Scroll to div
div.scrollIntoView(true);
});
});
html,
body{
scroll-behavior: smooth;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
padding: 1em 0;
height: 1em;
line-height: 1em;
z-index: 2;
}
section {
height: 100vh;
box-sizing: border-box;
padding: 3em 0;
}
<nav>
Home
Scroll to books
</nav>
<section>
Hello
</section>
<section>
Hello
</section>
<section id="books-wrapper">
BOOKS!
</section>
<section>
Hello
</section>
<section>
Hello
</section>
In short, you just need to add an event listener (in this case, a 'mouseenter' event listener) via JavaScript to the link, which when triggered (e.g. when a user hovers over the link) will search for an associated scroll position and scroll to it. For linking through to the page, this can just be done with a standard link.
In the above example, I used an id to create a unique identifier for the scroll-to location, and then saved that as a string in an attribute in the link. That way, you can re-use this event listener to add scrolls to other links too. For example, you could add an id of contact to another element on the page, and add data-scrollto="contact" to a new <a> tag to scroll this as well.
EDIT:
To make this more relevant:
document.querySelector('.menu-button').addEventListener('mouseenter', () => {
let div = document.getElementById('books-home') || null;
if(!div) return;
div.scrollIntoView(true);
});
html,
body{
scroll-behavior: smooth;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
padding: 1em 0;
height: 1em;
line-height: 1em;
z-index: 2;
}
section {
height: 100vh;
box-sizing: border-box;
padding: 3em 0;
}
<nav>
Home
Scroll to books
</nav>
<section>
Hello
</section>
<section>
Hello
</section>
<section id="books-home">
BOOKS!
</section>
<section>
Hello
</section>
<section>
Hello
</section>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Question: I would like to make my current code responsive so that it works for everyone such as mobile, tablets etc.. That is basically all I want to accomplish. The reason I want to make it responsive is so that it fits all of the different screen sizes for multiple devices. Additionally I wanted to know if there are any improvements that I could make to my code to increase efficiency or professionality.
function logOptions() {
var s = document.getElementsByName('Interests')[0];
var text = s.options[s.selectedIndex].text;
console.log(text);
}
function logEmail() {
console.log(document.getElementById('email').value);
}
function myFunction() {
logOptions();
logEmail();
}
document.getElementById('inputform').addEventListener('submit', function(e) {
// e.preventDefault(); add this to log the email and select menu values to the browser console
logOptions();
logEmail();
});
/* styling for main body of webpage */
body {
background-color: #000639
}
/* styling for h2 */
h2 {
color: #FFFFFF;
font-size: 24px;
font-family: Helvetica;
position: fixed;
left: 350px;
}
/* styling for h4 */
h4 {
color: #FFFFFF;
font-size: 20px;
font-family: Helvetica;
font-weight: lighter;
left: 350px;
position: fixed;
bottom: 445px;
}
/* styling for input field button */
input[type=email] {
font-size: 16px;
border-radius: 7px;
width: 315px;
height: 45px;
font-family: Helvetica;
font-weight: lighter;
position: fixed;
left: 350px;
bottom: 400px;
}
/* styling for sign up now submit button */
button {
background-color: #5c6ac4;
position: fixed;
left: 351px;
bottom: 320px;
width: 540px;
height: 55px;
border-radius: 7px;
font-family: Helvetica;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
/* styling for option menu */
select {
font-size: 16px;
width: 200px;
height: 50px;
font-family: Helvetica;
font-weight: lighter;
margin-left: 340px;
color: #7B7B7B;
position: fixed;
bottom: 400px;
}
/* styling for form */
form {
position: fixed;
left: 350px;
bottom: 420px;
}
/* styling for rectangle */
svg {
position: fixed;
bottom: 440px;
right: 628px;
}
/* styling for email placeholder */
input::placeholder {
color: #7B7B7B;
}
#thanks {
font-family: Helvetica;
font-weight: bold;
position: fixed;
bottom: 470px;
}
#tips {
font-family: Helvetica;
position: fixed;
bottom: 430px;
}
<!DOCTYPE html>
<html>
<head>
<title>Shopify Frontend Developer Intern</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>
<!-- <div class="input form"> -->
<form id="inputform" method="get" action="confirmation.html">
<input id="email" type="email" placeholder="Email Address" required>
<button type="submit" id="validate">Sign up now</button>
<select name="Interests" required>
<option value="" disabled selected>Interested in..</option>
<option value="option1">Marketing</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
</form>
<svg>
<rect width="40" height="3" style="fill:lightgreen" />
</svg>
</body>
</html>
making your code responsive will mean you will need to have some knowledge of css. To do this you could use media queries, for example
#media only screen and (max-width: 320px){
}
The code above means when the screens maximum width is 320px all your css code in the media query will be the active css code for your website.
so you could do something like this to your css code:
body {
background-color: #000639
}
/* styling for h2 */
h2 {
color: #FFFFFF;
font-size:24px;
font-family: Helvetica;
position: fixed;
left: 350px;
}
#media only screen and (max-width: 320px){
/* styling for h2 */
h2 {
color: #FFFFFF;
font-size:24px;
font-family: Helvetica;
position: fixed;
left: 350px;
}
}
So you will have to edit the css code for h2 under the media query to make sure each time the screen size reduces to that size all elements will auto adjust to fit the screen as you will design.
For more information about media queries visit Learn responsive design at https://www.codecademy.com here, you will find a course on responsive design i think that will give some insight.
If you want to fix any type of screen resolution, don't use px, use % instead.
I have learned how to create a website but forgot some of them.
Your question is difficult to answer since there are different points of view.
You could build responsive css and html manually and learn a lot of things. It is the best solution. You need to know media queries for example, and a huge amount of tricks.
You could use a framework that solve most important things, its a lazy solution. My advice is to use bootstrap but could be any other. I choose this because it's easy. Read the documentation and learn deeply how the grid system works. With this you'll be able to solve most common responsive problems.
If you don't want to learn anything, just think your code vertically, one column if possible, avoid fixing widths, etc. It's not impossible.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am relatively new to javascript coding, been doing html\css only, so I wrote this function in JS, that hides and shows a div,but it doesn't seem to work at all, can you tell me what am I doing wrong?
Javascript:
<script type="text/javascript">
function click()
{
if (document.getElementById("div1").style.opacity == "1")
{
document.getElementById("div1").style.height="0px";
document.getElementById("div1").style.width="0%";
document.getElementById("div1").style.opacity="0";
}
else
{
document.getElementById("div1").style.height="400px";
document.getElementById("div1").style.width="60%";
document.getElementById("div1").style.opacity="1";
}
}
</script>
Below is the HTML code I'm working on:
<boutton onclick="click()">TEST CLICK</button>
<div id="div1">Random text in here...</div>
And also the STYLE tag:
<style>
#div1
{
background-color: rgba(0, 0, 0, 0.4);
color: #CBA303;
font-weight: bold;
text-align: center;
border-radius: 20px;
box-shadow: 10px 10px 15px gray;
height: 0px;
width: 0%;
padding: 10px;
font-size: 2em;
font-family: sans-serif;
z-index: 10;
position: absolute;
top: 20%;
left: 20%;
opacity: 0;
transition: height,width,opacity 1s ease;
}
</style>
Thanks for your help!
Rename your onclick function to something else besides click()
example here i've simply renamed it to toggle() and you can see it working.
I'm building a cordova project on iOS and Android.
I have two pages: index.html and home.html. On both of them, I have an absolute positioned div (with loading), which is ​visible by default on both pages. Here it is:
<body>
<div id="loading_page" class="loading_page"></div>
<section> my content </section>
</body>
and the following CSS:
body {
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #00665d;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-touch-action: none;
height: 100%;
width: 100%;
overflow: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.loading_page {
background: #fff;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 25;
}
section {
position: absolute; /* tested with relative, too */
top: 85px;
left: 75px;
right: 15px;
bottom: 0;
}
I am on the index.html screen and when I redirect the user to another page via JavaScript window.location.href = "home.html" the loading screen disappears for parts of the second, makes the backstage content of the index.html page visible and then - the redirect goes to the home.html
Any suggestions how I can get rid of the blinking issue? Happens only on iOS
If you want full control of your pages and behaviour, have them as 'page sections' within one html file: http://demos.jquerymobile.com/1.4.1/pages/
I did this to prevent the blink (flickering in my case). Also you most likely have a problem with your javascript, check your console just in case