I'm defining a javascript "object" via the following function:
function Window(vars) {
this.div = $("<div/>", {
id: vars.id,
class: vars.styles + " box text",
css: {
top: vars.top,
left: vars.left
}
});
this.div.appendTo( $("body") );
// more stuff happens..
As you can see, the Window has a div property, which is a jQuery object. In it's instantiation, I declare the CSS classes box and text. text is not important, it's just font stuff. Here's the CSS for box, however.
.box {
z-index: 1;
position: absolute;
background: #222222;
min-width: 10%;
text-align: center;
padding: 5px;
}
.nav-extension {
z-index: 3;
padding: 8px;
background: #000000;
position: absolute;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
box is absolute at z-index 1, and another div with nav-extension is somewhere else on the page, also absolute and at z-index 3. However, when I add the Window object to my page, it appears above anything with nav-extension. All other CSS attribues, like background, still work.
I've tried altering the z-index where I instantiate the div in the "css" section I'm already using, but that didn't work either. What gives?
Edit
Also, I've inspected both the div with box and the one with nav-extension with Firefox, and the "Style" tab indicates they still have their intended z-index (not overridden).
#2: Changed vars.class to vars.styles.
Could you give us some DOM, please? It appears that that your box and the nav-extension-div are in different contexts. A non-static position sets up a new context, relatively to which all z-indexes inside are processed. A simple fiddle to demonstrate: http://jsfiddle.net/3KTyz/
<body>
<style>
.box { z-index:1; }
.nav-extension { z-index:3; }
</style>
...
<div id="context" style="position:relative"><!-- or absolute or fixed -->
...
<div class="nav-extension"><!--
will be positioned +3 relatively to other elements in #context
-->...</div>
</div>
<div class="box"><!--
will be above #context, which has (implicit) z-index:0
-->...</div>
</body>
To make nav-extension appear above the box, you will either
set #context (or one of its parents) to a z-index higher than the one of box or
move the nav-extension-div outside any context
class is a reserved word in JavaScript and cannot be used as a property or a variable name, maybe this is the culprit.
Related
This is a very odd question, of which I am fairly confident I already know the answer, however, before I go ahead with the fix that I am trying to avoid, I thought it was worth asking others as you may see this from a different angle
I am currently writing a plugin that takes a certain element (can be any DOM node), and wraps it with a div. The purpose of the plugin is to add a 'blinds' effect to elements which can then be used to reveal the element on scroll.
Note: Wrapping with a div is absolutely essential to the functionality I am implementing.
My question, quite simply, is anybody aware of a smart way to preserve the styles from the element being wrapped and ensure it visually remains the same as it was before the div wrapping, and, whilst retaining the dimensions so another div can be inserted within the wrapper and be the same dimensions of it's sibling.
See this very basic example (before and after - notice the blue blind):
.test {
display: flex;
flex-flow: column;
height: 200px;
text-align: center;
}
.test:nth-child(1) {
background: #999;
}
.test:nth-child(2) {
background: #666;
}
.test > * {
flex: 0 1 auto;
}
.test h1 {
margin: auto 0 0;
color: #fff;
}
.test p {
margin: 0 0 auto;
color: #fff;
}
.test-wrapper {
position: relative;
width: max-content; /* Fix for example purposes */
margin: 0 auto; /* Fix for example purposes */
}
.test-wrapper .blind {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: blue;
opacity: 0.5;
}
<div class="test">
<h1>Before wrapper inserted</h1>
<p>Some description</p>
</div>
<div class="test">
<div class="test-wrapper">
<div class="blind"></div>
<h1>After wrapper inserted</h1>
</div>
<p>Some description</p>
</div>
Before answering, these are the solutions I am trying to avoid:
'copying' or 'moving' the styles (or certain styles) from the child to the parent as this is likely to cause a huge mess... Open to suggestions though
Defining styles for test-wrapper in the site's CSS as test-wrapper is a plugin specific element.
The obvious, and very easy, solution is to just define the styles for the wrapper instead of the child in my CSS (SCSS). I appreciate this may be the only way, but I ideally want to avoid this as what I am building is a plugin and I want the HTML/CSS to work with and without the element wrapper in place.
I am trying to change a class of a element and my view gets distorted?
How do I solve it.
I have created the fiddle for the same Jsfiddle
Issue Description:
I have a custom textbox. I have a reference value at top left corner of it.
If I enter value greater or less than the reference value , I show a box asking for reason.
It works perfectly fine, but when I try to add some extra functionality , like changing the color of the div in right top corner of textbox by changing the class of the div , the view is distorted and not as it was expected.
In the fiddle I can commented the code in javascript section at line 73,74,77,78
function changeClassOfCommentToRed(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerGreen");
}
if I uncomment the above line for extra functionality , I get a distorted view as in following image
You only need to remove the classes you want to change:
function changeClassOfCommentToRed(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerGreen");
}
And in your CSS you need to address your arrow pseudo element not the element itself:
.commentCornerRed:after {
...
}
.commentCornerGreen:after {
...
}
With this changes, only the color of the arrows is changed, not the color of the box.
Try to specify which class to remove in your removeClass :
removeClass('classToRemove');
If I get what question correctly. I think this commentCornerRed class got width: 0 and height: 0. you can have the same properties as .arrow_box
.commentCornerRed {
position: absolute;
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: transparent #ff0000 transparent transparent;
padding-left: 36px;
cursor: pointer;
}
You can make it like this.
.commentCornerRed {
position: absolute;
background: #bcb476;
border: 1px solid #08090a;
z-index: 1;
margin-left: 50px;
margin-top: -40px;
}
I made a silly mistake. I was passing the wrong id for class name. Got the desired result by passing the right id at line 85 and 87 in javascript section.
changing from
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"r1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"r1");
}
}
to
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"c1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"c1");
}
}
solved the problem. Thanks people for helping.
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
I have a layout where images "float" within a certain area. The layout looks like this:
The source like this:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
The CSS looks like this (in SCSS):
div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
&.last { margin: 0 0 20px 0; }
a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; #include boxShadow;
&.canonical { border: 1px solid $transect; }
}
.location, .taxonomy { width: 176px; }
.location { font-weight: 700; }
.taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.
I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).
The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.
I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
--EDIT--
Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:
It took some tryouts, but here it is: the size independent image badge positioner.
HTML:
<div class="tile">
<span class="photo">
<img src="/photos/10.jpg" alt="10" /><ins></ins>
</span>
<p class="location">Houston</p>
<p class="taxonomy">T6 | Conduit | Infrastructure</p>
</div>
CSS:
.tile {
float: left;
width: 176px;
height: 206px;
margin: 0 20px 20px 0;
}
.photo {
display: block;
width: 176px;
height: 158px;
text-align: center;
line-height: 158px;
margin-bottom: 10px;
}
a {
display: inline-block;
position: relative;
line-height: 0;
}
img {
border: none;
vertical-align: middle;
}
ins {
background: url('/images/badge.png') no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
}
Example:
In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.
Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!
EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.
Demo: http://jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
Demo: http://jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
Demo: http://jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.
Use an element other than <div>, e.g. <span> and put it inside your <a> element after the <img> element. Then, give the <a> element position:relative; and the <span> gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span> is to keep your HTML4 valid, <div> would still be HTML5 valid, however.
I did find one solution using jQuery. I don't prefer this because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
Given this markup:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.
I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. Something like that:
#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; }
#divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer; top: 20px; left: 20px; }
<div id="divOuter">
<img src="SomeImage.jpg" />
<div id="divInner"></div>
</div>
$("#divOuter").click(function() { alert("divOuter"); });
$("#divInner").click(function() { alert("divInner"); });
In chrome and FF it works as expected (pointer appears over the div, and clicking it alerts "divInner" and then "divOuter").
However, in IE8 it didn't - I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only "divOuter" was alerted.
How can this be fixed?
Here's a hack: add an CHAR like "O" to the inner div, and then give it an enormous font size(depends on the area you want to span over):
#divInner { /* ... */; font-size: 1000px; color: transparent; }
(Also set "overflow: hidden" I think.)
IE likes there to be something there in the container for the click to affect. If it's just completely empty, it ignores clicks.
a fiddle: https://jsfiddle.net/cbnk8wrk/1/ (watch in IE!)
I had the same problem with an unordered list, see Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6
The solution : give the div a background color and make it transparent with a filter.
Adding an 1x1 px transparent background gif to the div is also working.
#divInner { background: url(/images/transparent.gif); }