Created a page with visual studio code – live run ok, but on website not ok

  • I wrote the following code on visual studio code. JS works fine, I guess HTML code is also fine. When i am checking with live server. IT seems perfectly fine and responsive to devices. I have my website on ciyatheme. I went to add a new page. I chose custom HTML and paste the code. Then a added cs in the code area and similarly JS code as well. But the layout does not match with live server output. Please help.
    [ redundant link removed ]

    HTML——

    <html>

<head>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <title>Know your body shape</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
    <h1 style="text-align: center;">Find out your Body Shape</h1>
</head>

<body>
    <div class="row">
        <div id="container1" class="container">
            <h3 style="text-align:center" id="CalHeader">Guidance</h3>
            <p id="text" style="padding: 15px;text-align: justify;">Just click in each text box for instructions on how
                to find your measurements. Its easy to find your body type</p>

        </div>

        <div id="container2" class="container">
            <img src="know your body shape - Dazzles Jewellery.jpg" />
        </div>

        <div id="container3" class="container" class = "calArea">
            <div class="text-wrap">
                <h3 style="padding: 15px; text-align:center" >Input Data (Inches)</h3>
                <div id="Bust" class="calBut text-box" style="line-height: 300%;">
                    <label>Bust:</label>
                    <input name="Bust" id="BustSZ" list="Inches" maxlength="2" size="2" required placeholder="Bust" />
                </div>

                <div id="Waist" class="calBut text-box" style="line-height: 300%">
                    <label>Waist:</label>
                    <input name="Waist" id="WaistSZ" list="Inches" maxlength="2" size = "2" required placeholder="Waist" />
                </div>

                <div id="Hips" class="calBut text-box" style="line-height: 300%">
                    <label>Hips:</label>
                    <input name="Hips" id="HipSZ" list="Inches" maxlength="2" size = "2" required placeholder="Hips" />
                </div>
                <div class="calBut">
					<a href="#">Submit</a>	
				</div>
            </div>
        </div>

    </div>

</body>

</html>

    CSS———–

    * {
    box-sizing: border-box;
  }
.container {
    height: auto;
    width: 33%;
    background-color: white;
    float: left;
    padding: 10px;
    
    }

.row:after {
    content: "";
    display: table;
    clear: both;

}

  img {
    max-width: 100%;
    height: auto;
    
  }
  
  img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto
  }
  .text-wrap {
    display: block;
    text-align: center;

  }
  .calArea {
    
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .calBut #button {
        width: 80px;
        background: #000;
        color: #fff;
        font-size: 18px;
        line-height: 36px;
        text-align: center;
        display: block;
        text-decoration: none;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    
    }

    JS————

    
