I have an Asp.net page
my code is as
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="fisrt_page.aspx.cs" Inherits="my_project.fisrt_page" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/login_style.css" />
<title></title>
</head>
<body style="background: url(../images/demo/backgrounds/background_login.jpg);">
<form id="form1" runat="server" style="height: 100%; width: 100%;">
<......................my elements.....................>
</form>
</body>
</html>
my design looks like image below
https://plus.google.com/u/0/104984108592274133808/posts/4GdoUjboqi2?pid=6094624686097586866&oid=104984108592274133808
but I want that my design fill all the page and hide the spaces as images from my design
Sorry for my bad English
but please help me
my css was as
html, head, body, form {
height: 100%;
width: 100%;
}
.inputbox {
background: white;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 0 0 5px #DDD inset;
color: #666;
outline: none;
height: 25px;
width: 275px;
font-size: 20px;
}
From what I can gather in your post, you are trying to do a popup, and overlay your background with either a solid or transparent color. To achieve this you can do the following:
Solid Color:
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
}
Transparent Color:
.overlay{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /*dim the background*/
}
To activate this, you can change use jQuery to show the overlay:
<div class="overlay" id="overlay"></div>
<script>
$('#overlay').show();
</script>
This of course would be best if you did it in a button click or some other action.
I hope this leads you in the right direction.
Related
I trying to learn JavaScript I make my Quiz game.
I get problem with modal window,because when I write nickname after this I push Submit I wanna saving nickname in localStorage and close modal window.
Problem is that modal window appear again and i can't passing to main page with Quiz.
Maybe someone can explain me if is possible do it this in different way in JavaScript, at the first I was thinking to make to documents HTML one index.html and nickname.html , but I get also problem because I don't know how to change url(); in JavaScript after Submit.
I appreciate every opinion. Thank You.
const enter = document.getElementById('enter');
const modal = document.getElementById('screen');
enter.addEventListener('click',function(){
let forms = document.forms["form-welcome"]["nickname"].value
if(forms == ""){
alert("Write you nickname.");
return false;
}
else{
modal.style.display = "none";
save();
}
})
function save(){
localStorage.setItem(
document.forms["form-welcome"]["nickname"].value
);
}
*{
margin: 0px;
padding: 0px;
}
body{
background-color: red;
}
/*##### Window Modal #####*/
.wrapper{
font-size: 24px;
font-family:'Bree Serif', serif;
text-align: center;
}
.modal{
display: block;
position: fixed;
z-index: 1;
left: 0;
top:0;
width:100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgb(0,0,0,0.4);
}
.offModal{
display: none;
}
.animate{
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
.model{
display: inline-block;
margin-top: 25px;
width: 30%;
height: auto;
background-color: #4edb0cfb;
position: relative;
border-radius: 25px;
border:1px solid rgba(0, 0, 0, 0.267);
box-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.4);
}
.welcome{
letter-spacing: 1px;
position: relative;
text-align: center;
line-height: 50px;
padding-top: 15px;
margin-top: 15px;
}
.submit{
border-radius: 5px;
font-size: 30px;
margin: 10px;
padding: 10px;
}
.submit:hover{
background-color: rgb(153, 150, 150);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final-Quiz</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!--############### FIST SCREEN ################-->
<section>
<div id="screen" class="modal">
<form class="welcome model" name="form-welcome">
<h1>Final-Quiz</h1>
<label for="nickname">Nickname:</label>
<input type="text" name="nickname" required>
<input id="enter" class="submit" type="submit" value="Enter">
<p>Let's check your knowledge about HTML,CSS and JavaScript.</p>
</form>
</div>
</div>
</section>
</div>
<script src="localStorage.js"></script>
</body>
</html>
Thanks for everybody I find solution for my problem.
Inside tag i write action and url(); of second HTML page.
<form action="secondHtml.html">
After submit i go to main page.
I just finished my website, just testing stuff in css, when i noticed that when i refresh my page for like 1 second theres a weird rectangle on the screen.
I dont have any idea what that is...
Thats how it looks like:
body, html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-img {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1dheaD1dxyVt36DttKPFYNm9GHuGVfMYDjSOicpB2gVIk_Vq1_w");
height: 100%;
filter: blur(4px);
-webkit-filter: blur(4px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1.1);
}
.date-box {
background-color: rgba(0,0,0, 0.25);
color: white;
font-weight: bold;
border: 3px solid whitesmoke;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>time tho</title>
<link rel="stylesheet" type="text/css" href="css/indexstyles.css">
<script type="text/javascript" src="jscript/datefw.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
<div class="bg-img"></div>
<div class="date-box">
<h1 id="phms"></h1>
<p id="pdate"></p>
</div>
<a target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/222015592738062336"><p id="stax">by stax</p></a>
<script>
drawOverlay();
</script>
</body>
</html>
Thats when i reload the page(just for a split second):
I solved it myself!
I just used the function window.onload
So i rendered the box after the page was fully loaded. Simple as that :D
.date-box-hide {
display: none;
}
.date-box-show {
display: block;
background-color: rgba(0,0,0, .4);
color: white;
font-weight: bold;
border: 3px solid whitesmoke;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
<body scroll="no" style="overflow: hidden">
<div class="bg-img"></div>
<div id="hide" class="date-box-hide">
<h1 id="phms"></h1>
<p id="pdate"></p>
<script>
window.onload=function()
{
document.getElementById("hide").className="date-box-show";
};
drawOverlay();
</script>
</div>
<a target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/222015592738062336"><p id="stax">by stax</p></a>
</body>
It looks like that's just the .date-box element without any content. You may try adding a min-width and min-height value to your .date-box CSS rule to make the box the size you want before the date/time is fully loaded, like so:
.date-box {
background-color: rgba(0,0,0, 0.25);
color: white;
font-weight: bold;
border: 3px solid whitesmoke;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
min-width: 300px;
min-height: 200px;
}
It's a really cool looking start, you have there. Keep it up!
I guess the box is the div .date-box. Perhaps you put the content of #pdate and #phms by your JavasScript function drawOverlay(). Since then, until the function runs, those divs are empty.
To solve the problem, hide the .date-box default and show it after content has filled like below for example.
CSS
.date-box {
display: none;
}
and JS
drawOverlay()
document.querySelector('.date-box').styles.display = "block"
I am making a page with two main parts, div a on the left half of the screen which will have text, and div b on the right half which will have a really tall image.
Originally, I imagined having the left side fixed so that when the user scrolls down to see the entire image, the text on the left stays visible.
However, I realized sometimes the text may overflow beyond the screen, and the fixed div would not scroll down to show it.
Below is the image of what I'm talking about:
My question is: can I make the left div scroll down until the bottom of the div is revealed, and then stays fixed as the user continues to scroll?
If that didn't make sense, an example is the right bar of the Facebook main page at
https://www.facebook.com
Here is the code I have so far: https://pastebin.com/ZPVEbjX9
html,
body {
padding: 0;
margin: 0;
background-color: #FFF;
color: #000;
display: flex;
font-family: Montserrat;
}
div#a {
position: fixed;
width: 40%;
height: 100%;
}
div#box {
position: absolute;
width: 70%;
height: 100%;
margin: auto 0;
background-color: #FFFAAA;
}
div#b {
position: relative;
width: 60%;
height: 100%;
margin-left: 40%;
background-color: #000;
}
div#backToTop {
position: fixed;
width: auto;
height: 30px;
right: 20px;
bottom: 20px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 5px;
}
a#backToTop {
text-decoration: none;
font-size: 15px;
color: #FFF;
padding: 10px;
vertical-align: middle;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="stylesBig.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<title>G</title>
</head>
<body>
<a name="top"></a>
<div id="a">
<div id="box">
<p>a</p>
</div>
</div>
<div id="b">
<img src="image.png" style="width: 100%;" />
<div id="backToTop"><a id="backToTop" href="#top">back to top</a></div>
</div>
</body>
</html>
What am I doing wrong and how can I fix it?
Currently, I am working on a project to generate a dynamic card page. This page is based on the input of a specific json feed (e.g. a user role).
profile.json
{
"Messages": "card1",
"Activities": "card2",
"Agenda": "card3",
"Users": "card4",
"Charts": "card5"
}
Next, I use jQuery and Kendo UI to create cards. First, I need to extract the information from the json feed. As you may notice, every card will be placed inside a div. And every div will be appended to the cards div:
Below is code of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../style/font-awesome.css">
<link rel="stylesheet" href="/style/cards.css" />
<script src="../lib/jquery.min.js"></script>
<script src="../lib/custom/effects.min.js"></script>
</head>
<body>
<div id="cards"></div>
<script>
$.getJSON("profile.json", function (data) {
$.each(data, function (key, val) {
var card = "<div id='" + val + "' height='180' width='175'></div>";
$("#cards").append(card);
$('#' + val).load(val + '/index.html');
});
});
</script>
</body>
</html>
Every card does have some simple styling:
One of the card (card7/index.html)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
overflow: hidden;
}
a {
color: #428bca;
text-decoration: none;
}
#card7 {
width: 150px;
height: 150px;
position: relative;
}
.front {
padding: 10px;
text-align: center;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.back {
font-size: smaller;
padding: 10px;
text-align: left;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.front:hover, .back:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
img {
border-radius: 5px 5px 0 0;
}
.badge:after {
content: "1";
position: absolute;
background: rgba(255, 0, 0, 0.85);
height: 2rem;
top: 1rem;
right: 2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}
.seeBack {
margin-top: -30px;
margin-right: -10px;
float: right;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent;
}
.seeBack:hover {
border-color: transparent transparent #428bca transparent;
transition: 0.5s;
}
.seeFront {
margin-top: 10px;
margin-left: -10px;
float: left;
border-style: solid;
border-width: 40px 0 0 40px;
border-color: transparent;
}
.seeFront:hover {
border-color: transparent transparent transparent #428bca;
}
</style>
</head>
<body>
<div id="card7">
<div class="front">
<i class="fa fa-undo fa-5x"></i>
<h4><b>Tijdlijn</b></h4>
<div class="seeBack"></div>
</div>
<div class="back">
<p>Situatie vorige week</p>
<p>Situatie vorige maand</p>
<p>Situatie vorig jaar</p>
<div class="seeFront"></div>
</div>
</div>
<script>
$(document).ready(function () {
kendo.fx($("#card7")).flip("horizontal", $(".back"), $(".front")).play();
var card = kendo.fx($("#card7")),
flip = card.flip("horizontal", $(".front"), $(".back"));
flip.duration(100);
$(".seeBack").click(function () {
flip.stop().play();
});
$(".seeFront").click(function () {
flip.stop().reverse();
});
});
</script>
</body>
</html>
As you may expect, the program itself does not work properly. All cards will be displayed on top of each other in index.html, although they are placed in various div. I don't know what the problem is and I cannot fix this. Hopefully one can help me.
All cards are placed on top of each other.
Use static or relative position for .front and .back divs
Read that article about positioning for more info http://www.w3schools.com/cssref/pr_class_position.asp
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.