http://clifgriffin.com/blockade2/
Ok, I have an unordered list that serves as a list of menu links. In each li there is a div that is set to absolute positioning, bottom: 0. The idea is you hover over the link in the li and jQuery animates the height to show the hidden menu div.
It's a simple concept, but I am apparently confused.
The issue I'm having is that the div that contains the slide down menu doesn't take up any dimensions (according to Firefox and Chrome's calculated style information) when I put it in the li. If I put it anywhere else on the page it renders PERFECTLY. You can see what I mean from the link. The gray menu looking thing at the top is how it is supposed to render inside the li but doesn't.
<div class="ram">
<div class="gray_middle">
<ul>
<li>Guest Services</li>
<li>Concierge / Local Attractions</li>
<li>East Restaurant</li>
<li>Aquarium Lounge</li>
<li>Health Club</li>
<li>Sandcampers Program</li>
<li>Treasure Chest Gift Shop</li>
</ul>
</div>
<div class="gray_bottom">
<img src="images/top_menu_slidedown_gray_bottom.png" />
</div>
There is a bit of javascript going on that is supposed to find the height of the menu div and set the id of the containing li equal to the height so that it can be referenced later. Doesn't matter...the point is, when the div is in the li, its computed height is 0. When it is outside, it's correct.
Any ideas?
This is driving me absolutely batty. I have never had this many issues with something so simple.
Thanks in advance,
Clif
P.S. I added some HTML comments to the destination so that you can better see what I mean.
Absolutely positioned elements are "outside" of a container and can't really determine its size.
Relatively positioned elements impact container size (and content flow) but then they move elsewhere.
Also, for absolutely and relatively positioned elements, you should always give an explicit X,Y position. This avoids some rendering differences, cross browser.
Anyway, I made the following CSS changes and that submenu seemed to render OK on FF 3.6.4:
For <li id="49"> add: height: 230px; overflow: hidden; .
For div.subMenu add: top: 17px; and delete: bottom:0; .
For gray_middle add: height:160px; top:0; and delete: padding-top:20px; .
When you absolutely position an element, it won't expand the size of it's container to the size required to accommodate it.
EXAMPLE
HTML
<div id="outer"><div id="inner">In</div>Out</div>
CSS
#outer {
background-color: red;
}
#inner {
width: 100px;
position: absolute;
top: 100px;
background-color: blue;
}
See it live here - http://www.jsfiddle.net/r7MgY/86/
Hi clifgriffin Had a quick look at you HTML, shame you didn't give us the CSS aswell, but ... there are a few things I'm not sure on - the header says generator WordPress 2.9.2 but the html does look like "familiar" WordPress. If it is WordPress generated then check the wp_list_pages & wp_list_categories tags you are using. Also I serously recommend an upgrade to WP3.0 as it has MUCH more functionality (custome post/page types etc) plus a "built" in menu function.
I think you may be using too much CSS. Most of what you want to acheive can be done with a lot less.
Guest Services
Concierge / Local Attractions
East Restaurant
Aquarium Lounge
Health Club
Sandcampers Program
Treasure Chest Gift Shop
You can then give the ul an ID (remember ID's need to be unique) this will help with any Java you want to use also add to your ram class with a background image class images/top_menu_slidedown_gray_bottom.png. As you use the ram class again without the image. e.g. <div class="ram backgroundimageclass"> You are then saving a lot of "code" and download times etc.
If you give the ram class the attribute "position: relative;" you can then give the UL id the attribute "position: absolute;" the li's can be styled such as
ul#ID li {line-height 30px; etc ...)
ul#ID li:hover {line-height 30px; etc ...)
ul#ID li:hover a {line-height 30px; etc ...)
and so on.
Ohh forgot ... also why not add this code in the head
<meta http-equiv="X-UA-Compatible" content="chrome=1">
And this just after the tag
<!-- DO NOT REMOVE -->
<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->
<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>
<script type="text/javascript">
CFInstall.check({
mode: "inline", // the default
node: "prompt"
});
</script>
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->
This allows "detection" of the browser and gives them the option (if not installed) to use Google Chrome Frame, you can:
Start using open web technologies - like the HTML5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8.
Take advantage of JavaScript performance improvements to make your apps faster and more responsive. Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages like above and detect whether your users have installed Google Chrome Frame.
If Google Chrome Frame is not installed, you can direct your users to an installation page.
If Google Chrome Frame is installed, it detects the tag you added and works automatically.
Cliff Just "totally" realised what you are trying to do here - sorry took so long to "twig"
OK you can do this with much more ease than you are trying to do at the moment. All it needs is a little JQuery and some basic CSS. No need to positions absolute etc.
In your CSS use { display: none; } for the class="subMenu" as you know this will "hide" it, I might also be tempted to do the same in your JQuery functions to be "doubly sure". Then in the JQuery create a mouseover effect (mouse over "better" than hover) for the class top_menu_links (I think you could take out the classes "aco" and "white_middle" or at least combine them in the css for the relevant ul) to show the .next('ul); you can slide it etc. Then a mouseout function on the ul. That way the ul stays visable until a mouse out event. I have done this quite successfully on a WP theme to display a "dynamic" list of categories on a mouse over event on a div made to look like a button. Sorry don't have the code to hand but will look later and "pass it over"
In addition you can set the ul background image as the approp. <img src="images/top_menu_slidedown_white_bottom.png" /> (or grey) just by setting it to background position: bottom repeat: none; and a bottom padding the height of the image. No need for alt tags etc.
Sorry been "out for a bit" anyhow here is a code I have used to "recreate" your bottom menu. It doesn't do as you suggest it closes after either a mouseout of the "menu item" or the "submenu". To get it to work on the top menu, just change the position from bottom to top:
$(document).ready(function() {
$('.indexMenu').mouseover(function(){
$(this).children().show();
$(this).children().mouseover(function(){
$(this).children().show();
});
});
$('.indexMenu').mouseout(function(){
$('.sub_menu').hide();
});
});
Here is the "html"
<div class="indexMenu">
Menu 1
<div class="sub_menu">
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 2
<div class="sub_menu">
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
<div class="sub_menu">
Menu 3
<br />
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 4
<div class="sub_menu">
Item
</div>
</div>
Obviously you can "use" any thing in submenu a ul,ol, etc...
And the "simple CSS
.indexMenu {
position: relative;
bottom: 3px;
width: 240px;
height: 32px;
float: left;
line-height: 30px;
border-top: 2px solid #FFFFFF;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
font-weight: 900;
color:#333333;
}
.sub_menu {
display: none;
position: absolute;
bottom: 33px;
width: 240px;
background-color:#DBF3FD;
opacity:0.8;
filter: alpha(opacity=80);
}
OK I've added a filter in the submenu to have a certain transparency
Gentleman,
Thanks for all of your responses! I'm sorry it took me so long to get back to this post.
This whole issue has revealed a few things I don't yet understand about the way HTML elements are rendered.
I was able to solve this problem by switching the main menu blocks to div elements instead of li elements.
This makes no sense to me in that both are rendered approximately the same way as far as I can tell from looking through the computed styles. But, for whatever reason, once the container is a div the contained divs rendered with their proper dimensions which allowed the rest of my code to work properly. I didn't even have to change the attached CSS!
As the main goal of this project was to finish and make the customer happy, I didn't experiment beyond this finding.
I welcome theories on why this would be.
Thanks again.
Clif
Related
I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.
I have been researching this for a long time and this topic seems to be very underrepresented in the coding world. I am using the Jquery Layout UI in my application,
http://layout.jquery-dev.com/
And we only have South and Center panes. I want to be able to "undock" the South pane similar to how devtools can undock from the bottom of the browser and become its own window. i.e.
I tried inspecting devTools to see if I could get any hints from the available code there but wasn't able to find anything useful. Does anyone have ideas on how this could be achieved, or if there are code examples anywhere online that I may have somehow missed? Again, my application is using the jquery layout UI with the South region being the one i want to be able to "undock" and dock back.
There is no way to simply "undock" it. You would have to create a separate page that displays what you want to undock.
You would then create a button that (with Javascript) first removes the bottom portion of your page and then opens a popup with the part you just removed (the separate page).
It's not too hard to create but keep in mind that popup blockers could block it. The Devtools are part of the browser so they aren't affected by a popup blocker.
Here's a working jsFiddle: https://jsfiddle.net/Loveu79d/
$("#popout").click(function() {
$(".bottom").hide(); // You could also use jquery to remove the div from the DOM
$(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});
html,
body {
height: 100%;
}
.top {
border-bottom: 1px solid #000;
}
.top, .bottom {
height: 49%;
}
.fillpage {
height: 100%;
}
.bottom {
color: #FFF;
background: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<h1>Top part</h1>
<button id="popout">Open popup</button>
</div>
<div class="bottom">
<h1>Bottom part</h1>
</div>
In this case we have the red bottom div with "Bottom part" in it. You would have to create a separate page that has only that content in it, for example "bottom.html". Then you take my code and put that page in the Javascript part where it says "http://www.google.com".
If the bottom part of your page contains content that has been edited client side you would have to use cookies or a database to store those modifications and then load them in the bottom.html page.
I've build a quiz. Each question has 2 answers. When the visitor answers a question, the next one is loaded using Ajax. Before the questions are loaded the visitor has to click a start button first, so the HTML for the questions isn't included in the initial page load.
The problem is when a question is anwsered, the hover effect from the previous question is still active when the next one is loaded.
For example: I anwser question 1 with "B" > question 2 is loaded > the hover effect is active on button B for question 2
I've included an image to make this more clear.
I only have this on mobile devices (iPhone, iPad,...) but not on my laptop.
I've done some research if I can alter the hover pseudo class, but apparently this isn't possible using javascript.
I think the problem is that the HTML is the same for each question, so the hover state stays active for the css class when the first question is answsered.
I can't supply a jsfiddle because the questions are entered as a content type in Drupal, and I can't include the entire Drupal in a fiddle. But here is the HTML and CSS.
<div class="quiz_st_content form-wrapper" id="ajax_form_multistep_form_content">
<div class="quiz_st_content_answer form-wrapper" id="edit-a--2">
<div class="quiz_st_content_answer_info_wrapper">Option A</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-a-2" name="answer_a_2">
</div>
</div>
<div class="quiz_st_content_answer form-wrapper" id="edit-b--2">
<div class="quiz_st_content_answer_info_wrapper">Option B</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-b-2" name="answer_b_2">
</div>
</div>
</div>
CSS
input.form-submit.quiz_st_content_answer_button {
margin: 0;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height: 30px;
width: 30px;
padding: 20px;
background: #ccc;
}
Hover
input.form-submit.quiz_st_content_answer_button:hover {
background: #ba043f;
}
As mentioned above, this only happens on mobile devices. I've been bashing my head at this for hours now and I'm clueless on how to resolve this.
If anyone could help me, or point me in the right direction it would be greatly appreciated.
When I was working with mobile devices I added
ontouchstart=""
to the body tag like so:
<body ontouchstart="">
This made the hover pseudo selectors not act so awkwardly for me, it may be worth a shot.
I was able to fix this. Well,..its not really a fix because the hover state is still active, but I overwrite the color with the default color on touch devices, like so:
$('.quiz_st_form,').bind('touchstart', function(){
$('body').addClass('touchdevice');
});
So when someone "clicks" on the quiz start button on a mobile device, my body gets the class touchdevice and I "remove" the hover with CSS, like so:
body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
background: #ccc;
}
Technically the :hover state is still active, its just not visible anymore.
I don't really see a better way on fixing this at the moment. If someone does, please let me know.
so using ExpressionEngine, I can generate a lot of webpages using the same template with different content. My problem is that I can't get the footer to appear where I want it to appear: at the bottom of the background image for each separate webpage.
For example, say that one of my pages is about dogs and the other is about cats. I love dogs so I write two paragraphs about dogs while only writing one paragraph about cats. I would like for both the background image to grow and the footer to be relatively positioned at the bottom of the background image. I have tried messing with both relative and absolute positioning in css, but the minute that I get it right for the "dog" page, it screws up the format for the "cat" page. I have also tried to adjust the height of the background image.
Am I missing something? Maybe there is an easier way to position an object relative to another object in css that I am not aware of? Thanks in advance.
As I previously mentioned, this does NOT achieve the result that I would like:
#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}
#belowTitle {
position: relative;
bottom: 25px;
}
#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
}
#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
}
These are both nested within a div id="wrapper" which I never reference in my css. The landing details is what changes per entry. Also, the landing_footer div is kept within the landing_details div.
UPDATE:
So the part that I highlighted in red represents the space that I would like to be eliminated from the page.
UPDATE: The basic html layout is as follows
{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}
<div id="wrapper">
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
<div id="landing_details">
<h3 class="LandingHeader"> {landing_page_header} </h3>
<div id="belowTitle">
<h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
<div id="landingBodyCopy">
<div class="landingBodyCopyText"> {landing_body_copy} </div>
</div>
<div id="landing_footer">
{embed="embed/footer"}
</div> <!-- End of landing footer>
</div> <!--- End of below title-->
</div> <!-- End of the landing details -->
</div> <!-- END div wrapper -->
{/exp:channel:entries}
Thanks again and any help on this matter would be greatly appreciated.
If you do not absolutely position your footer, its default position value will be static, which means that it will naturally appear below ("at the bottom of", like you asked for) any statically or relatively positioned preceding elements, however many there may be, and however big they are.
As for the background image growing according to content length, any div whose height is not explicitly set will expand according to the size of its content. Therefore your two-paragraph content div about dogs will be larger than the one-paragraph page about cats. If there is a background image on the content div, the div will act as a window displaying a portion of the background depending on its size. More content -> bigger content div -> more of the background image displayed. This is possibly not what you mean by having the background image "grow", but it does effectively grow.
If you'd like to perform some kind of dynamic scaling on the bg image, you should be more specific about how you want that to work, since I'd only be guessing at your intent. As well, it would help people answer you if you can provide a barebones version of your rendered pages using jsFiddle or jsbin. Isolate the part of the layout that you want help with and mock it up.
If you look at the video here: http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov - you will see the problem in action. Basically, I have something along the following:
<section id="sidenav">
<h1>TEXT HERE</h1>
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div id="tab"></div>
</section>
Sidenav is absolutely positioned, like this:
#sidenav {
position: absolute;
top: 200px;
left: 0px;
width: 770px;
padding: 30px 0px 20px;
background: rgba(255, 255, 255, 0.85);
-webkit-transition: left 0.75s ease-in-out;
-webkit-backface-visibility: hidden;
z-index: 10; /* This fixed it. */
}
#sidenav.hidden {
left: -768px;
}
I have the following jQuery:
$("#tab").click(function(){
$("#sidenav").toggleClass("hidden");
});
However, the elements inside of the section aren't keeping up with the animation. Whenever I click, they either lag behind or don't move at all. However, they are just ghosts, I can't click them. When I bring the side nav back out, they usually catch up, but sometimes they are broken until I hover over the <li>'s.
Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine.
Thanks!
Andrew
EDIT WITH FIX:
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
I would prefer to post this as a comment, but since I'm a newbie here, my only option is posting this as an answer. In the video example you posted the hover over the list elements allowed for the display of the arrows, but they did not go away on mouse out. If you are trying to do this purely with css and not have the latent images, you should use hover.
That is detailed in this post:
Using only CSS, show div on hover over <a>
That way, if you hide the arrows as the mouse leaves the list element, there will not be any arrow to stay behind when the list slides off the page to the left.
Sometimes this works: make the parent position:relative its like webkit's version of the old ie haslayout bug.
from the markup you have given it looks like the class"hidden" will also take your 'nav' div with it (it is inside sidenav ) - I imagine that would cause some quirky
As a rule of thumb
markup the content
style up
add the interactions ( click events and behaviours )
THEN add your final interaction candy ( easing etc )
( doing this you should identify which part is causing the problem in the ui )
Fixed it by removing the z-index style from the parent and giving a z-index higher than 0 to the fixed element.
Hope this works with others.