Why does my effects on my website effect my text position?

Question

0.00/5 (No votes)

See more:

I have a website that has a drop down box and a button to show each effect when clicked. I am at a wall here. I have the picture doing all of the effects but when the effect occurs the text position changes while the effect is happening and then resets. What did I miss in my code to correct this?

Here is my CSS Code:

CSS

header, nav, main, footer { display: block; }
* { box-sizing: border-box; } 
* {margin: 0px; padding: 0px; }
body    {   
		background-color: #F5F5F5;
        color: #3F2860;
        font-family: Verdana, Arial, sans-serif;
		margin-left: 0px;
		margin-top: 0px;
}

#wrapper {
			background-color: #F5F5F5;
			min-width: 1200px;
			max-width: 1480px;
			margin-left:  auto;
			margin-right: auto;
			width: 990px;
}

img {
		border: none;
}

header  {
		background-color: #9BC1C2;
		background-image: url(images/lilyheader.jpg);
		background-position: right;
		background-repeat: no-repeat;
		height: 150px;
        
}  

#feedback { font-size: 1.4em; 
}

#selectable .ui-selecting { background: #FECA40; 
 }
#selectable .ui-selected { background: #F39814; 
						  color: white; 
}
#selectable { list-style-type: none; 
              margin: 0; 
              padding: 0; 
              width: 100%; 
}
#selectable li { margin: 3px; padding: 0.4em; 
			   font-size: 1.4em; 
              height: 18px; 
}

.toggler { width: 90%; 
}

#effect { width: 90%;
		  height: 10px;
		  position: static; 
}

p {
	background-color: #C8DDDE;
	width: 90%;
	padding: 1em;
	margin-left: 0;
	margin-right: 0;
	margin-top: 1em;
	margin-bottom: 1em;	
}

div p{
	padding: 0;
}
form{
	padding: 3em;
} 

label {
		float: left;
		display: block;
		text-align: right;
		font-weight: bold;
		width: 10em;
		padding-right: 1em;
}

input, textarea {

		display: block;
		margin-bottom: 2em;
}

#mySubmit{
	
		margin-left: 12em;
}

aside {
		width: 390px;
		float: left;
}	

#content {
		width: 990px;
}

h1      {
		padding-top: 50px; padding-left: 2em;
}

nav     {
		font-weight: bold;
        text-align: center;
		float: left;
		width: 160px;
		padding: 1em;
}

nav a   {
		text-decoration: none;
		padding: 1em;
		display: block;
		text-align: center;
		font-weight: bold;
		border: 3px outset #CCCCCC;
		margin-bottom: 1em;}
		nav a:link { color: #3F2860; }
		nav a:visited{ color: #497777; }
		nav a:hover { color: #A26100;} 
		border: 3px inset #333333; 
}

nav ul { 
		list-style-type: none; 
		padding-left: 0;
}

main {
		margin-left: 170px;
		padding-top: 1em;
		padding-right: 2em;
}

.studio  {
		font-style: italic;
}

footer  {
		background-color:#9BC1C2;
        font-size: 0.60em;
        font-style: italic;
        text-align: center;
		padding: 1em;
		height: 50px;
		clear: both;
}

.clear { clear: both; 
}

.floatleft { float: left; margin-right: 4em;
}

#mobile{display: none;
}

#desktop{display: inline;
}

table { width: 60%;
      margin: auto;
	  margin-bottom: 1em;
      border: 1px solid #3F3860;
	  border-collapse: collapse; 
}

caption { font-weight: bold;
        font-size: 120%;
        margin: 1em;		
}

th, td {  border: 1px solid #3F3860; 
		padding: 5px; 
}

tr:nth-of-type(even) { background-color: #98C1C2; 
}

@media only screen and (max-width: 1024px){

body { 
		margin: 0; 
		padding: 0; 
}

#wrapper { 
			width: 100%; 
	        min-width: 0;
			margin: 0;
			padding: 0; 
}

