Okay, I'll be the first to admit that i'm quite terrible when it comes to css, but I try... :D
I have this JS Function which I use to create rounded corners using images, instead of the standard div in div in div way. I know there are better ways, but this is how i've done it:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div>' + title + '</div>');
div.css("position", "relative");
div.css("z-index", "2");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
//div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}
div is the div object being passed to the function $("#divid") for example.
left, middle and right are the image locations.
leftwidth, rightwidth and height are pretty self explanitory.
Now the problem - Using IE 8, the div(which is a rounded title bar) draws perfectly when using the commented out line
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
and the active line
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
But IE 7 only works with the active line.
The left and middle images are drawn in IE 7 but not the right image and the div content(title).
The active line for both IE 7 and IE 8 renders the left and right images usless as they both(left and right) sit over the center image, so any transparency only shows the center image and not the body background.
Any and All help is, as usual, really appreciated.
If you're not aware of this already, there is a rather elegant way in CSS to create a rounded corner:
-moz-border-radius: 15px; /* where the 15px is the degree of rounding */
border-radius: 15px;
This is only supported in newer browsers (IE7, for example, will still have square borders).
Additionally, I noticed you said that this was for a rounded title bar. Wouldn't it be easier if you just used a photo-editing software like GIMP or PS to create a rounded image? This would solve the problem of cross-browser compatibility as well as the problem of obtrusive JavaScript not gracefully degrading (if JavaScript is disabled, the user does not get the image!)
While i'm sure this won't help anyone - for completeness my solution was to set the z-index on the appended div instead of the passed div:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div style="z-index:5">' + title + '</div>');
div.css("position", "relative");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';z-index:-2;"><img src="' + middle + '" style="position:absolute; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}
Related
I'm importing a PNG image and passing it to an external component (#react-google-maps) to use as an icon. PNG import works fine, but the SVG file does not.
I've never worked with SVGs before so I must be misunderstanding something.
Might I be handling
import testSVG from './assets/m3.svg'
incorrectly?
You can see in my example here that under map2:67 using testPNG works but testSVG does not.
This is where #react-google-maps plugs the path into an <img> tag:
img = "<img src='" + this.url + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; "
//#ts-ignore
if (!this.cluster.getClusterer().enableRetinaIcons) {
img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width) + "px, " +
((-1 * spriteV) + this.height) + "px, " + (-1 * spriteH) + "px);"
}
msg += "'>"
However, I don't believe that is causing an issue, because non-local SVG files work just fine.
I have a parent div with sub div which are dynamically created by it's height and width. In my hand I have top left,margin top from parent div.But the problem is for first one it's working fine. When I place a second div, the margin top is getting calculated from the first sub div instead of parent div.
Here is my code:
$('#Droppable').append(
'<div id="PlaceHolder' + PlaceholderId + '" style="height:' + HeightInPx +
'px;width:' + Widthinpx + 'px; background-color:black;color:white;text-
align:center;color:yellow;margin-left:' + X + 'px;margin-top:' + Y + 'px;">'
+ PlaceholderName + '</div>'
);
$('#Droppable').append(
'<div class ="child-divs"
id="PlaceHolder' + PlaceholderId + '"
style="height:' + HeightInPx + 'px;width:' + Widthinpx + 'px;
background-color:black;color:white;
text- align:center;
color:yellow;
margin-left:' + X + 'px;
margin-top:' + Y + 'px;">'
+ PlaceholderName + '</div>'
);
#Droppable{
position : relative;
}
#Droppable > div.child-divs {
position : absolute;
top :
bottom :
left :
right :
}
Please fill top, bottom, left, right with values as per your requirement.
To make the second div calculate position in relation to the parent div and not by its position in the children make its position absolute and the parent's relative
#Droppable{
position : relative;
}
#Droppable > div {
position : absolute;
}
And please, either remove the id from child element or make it unique.
I am trying to calculate the div positioning. This is my code .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.content {width: 60%;
position: relative;
text-align: center ;
top: 150px;
left:300px;
right:450px; border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<div class="content">
Testings content
</div>
<script>
function ReadDivPos() {
var content = document.getElementsByClassName('content');
for (i = 0; i < content.length; i++) {
console.log("Top " + content[i].getBoundingClientRect().top) //top
console.log("left " + content[i].getBoundingClientRect().left) //left
console.log("right " + content[i].getBoundingClientRect().right) //right
console.log("offsetWidth " + content[i].offsetWidth); //width
}
var _divPos = "LEft "+content[0].getBoundingClientRect().left + ",Width " + content[0].offsetWidth + ",Avail Width " + window.screen.availWidth + ",Right " + content[0].getBoundingClientRect().right;
return _divPos;
}
console.log(ReadDivPos());
</script>
</body>
</html>
This code works fine when the page is not resized but when the page is resized and horizontal scroll bar appears on the screen then it doesnot work fine. How can i get the exact positions of the div if the page is resized or not. For example these are the images i have captured to explain the problem .
When the page is resized and scroll bar is at the extreme right then left positioning of div shows 208px which is wrong and it should be 311 px .
When i move the scroller on the left and then i calculated the width using Chrome MeasureIT add on then it says 311px.
I want to get the exact positioning of the div.I am using class of the div to get the positioning as i am not using div id and i only had to use the class so this is how i have done it but it is not working when the page is resized. Any help?
Since you already have jQuery loading in the page, take a look at the jQuery offset() and position() methods and leverage jQuery selectors.
<script>
function ReadDivPos(selector) {
var _divPos = "";
$(selector).each(function() {
var p = $(this).offset();
var w = $(this).width();
console.log("Top " + p.top) //top
console.log("left " + p.left) //left
console.log("right " + p.left + w) //right
console.log("offsetWidth " + w); //width
_divPos += "Left " + p.left + ",Width " + w + ",Avail Width " + window.screen.availWidth + ",Right " + (p.left + w) + "\\n";
});
return _divPos;
}
console.log(ReadDivPos(".content"));
</script>
I have create one flow diagram on user choice. On selecting option a line should be drawn.
Line is properly created but it is resetting the option that user selected.
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px;behavior:url(Scripts/-ms-transform.htc); -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);'><hr></div>";
//
//alert(htmlLine);
document.body.innerHTML += htmlLine;
last line is creating some problem. when last line is commented everything is fine.
Please help me...!!!
one problem i see in your code is that you use single quotations on style.
You must have something like this : style=".....". You can escape the double quotations by using the '\' . Your code will look like this :
var htmlLine = "<div style=\"padding:0px;...etc
-> the double quotation is escaped by the \ character
I have a box that previews a Box Shadow. The user types in the inputs for the lenghts, blur, spread and colour (hex). So far I have this for the output of the style but it obviously doesn't work.
document.getElementById('jj_preview3').style["boxShadow"] = jj_input6 + 'px' + jj_input7 + 'px' + jj_input8 + 'px' + jj_input9 + '#' + jj_input10;
jj_input6 = Horizontal Length
jj_input7 = Vertical Length
jj_input8 = Blue Radius
jj_input9 = Spread
jj_input10 = Shadow Colour
What changes do I have to make the the javascript code snippet above to make it work?
It should work if you put in spaces. You're also missing 'px' in the last string literal.
document.getElementById('jj_preview3').style['boxShadow'] = jj_input6 + 'px ' +
jj_input7 + 'px ' + jj_input8 + 'px ' + jj_input9 + 'px #' + jj_input10;
Simply for future references:
var someVariable = document.getElementById("someId")
someVariable.style.boxShadow = "5px 5px 1.2em black";
Note: The 1.2em is for the blur effect, but px could be used as well, or it can be omitted all together.