I have a dialog box. When I call a show on it, everything in the box shows except for the contents in the header DIV and this only happens in firefox. It shows fine in both IE and chrome. I am doing nothing fancy in the dialog box any ideas?
Also it shows up when I hover over the buttons in the dialog box and when i inspect the dialog box but if I reload the page and click show again, the header is no longer there
CSS:
.formHeader {
padding:10px;
background-color:#f2f2f2;
font-size:14px;
font-weight:bold;
}
.dialogContainerBlock .formHeader{
background-color:#333;
color:#fff;
margin-left:-20px;
padding-right:30px;
margin-top:-40px;
position:fixed;
z-index:990;
width:inherit;
}
HTML:
<div class="dialogContainerBlock" style="width:100px; background:black;">
<div class="formHeader">Hi I work</div>
</div>
position:fixed is relative the body of the document, by using negative margins you are hiding the div outside the boundaries of the body.
The negative margin-top seems to be the most relevant style causing this. Watch out for negative margins for hiding things, because when you want to show them you will need to remember to undo them. You might create a class like "closed" and then have that contain the negative margins, then remove that class when you want to show the div.
Related
I am trying to design a tumblr theme. I've set up a div with four buttons at the bottom of each post. One of these buttons is a share button. You hover over the share button and a div appears with links (you click and a new window opens and the post gets shared where ever you selected it to be shared).
In the example below: when I roll over the icon with the mouse, it comes up aligned to the left.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRTDdaSTBQNW5mM0U/view?usp=sharing
Also, when I resize the page, the menu ends up being in a totally different position.
I would like for the menu to appear as it appears in this image. I want the menu to appear directly beneath the div of buttons. I would like this menu to remain in the same position when in the page is resized or is a mobile viewport size. (This is a mock up I made with a photo editor) I've tried various adjustments in my code, etc with no avail.
IMAGE HERE: https://drive.google.com/file/d/0B1O3Ee_1Z5cRX3hPd2ZGekJhU0U/view?usp=sharing
Here is my code:
CSS:
.showme{
display: none;
width:100px;
height:120px;
text-align:right;
margin-top:30px;
z-index:5;
position:absolute;
float:right;
}
.showhim:hover .showme{
display : block;
z-index:5;
}
HTML:
<div class="showhim">
<li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:1px;">
<i class="fa fa-share-square fa-lg"></i>
</li>
<div class="showme">
Twitter<br/>
Facebook<br/>
Google Plus<br/>
Pinterest<br/>
Email
</div>
I am open to any method to try and get this to work. I also have no problems with making this an onClick event rather than a hover event. My guess is that an onClick event would be smarter for mobile users (I'd love some input on this).
Any help is greatly appreciated.
At the minimum, you'll want to add something like:
right: 0;
to the CSS of .showme. This will place the block with its right border aligned with the right border of the containing block.
Note that the containing block is not necessarily the immediate parent. You probably want to add:
position: relative;
to the CSS of whichever element you want to use as the containing block (probably .showhim).
I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.
Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}
Container div contains floated left boxes (equally sized) so it looks like grid. One box has a visible content and hidden one. I want to mouse over and see the hidden content expanded so it stays on top of any other box.
I almost got it working except for the last part - hidden content does not stay on top even with z-index applied.
Here is the sample: http://jsfiddle.net/ZQ63X/
you need the css to be like this;
.item .item-1, .item .item-2{
position:absolute;
background-color:white;
}
.item .item-2{
display:none;
}
.item:hover .item-2{display:block;}
hope I helped
/edit -> this way you dont even need javascript..
Change the styles for .item .item-2 as below.
.item .item-2{
display:none;
position:absolute;
top:0px;
}
Demo
I added background color and z-index for the hidden elements when revealed... Is this what you mean?
http://jsfiddle.net/kmacey1249/ZQ63X/3/
I'm trying to add a "back button" which will toggle the current div to the previous div. Basically, I have a div of an Oklahoma map which fills the window. When the user clicks a certain area of the map, the div is toggled with a div that is the image of the "zoomed-in" area which they selected. I want my back button to appear on top of this zoomed-in div, in the bottom right corner, and if the user clicks the button, the div will be toggled with the original Oklahoma map div.
Here's the code I've tried so far:
CSS:
#backButton
{
position:absolute;
bottom:50px;
right:50px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
height:50px;
width:50px;
}
.button
{
position:absolute;
bottom:100px;
right:100px;
background:url('images/backspace.png');
background-repeat:no-repeat;
z-index:2;
cursor:pointer;
}
HTML:
<div id="backButton" style="display:none; background:url('images/backspace.png');" onClick="#container.toggle();">
<div class="button"></div>
</div>
The button appears correctly, but it isn't functioning. I'm sure it has to do with onClick="#container.toggle();" but I don't know how to do it correctly.
Just for background information, the container is the original Oklahoma map and it is toggled off in my JS code ($("#container").toggle();) when I switch to a zoomed-in div.
EDIT: Ok, so I do have Jquery and I tried making a click event like my other toggle events:
$("#backButton").click(function(e)
{
$("#container").toggle();
$("#backButton").toggle();
});
--> I removed the onClick part in the div. The button will toggle off when I click it, but the container div (Oklahoma map) is not toggling back on.
As you are using jQuery (evident in your code)
Put this in your javascript:
$("#button").click(function(){
$("#backButton").toggle();// hide the div (assume you have it turned on somewhere
$("#container").toggle();) // show the other div
});
remove the onClick="#container.toggle();" from the markup
You want your onClick method to call a valid function such as abcMethod(). (Wherever your toggle code lives).
Greetings,
I have written a modal using jquery UI and it appears at the front of a flash movie thus the html inside the modal becomes corrupt, I tried to hide the movie right before modal gets triggered and reappears after closing the modal, works well but each .hide() and .show() the flash movie gets resetted while all I want is to hide (without removing the movie) and displaying it once it is triggered to .show that modal div.
Tested in FF/linux, FF/WinXp, IE/WinXp, Safari/WinXp:
put your flash container DIV into a new DIV with overflow:hidden.
basic:
to hide flash-div: $('#id_div_with_swf').css("left","-2000px");
to show flash-div: $('#id_div_with_swf').css("left","0px");
or, show and hide with animation effects:
to hide flash-div: $('#id_div_with_swf').animate({ left: "-2000px"},1000);
to show flash-div: $('#id_div_with_swf').animate({ left: "0"},1000);
html example:
<div style="width:200px; height:100px; overflow:hidden;">
<div id="id_div_with_swf" style="width:200px; height:100px; position:relative; left:0px; top:0px;">
<!-- flash here -->
</div>
</div>
you can't get a cross-browser working solution with .css('visibility', 'visible'/'hidden')
Working solution:
Use $('#myvideo').css('visibility', 'hidden') to hide and
$('#myvideo').css('visibility', 'visible') to show the div containing the video.
Just tested it with firebug.
EDIT:
Please note, this is different from .hide() and .show(), as they use the display css, instead of visibility.
Perhaps move the movie div off the screen. Set it's Left position to be -1000 or something like that?
Then replace when the other div has disappeared?