seeraig
asked on
Hidden Div Creating Extra Line Break
I'm having an issue with a hidden div showing at the very end of a coldfusion loop. What I need is it to show right underneath each individual row. You can see what i'm talking about at the URL below (click on "Learn More" under any one of the 1st four fragrances, you will see that the hidden div shows underneath the Fleur D'Orange fragrance.
http://www.mefragrance.com/shop.cfm?collectionid=4
What I need is for it to show underneath the 1st row of 4 fragrances. I would also need this to show properly in mobile devices. So basically i'm looking for the hidden div to show underneath each individual fragrance, but occupy the full width of a row.
Right now I have the div after the full loop, so I understand why it shows it at the very bottom of all the products. But when I move it underneath or within the product loop, it creates a line break after each fragrance, thus creating a one column row.
Below is the code I've tried, which is basically putting the hidden layer underneath each div (ie under each fragrance), which is what i want. The problem is that instead of the row going 4 divs across, it puts a break after each div and you have just one column all the way down. You can see the result here:
http://www.mefragrance.com/shop_test.cfm?collectionid=4
Here is the code
http://www.mefragrance.com/shop.cfm?collectionid=4
What I need is for it to show underneath the 1st row of 4 fragrances. I would also need this to show properly in mobile devices. So basically i'm looking for the hidden div to show underneath each individual fragrance, but occupy the full width of a row.
Right now I have the div after the full loop, so I understand why it shows it at the very bottom of all the products. But when I move it underneath or within the product loop, it creates a line break after each fragrance, thus creating a one column row.
Below is the code I've tried, which is basically putting the hidden layer underneath each div (ie under each fragrance), which is what i want. The problem is that instead of the row going 4 divs across, it puts a break after each div and you have just one column all the way down. You can see the result here:
http://www.mefragrance.com/shop_test.cfm?collectionid=4
Here is the code
<style>
#menu_container{
width: auto;
height: auto;
padding-left:50px;
padding-top: 20px;
}
#menu_container div {display: none;}
</style>
<div style="display: inline-block; padding-left: 15px; ">
<div style="text-align: center; padding-top: 25px;">
<img src="graphics/premixed/jasmin_epice_noir_3.4.jpg" style="max-width: 250px; height: auto;">
</div>
<div style="text-align: center; padding-top: 5px; " class="how-it-works-grey">
Jasmin Épice Noir
</div>
<div style="text-align: center; padding-top: 15px; ">
<i class="fa fa-female fa-lg"></i><img src="graphics/sex_quotient_1.png"><i class="fa fa-male fa-lg"></i>
</div>
<div style="text-align: center; padding-top: 25px;">
<a class="greenbutton-42px-high" style="text-decoration:none; min-width: 150px; color: white; " href="shop.cfm?premixedid=4&fullcollection=1&collectionid=4">SHOP PRODUCTS <i class="icon-right-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
</div>
<div style="text-align: center; padding-top: 10px; padding-bottom: 0px;">
<a id="show_4" class="whitebutton-42px-high" style="text-decoration:none; min-width: 150px; " href="javascript:void(0)">LEARN MORE <i class="icon-down-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
</div>
</div>
<!-- Hidden Layer -->
<div id="menu_container">
<div id="menu_4" style="padding-top: 10px; padding-bottom:20px;">
<p class="how-it-works-grey"><u>Jasmin Épice Noir</u></p>
<p style="line-height: 18px; padding-top: 0px;">An irresistible fragrance that is mysterious and intensely voluptuous. A spiced floral fragrance with a precious blend of jasmine grandiflorum absolute and rich spices. A combination of spices such as black pepper & ginger root give this fragrance a spicy mix. Includes accents of almond oil & clary sage essential oil. The fragrance is then rounded out with vanilla essential oil to let the heart notes come through and give it a rich subtle sweet scent.</p>
</div>
</div>
<!-- End Hidden Layer -->
<script>
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide( "slow" );
$("#menu_container #menu_"+id[1]).show( "slow" );
});
});
</script>
ASKER
Hi Justin,
Why is it not possible to have a hidden div beneath each fragrance div (a hidden div that occupies the full width of the row).
I'm not sure how to accomplish it as I'm not that experienced, but it doesn't seem like it should be that complicated or unattainable.
Why is it not possible to have a hidden div beneath each fragrance div (a hidden div that occupies the full width of the row).
I'm not sure how to accomplish it as I'm not that experienced, but it doesn't seem like it should be that complicated or unattainable.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you Justin for taking the time to work through this.
You are welcome.
JulianH
JulianH
You have a div with id="menu-container" that contains the hidden layer - there is part of your problem - you are trying to put your hidden layers inside a container that has a unique ID and that is itself not hidden. Look at this style
#menu_container div {display: none;}
This is hiding the div's inside menu-container itself - and not the actual menu container.
It makes sense if you put this at the end of the loop as there can only be one div with an id of menu-container and the hide / show code you have would then work.
Here is where it gets complicated - you want the layer to be below the row that the corresponding item is in - that is fine - except when you go to mobile - as the columns collapse they are going to have to be re-configured so that the hidden div stays below its owner - and not below its group.
Consider this
Open in new window
No problem. When this collapsesOpen in new window
As you can see from the above when collapsing to mobile you have to change your layout in order to keep the hidden layer showing below its parent. You could do this by including the hidden layer in the cell but then it won't expand to fill the entire row.To solve this you have two options
1. Change your requirement - so instead of having a hidden div have a popup or redirect to another page
2. Use a javascript solution to re-position the div's to conform to the device it is running on. You could potentially look at Isotope - it might have the functionality to do what you want.