jQuery / CSS / HTML Stacking Order

[Matt Clarke]

Edit:

Problem is now fixed, credits to EliteGM for the solution and the debugging Thank you to those who attempted to fix my as well I do appreciate it!

Hi there, I'm building a website for a driving school and basically I've got these tabs where when you click them, a new panel slides down underneith it using jQuery.

The problem is, when I click the "Booking" tab the page slides down, of which i want it to do, but on the other two tabs, the page doesn't slide down and just overlaps the content of the page.

Pictures to describe:

Screenshot by Lightshot - As you can see, the two tabs overlap

Screenshot by Lightshot - In this one, the booking moves the page down.

What do i want?

I want the two tabs (Feed & Contact) to act the same way as the booking and move the page down when they are expanded.

JSFiddle
http://jsfiddle.net/tgvbE/

Code

HTML

    <div class="mainFastOption">
    	<div class="mainFastOptionBook">
        	<div class="mainFastOptionBookTitle" onclick="bookingToggle()">Book Lessons Now</div>
        	<div class="mainFastOptionBookPanel">
            	<input type="text" placeholder="First Name" /><br />
            	<input type="text" placeholder="Last Name" /><br />
            	<input type="number" placeholder="Phone Number" /><br />
            	<input type="email" placeholder="E-Mail Address" /><br />
                <button>Send Inquiry</button>
            </div>
        </div>
    	<div class="mainFastOptionFeed">
        	<div class="mainFastOptionFeedTitle" onclick="feedToggle()">View Our Feed</div>
        	<div class="mainFastOptionFeedPanel">
				<p>Loading Social Feeds...</p>
            </div>
        </div>
    	<div class="mainFastOptionContact">
        	<div class="mainFastOptionContactTitle" onclick="contactToggle()">Got a Question?</div>
        	<div class="mainFastOptionContactPanel">
				<p>Loading Contact Page...</p>
            </div>
        </div>
        <div class="clear"></div>
    </div>

CSS

.mainFastOption {
	height: auto;
	margin-bottom: 15px;
	text-shadow: 0px 1px 2px #000;
	clear: both;
	float: none;
}
.mainFastOptionBook {
	width: 310px;
	float: left;
	margin-right: 10px;
}
.mainFastOptionBookTitle {
	height: 70px;
	line-height: 70px;
	text-align: center; /* Old browsers */
	color: #FFF;
	box-shadow: 0px 0px 3px 0px #000;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	border-radius: 5px;
}
.mainFastOptionBookTitle:hover {
	cursor: pointer;
}
.mainFastOptionBookPanel {
	text-align: center;
	display: none;
	background-color: #FFF;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	box-shadow: 0px 0px 3px 0px #000;
	border-radius: 5px;
}
.mainFastOptionBookPanel email, input {
	width: 90%;
	border: solid 1px #ccc;
	padding: 3px;
	margin: 5px 0px;
}
.mainFastOptionFeed {
	float: left;
	width: 310px;
	margin-right: 8px;
	margin-left: 5px;
	height: 70px;
}
.mainFastOptionFeedTitle {
	line-height: 70px;
	text-align: center;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
	background-color:#3d94f6;
	color: #FFF;
	box-shadow: 0px 0px 3px 0px #000;
	text-decoration: none;
	border-radius: 5px;
}
.mainFastOptionFeedTitle:hover {
	cursor: pointer;
}
.mainFastOptionFeedPanel {
	text-align: center;
	display: none;
	background-color: #FFF;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	box-shadow: 0px 0px 3px 0px #000;
	border-radius: 5px;
}
.mainFastOptionContact {
	float: right;
	width: 310px;
	margin-left: 3px;
	height: 70px;
}
.mainFastOptionContactTitle {
	line-height: 70px;
	text-align: center;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background-color:#89c403;
	color: #FFF;
	box-shadow: 0px 0px 3px 0px #000;
	text-decoration: none;
	border-radius: 5px;
}
.mainFastOptionContactTitle:hover {
	cursor:pointer;
}
.mainFastOptionContactPanel {
	text-align: center;
	display: none;
	background-color: #FFF;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	box-shadow: 0px 0px 3px 0px #000;
	border-radius: 5px;
}

jQuery

function bookingToggle() {
	$(".mainFastOptionBookPanel").slideToggle("slow");
}
function feedToggle() {
	$(".mainFastOptionFeedPanel").slideToggle("slow");
};
function contactToggle() {
	$(".mainFastOptionContactPanel").slideToggle("slow");
};

