I am trying to make a DHTML window on my website and I can actually get it to popup for me. The problem I am having with it is when it pops up it moves the text around on the page. I have seen examples of DHTML popups where this doesn't occur for instance here: http://dhtmlpopups.webarticles.org/basics.php or here: http://www.php-development.ru/javascripts/popup-window.php
I cant figure out what I am doing wrong the div tag for my popup looks like this
<div id="loginPopup" style="position: relative; display:none; z-index: 500;"><div class="closeButton" onClick="javascript:document.getElementById('loginPopup').style.display = 'none';"></div></div>
My site also use a template and css that I got off the net, could that be the problem? I am at a loss for what to do to correct this, any help would be awesome.
Thanks!
You want to position the div as 'absolute' not 'relative.' I would then use the 'top' and 'left' attributes to position the window.
div.loginPopup {
position:aboslute;
top:50px;
left: 50px;
}
use absolute positioning if you don't want it to move your other elements.
Related
I have a JQuery autocomplete search box which when displaying the search results in the dropdown window appears behind a JQuery dropdown menu directly below it (see image). I have tried increasing the z-index value of everything I can find in the CSS for the autocomplete search but it still doesn't fix the problem. What else should I be trying?
Fiddle link: http://jsfiddle.net/tonyyeb/LKDBh/18/
Thanks for everyone's contributions. I have since found a solution given to me by a forum user:
The autocomplete wrapper is being given a z-index of 1 by the jQuery library (hard-coded), >whereas the menu (via CSS) has a z-index of 100; easiest solution is to use -
.ui-autocomplete {
z-index: 100 !important;
}
I had a similar issue with a website recently and I've fixed this with the following method:
Make sure that you position both elements absolute OR relative (z-index only works when you use the 'position' css element. So you should either use position: absolute; or postion: relative;. That totally depends on your code/css. When you don't use the position element right now, you should probably use the position: relative; element since the position:absolute; element will position the referring element absolutely which will probably screw up your layout).
Then make sure you give the dropdown a z-index which is lower then the z-index for the menu.
Example
.search-dropdown{
position: relative; or position: absolute;
z-index: 1;
}
.jquery-menu{
position: relative; or position: absolute;
z-index: 2;
}
Now, you've added
position: relative;
z-index: 1;
to .ui-widget.
Remove it there and add it directly to the dropdown's css which appears when you enter something in the input field (Chrome/Firefox: Right Click on the dropdown and inspect element to see its class/ID).
Hope this helps!
A few months ago I had a similar problem, and searched the web.
The solution was in the CSS styling.
I added an inline class (ui-front) to the element that holds the autocomplete input element.
Not sure it will solve your problem, but it's an easy experiment.
Best of luck!
Question has been posted long time ago. Still, i also have a solution that works and not listed till now .
just add this on top of your page and problem should be solved.
.pac-container { position: absolute; cursor: default;z-index:3000 !important;}
I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever.
I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)?
(no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!)
Any suggestions or links would be great,
thanks
I think this article named "CSS OVERLAY TECHNIQUES" will help you.
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely
positioning an HTML element on the page. There would be an empty div
in the markup, and with CSS this div is positioned absolutely and
given a high z-index value to make sure it stays on top of all other
elements on the page, except the modal which is opened on top of this
overlay, which will get a even higher z-index than the overlay.
<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>
Supposing we have already added an empty div to the markup and given
it a class .overlay, the CSS to position this overlay on the page is:
html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
If you want a modal dialog for real, use window.showModalDialog:
returnVal = window.showModalDialog(uri[, arguments][, options]);
where
returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
uri is the URI of the document to display in the dialog box.
arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
options an optional string that specifies window ornamentation for the dialog box.
Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.
I have an iframe that displays a full page from any website. The trouble is now that it makes all the links inside frame disabled(unlickable). I have few chunks of Javascript and CSS in it. I am not sure what is really causing the issue.
*link removed
Can someone help me out please.
The problem is the width on your .pageContainer (Its actually sitting on top of the iFrame)
.pageContainer {
position: fixed;
width: 100%; <-- your problem here [line 88]
height: 100%;
}
You are overlaying a DIV on the iFrame itself. Don't put that DIV in a fixed position.
I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)
I have this code:
$("#result").html('<div class="loading">Loading results...</div>');
$("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'));
It shows the loading div until the load is done. What I want to do here, I want the loading div exactly in the center of the page/document?
That's extra but could be nice - can I also fade the document until the load is done so that the loading div stands out?
Any jquery/css suggestions are welcome.
Thank you :)
If understand you question correctly: You need to figure out how to center the loading div both horizontally and vertically? If so, I would take a look at the answers to this question: Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7.
Have you looked at jQueryUI? You could use a modal dialog for this. jQueryUi automatically centers the modal dialog and you can make the dialog disappear after it's finished loading. There is a way to remove the title bar from the dialog:
http://www.comanswer.com/question/jquery-ui-dialog-how-to-initialize-without-a-title-bar
I don't know if this is what you're looking for, but it might avoid some headaches for you later down the road (and it's pretty and you can have custom themes).
you could put a center div around your loading...
$("#result").html('<div align="center" style="width:100%"><div class="loading">Loading results...</div></div>');
.loading {
width:200px;
height:50px;
background:#CCC;
position:absolute;
top:50%;
left:50%;
margin:-25px 0 0 -100px; /* Half of height and width */
}
If you don't know width/height or it is dynamic, you can use .width() and .height() functions to get values, which should be divided by 2.
This might be a bit over-kill but the jQuery UI dialog plugin could achieve those effects (you would just not be using it for a dialog...). Check out the modal option and example. If you are using jQuery ui already, might be worth it...