header { padding-top: 1px;
}
	
h1 { 
	padding-top: 1em; 
	padding-left: 0.5em; 
}
	
nav { 
	float: none;
	width: auto; 
}
	
nav a { 
	 padding: 0.2em;
	 margin-left: 0.3em; 
	 float: left;
     width: 24%; 
}

main {
		padding: 0 0 0 2em;
	    margin: 0;
		font-size: 90%;
		clear: both;
}

#hero img { 
			width: 100%;
	        height: auto; 
}

h2, h3, p, dl { 
		padding-left: 2em; 
		padding-right: 2em;
}

main ul { margin-left: 2em;
} 

.floatleft {
	margin-left: 2em; 
	margin-bottom: 1em;
}

.clear { 
	padding-left: 2em; }
}

@media only all and (max-width: 768px) {
	
h1 { font-size: 2em;
	padding-top: 0.25em;
	padding-left: 1.5em;
	text-align: center;
	width: 85%;
}

nav a { padding: 0.5em;
	  width: 45%;
	  float: left;
	  min-width: 6em;
	  margin-left: 0.5em;
}

#hero { display: none; 
}

.floatleft { float: none; 
			display: none; 
}

footer { padding: 0.5em; 
	   margin: 0;
}

#mobile { display: inline; 
}

#desktop { display: none;}
}

Here is my HTML Code:

HTML

<!DOCTYPE html>


<html lang="en">

<head>
	<title>Path of Light Yoga Studio</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="jquery/pichide.js" type="text/javascript"></script>
	<!--[if lt IE 9]>
	<script src="//cdnjs.cloudflare.com/ajax/libs//html5shiv/3.7.3/html5shiv.min.js">
	</script>
	<![endif]-->
</head>
<body>
	<div id="wrapper">
	<header><h1>Path of Light Yoga Studio</h1></header>
		
			<a href="index.html">Home</a>
			<a href="Classes.html">Classes</a>
			<a href="Schedule.html">Schedule</a> 
			<a href="Contact.html">Contact</a> 
			<a href="Store.html">Store</a>
		
	
	
	<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
  
	<aside>
	   
	   </aside>
	</div>
		<h2>Find Your Inner Light</h2>
		<br>
			<div id="p">
				<span class="studio">Path of Life Yoga Studio</span> provides all levels of yoga pratice in a tranquil, peaceful environment. Whether you are new 
				to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. 
				Let your inner light shine at the <span class="studio">Path of Life Yoga Studio</span>.
			<p></p>
<br>
			<ul>
				<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
				<li>Drop-ins welcome</li>
				<li>Mats, blocks, and blankets provided</li>
				<li>Relax in our Serenity Lounge before or after your class</li>
			</ul>
<br>
<br>

<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
		<div class="clear">
		<br>
		<span class="studio">Path of Life Yoga Studio</span><br>
			612 Serentity Way<br>
			El Dorado, CA 96162<br>
			<br>
			<a id="mobile">888-555-5555</a><br>
			<span id="desktop">888-555-5555</span><br>
			<br>
			<br>
		</div>
	</div></div>

        Copyright © Path of Light Yoga<br>
        <a>khopkin5@my.westga.edu</a>

</div>
</body>
</html>

Here is my jQuery Code:

<pre lang="Javascript">    $( function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();
 
      // Most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 50 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
 
      // Run the effect
      $( "#effect" ).hide( selectedEffect, options, 1000, callback );
    };
 
    // Callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    };
 
    // Set effect from select menu value
    $( "#button" ).on( "click", function() {
      runEffect();
    });
  } );

What I have tried:

I have tried to use the position code in css.

Posted 18-Nov-16 6:54am

Computer Wiz99

Add a Solution

Comments

Suvendu Shekhar Giri 18-Nov-16 23:46pm

Is it possible for you to host the source in jsfiddle and share the link to us?

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)