The Specific problem online
http://jsfiddle.net/tgvbE/

Any help would be much appreciated.

Many thanks,

Matt Clarke

 

[Parker]

If you add float:none; to the .mainFastOptionFeedPanel and .mainFastOptionContactPanel does it still happen?

or is it clear:both;? Sorry forgot which one it is.

 

[Dave]

If you add float:none; to the .mainFastOptionFeedPanel and .mainFastOptionContactPanel does it still happen?

or is it clear:both;? Sorry forgot which one it is.

clear:both; should do the trick in most cases.

 

[Komakech]

Food for thought more than fixing your issue (I haven't even looked into the issue just spotted the CSS naming)

Start optimising your css to be less... Silly.

"mainFastOptionFeedPanel" is a really long and annoying name for any CSS, it might explain what it is and what it does but it's really not nice to look at or work with.

I'd suggest going for something like "feedPanel", if all the styling is the same for that type then don't have separate names. Also for your javascript STOP USING onclick WITHIN the html.

If you are going to use it with the onclick="*Toggle()" then at least make it like this:

HTML:

<a href="#" o[COLOR=#000000]nclick="toggle()">Blah</a>[/COLOR]

Javascript:

function toggle( event ) {
    event.preventDefault(); // This stops the url having a # at the end of it
    $( this ).slideToggle("slow");
}

Now every button with the toggle function set to it will toggle.

If you set all those toggle buttons to have the same class i.e. isToggle

Javascript:

$( '.isToggle' ).on({
    click : function( event ) {
        event.preventDefault(); // This stops the url having a # at the end of it
        $( this ).slideToggle( 'slow' );
    }
});

Now anything with the 'isToggle' class will slide down on click.

All the best,
Richard Komakech.

 

[Matt Clarke]

Food for thought more than fixing your issue (I haven't even looked into the issue just spotted the CSS naming)

Start optimising your css to be less... Silly.

"mainFastOptionFeedPanel" is a really long and annoying name for any CSS, it might explain what it is and what it does but it's really not nice to look at or work with.

I'd suggest going for something like "feedPanel", if all the styling is the same for that type then don't have separate names. Also for your javascript STOP USING onclick WITHIN the html.

If you are going to use it with the onclick="*Toggle()" then at least make it like this:

HTML:

<a href="#" o[COLOR=#000000]nclick="toggle()">Blah</a>[/COLOR]

Javascript:

function toggle( event ) {
    event.preventDefault(); // This stops the url having a # at the end of it
    $( this ).slideToggle("slow");
}

Now every button with the toggle function set to it will toggle.

If you set all those toggle buttons to have the same class i.e. isToggle

Javascript:

$( '.isToggle' ).on({
    click : function( event ) {
        event.preventDefault(); // This stops the url having a # at the end of it
        $( this ).slideToggle( 'slow' );
    }
});

Now anything with the 'isToggle' class will slide down on click.

All the best,
Richard Komakech.

Thanks for your input, Richard, although it didn't fix my error, I'll take what you said into consideration.

Problem is still occurring, I've added a clear:both on it and it's still giving me the same error, it was the first thing I did when I actually discovered the problem.

Any other help is much appreciated.

 

[EliteGM]

Does moving your <div class="clear"> to this:

    	<div class="mainFastOptionContact">
        	<div class="mainFastOptionContactTitle" onclick="contactToggle()">Got a Question?</div>
        	<div class="mainFastOptionContactPanel">
				<p>Loading Contact Page...</p>
            </div>
        </div>
    </div>
    <div class="clear"></div>

Do anything?

 

[Matt Clarke]

Does moving your <div class="clear"> to this:

    	<div class="mainFastOptionContact">
        	<div class="mainFastOptionContactTitle" onclick="contactToggle()">Got a Question?</div>
        	<div class="mainFastOptionContactPanel">
				<p>Loading Contact Page...</p>
            </div>
        </div>
    </div>
    <div class="clear"></div>

Do anything?

Nothing if I remove it, it makes the tabs go to the main content, as it would usually with HTML.

 

[BlueOwner]

If you're trying to do a clear, I would suggest to do it like this:

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

Although if you code properly it would not require a clear-fix.

 

[Matt Clarke]

If you're trying to do a clear, I would suggest to do it like this:

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

Although if you code properly it would not require a clear-fix.

The specified code didn't make any changes to my error, and could you please show me the proper way of how to code this rather than using a Clear Fix. I am presuming you're going to say something like use positioning techniques or something.

My problem still remains, if someone could assist me, it'd be great, many thanks!

 

[bramdebouvere]

I don't see a clear class in your css?

 

[Matt Clarke]

I don't see a clear class in your css?

I only copied the elements of which are included in my error, I have a clear class at the top of my CSS file.

 

[Parker]

Maybe post the whole thing & that way it'll be easier for a user to test out & fix it.

 

[Matt Clarke]

Maybe post the whole thing & that way it'll be easier for a user to test out & fix it.

There is no need for me to post the whole thing, this is the specific part of my error.

 

[EliteGM]

CSS - Clearing floats

 

[Matt Clarke]

CSS - Clearing floats

Attempted this, gave me the following results:

Screenshot by Lightshot
Screenshot by Lightshot

Thanks for the help though.

Error is still occuring, if anyone has a solution or an idea as to how I can fix this, please let me know.

Many thanks,

Matt

 

[שเ๒єtгเ๒є]

Basically when taking space by columns you should take care all columns that are floated left are inside a div before the content div. At the end of your columns you should insert a cleared div. That's the trick. A short example:

<div id="nav">
  <div id="col1" style="float: left; width: 100px;">Test 1</div>
  <div id="col2" style="float: left; width: 100px;">Test 2</div>
  <div id="col3" style="float: left; width: 100px;">Test 3</div>
  <div id="clearDiv" style="clear: both;">Test 1</div>
</div>
<div id="content">Content</div>

By forgetting the "clearDiv" you will get the effect you had before, overlapping the content with the floated columns.
See, your "nav" div stays 0px height when adding floated column divs to the top left corner of "nav", they are just stick in front of your view. However, when adding the "clearDiv" you add a div below the left-floated divs without being sticked in front of your view, so the cleared div will be a view-part of "nav" that will force "nav" to increase the height to get enough space for "clearDiv" and tada ... the "content"-div will go down. I hope this helped anyway.

About your new problem:
Imagine in the example I gave above my "nav"-div would have only 250px width? What will happen with three 100px-width column child divs? Yes, they will cry due too less space. To be more exact the last column child div will be word wrapped to the next line (as you can see in your screenshot).
As first I suggest you to float all your childs to the left.
As second I suggest you to take care of your available width and make sure you do not take too much on your childs:

Your parents content area (width) must not be smaller than all your childs complete size (margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)

Maybe post the whole thing & that way it'll be easier for a user to test out & fix it.

Oh well, I like specific questions, we are not here to fix whole problems, we are?
I would never read a source that is longer than 15-20 lines, I do not like problem dumps, the screenshot is a way better. Matt should solve his problem on his way by understanding and finding the solution in own effort. This way it will stay in his head a pretty neat way. :3

 

[bramdebouvere]

Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.

Also, don't use
filterrogidXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
It's buggy as ****.

 

[Matt Clarke]

Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.

Also, don't use
filterrogidXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
It's buggy as ****.

Like I said previously, there is no need for me to do that. I've posted the necessary parts of which is causing my error, the container and the content inside the container. Don't mean to be offensive, but if you're good at what you know, you'd understand what the displayed code does and possibly how it can be fixed. - Again, did not mean that to be offensive.

Basically when taking space by columns you should take care all columns that are floated left are inside a div before the content div. At the end of your columns you should insert a cleared div. That's the trick. A short example:

<div id="nav">
  <div id="col1" style="float: left; width: 100px;">Test 1</div>
  <div id="col2" style="float: left; width: 100px;">Test 2</div>
  <div id="col3" style="float: left; width: 100px;">Test 3</div>
  <div id="clearDiv" style="clear: both;">Test 1</div>
</div>
<div id="content">Content</div>

By forgetting the "clearDiv" you will get the effect you had before, overlapping the content with the floated columns.
See, your "nav" div stays 0px height when adding floated column divs to the top left corner of "nav", they are just stick in front of your view. However, when adding the "clearDiv" you add a div below the left-floated divs without being sticked in front of your view, so the cleared div will be a view-part of "nav" that will force "nav" to increase the height to get enough space for "clearDiv" and tada ... the "content"-div will go down. I hope this helped anyway.

About your new problem:
Imagine in the example I gave above my "nav"-div would have only 250px width? What will happen with three 100px-width column child divs? Yes, they will cry due too less space. To be more exact the last column child div will be word wrapped to the next line (as you can see in your screenshot).
As first I suggest you to float all your childs to the left.
As second I suggest you to take care of your available width and make sure you do not take too much on your childs:

Your parents content area (width) must not be smaller than all your childs complete size (margin-left + border-left + padding-left + width + padding-right + border-right + margin-right)

Oh well, I like specific questions, we are not here to fix whole problems, we are?
I would never read a source that is longer than 15-20 lines, I do not like problem dumps, the screenshot is a way better. Matt should solve his problem on his way by understanding and finding the solution in own effort. This way it will stay in his head a pretty neat way. :3

Hi, thanks for your input to the problem, I have tried your solution but yet still have a problem with it. I've floated all my divs to the left and have made my clear the same as you would usually but it doesn't seem to want to work. If you have any other solution it'd be greatly admired.

Many thanks,

Matt

 

[Mucski]

There is auto clear too. You have to apply it to the PARENT in which you floated the div. And it goes like this

.parentdiv {
overflow:hidden;
zoom:1;
}

I have cleared up some of your dirty coding , also I suggest using 960's grid system since your positioning sucks , this still does not solve the problem through. I am trying hard , but I have no idea what causing it. First i thought its because the p element is inline , but that's not the case. If I come up with something Ill tell you.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <link href="styles.css" rel="stylesheet">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div class="theWrapper container_12"> <!-- container_12 , grid_4 are part of 960 grid -->
        <div class="mainButtons greenGradient grid_4">
            <div class="theTitles trigger">Book Lessons Now</div>
            <div class="toggle">
                <input type="text" placeholder="First Name" /><br />
                <input type="text" placeholder="Last Name" /><br />
                <input type="number" placeholder="Phone Number" /><br />
                <input type="email" placeholder="E-Mail Address" /><br />
                <button>Send Inquiry</button>
            </div>
        </div>
        <div class="mainButtons redGradient grid_4">
            <div class="theTitles trigger">View Our Feed</div>
            <div class="toggle">
                <div><p>Loading Social Feeds...</p></div>
            </div>
        </div>
        <div class="mainButtons blueGradient grid_4">
            <div class="theTitles trigger">Got a Question?</div>
            <div class="toggle">
                <p>Loading Contact Page...</p>
            </div>
        </div>

        <script>
            $(".toggle").slideUp();
            $(".trigger").click(function(){
                $(this).next(".toggle").slideToggle("slow");
              });
        </script>
    </div>
    <div class="container_12">
        <div class="somecontent grid_12"></div>
    </div>
</body>
</html>

@import url('960.css'); /* get it from 960.gs */
.theWrapper {
    margin-bottom: 15px;
    text-shadow: 0px 1px 2px #000;
}
.mainButtons { width: 300px; height: 70px; }
.theTitles {
    height: 70px;
    line-height: 70px;
    text-align: center; /* Old browsers */
    color: #FFF;
    box-shadow: 0px 0px 3px 0px #000;
    border-radius: 5px;
}
.redGradient {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
}
.greenGradient {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
    background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background-color:#3d94f6;
}
.blueGradient {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
    background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
    background-color:#89c403;
}
.theTitles:hover {
    cursor: pointer;
}
.toggle {
    text-align: center;
    display: none;
    background-color: #FFF;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 0px 0px 3px 0px #000;
    border-radius: 5px;
}
.theTitles input {
    width: 90%;
    border: solid 1px #ccc;
    padding: 3px;
    margin: 5px 0px;
}
.somecontent { height:50px; background:#ccc; }
.clear { clear:both; }

You don't need to manully style the same div over and over just to toggle it , when you can create one div , and toggle it with any button yet still have different content in it , like so

        <script>
            $(".toggle").slideUp();
            $(".trigger").click(function(){
                $(this).next(".toggle").slideToggle("slow");
              });
        </script>

 

[Smilification]

Just put it online somewhere, makes it way easier to fix than when you just post half of your code here.

Like I said previously, there is no need for me to do that. I've posted the necessary parts of which is causing my error, the container and the content inside the container. Don't mean to be offensive, but if you're good at what you know, you'd understand what the displayed code does and possibly how it can be fixed. - Again, did not mean that to be offensive.

If you did it would allow people to test the code properly. Just saying