We Keep Coding

Changing/adding CSS classes based on scroll position

I'm trying to get a site to show and potentially sell my artwork, and need some help with a page header and menu (both in the same div), which at the top of the page are angled by 45° and are above the other elements (at z-index 2). This is fine at a scroll position of 0, but gets in the way when one scrolls down to the page's other text elements, and non-background images. I want to have these elements to be moved to 0 rotation, and fixed at the top of the page at any scroll position >300px, or even duplicate them and have one show and the other hide based upon this position. I can do the CSS part myself, but scripting is a bit beyond me.
I already have tried this (https://css-tricks.com/styling-based-on-scroll-position/ ) to change the CSS, but haven't had any luck getting it to do anything. The menu itself is shown/hidden through another piece of javascript that does work. Both the scripts I have tried, and the CSS are linked externally.
This is the current code I have:
html:
<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3>Menu</h3>
</div>
<ul class="menu" id="content">
<li>Home</li>
<li>Design Services</li>
<li>Artwork</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
The CSS is:
.base {
position: fixed;
top: 11rem;
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
}
.base a {
text-decoration: none;
color: #FFFFFF;
}

Use jQuery for the detection on 300px and adding a class. Just to make it funky for you I added a transition:all 1s;. Since you know your CSS, enjoy with a simply added class. Cheers!
$(document).scroll(function() {
if($(document).scrollTop() >= 300 ) {
$('.base h2').addClass('rotateback');
$('.base h3').addClass('rotateback');
} else {
$('.base h2').removeClass('rotateback');
$('.base h3').removeClass('rotateback');
}
});
body{
height:2000px;
}
.base {
position: fixed;
top: 11rem ; /* 11rem */
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
transition:all 1s;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
transition:all 1s;
}
.base a {
text-decoration: none;
color: #FFFFFF;
}
.base h2.rotateback {
transform: rotate(0deg);
}
.base h3.rotateback {
transform: rotate(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3>Menu</h3>
</div>
<ul class="menu" id="content">
<li>Home</li>
<li>Design Services</li>
<li>Artwork</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

multiple divs pointing to same tag

I am trying to create a personal website for me and I am a beginner in html and css. In my work section, i have created multiple buttons which open a small window and give the description of the project. The issue i am facing is all different divs are pointing to last div and the content of the last div is getting copied in all other divs. Thank you so much in advance for helping me out.
Below is the content of my last div:
Below is my image of second div:
Below is the overall code:
$(document).ready(function() {
$(".call_modal").click(function() {
$(".modal").fadeIn();
$(".modal_main").show();
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").fadeOut();
$(".modal_main").fadeOut();
});
});
work body {
margin: 0;
background: #e5eaee;
}
h3 {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #e1c184;
text-align: center;
padding: 50px 0px 0px;
clear: both;
}
.modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
display: none;
}
.modal_close {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
margin-left: -8px;
}
.close {
cursor: pointer;
}
.gl1_content .modal_main {
width: 50%;
height: 500px;
background: #B7BBBE;
z-index: 4;
position: fixed;
top: 16%;
border-radius: 4px;
left: 25%;
overflow: auto;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .0s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-webkit-backface-visibility: visible!important;
-webkit-animation-name: fadeInRight;
text-align: center;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
.gl1_content .content {
padding: 50px 0px 30px;
text-align: justify;
margin-left: 20px;
margin-right: 10px;
}
button {
display: block;
width: 25%;
height: 150px;
padding: 40px;
border-radius: 5px;
background: #3399cc;
border: none;
font-size: 20px;
color: #fff;
margin-top: 40px;
margin-left: 80px;
float: left;
text-align: center;
position: center;
}
.ProjTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 50%;
}
.ProjTable td,
#ProjTable th {
border: 1px solid #ddd;
padding: 8px;
}
.ProjTable tr:nth-child(even) {
background-color: #f2f2f2;
}
.ProjTable tr:hover {
background-color: #ddd;
}
.ProjTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/B55FB9A2-E45C-3242-96D3-CF26E54EC901/main.js" charset="UTF-8"></script>
<h3 id="work">Work</h3>
<div class="gl_content">
<button class="call_modal" style="cursor:pointer;">SAS Consult and Support</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p></p>
</div>
</div>
</div>
</div>
<div class="content">
<button class="call_modal" style="cursor:pointer;">Global Reporting Infrastructure Project (GRIP)</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p><strong>Global Reporting Infrastructure Project (GRIP)</strong> is a key global initiative and is aimed at delivering a set of standard reports with standard metrics, definitions and templates across RBWM products Origination, Portfolio Management,
Profitability and RWAs by providing a global platform for Risk data aggregation and reporting. RBWM Risk has historically lacked Group level risk aggregation and reporting capability and relied upon end user computing to produce executive reporting
to drive risk management and decision making. Numerous inconsistencies relating to Key Performance Indicators (KPI) captured, business definitions used, calculations performed and report formats utilized are inherent with this method of reporting.
RBWM Risk management desires a system that will provide more metrics and KPIs to drive better decision making and analysis.</p>
</div>
</div>
</div>
</div>

A generic approach can be:
a) First add a common class(like- 'modal_container') to all the modal containers.
<div class="gl_content modal_container">...</div>
...
<div class="content modal_container">...</div>
...
b) On click event get the immediate modal container element on top of the element that got clicked and show/hide the modal inside it(the modal container).
I have redesigned the code below, please check with it:
<script>
$(document).ready(function(){
$(".call_modal").click(function(){
var modal_container = $(this).closest('.modal_container');
$(".modal", modal_container).fadeIn();
$(".modal_main", modal_container).show();
});
$(".close").click(function(){
var modal_container = $(this).closest('.modal_container');
$(".modal", modal_container).fadeOut();
$(".modal_main", modal_container).fadeOut();
});
});
</script>