$(document).ready(function(){

	//Change the instruction text and mannequin images depending on which input field is in focus.
	$("#Bust").focusin(function() {
		$('#CalHeader').text("Measuring your bust.");
		$('#text').text("Stand straight up and wrap the tape measure around the fullest part of your chest keeping it parallel to the ground. Pull the measuring tape as taut as you can without changing the shape of your chest.");
		$("#imageBox").empty();
		$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/bust-measurement-Dazzles-Jewellery-min.jpg" />');
	});

	$("#Waist").focusin(function() {
		$('#CalHeader').text("Measuring your waist.");
		$('#text').text("Find the narrowest part of your waist. If you are not sure, slowly bend from right to left while looking in the mirror. The area that creases as you bend is your natural waist. Wrap the tape measure around your waist with the two ends meeting at your navel. Avoid sucking in your stomach while taking this measurement.");
		$("#imageBox").empty();
		$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/waist-measurement-Dazzles-Jewellery-min.jpg" />');
	});

	$("#Hips").focusin(function() {
		$('#CalHeader').text("Measuring your hips.");
		$('#text').text("Hold the measuring tape at one hip, below your hip bone, at the fullest part of your hip. Then, keeping the tape flat, wrap it around the largest part of your butt, your other hip, and bring it back to the meeting point.");
		$("#imageBox").empty();
		$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/Hip-Measurement-Dazzles-Jewellery-min.jpg" />');
	});

	//On click get the varabiuals from the input fields
	$('a#button').click(function() {
		var bust = $('#BustSZ').val(),
			waist = $('#WaistSZ').val(),
			hips = $('#HipSZ').val();

	    var bustMeasure   = "";
		var waistMeasure  = "";
		var hipsMeasure   = "";

		var small   = "small";
		var medium  = "medium";
		var large   = "large";

		var shapeType = "";

		// Bust Calculation.
		if ( bust <= 36 ) { bustMeasure = small;  }
		if ( bust <= 44 ) { bustMeasure = medium; }
		if ( bust >= 45 ) { bustMeasure = large;  }
		
		// Waist Calculation.
		if ( waist <= 34 ) { waistMeasure = small;  }
		if ( waist <= 41 ) { waistMeasure = medium; }
		if ( waist >= 42 ) { waistMeasure = large;  }

		// Hips Calculation.
		if ( hips <= 39 ) { hipsMeasure = small;  }
		if ( hips <= 47 ) { hipsMeasure = medium; }
		if ( hips >= 48 ) { hipsMeasure = large;  }

		

		// First check to see if all measurements are within 5" of each other.  If so they are I-shape.
        var highestValue = Math.max(bust, waist, hips);
        var lowestValue = Math.min(bust, waist, hips);
        var difference = highestValue - lowestValue;

        if ( difference <= 5 ){
          shapeType = "I-Shape"
        }

        /* 
            Bust is >5" smaller than waist & hips       THEN    A-shape (A-shape)
            Waist is >5" smaller than bust & hips       THEN    X-shape (X-shape)
            Waist is >5" bigger than bust & hips        THEN    V-shape (V-shape)
            Hips are >5" bigger bust & waist            THEN    A-shape (A-shape)
        */
                
                if (waist - bust > 5 && hips - bust > 5) { 
                    shapeType = "A-shape";
                } 

                if (bust - waist > 5 && hips - waist > 5) { 
                    shapeType = "X-shape";
                 
                }    
                if (waist - bust > 5 && waist - hips > 5) { 
                    shapeType = "V-shape";
                    
                }
                if (hips - waist > 5 && hips - bust > 5) { 
                    shapeType = "A-shape";
                    
                }
        
    // Bust measurements are more than 5 percent bigger than your hip measurement.
    if (bust - hips > (hips / 20)) { 
        shapeType = "V-shape";
    }
	  // Bust and hip measurements are within 5 percent of each other. (bust - hips < ( hips / 20))
	  // And Waist is less than 25 percent smaller than chest measurements && (waist < (bust * .75))
    if ((bust - hips <= ( hips / 20)) && (waist > (bust * .75))) { 
        shapeType = "I-shape";
    }
    // Hip measurement is more than 5 percent bigger than your shoulder or bust measurements
    if (hips - bust > (bust/20)) { 
       shapeType = "A-shape";
    } 
    // Waist is at least 25 percent smaller than your hip AND bust measurements
    if ((waist <= (bust * .75) && waist <= (hips * .75))) { 
       shapeType = "X-shape";
    }

		/*// I-shape.
	    if (( (bustMeasure == small)  && (waistMeasure == small)  && (hipsMeasure == small))
	       || ((bustMeasure == medium) && (waistMeasure == medium) && (hipsMeasure == medium))
	       || (bustMeasure == large)  && (waistMeasure == large)  && (hipsMeasure == large)) 
		{
	    	shapeType = "I-shape";
		}

	    // V-shape
	    if ( ((bustMeasure == small)  && (waistMeasure == medium) && (hipsMeasure == small))
	       || ((bustMeasure == small)  && (waistMeasure == large)  && (hipsMeasure == small))
	       || ((bustMeasure == small)  && (waistMeasure == large)  && (hipsMeasure == medium))
	       || ((bustMeasure == medium) && (waistMeasure == large)  && (hipsMeasure == small))
	       || ((bustMeasure == medium) && (waistMeasure == large)  && (hipsMeasure == medium)) 
	       || ((bustMeasure == medium) && (waistMeasure == large)  && (hipsMeasure == large)))
	    {
	        shapeType = "V-shape";
	    }
	    
	  
	    // A-shape.
	    if (  ((bustMeasure == small) && (waistMeasure == small)  && (hipsMeasure == medium))
	       || ((bustMeasure == small) && (waistMeasure == small)  && (hipsMeasure == large))
	       || ((bustMeasure == small) && (waistMeasure == medium) && (hipsMeasure == medium)) 
	       || ((bustMeasure == small) && (waistMeasure == medium) && (hipsMeasure == large)) 
	       || ((bustMeasure == small) && (waistMeasure == large)  && (hipsMeasure == large))
	       || ((bustMeasure == medium) && (waistMeasure == medium) && (hipsMeasure == large))
	       || ((bustMeasure == medium) && (waistMeasure == small) && (hipsMeasure == large)))
	    {
	        shapeType = "A-shape";
	    }
	    
	    // X-shape.
	    if (  ((bustMeasure == medium) && (waistMeasure == small)  && (hipsMeasure == medium))
	       || ((bustMeasure == large)  && (waistMeasure == small)  && (hipsMeasure == large)) 
	       || ((bustMeasure == large)  && (waistMeasure == small)  && (hipsMeasure == medium)) 
	       || ((bustMeasure == large)  && (waistMeasure == medium) && (hipsMeasure == large)))
	    {
	        shapeType = "X-shape";
	    }*/

    
		// Output Image and text for corresponding body type	
		if ( shapeType == "I-shape" ) {
			$('#CalHeader').text("You are an H-shape");
			$('#text').text("Your body weight is evenly distributed, with shoulders, waist and hips almost even in width.");
			$('#text2').html('<p>Click <a href="#">Here</a> to find the perfect suit for your body type.</p>');
			$("#imageBox").empty();
			$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/H-Shape-figure.jpg" />');
		} 
		else if ( shapeType == "V-shape" ) {
			$('#CalHeader').text("You are an Apple/V-shape");
			$('#text').text("Your shoulders are broadest, over a thicker torso, which is almost as wide as your hips, with a barely-there bottom and slimmer thighs and legs.");
			$('#text2').html('<p>Click <a href="#">Here</a> to find the perfect suit for your body type.</p>');
			$("#imageBox").empty();
			$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/Apple-Shape-Figure.jpg" />');
		} 
		else if ( shapeType == "X-shape" ) {
			$('#CalHeader').text("You are an Hourglass shape");
			$('#text').text("The hour-glass silhouette tends to be nipped in at the waist and fuller in both bust and hips.");
			$('#text2').html('<p>Click <a href="#">Here</a> to find the perfect suit for your body type.</p>');
			$("#imageBox").empty();
			$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/hour-glass-figure.jpg" />');
		} 
		else if ( shapeType == "A-shape" ) {
			$('#CalHeader').text("You are a Pear/A-shape");
			$('#text').text("Your shoulders and bust are noticeably narrower than hips, thighs and rear, with most curves below the waist.");
			$('#text2').html('<p>Click <a href="#">Here</a> to find the perfect suit for your body type.</p>');
			$("#imageBox").empty();
			$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/Pear-Shape-Figure.jpg" />');
		} 
		else {
			$('#CalHeader').text("O no an error");
			$('#text').text("Something is wrong. Please only use numbers and give it another try.");
			$("#imageBox").empty();
			$('#imageBox').html('<img src="https://www.dazzlesjewellery.in/wp-content/uploads/2021/06/know-your-body-shape-Dazzles-Jewellery.jpg" />');
		} 

	});
});

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    The page’s index.css and index.js file references come back with a 404 error. Either the path is wrong or there are inadequate permissions on the files. Most likely a path error.

    Don’t add inline JS to page content through the WP page editor. Its syntax will likely be corrupted. Inline CSS styles are a little safer, but could possibly also be corrupted. To safely add such elements, utilize a custom shortcode or output the elements via some action hook.

    Thread Starter saumiwordpressorg

    (@saumiwordpressorg)

    Hi . Just remembered be those index.js and index CSS line… That was when I was writing visual code.. try the code without those two lines

    Moderator bcworkz

    (@bcworkz)

    Are you saying those files are not necessary? You should remove the references then. Since they go 404, they do not influence what we see now. I thought they were supposed to influence.

    There’s also a JS error in main.min.js. “a.sticky is not a function”. This could adversely influence things. The optimization for the site could have possibly gone wrong. See if disabling it changes things. You may need an alternative optimization scheme. You may need to flush your browser and other caches to see the non-optimized version once optimization is disabled.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Created a page with visual studio code – live run ok, but on website not ok’ is closed to new replies.