I made a div over another div to create a border.
Here is an example:
Now I have a problem: if I put the mouse over the image I get the focus on the div with the border only (for ex., if I want right click and save img) but the div is empty all the time (is used only for the border) how i can ignore the center part of the div?
I used a div because I place the border over the image/other stuff and I can't have the same result using the original border (is placed outside the image and I get a white space from the border and the image).
In this jsfiddle the dimension aren't right. (I place the border with js code)
img = $('<div style="position:absolute; width: ' + ($(this) .outerWidth(true) +
leagueBorders[templeague].width) + 'px; height: ' + ($(this) .outerHeight(true) +
leagueBorders[templeague].height) + 'px; max-width: none; top: '+
($(this).position().top + leagueBorders[templeague].top) +'px; left: '+
($(this).position().left + leagueBorders[templeague].left) +'px;"
class="'+leagueBorders[templeague].classe+'"></div>');`
But you can easily see the problem. If you right click on the image you get the right click menu of a empty space instead of the image options.
if I a text with a scroll bar (instead of the image) I can't use the scroll bar.
A div isn't enmpty just because you don't see anything in it. A div can have a transparent content, it doesn't mean that ti's empty. It's like a transparent layer. That's why it takes the focus. You should use css border properties to fit your borders to the image. Or, you should wrap your image in a container (a div) and apply specific css rules to this container, so that your borders will fit.
You need to fix your HTML tags and use CSS to do all the graphical work.
Make sure img tag is inside div and then use the following CSS.
SEE PICTURE HERE
.rank-Platino {
overflow: hidden;
border: 15px solid transparent;
border-image-slice: 95 80 95 80;
border-image-width: 50px 50px 50px 50px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
border-image-source: url("https://dl.dropboxusercontent.com/u/30396291/LOL/border/plat-border.png");
margin: 6px;
}
<a class="avatar">
<div style="position:absolute; width: 90px; max-width: none; top: 0px; left: 0px" class="rank-Platino rank-border">
<img height=163 width=90 class="user_summoner_icon PLATINUM rank-border"
src="http://www.mobafire.com/images/champion/skins/portrait/rammus-full-metal.jpg"></div>
</a>
Use CSS when working with borders, like this:
border-size:2px;
border-style:solid;
border-color:black;
Related
HTML Markup,
<div class="bluredBackground"></div>
<div class="content">
Hi This is dynamic content.<br>
If the div height increases then first div height <br>
should be automatically increase.
</div>
I want first div height should automatically increase whenever the second div height increases because of its dynamic content.
As of now, I was able to place one div on top of another,
.content {
width: 70%;
height: auto;
border:1px solid;
position: absolute;
z-index:10;
background-color: white;
}
.bluredBackground {
width:70%;
height:70%;
background-color: red;
z-index:0;
border:1px solid;
position:absolute;
-webkit-filter: blur(2px);
}
How can I solve this problem with CSS?
I was trying this thing > http://jsfiddle.net/hsinghbisht/nLj5dqay/2/
Please help!
Thanks in advance.
This is not a direct answer to question, but what exactly are you planning with the 2nd div (blurred) being on the same height as 1st one?
If you want the fancy red blurred glare behind, then just use box-shadow. Add it to the .content and it will work pretty identical
box-shadow: 0px 0px 4px 0px red;
However, if you definitely need to use the red blurred div, then you cannot solve that with plain CSS. You must use JavaScript and look for class style of one element and copy it to the next one.
Example:
window.onload = () =>
{
const div1 = document.querySelector('.bluredBackground');
const div2 = document.querySelector('.content');
div1.style.height = `${div2.offsetHeight}px`;
}
Hi I use the jQuery UI Resizable and jQuery UI Draggable for all of my three div elements.
The basic Dom tree looks like this:
So basically blue and red are siblings and orange is the parent.
If I resize blue vertically then red automatically changes its position that the vertical space between them stays the same. This problem does not apply to Draggable, so I can change the vertical distance by dragging blue and red around but every time I resize blue vertically red moves too.
If I make blue bigger vertically -> red moves down, I do not want that optimatically it would be that you can make blue bigger vertically until it hits the border of red and then thats it.
I tried several .css styles but nothing works
Here is the current .css that I use:
Hi thanks for all your comments, I could find the solution:
JQuery UI resizable adds the .css attribute position:relative; to every resizable <div> element.
I explain it to myself like this:
"relative: The element is positioned relative to its normal position, so 'bottom:20px' adds 20 pixels to the element's BOTTOM position"
This means the normal position of red is directely under blue, but because of draggable we added, lets say 20px of space by dragging red down.
If you resize blue, then this 20px of space will be preserved, by moving red down.
When we use position: absolute !important; then red is always positioned
"relative to its first positioned (not static) ancestor element"
which is orange
/*overrides the '.ui-resizable' 'position:relative;' this helps that after resizing the position of the element
get placed relative to its parent <div>*/
position: absolute !important;
This code should give you some ideas. It works for resizing the blue box and when it hits the top of the red box it stops. So first see that you can not resize the blue since it starts flush to the red. Then MOVE red down a little diagonally to the bottom right. Now, if you resize the blue, it will hit the constraint of the red box.
I showed only one side of the constraint (from blue to red) to see if this helps before applying it to (red to blue). Actually, there would be at least 4 constraints: top, bottom, left, right.
Pay attention to the two css position attributes I added.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>OOIndex</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<style>
/*div {
outline: 1px solid black;
height: 100%;
width: 100%;
height: 200px;
width: 200px;
min-height: 30px;
min-width: 500px;
}*/
.resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
.orange {
height: 100%;
width: 100%;
background-color: orange;
/*added*/
position: absolute;
}
.blue {
background-color: blue;
width: 150px;
height: 150px;
padding: 0.5em;
}
.red {
background-color: red;
width: 150px;
height: 150px;
padding: 0.5em;
/*added*/
position: fixed;
}
</style>
<script type="text/javascript">
$(function () {
var targetRed = $('.red').position();
$("#redPos").text("left " + targetRed.left + " top" + targetRed.top)
var targetBlue = $('.blue').position();
$("#bluePos").text("left " + targetBlue.left + " top" + targetBlue.top)
$('#blueResiz').resizable({
resize: function (event, ui) {
targetPos = $('.red').position();
$("#redPos").text("left " + targetPos.left + " top" + targetPos.top)
var added = ui.position.top + ui.size.height;
$("#bluePos").text("top " + ui.position.top + " height" + ui.size.height + " total " + added)
//if blue
if (ui.position.top + ui.size.height < targetPos.top) {
$(this).resizable({ maxHeight: targetPos.top - 20 });
}
}
});
$('#redDrag').draggable({
drag: function (event, ui) {
targetPos = $('.red').position();
}
})
})
</script>
</head>
<body class="orange">
<div class="blue draggable" id="blueResiz">
<div id="bluePos"></div>
</div>
<div class="red draggable" id="redDrag">
<div id="redPos"></div>
</div>
</body>
</html>
I have a text on my website that scrolls horizontal through the page. I’m trying to get around 8 characters highlighted in black, while the rest is grey. But those characters are meant to vary as you scroll though, the highlighted bit should remain in place.
In case this doesn’t make any sense, if grey was an x, it should look something like this:
xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox sit xxxx xx
I’m trying to get this done in jQuery, but I can’t get it to work. I also like to say that I’m not at all an expert in webdesign, so I don’t know what I’m doing. Anyway, I’ve tried two different approaches, one is to say “change colour of text when going over an underlying div”. The other approach is to change the colour of the text depending on the scrolling position, but the problem here is that it takes the scrolling position of the whole div, instead of a fixed position on the page. Both don’t work at the moment, examples are here:
jsfiddle 9p29tz2f
jsfiddle 9p29tz2f/1
If anyone has any ideas how to approach this, or needs some more clarification, please let me know. Many thanks!
Clone the text and set it as a child of the overlay box then scroll them together:
$(function(){
var $bodytext = $('#bodytext'),
$clone = $bodytext.clone();
//copy the text and append it to #black:
$clone.attr("id","clone").prependTo("#black");
//scroll #clone with #bodytext:
$bodytext.scroll(function(){
$clone.scrollLeft($bodytext.scrollLeft());
});
});
http://jsfiddle.net/9p29tz2f/2/
I've taken Teemu's solution and modified it a bit: http://jsfiddle.net/9af91wcL/2/
The important bits: The code moves a white DIV (#grey-overlay) on top of the text and makes it transparent. By adding black and white pixels, you get grey. The grey level is determined by the alpha channel (0.7 in the rgba() function).
You need to assign a height or it will look odd. I use 1.5em to make sure it doesn't overlap with the scroll bar of the #bodytext div.
Also make sure that the top/left position of both div's is the same.
In your real code, you can make the horizontal scrollbar disappear and scroll with JavaScript.
HTML
<div id="grey-overlay"></div>
<div id="bodytext">text...</div>
CSS
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 200%;
}
#bodytext {
top: 15%;
width:200px;
height: 2em;
padding: 0;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}
#grey-overlay {
background-color: rgba(255, 255, 255, 0.7);
width:40px;
height: 1.5em;
top:15%;
position:fixed;
z-index: 10;
}
You need to show the same content within #black as in #bodytext, and synchronize its position relative to #bodytext scrolling. This can be achieved by using an extra wrapper around #black. Something like this:
CSS:
#cover {
top: 15%;
height:50%;
width: 120px;
padding: 0;
position:fixed;
overflow-x: hidden;
background-color: #D8D8D8;
}
#black {
color: #000000;
width:100%;
height:100%;
top:0px;
left: 0px;
position:absolute;
white-space: nowrap;
z-index: 10;
}
#bodytext {
top: 15%;
width:100%;
height:85%;
padding: 0;
position:absolute;
overflow-x:scroll;
white-space: nowrap;
color: #D8D8D8;
}
HTML:
<div id="cover">
<div id="black"></div>
</div>
JS:
$(document).ready(function () {
var black = $('#black'),
btext = $('#bodytext');
black.text(btext.text()); // Clone the content
btext.scroll(function () {
var pos = btext.scrollLeft();
black.css('left', -pos + 'px'); // Set the position to match #bodytext
});
});
A live demo at jsFiddle.
Notice, that if you need some left margin, it has also to be "calculated in" to pos.
I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working
I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.
Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..
You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2
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); }