You need to change this line of code :
$(".modal").fadeIn();
to be :
$(this).next($(".modal")).fadeIn();
In this case: When you click at any button, the div with class modal after the clicked button only will be work.
$(document).ready(function() {
$(".call_modal").click(function() {
$(this).next($(".modal")).fadeIn();
$(".modal_main").show();
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").fadeOut();
$(".modal_main").fadeOut();
});
});
work body {
margin: 0;
background: #e5eaee;
}
h3 {
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
color: #e1c184;
text-align: center;
padding: 50px 0px 0px;
clear: both;
}
.modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
display: none;
}
.modal_close {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
margin-left: -8px;
}
.close {
cursor: pointer;
}
.gl1_content .modal_main {
width: 50%;
height: 500px;
background: #B7BBBE;
z-index: 4;
position: fixed;
top: 16%;
border-radius: 4px;
left: 25%;
overflow: auto;
-webkit-animation-duration: .5s;
-webkit-animation-delay: .0s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
-webkit-backface-visibility: visible!important;
-webkit-animation-name: fadeInRight;
text-align: center;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
.gl1_content .content {
padding: 50px 0px 30px;
text-align: justify;
margin-left: 20px;
margin-right: 10px;
}
button {
display: block;
width: 25%;
height: 150px;
padding: 40px;
border-radius: 5px;
background: #3399cc;
border: none;
font-size: 20px;
color: #fff;
margin-top: 40px;
margin-left: 80px;
float: left;
text-align: center;
position: center;
}
.ProjTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 50%;
}
.ProjTable td,
#ProjTable th {
border: 1px solid #ddd;
padding: 8px;
}
.ProjTable tr:nth-child(even) {
background-color: #f2f2f2;
}
.ProjTable tr:hover {
background-color: #ddd;
}
.ProjTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="work">Work</h3>
<div class="gl_content">
<button class="call_modal" style="cursor:pointer;">SAS Consult and Support</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p></p>
</div>
</div>
</div>
</div>
<div class="content">
<button class="call_modal" style="cursor:pointer;">Global Reporting Infrastructure Project (GRIP)</button>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQxuLL7OoxpB8Eju7xawRbmtMl855M2e09m1-_30NDM8i_m2vr" class="close" style="margin-top:13px;left:96%;position:fixed;">
<div class="content">
<p><strong>Global Reporting Infrastructure Project (GRIP)</strong> is a key global initiative and is aimed at delivering a set of standard reports with standard metrics, definitions and templates across RBWM products Origination, Portfolio Management,
Profitability and RWAs by providing a global platform for Risk data aggregation and reporting. RBWM Risk has historically lacked Group level risk aggregation and reporting capability and relied upon end user computing to produce executive reporting
to drive risk management and decision making. Numerous inconsistencies relating to Key Performance Indicators (KPI) captured, business definitions used, calculations performed and report formats utilized are inherent with this method of reporting.
RBWM Risk management desires a system that will provide more metrics and KPIs to drive better decision making and analysis.</p>
</div>
</div>
</div>
</div>

