javascript not working on my webpage - javascript

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());
}
);
}
);

Related

Dropdown Menu appears fine in Chrome but not in Safari (covered by image)

The Nav dropdown menu works fine in Chrome, but in Safari the rest of the menu is covered by the image.
Why is this happening only in Safari? It displays just fine in Chrome.
Things I have attempted to no avail :
meddled with Z-index
tried using position:relative for the dropdown menu
added on -webkit-transform
;(function(){function t(){}function e(t){return null==t?t===l?d:y:I&&I in Object(t)?n(t):r(t)}function n(t){var e=$.call(t,I),n=t[I];try{t[I]=l;var r=true}catch(t){}var o=_.call(t);return r&&(e?t[I]=n:delete t[I]),o}function r(t){return _.call(t)}function o(t,e,n){function r(e){var n=d,r=g;return d=g=l,x=e,v=t.apply(r,n)}function o(t){return x=t,O=setTimeout(c,e),T?r(t):v}function i(t){var n=t-h,r=t-x,o=e-n;return w?k(o,j-r):o}function f(t){var n=t-h,r=t-x;return h===l||n>=e||n<0||w&&r>=j}function c(){
var t=D();return f(t)?p(t):(O=setTimeout(c,i(t)),l)}function p(t){return O=l,S&&d?r(t):(d=g=l,v)}function s(){O!==l&&clearTimeout(O),x=0,d=h=g=O=l}function y(){return O===l?v:p(D())}function m(){var t=D(),n=f(t);if(d=arguments,g=this,h=t,n){if(O===l)return o(h);if(w)return O=setTimeout(c,e),r(h)}return O===l&&(O=setTimeout(c,e)),v}var d,g,j,v,O,h,x=0,T=false,w=false,S=true;if(typeof t!="function")throw new TypeError(b);return e=a(e)||0,u(n)&&(T=!!n.leading,w="maxWait"in n,j=w?M(a(n.maxWait)||0,e):j,S="trailing"in n?!!n.trailing:S),
m.cancel=s,m.flush=y,m}function i(t,e,n){var r=true,i=true;if(typeof t!="function")throw new TypeError(b);return u(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),o(t,e,{leading:r,maxWait:e,trailing:i})}function u(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function f(t){return null!=t&&typeof t=="object"}function c(t){return typeof t=="symbol"||f(t)&&e(t)==m}function a(t){if(typeof t=="number")return t;if(c(t))return s;if(u(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;
t=u(e)?e+"":e}if(typeof t!="string")return 0===t?t:+t;t=t.replace(g,"");var n=v.test(t);return n||O.test(t)?h(t.slice(2),n?2:8):j.test(t)?s:+t}var l,p="4.17.5",b="Expected a function",s=NaN,y="[object Null]",m="[object Symbol]",d="[object Undefined]",g=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,O=/^0o[0-7]+$/i,h=parseInt,x=typeof global=="object"&&global&&global.Object===Object&&global,T=typeof self=="object"&&self&&self.Object===Object&&self,w=x||T||Function("return this")(),S=typeof exports=="object"&&exports&&!exports.nodeType&&exports,N=S&&typeof module=="object"&&module&&!module.nodeType&&module,E=Object.prototype,$=E.hasOwnProperty,_=E.toString,W=w.Symbol,I=W?W.toStringTag:l,M=Math.max,k=Math.min,D=function(){
return w.Date.now()};t.debounce=o,t.throttle=i,t.isObject=u,t.isObjectLike=f,t.isSymbol=c,t.now=D,t.toNumber=a,t.VERSION=p,typeof define=="function"&&typeof define.amd=="object"&&define.amd?(w._=t, define(function(){return t})):N?((N.exports=t)._=t,S._=t):w._=t}).call(this);
// This function will run a throttled script every 300 ms
var checkHeader = _.throttle(() => {
console.log('checkHeader');
// Detect scroll position
let scrollPosition = Math.round(window.scrollY);
// If we've scrolled 130px, add "sticky" class to the header
if (scrollPosition > 130){
document.querySelector('header').classList.add('sticky');
}
// If not, remove "sticky" class from header
else {
document.querySelector('header').classList.remove('sticky');
}
}, 300);
// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);
header{
padding: 0px;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background-image: linear-gradient(to right, rgba(9, 9, 22, 0.6), rgba(9, 9, 22, 1.0));
}
main{
margin-top: 120px;
}
header.sticky {
background-color: black;
height: 90px;
}
header.sticky nav{
top: 30px;
}
header.sticky #logo{
font-size: 3em;
padding: 10px 0px 10px 10px;
}
header #logo{
font-size: 5em;
float: left;
}
.phi{
color: rgb(141, 180, 105);
}
.hilo{
color: white;
}
nav{
float: right;
position: fixed;
top: 50px;
left: 280px;
}
nav > a, .dropmenu{
padding-left: 0.5em;
padding-right: 0.5em;
}
nav a, .dropdown{
color: rgb(240, 137, 52);
font-size: 20px;
}
a{
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 21px 21px 21px 21px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(247, 185, 71);
border-radius: 21px 21px 21px 21px;
}
.dropdown:hover .dropdown-content {display: block;}
.dropmenu:hover {
cursor: pointer;
}
.universe {
background-image: url("../assets/img/universe.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0px;
width: 100%;
height: 25em;
display: inline-block;
z-index: -999;
}
blockquote{
color: white;
font-size: 4em;
text-align: center;
margin: 2em auto;
}
.bgbutton, .bottominfo{
background-color: white;
}
.button{
display: inline-block;
border-radius: 4px;
background-color: rgb(240, 137, 52);
border: none;
color: #FFFFFF;
text-align: center;
font-size: 40px;
padding: 20px;
transition: all 0.5s ease;
cursor: pointer;
margin: 50px 180px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s ease;
}
.button span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s ease;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
<div class="wrapper">
<header>
<a href="index.html">
<div id="logo">
<span class="phi">&#934</span><span class="hilo">hilo</span>
</div>
</a>
<nav>
HOME
<div class="dropdown">
<a class="dropmenu">INTERIOR DESIGN</a>
<div class="dropdown-content">
OUR PHILOSOPHY
OUR INNOVATION
TESTIMONIALS
</div>
</div>
FENG SHUI
<div class="dropdown">
<a class="dropmenu">SERVICES</a>
<div class="dropdown-content">
SPACE PLANNING
FENG SHUI CONSULTATION
DESIGN & CARPENTRY
</div>
</div>
<div class="dropdown">
<a class="dropmenu">OUR MASTERPIECE</a>
<div class="dropdown-content">
RESIDENTIAL
RETAIL
CORPORATE & OFFICE
</div>
</div>
<div class="dropdown">
<a class="dropmenu">ABOUT</a>
<div class="dropdown-content">
CHIEF DESIGNER
MASTER PEK
OUR SUBSIDIARIES
FAQ
</div>
</div>
BLOG
</nav>
</header>
<main>
<div class="universe">
<section>
<blockquote>Where Feng Shui Meets Design</blockquote>
</section>
</div>
I have finally found the problem and came to a solution.
The problem was hidden at the header section.
After changing header - overflow: visible (from hidden), the dropdown menu in navbar is displaying properly now in Safari.
The reason Safari renders this so differently from Chrome is unfathomable.

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

style of a web page in a disordered way

I have been trying with this html page formating for quiete a long time .I want to see these in the centre of the screen with a nice beautiful way.Any help is appreciated.
http://jsfiddle.net/bce9LfLL/
My code is
css
* {
margin:0;
padding:0;
font-family: tahoma;
}
body {
padding: 30px;
}
#fileid{
width:10%;
height:15%;
}
div {
width: 400px;
height: 25px;
background-color: white;
box-shadow: 1px 2px 3px #ededed;
position:relative;
border: 1px solid #d8d8d8;
}
input[type='file'] {
width:400px;
height:25px;
opacity:0
}
#val {
width: 400px;
height:25px;
position: absolute;
top: 0;
left: 0;
font-size:13px;
line-height: 25px;
text-indent: 10px;
pointer-events: none;
}
#button {
cursor: pointer;
display: block;
width: 90px;
background-color: purple;
height:25px;
color: white;
position: absolute;
right:0;
top: 0;
font-size: 11px;
line-height:25px;
text-align: center;
-webkit-transition: 500ms all;
-moz-transition: 500ms all;
transition: 500ms all;
}
#button:hover {
background-color: blue;
}
body {
background-color: linen;
}
div{
color: maroon;
margin-left: 40px;
font-size:100%;
}
#sid{
color: maroon;
margin-left: 40px;
font-size:100%;
}
html
<div align="center">
<b>Model</b><select id="sid">
<option >Average</option>
<option>Sum</option>
<option>Highest</option>
</select><br>
<div id="fileip">
<input type='file'> <span id='val'></span>
<span id='button'>Select File</span>
</input>
</div>
<input type="submit" value="run"><br><br>
<input type="submit" value="Display"><br>
</div>
and
javascript
$('#button').click(function () {
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function () {
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})
the page should looks like
There are two options to center off the top of my head. First, fix the width and set the margin:0 auto; On the element you wish to center. The second is to put position:relative; left: calc(50% - YOURELEMENTWIDTH);
Use the <label> tag.
<body>
<label for="model">Model</label>
<select id="model">
<option>Average</option>
<option>Sum</option>
<option>Highest</option>
</select>
</body>

Javascript - bring up infobox on click image

I have some images, I need to have a clickevent on them bringing up an infobox on each image.
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
#charset "utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header
{
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox
{
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav
{
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family: 'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul{
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack
{
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2rem;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.4.js"></script>
<script>
$( document ).ready(function() {
$('.show-infobox').on('click', function() {
// Hide all infoboxes to prevent multiple showing at once
$('.infobox').addClass('hidden');
// Show infobox background
$('.infobox-container').removeClass('hidden');
// Show infobox matching last part of ID
$('#' + this.id.replace('show')).removeClass('hidden');
});
$('.hide-infobox').on('click', function() {
// Manually hide all infoboxes and background
$('.infobox-container').addClass('hidden');
$('.infobox').addClass('hidden');
}).children().on('click', function() {
return false;
});
});
</script>
<div id="wrapper">
<center><header><img src="Bilder/spegel.jpg"/></header></center>
</head>
<!--Bakgrundsbild-->
<center><body bgcolor="#FFFFFF ">
<!--Javascript-->
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center><img src="Bilder/title.png"></center>
<p>
<div class="infobox-container hide-infobox hidden">
<div id="infobox-1" class="infobox hidden">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox hidden">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
<span id="show-infobox-1" class="show-infobox">Show infobox 1</span>
<span id="show-infobox-2" class="show-infobox">Show infobox 2</span>
</div>
</body></center>
</div>
</html>
At the moment Im just trying to bring up the infobox on a simple text just to see if it works. But it doesn't. Only the container comes up without the actual infobox.
I am just showing how this can be done. Still you need to change your code a lot.
I suggest you to go through w3schools for better understanding.
This is DEMO
$(".infobox-container, .infobox").hide();
$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
{
$(".infobox-container, #infobox-1").fadeIn(100);
}
if(curId == "show2")
{
$(".infobox-container, #infobox-2").fadeIn(100);
}
});
$(".hide-infobox").click(function()
{
$(".infobox-container, .infobox").fadeOut();
});
#charset"utf-8";
.container {
height: 800px;
width: 1000px;
margin: 0;
}
body {
padding:0px;
width:100%;
}
header {
top: 11px;
width: 100%;
padding-bottom: 10px;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
ol {
list-style-type: upper-roman;
}
H3 {
font-size:16px;
text-shadow: 0px 0px 5px grey;
}
.mainBox {
background-color: #F0F0F0;
width: 700px;
box-shadow: 0px 0px 15px grey;
top: 310px;
border-radius: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 50px;
}
.container nav ul {
list-style-type: none;
}
nav {
width: 720px;
height:40px;
background-color: #F0F0F0;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 10px;
font-family:'PT Sans';
font-size: 20px;
margin-bottom:50px;
}
ul {
padding-right: 20px;
margin-top: 6px;
}
a {
color: black;
text-decoration: none;
padding: 25px;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
.imagePack {
float:left;
height: 300px;
width: 200px;
border-style:solid;
}
img.staff {
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
img.staff:hover {
opacity: 1.0;
filter: alpha(opacity=100);
/* For IE8 and earlier */
}
.infobox-container {
background: rgba(0, 0, 0, .2);
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.infobox {
background: #fff;
display: inline-block;
padding: 2em;
border: solid 1px #eee;
}
.show-infobox {
cursor: pointer;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<center>
<header>
<img src="Bilder/spegel.jpg" />
</header>
</center>
<center>
<!--Lådan som håller inne allt innehåll-->
<div class="container">
<!--Header-->
<!--Nedan skrivs innehål/text till sidan-->
<div class="mainBox">
<center>
<img src="Bilder/title.png" />
</center>
<p>
<div class="infobox-container">
<div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
<div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
</div>
</p>
<span class="show-infobox" id="show1">Show infobox 1</span>
<span class="show-infobox" id="show2">Show infobox 2</span>
</div>
</div>
</center>
</div>

one page website with css transition to sweep content in from alternating sides

I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks
I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/
Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
    margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo

Categories