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>
Related
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 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.)
I have a figure tag, I want to make it responsive, and I want to center the the figure tag when the browser resizes, i have the next code snippet that describes my code, please give me a little help here. thanks
.mover2{
position:relative;
left:-33%;
top:-8%;
width: 100%;
height: 77%;
display: block;
}
.arreglo2{
width: 100%;
height: 100%;
display:block;
}
#mas2{
background: rgba(43,86,162,1.00);
}
figcaption.efectoimg2 p{
text-align: center;
font-family: Arial;
color:rgba(253,253,253,1.00);
font-weight: bold;
position:relative;
bottom: 15px;
font-size:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/1.0/css/imagehover.min.css">
<figure class="imghvr-push-up mover2">
<img class="arreglo2" src="https://i.imgur.com/D4fiyHr.png">
<figcaption class="efectoimg2" id="mas2">
<p>Atención Al Usuario</p>
</figcaption>
</figure>
To achieve what you asked for, you need to use media queries. You can learn more about them here
You have to add this to your code, which will change the style of the <figure> when you view it on a different screen size
#media only screen and (max-width : 1100px){ /* You can choose whichever width you want */
.mover2{
margin:auto;
left:inherit;
top:inherit;
float:none;
}
}
Here's a fiddle: https://jsfiddle.net/30ptcjyx/
I would like to style a language select button for my website. This is the design of what it should look like:
I am using Bootstrap 3.
How can I achieve that? Any help is appreciated!
EDIT
Solved it by creating a custom dropdown using css+jquery, see the result below.
There were many useless comments and downvotes. Useless comments should have downvote option as well.
At least giving some advice would have been helpful.
But anyway, got my problem sorted.
<!DOCTYPE html>
<html>
<head>
<title>Custom dropdown</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Raleway|Rancho" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Custom dropdown */
.custom-sel a {
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px;
text-align: left;
font-family: Raleway;
color: #546e7a;
font-size: 15px;
font-weight: 700;
line-height: 24px;
display: block;
}
.custom-sel a:hover {
text-decoration: none;
background-color: #EDF0F2;
color: #ffffff;
}
.custom-sel a.selected {
background-color: transparent;
}
.custom-sel a.selected:hover {
background-color: transparent;
color: #546e7a;
}
.hidden {
display: none;
}
.lightblue {
color:#03a9f4;
margin-left: -4px;
}
.show-sel {
background-color: #ffffff;
box-shadow: -5px 0px 65px 0px rgba(0, 0, 0, 0.18);
}
.custom-sel {
margin: 30px;
display: inline-block;
}
/* Custom dropdown */
</style>
<script type="text/javascript">
$(document).ready(function () {
// Show dropdown
$('.selected').click(function () {
$('.custom-sel').addClass('show-sel');
$('.custom-sel a').removeClass('hidden');
});
// Hide dropdown when not focused
$('.custom-sel').focusout(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
}).blur(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
});
});
</script>
</head>
<body>
<div class="container">
<!-- Custom dropdown -->
<div class="custom-sel">
<a class="selected" href="#">ENG <i class="fa fa-caret-down lightblue" aria-hidden="true"></i></a>
<a class="hidden" href="#">EST</a>
<a class="hidden" href="#">RUS</a>
<a class="hidden" href="#">FIN</a>
</div>
</div>
</body>
</html>
Here's the result I'm currently happy with:
https://jsfiddle.net/manb0hzh/