I am looking to disable the scrolling on the overlay. The way this overlay is acting is to display a flashing logo before the users can actually display the website. But, I want scrolling disabled. Please take a look at my code to determine the error. I am looking to disable the scrolling on the overlay. The way this overlay is acting is to display a flashing logo before the users can actually display the website. But, I want scrolling disabled. Please take a look at my code to determine the error.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="animate.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:200,300,400,700,900" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
<style>
#overlay {
position: absolute;
display: none;
background: dodgerblue;
width: 100%;
height: 100vh;
overflow: hidden;
padding: 0;
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
background-color: black;
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>//$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
$(document).ready(function() {
$('#overlay').fadeIn('fast').delay(4500).fadeOut('fast');
});</script>
<script>
$(document).ready(function() {
$('#navbar').fadeIn('fast').delay(4500)
});
</script>
<body>
<div class="animated slideOutDown" id="overlay" style="overflow: hidden; text-align: center; animation-delay: 3s; animation-duration: 2.5s;padding-top: 80px; background-color: #181818;"><img class="animated flash" style="height: 350px; animation-delay: 1s; animation-duration: 1.5s;" alt="logo"></img></div>
</body>
</html>
You can hide the scrollbar for the body and prevent scrolling by adding "overflow: hidden;" to the html, body CSS:
html,
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
Then you need to also set overflow back to auto once the overlay fades out, so you could do for example:
$(document).ready(function() {
$('#overlay').fadeIn('fast');
setTimeout(function(){
$('#overlay').fadeOut('fast');
$('html, body').css('overflow', 'auto')
}, 4500);
});
(Note: The way you are doing it, anyone with Javascript disabled will not be able to view your website. So you might want to consider how to make it viewable for those with Javascript off, even though that's a small % of people.)
Related
So I was trying to edit this html-css widget for iwidgets (an ios tweak that adds widgets to older ios versions) and I edited it to perfection, but there is this problem, when I add the widget to my homescreen, it has a wide invisible but touchable area that goes over my apps and prevents me from opening them, the area goes from right to bottom. please help, I only want the widget part to be interactive.
widget:
https://mega.nz/folder/yq5RGLqI#7g8MVx2O2zWvXcmyUSDY6w
I tried some common solutions but they didn't work.
html:
<html id="html" style="width:170px; height:180px">
<div id="mainContainer" class="container" style="width: 170px; height: 180px">
<div id="screenElements"></div>
</div><p style="color:rgb(211,211,211); font-family: helvetica; z-index: 3; position: absolute; font-size 40px; top:115px; left:40px; font-weight:normal; text-align: left; width: 100px">No more events today</p><p style="color:rgb(255,255,255); font-family: helvetica; z-index: 2; position: absolute; font-size 25px; top:180px; left:65px; font-weight:bold; text-align: middle; width: 100px"><small>Calendar</small></p>
<script src="js/prefixfree.min.js"></script>
<script src="js/globals.js"></script>
<script src="js/defaults.js"></script>
<script src="js/legacyinfoSB.js"></script>
<script src="js/music.js"></script>
<script src="js/xeninfo.js"></script>
<script src="LPP.js"></script>
<script src="js/setup.js"></script>
<script src="js/elements.js"></script>
<script src="js/mainLoop.js"></script>
<script src="js/main.js"></script>
<script src="js/SBChanges.js"></script>
<script src="js/loaded.js"></script>
<script src="js/coloricon.js"></script>
<script src="js/fix.js"></script>
<script type="text/javascript">
if(scale){ /* Options.plist */
document.body.style.webkitTransform = 'scale(' + scale + ')';
}
</script>
I'm super new to HTML and CSS and I'm trying to make a small website for an assignment. I haven't gotten very far and I'm having trouble with text wrapping.
The first line of the text looks great, and I have used 20px padding to add a buffer between the edges of the window and the text it's self. The problem comes when the window is smaller than the length of the text. When the text wraps to the next line, it doesn't obey the margins and I'm not quite sure how to fix this or how to word a search query to try and fix it.
Here is a screenshot of the issue:
Text wrapping issue.
Here is the CSS:
body {
color: white;
background-color: #131516}
.headerblock {
padding: 10px;
background-color: black;
margin-top: 0px;
margin-left: 0px;
color: #5b5b5b;
font-size: 30px;
transition: 0.2s;
box-sizing: border-box;
text-align: center;
width: 100%;
}
.headerblock:hover{
color: white;
transition: 0.2s;
}
help {
padding: 20px;
word-break: normal;
width: fit-content;
}
And here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>-----------------</title>
</head>
<div class="headerblock">
DEEZ NUTZ
</div>
<body>
<help>
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</help>
</body>
</html>
Thanks in advance!
You just need to change your CSS a little bit, Because when you are text going to the next line for screen resizing, it can not get the property of padding=20px; So, you just need to add display flex.
help {
display:flex;
padding-left: 20px;
word-break: normal;
}
the reason you'd choose to use flexbox is that you want to lay a collection of items out in one direction or another. As you layout your items you want to control the dimensions of the items in that one dimension or control the spacing between items
The best way to keep text neat and wrapped inside a element is to use the <p> (paragraph) element.
This element automatically wraps your text, as well as adds a space above and below it. So you can simply give it some extra padding to make it even neater, then you can easily keep any paragraph text correctly wrapped.
.help {
padding: 20px;
}
<p class='help'>
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</p>
Just change the help tag to anything else like p(paragraph) and if you want to use the css for the p tag, just give it a class like p class="h" in html
body {
color: white;
background-color: #131516}
.headerblock {
padding: 10px;
background-color: black;
margin-top: 0px;
margin-left: 0px;
color: #5b5b5b;
font-size: 30px;
transition: 0.2s;
box-sizing: border-box;
text-align: center;
width: 100%;
}
.headerblock:hover{
color: white;
transition: 0.2s;
}
.h {
padding: 20px;
word-break: normal;
width: fit-content;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>-----------------</title>
</head>
<div class="headerblock">
DEEZ NUTZ
</div>
<body>
<p class="h">
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</p>
</body>
</html>
I want to create a CSS class that, when applied to a div or a p element will place that text in a colored box with an icon based on a unicode character vertically centered to the left of the text. This is to use to create "To Do", "Note", "Warning" type call outs.
For example I have this so far:
.todo {
background-color: lightyellow;
float: right;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
.todo:before {
content: "\2714";
font-size: 250%;
}
The usage of this class:
<div class="todo">
This is something that really needs to be done.
Even if you don't want to still do it.
</div>
Gives me a result like:
What I would like to do is make the check-mark bigger (my font-size term seems to be ignored) and place it vertically centered in the box and to the left of all text. Can this be done without requiring styling or
other elements in the div itself?
Well, you started right with :before but use position to define its position and alignment.
.tick{
padding-left: 15px;
position: relative;
}
.tick::before {
content: '\2713';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
<p class="tick">To do</p>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
ul {
background-color: lightyellow;
float: left;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
ul li {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: 500;
}
ul .icon {
float: left;
font-size: 22px;
padding: 0 15px 0 0;
}
</style>
</head>
<body>
<ul>
<li>
<i class="fa fa-check icon"></i>
<p>This is something that really needs to be done. Even if you don't want to still do it. This is something that really needs to be done. Even if you don't want to still do it.</p>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm getting a border-radius bug on the latest version of Chrome (working properly on Firefox) that lasts the time of an animation that uses opacity on a div from an HTML page [b. html] inserted in another HTML page [a. html] with object.
I tried other solutions (jQuery, Web Components...) without getting what I wanted and I honestly preferred to stay with object for this particular project even though it is an aging technology.
Screenshot
a.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<object id="b" data="b.html"></object>
</body>
</html>
b.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hi, how are you?</div>
</body>
</html>
style.css
* { margin: 0; padding: 0; }
body { background: blue; }
#b {
width: 400px;
height: 400px;
border: 10px solid black;
border-radius: 40px;
overflow: hidden;
}
div {
height: 400px;
background: white;
text-align: center;
animation: ani 2s forwards;
}
#keyframes ani {
0% { opacity: 0; }
100% { opacity: 1; }
}
Thanks for your help!
Just as example, here is the jQuery version I found [a.html]
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#b").load("b.html");
});
</script>
</head>
<body>
<div id="b"></div>
</body>
</html>
EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/