0

I am creating a t-shirt designing website for my college project.I want to display the text written by the user in 'input type text' in the iframe where i have set a t-shirt as the background image.I searched the internet but couldn't get any viable solution..

I want the text to appear on top of the t-shirt on the chest area.

Any help is appreciated..

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

.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);
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
at your doorstep"</h2>

 </header>

<ul>
  <li><a href="homepage.php">Home</a></li>
  <li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Buy From Us</a>
    <div class="dropdown-content">
      <a href="#">Quotes printed T-shirts</a>
      <a href="#">Graphic printed T-shirts</a>
      <a href="#">Memes printed T-shirts</a>
    </div>
  </li>
  <li><a href="help.php">Help</a></li>

 <li><a href="contactus.php">Contact Us</a></li>

 <li onclick="document.getElementById('id02').style.display='block'"style="float:right"><a href="#">Sign Up</a></li>
 <li onclick="document.getElementById('id01').style.display='block'" style="float:right"><a href="#">Login</a></li>
</ul>

    <div class="designcontainer">
    <h1>Select Colour</h1>

        <a href="iframetshirtwhite.html" target="myiframe"><button class="colorbutton buttonw">White</button></a> &nbsp;&nbsp;
<a href="iframetshirtred.html" target="myiframe"><button class="colorbutton buttonr">Red</button></a> &nbsp;&nbsp;
<a href="iframetshirtblue.html" target="myiframe"><button class="colorbutton buttonb">Blue</button></a> &nbsp;&nbsp;
    <a href="iframetshirtyellow.html" target="myiframe"><button class="colorbutton buttony">Yellow</button></a> &nbsp;&nbsp;
    
    <h1>Select Size</h1>
    <form action="include/storeinfo.inc.php" method="post">
    
        <div>
  <label class="labelname">
    <input type="radio" class="option-input radio" name="size" value="small" checked />
    Small(S)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" name="size" value="medium" />
    Medium(M)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" name="size" value="large"/>
    Large(L)
  </label>
</div>
        
        <h1>Enter the Text you want on your T-shirt</h1>
        <span>
        <input type="text" name="text" class="gate" id="enter" placeholder="Max 10 letters.." maxlength="10" />
       <label for="enter">Enter</label>
        </span>
    
        <br>
        
        <input type="submit" class="colorbutton" value="Proceed" name="submit" style="margin-top:20px; margin-left:100px;">
        
        <input type="submit" class="colorbutton" value="Preview" name="submit1" style="margin-top:20px; margin-left:50px;">
        
        </form>
    

<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>

</div>
    <footer >
Copyright &copy;  2017 www.DAJ.com
</footer>
</body>




</html>

html file of iframe:

<html>
<head>
<style>
body
{
overflow-y: hidden;
overflow-x: hidden;
background: url(image/white.jpg);
background-size: 690px 690px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
teeyo
  • 3,665
  • 3
  • 22
  • 37
Anuj Philip
  • 5
  • 4
  • 1
    Why does the text need to appear in an iframe? Is there a reason it can't be shown in another element on the page? – Brett DeWoody Sep 29 '17 at 14:52
  • Unless you have a very good reason for doing so, don't use and ` – hungerstar Sep 29 '17 at 14:54
  • I know this is FAR from your initial question, but you might find SVG to be useful - it would give your users a LOT more flexibility in building what goes on the shirt. – theGleep Sep 29 '17 at 15:05
  • @Brett DeWoody Because i have 4 buttons on my page by pressing on those buttons the color of tshirt changes inside the iframe..I didn't any other method to implement that.. – Anuj Philip Sep 29 '17 at 16:57
  • @AnujPhilip you change the background image of an element with JS instead of iframes. – hungerstar Sep 29 '17 at 17:12

2 Answers2

0

If the entire content of your iframe is just the background definition, you could write the HTML to the iframe document directly.

from Write elements into a child iframe using Javascript or jQuery ...

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow 
  || ifrm.contentDocument.document 
  || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
theGleep
  • 1,179
  • 8
  • 14
0

Unless you have a very good reason for doing so, don't use and . Seems unnecessary and convoluted.

It's quite simple to grab the value from an <input> or <textarea> with JavaScript and place it in another element, like a <div>. Here's an uber basic example that would produce a live example (pretend that the green DIV is a photo of a t-shirt).

var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );

$text.on( 'keyup', function ( e ) {
  $demoText.text( $text.val() );
} );
.demo-tshirt {
  position: relative;
  width: 300px;
  height: 400px;
  background-color: seagreen;
}

.demo-tshirt-text {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 50%;
  transform: translateX( -50%);
  color: white;
  font-family: Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="tshirt-text">
  Text: <input type="text" id="tshirt-text" class="tshirt-text" name="tshirt-text">
</label>
<div class="demo-tshirt">
  <div class="demo-tshirt-text"></div>
</div>
hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • Thank you @hungerstar for your help.I did the this because i wanted the text to get stored in database after the user presss the proceed button, if the user likes the preview.Any idea how to achieve both simutaneously..Sorry for disturbing you again.. – Anuj Philip Sep 29 '17 at 16:55
  • You might need to clarify the intended flow you expect to happen as someone makes their way through your site. My initial though is that you would use AJAX to store the info in the database when they click the _Proceed_ (or whatever) button if you wanted to stay on the page. – hungerstar Sep 29 '17 at 17:14