Leaflet event listener for expanding infobox

I have a simple leaflet map with a GeoJSON point layer.
I want an infobox instead of the regular pop-up, so, in HTML, I have created the following:
<div id="panoutitlu" class="info-container" style="z-index: 601">
<div class="info-title">
<h1>Selectați ceva</h1>
</div>
<div class="info-body" id="corp">
<div class="info-content-container">
<div class="info-content" id="panoutext"></div>
</div>
</div>
</div>
When clicking on one of the points in the layer, the div named info-title gets populated with an attribute from the GeoJSON, as follows:
function onEachFeature(feature, layer) {
layer.on({
click: function populate() {
document.getElementById('panoutitlu').innerHTML = feature.properties.adresa;
});
The thing I can't get to work is how to expand the div when the info-title is clicked, similar to this map. I want to recreate the exact behaviour, including the smooth transition. That's why I took the CSS from it and changed a few sizes and fonts:
.info-title {
height: 80px;
font-family: 'Fira Sans Condensed';
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.info-content {
padding: 0 8% 24px 8%;
margin: 0 auto;
background: #385c54;
overflow-y: scroll;
font-family: 'Fira Sans Condensed';
font-size: 1rem;
line-height: 1.25em;
font-weight: 300;
}
.info-container {
position: absolute;
overflow-y: hidden;
bottom: 0;
right: 250px;
z-index: 1000;
background: #385c54;
cursor: pointer;
width: 300px;
height: 60vh;
color: #FFF;
font-family: 'Fira Sans Condensed';
font-size: 18px;
transition: all 0.4s ease-in-out;
transform: translateY(calc(100% - 80px));
}
.info-container.info-active {
transform: translateY(0);
}
.info-body {
margin-top: 80px;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
height: 80%;
}
In JavaScript, I tried adding an event listener:
document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );
but it didn't work.
Hopefully, somebody can help.

The solution was indeed an Event Listener:
document.getElementById('panoutitlu').addEventListener("click", function slide() {this.classList.toggle('info-active');}

javascript not working on my webpage

I doing a tshirt designing website for my college project.I have added preview option where when the user types it get displayed on the tshirt present in the iframe..I have also added a proceed button, when the user clicks on it,I want the text to get stored in database but for some reason I cant get it to work.I am using ajax and php for the database part.But the javascript part with ajax is not working.Even alert function is not working for onclick funtction..
Any help is appreciated..
$(document).ready(function)() {
$("#btn").click( function() {
var tshirt-text =$('#tshirt-text').val();
var size =$('#size').val();
alert("tshirt-text");
$.ajax ({
type :'POST',
data :{tshirt-text:tshirt-text,size:size},
url :"storeinfo.inc.php",
success :function(result)
})
});
});
var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );
$text.on( 'keyup', function ( e ) {
$demoText.text( $text.val() );
} );
body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif;
}
header{
padding: 8px;
height:155px;
color: white;
background-color:#6495ED;
clear: left;
width:100%;
}
footer
{ padding: 4px;
color: white;
background-color:#6495ED;
width:100%;
text-align:center;
font-size:20px;
font-family:Arial;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:100%;
}
li {
float: left;
}
li a,.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li a.active {
background-color: royalblue;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: royalblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}
iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}
.designcontainer {
display: inline-block;
margin:0 0 0 10px;
}
.colorbutton {
background-color: #4CAF50; /* Green */
border: none;
color: black;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius: 14px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.colorbutton:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */
.buttony {background-color: yellow; } /* Yellow */
#keyframes click-wave {
0% {
height: 40px;
width: 40px;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 5.33333px;
right: 0;
bottom:0;
left: 0;
height: 25px;
width: 25px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
line-height: 50px;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: royalblue;
}
.option-input:checked::before {
height: 15px;
width: 15px;
position: absolute;
content: '\2714';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 28px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: royalblue;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
.labelname
{
font-size: 20px;
}
span {
position: relative;
display: inline-block;
margin: 30px 10px;
}
.gate {
display: inline-block;
width: 500px;
height: 100px;
padding: 10px 0 10px 15px;
font-family: "Open Sans", sans;
font-weight: 400;
color: royalblue;
background: #c6c6c6;
border: 0;
border-radius: 10px;
outline: 0;
text-indent: 65px;
transition: all .3s ease-in-out;
}
.gate::-webkit-input-placeholder {
color: #c6c6c6;
text-indent: 0;
font-weight: 300;
font-size:18px;
}
.gate + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: royalblue;
transition: all .4s ease-in-out;
border-radius:5px;
transform-origin: left bottom;
z-index: 99;
color:white;
size:18px;
}
.gate + label:before, .gate + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 10px;
background: royalblue;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
font-size:18px;
}
.gate + label:before {
background: rgba(3, 36, 41, 0.2);
z-index: -2;
right: 20%;
font-size:18px;
}
span:nth-child(2) .gate {
text-indent: 85px;
}
span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
text-indent: 0;
}
.gate:focus,
.gate:active {
color: ;
text-indent: 0;
background:#c6c6c6;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
transform: rotate(-66deg);
border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
transform: rotate(10deg);
}
.demo-tshirt {
position: relative;
width: 200px;
height: 100px;
margin: 0 0 0 890px;
z-index:999;
}
.demo-tshirt-text {
position: absolute;
top: 30%;
left: 45%;
width: 60%;
transform: translateX( -45%);
font-size:25px;
color: black;
font-family: Arial, sans-serif;
}
.spacereducer101{
margin-top:-80px;
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery-1.5.min.js"></script>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
at your doorstep"</h2>
</header>
<ul>
<li>Home</li>
<li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
<li class="dropdown">
Buy From Us
<div class="dropdown-content">
Quotes printed T-shirts
Graphic printed T-shirts
Memes printed T-shirts
</div>
</li>
<li>Help</li>
<li>Contact Us</li>
<li onclick="document.getElementById('id02').style.display='block'"style="float:right">Sign Up</li>
<li onclick="document.getElementById('id01').style.display='block'" style="float:right">Login</li>
</ul>
<div class="designcontainer">
<h1>Select Colour</h1>
<button class="colorbutton buttonw">White</button>
<button class="colorbutton buttonr">Red</button>
<button class="colorbutton buttonb">Blue</button>
<button class="colorbutton buttony">Yellow</button>
<h1>Select Size</h1>
<div>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="small" checked />
Small(S)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="medium" />
Medium(M)
</label>
<label class="labelname">
<input type="radio" class="option-input radio" id="size" name="size" value="large"/>
Large(L)
</label>
</div>
<div class=spacereducer101> </div>
<div class="demo-tshirt">
<div class="demo-tshirt-text"></div>
</div>
<h1>Enter the Text you want on your T-shirt</h1>
<span>
<input type="text" name="tshirt-text" class="tshirt-text gate" id="tshirt-text" placeholder="Max 10 letters.." />
<label for="tshirt-text">Enter</label>
</span>
<br>
<input type="button" id="btn" name="Proceed" value="Proceed" class="colorbutton" style="margin-top:20px; margin-left:200px;">
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
<footer >
Copyright © 2017 www.DAJ.com
</footer>
</body>
</html>
PHP code:
<?php
$connection =mysqli_connect('localhost','root','','textstorage');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if($_POST['tshirt-text']){
$tshirt-text =$_POST['tshirt-text'];
$size =$_POST['size'];
$q = "insert into information values('','tshirt-text','size')";
$query = mysqli_query($connection,$q);
if ($query) {
echo"data inserted";
}
}
?>

If you check the console, you'll see that the problem is the first line inside of the javascript click function...
var tshirt-text = $('#tshirt-text').val();
... because '-' is not a valid character for javascript variable names. Just change it by tshirttext (in all your code), and you will see the alert and should be able to go on.
I hope it helps

You've got some errors with you JavaScript. Try running your JavaScript through a validator (for example, http://beautifytools.com/javascript-validator.php) to see where your errors are. In addition to the one A. Iglesias found, you've got an extra clothes parenthesis on line 1, the same tshirt-text error from line 3 is repeated on line 9, and your syntax for an event handler for success on line 13 isn't right, but I can't tell what you're trying to do.
You've also got a conceptual problem. Lines 17 through 22 should be inside your $(document).ready handler. The ready event runs after the initial HTML is loaded into the browser and ready to go, so any reference to HTML elements outside of that event handler may be referring to them before they're ready.
I wanted to make this a comment to your question, but it's too long, so hopefully it's okay an answer. Perhaps once you've fixed some of these JavaScript issues, post an update to your question in the form of an edit and we can then see what else is going on if it's not working.
edit: I reformatted your JavaScript and tried to resolve any syntax errors. If you open up your browser developer tools and run this JS Fiddle (with comments and without comments), you'll see there are no syntax errors in the console. That doesn't mean it works, just that it's syntactically valid. In fact, this shouldn't work, because the AJAX success handler I wrote simply logs the response.
$(document).ready ( // When function parameters and code blocks are big, I like to
// put the opening ( or { at the end of line and put the the
// closing } or ) in the same column way at the end. I find it
// is easier to keep track of openings and closings.
function() { // no extra close parenthesis right after "function"
$("#btn").click(
function()
{
var tshirtText = $('#tshirt-text').val(); // Variable names can only be
// letters, numbers, dollar symbols,
// and underscores. They cannot start
// with numbers.
var size = $('#size').val();
alert("tshirt-text");
$.ajax(
{ // For clarity, I'll separate out the opening ( and opening {
// and the closing } and closing ) when they are one after the other.
type: 'POST'
// I like to put my commas on the next line rather than the previous line.
// I think it makes it more clear that you're moving on to the next thing.
, data: { "tshirt-text": tshirtText, size: size } // You can specify names in
// this JSON-style syntax that
// aren't valid JavaScript
// identifiers, but you have
// to put them in quotes.
, url: "storeinfo.inc.php"
, success: function(data, textStatus, jqXhr)
{
console.log(data);
}
}
);
}
);
var $text = $('.tshirt-text');
var $demoText = $('.demo-tshirt-text');
$text.on(
'keyup'
, function (e) {
$demoText.text($text.val());
}
);
}
);

when i re-size my browser all element change their place

when i re-size my browser all element change their place can any one help me ??? but some of element like logo & navigation when i re-size the browser Not affected
i tried to make the position fixed absolute or static but nothing change
<head>
<title>www.adamkides.com/main</title>
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link href='http://fonts.googleapis.com/css? family=Archivo+Narrow:700italic,700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
a{color:black;}
body {
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 12px;
background: white;
background-size:101%;
height:100%;
background-image: url('dr5.jpg');
background-repeat:no-repeat;
margin:-70 0 0 0;
}
#face:hover {
background: #333;
border-left: 5px solid #000;
}
#face{ MARGIN-LEFT: -850PX;
MARGIN-TOP: 1PX;}
#container
{
margin: 0 auto;
width: 100%;
background: #fff;
}
#header
{
background-image: url(hand.jpg);
background-size: 310px;
background-repeat: no-repeat;
padding: 20px;
background-color:white;
width: 320px;
height: 100px;
float:right;
margin: 70px 500px -11px 0%;
}
#header h1 { margin: 0; }
.navigation {
margin: 5px 20px 30px 20%;
background: #fff;
overflow: hidden;
width: 760px;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.navigation li h2 {
font-family: georgia;
font-weight: bold;
font-style:arial;
font-size: 20px;
margin-bottom: 5px;
line-height: 16px;
}
.navigation li p{
font-size: 11px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.navigation li:hover {
background: greenyellow;
border-left: 5px solid #000;
}
.navigation li:hover h2 {
font-weight: bold;
color: yellow;
}
.navigation li:hover p {
color: orange;
padding-left: 5px;
}
#content-container
{ float: left;
width: 55%;
margin-top: -25px;
margin-left: 320px;
height: 60%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
}
.ti{
border-color: greenyellow;
border-style: dotted;
margin-top: -70px;
border-width: thin;
width: 235px;
height: 250px;
margin-left: 295px;
font-size: 24px;
color: orange;
font-weight: 700;}
#content {
clear: right;
float: left;
width: 60%;
padding: 5px 0;
margin: -14px -41px -294px 7%;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 15 320 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer{margin: 30px 20px -2px 0px;
overflow: hidden;
border-color: greenyellow;
border-style: dotted;
border-width: thin;
width: 760px;
height:100px;
background-color:white;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
</style>
</head>
<body>
<div id="container">
<img src="logo1.jpg" width="50px" height="50px" style="margin-top: 75px;margin-left: 522px;/* border:solid; *//* border-color:#ef5d9b; */height: 100px;float: left;width: 100px;"> <div id="header" style="background-image: url(hand.jpg);">
</div>
<ul class="navigation">
<a href="mainpage.html"><li>
<h2>الصفحة الرئسية</h2>
<p>main page</p>
</li></a>
<a href="f.html"><li>
<h2>فلسفتنا</h2>
<p>our</p>
</li></a>
<a href="how.html"><li>
<h2>من نحن</h2>
<p>Who we are</p>
</li></a>
<a href="gallary.html"><li>
<h2>الاستديو</h2>
<p>gallary</p>
</li></a>
<image id="face" src="face.jpg" width="80px" height="80px"/>
</ul>
<div id="content-container">
<div id="content">
<h2 style="float:right;font-size:50px;color:green;"><img src="well.jpg" width="70px" height="70px"style="margin-top:10px;"> كلمة ترحيبية </h2>
<p align="right"style="float:right;font-size:25px ;margin-left:-10px;color:black;">
مرحباً بكم في صفحتنا التي عملنا بجهد متواضع لنجعل منها موقعاً متميزاً يخدم الجميع ، ليس فقط أهالي أطفال الروضة بل و أيضاً الزبائن الكرام ، و نتمنى أن تكون مرجعاً مفيداً لكم، و أن تكون حلقة وصل بيننا و بينكم ، . . . فلا تترددوا بتزويدنا بكل مقترحاتكم و آرائكم التي تساعدنا على التطور نحو الأفضل واعلموا أن رأيكم مهم لدينا وسيساعدنا على لتطور .
نأمل أن تجدوا المعلومات التي تبحثون عن
ها على موقعنا الالكتروني
، ولمزيد من المعلومات أو الاستفسارات الرجاء طلب ذلك،
وسوف يسعد نا توفيرها لكم نتطلع إلى الترحيب بكم في
روضتنا ونأمل أن يعودو أطفالكم بذكريات جميلة و تجربة
فريدة.
</p>
</div>
<div id="aside">
<h3>
<div class="ti" >
<p id="time"style="margin-left:20%;margin-top:70px;"></p>
<script>
var x=setInterval(function(){myTimer()},1000);
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString();
}</script>
<p id="date"style="margin-left:15%"></p>
<p style="margin-left:30%">اتسلى معنى</p>
<script>
var d = new Date();
document.getElementById("date").innerHTML = d.toDateString();
</script><br><br>
</script>
</div>
</div>
<div id="footer"><h2 style="margin-top:7px;float:right;margin-right:30px;color:green;font-size:30px;">:اتصل بنا</h2></div>
<h4 style="font-size:18px;float:right;margin-top:-60px;margin-right:50px;">065925575 - 0796877760<br> 065925575 فاكس </h4>
<h2 style="margin-top:-94px;float:left;margin-left:30px;color:green;font-size:30px;">:البريد الالكتروني</h2>
<h4><a style="margin-left:30px;margin-top:-40px;clear:left;color:black;float:left;font-size:18px;" href="mailto:info#adam-kids.com">info#adam-kids.com</a></h4 >
<h2 style="float:right;margin-top:-100px;margin-right:150px;color:green;font-size:30px;">:العنوان</h2>
<h4 style="margin-bottom: auto;margin-top:-67px;margin-right:80px;font-size:18px;width:190px;float:right;">
بناية رقم 9 - شارع علي سيدو الكردي
- خلف كنيسة اللاتين - عبدون الشمالي
- عمان - الأردن
</h4>
</div>
</body>
</html>

You need to make your CSS responsive. By responsive, I mean that your CSS should be able to react to the different browser widths and heights.
This is a massive topic but a good place to start might be here:
http://www.w3schools.com/css/css_responsive_intro.asp
You should also look into CSS frameworks such as Bootstrap or Foundation:
http://getbootstrap.com/
http://foundation.zurb.com/
Both of which have plenty of online tutorials you can learn from. The w3schools link I have provided gives you a basic introduction to Bootstrap.

That's happening because you're mixing fixed units and relative units in your CSS.
Fixed units like pixels keeps the especified sizes even when you resize your browser, while relative units like percentages reacts and adapts to resizing.
Consider that fixed units will create a lot of horizontal scroll depending on the device your site it's being viewed from, but relative units will reorganize your page for a better presentation, that's what we call "Responsive".

Use the browser development tool to see the properties of elements and inspect why they are behaving that way. For your example, the ul with the 'navigation' class has margin-left set to 20%, which makes it change position when the total width of the page changes.
I have to agree with the others, though, and ask you to read more about the subject so you can understand the samples you are working with.