I have a Drupal website loaded with AJAX. Every time I edit my title, AJAX is checking whether or not I've actually changed it. But every time the AJAX starts checking, my whole lay-out is jumping around...
BEFORE
AFTER
I tried to edit the .ajax-threbber-css class with position absolute, relative and fixed, but no result. Every time the throbber reacts differently. A z-index of 99999999999 doesn't work either... Is there a way to float this ajax-throbber-div to the absolute top without influencing any other items?
You would first need to check its current CSS properties, it could be that you are having them overwritten by something else.
Firebug or Google Chrome developer tools would help. Setting the position to absolute, should do it for you, its just CSS gets murky if you don't consider other pieces of the puzzle acting upon your object that you are trying to style.
Related
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I'm learning css and decided to understand something in Facebook: the minifeed on the right, allows scrolling without using frames. How does it work?
I suspect I may know the answer by now, but I can't find a definite proof. It's a smaller fixed element, containing a larger element. Then the relative position of the inner larger element relative to the outer smaller one, is being changed by js in response to mouse events. All this is ok. Now the problem:
I can't find where this relative position is defined. I'm using Chromes "inspect element" and trying to spot the place where this positioning is defined, and thus probably changed by js.
I found that :
<div class="tickerActivityStories" ...
is the inner large element, and that:
<div class="uiScrollableAreaWrap ...
is the first ancestor that is smaller, and thus limiting it to a "virtual frame".
But I cannot find where the position of the first relative to the last, is set. I'm going through the styles and the computed styles that chrome shows me, and can't see any relevant positioning directive. The following types of help will be appreciated:
A specific answer to this specific matter by somebody who opened facebook and checked.
A guidance about what I may have been doing wrong to find the answer, and how could I do it better
It has nothing to do with relative positioning. The script checks the scrollTop position of the container against the height of the container. When it reaches a certain value, it triggers an AJAX call to fetch more stuff. When the stuff returns, the script places it in the DOM below the last items in the current container and updates the pagination value so the next fetch will be intuitive. When more stuff is added to the DOM, the scrollbar automatically adjusts itself.
this is a repo that i recenlty found, This may help you
http://jamesflorentino.github.com/nanoScrollerJS/
also there are other like "lionbars" or something, i cannot remember
I feel like the problem is extremely apparent. I'm working on an issue with a client's site, which actually happens on several of my clients' sites but this one is the most apparent. IE7 Is refusing to obey z-index rules. I've played around with differing values, particularly on the divs #mapWrapper and #map. Take a look here: http://thepaysongroup.com/wp-content/plugins/hq_idx/searchlistings.php
I've done dozens of web searches and I can't find anything that resolves this issue. I also ready through Aleksandar Vacić's article on IE6/7 z-index discrepancies, but still nothing. Any assistance would be much appreciated, I'm tearing my hair out on this one.
In my experience, z-index in wonky in IE. Setting it to 0 is especially a problem, so make sure 0 isn't one of your z-index values.
Sometimes the simplest solution is to change the source-order of the html: whatever shows up later in the source will be on top. Is that a possibility in your case?
If I remember correctly, you can't have two elements with the same z-index or things get funky. I notice a lot of your paths have z-index of 1000. Some ideas to try:
Reset the z-indexes to be incremental within faux layers. That is, if you want all the boundary strokes to be on the same "layer", allocate the numbers between, say, 1001 and 2000 for that layer. The next layer above would use the numbers between 2001 and 3000, etc.
Let the document flow set the z-indexes within a few containers, and set the containers themselves to wide-apart z-indexes.
Note that historically with IE, elements like combo-box dropdowns and ActiveX controls, etc. get displayed on a layer above the actual page, and so always appear above any HTML, no matter how high you try to set the z-index. Not saying this is the problem, but perhaps using the map api triggers that problem. Read more here.
Okay, I figured it out. So the main navigation is in div #header with position: relative and no z-index defined. Once I placed a z-index on the header the menu popped right out in front of the map.
I guess the lesson here is look for every element with a defined position, be it absolute or relative, and how it is interacting with the elements in question.
I have a bookmarklet that will come up with a iframe that will load a web form I have. On most site, it works fine with the bookmarklet on top of every element in the current html page. But for certain sites with a lot of javascript loading (e.g. meebo.com), the loaded iframe will go below. How can i troubleshot this? Thanks. attached screen shot.
If you are using a positionable element such as a div, you should ensure the z-index style is set to a value higher then any other element.
Of course the page you load in the iFrame may also be doing exactly this. Therefore you may need to use a timer (setTimeout) to delay for say 500ms and then get the current highest z-index and add 1 to it.
Also, because you don't know in advance anything about the page shown in the iFrame, you would actually need to manually search for all elements containing a z-Index style. Once you have a collection of these elements, then get the highest z-Index value.
I'd definitely look at using jQuery to make this much easier.
I using Ajax ModalPopupExtender but problem with this is menu in appication is display over the ModalPopupExtender. I also set z-index=1 for ModalPopupExtender and z-index=100 for but problem not solved.
After a few minutes of learning how to use Developer Tools (F12 on Chrome/IE), I finally got to the root of the problem.
I'm going to assume one of two things to be true here:
1. Your Main Menu is either on a Master Page, and the ModalPopupExtender control is inside a Child page.
2. The ModalPopupExtender control is placed within the same div that holds the rest of the page's content (except for the Main Menu) and this div has a z-index lower than the div that contains the Main Menu. (Even if you haven't specified these z-index values explicitly, these divs will inherit values automatically.)
If your situation falls into the first category, then here's what's going on: The generated markup places the lightbox inside one div, along with the rest of the child page's content (say wrapperContent), and the Main Menu inside another (say wrapperHeader). The z-index for wrapperHeader MUST be more than the z-index of wrapperContent, or else the submenus will fall beneath the content when they drop down. Now no matter what value of z-index you specify for the lightbox, it will always be displayed under every element inside wrapperHeader, since it inherits its z-index from wrapperContent, which is lower than that of wrapperHeader.
A similar explanation follows in case your situation falls into the second category.
#Jack Marchetti this also explains why this is fixed when you place the lightbox in a div of its own, seperated from the content of the rest of the page.
I hope this helps.
Use Firebug(Firefox Extension) or something similar to inspect the Z-Index of your menu. Then set the ModalPopupExtender's Z-Index 1 higher.
Without seeing a live page, I can't guess the z-index, but it must be greater than 100. You can try setting it to 10001 or something wildly high.
I have done Asp.Net development for around 4 years, my experience tells me to stay away from Microsoft's AJAX libraries especially AJAX Control Toolkit. There are bugs in there that they don't seem intent on fixing.
My advice to you: Use another library. I am using JQuery now, the plugins you find for JQuery on the net are of widely varying quality but some of them are really good and others I have bugfixed myself (I only choose the ones where I can quickly understand the code).
JQuery UI has a very high quality, it includes a dialog widget I am using instead of the ModalPopupExtender. If you dont like the window style, check out one of the 15 plugins presented on this page: 15+ jQuery Popup Modal Dialog Plugins and Tutorials.
Set the z-index to something reallly large like #Jab mentioned.
I also found that if you place the ModalPopupExtender at the bottom of your HTML Markup, it sometimes fixes it for some very strange reason. Give it a try.