Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a custom gantt chart which has a bar and a label on it. The bar of the chart is a a combination of small div and the label for the bar is placed in the first div.
I have created a rough version to simulate this here jsfiddle.I think the issue is due to pointer-event:none; not supported in IE. I have set the following property in CSS for label
<html>
<head>
<style>
.mylabel {
pointer-events: none;
left: 40px;
position: absolute;
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
z-index: 2;
}
.rowDiv {
float:left;
width:30px;
height:30px;
z-index: -1;
}
</style>
</head>
<script>
function div1Click(){alert("Div1 clicked");}
function div2Click(){alert("Div2 clicked");}
function div3Click(){alert("Div3 clicked");}
</script>
<body>
<div style="width:95px;height:35px;overflow-y:hidden;z-index: -1;">
<div id="Div1" class="rowDiv" style="background-color:#b0c4de;" onClick="div1Click()"><label class="mylabel" >DiV 123</label></div>
<div id="Div2" class="rowDiv" style="background-color:#FF0000" onClick="div2Click()"></div>
<div id="Div3" class="rowDiv" style="background-color:#00FF00" onClick="div3Click()"></div>
</div>
</body>
</html>
On the click of each div it should open a popup corresponding to that div. However the label from the first div spans across all the other div. When i click on the label anywhere in div 2 or div 3, the click event for the first div is triggered instead of div 2 or Div 3.
The issue exist only in IE 10 and it works fine in Chrome.
Is there any way to make this work in IE 10.
Thanks in advance
Pointer events were introduced in IE11, so will not work in 10 or below.
Check out click-through-a-div-to-underlying-elements for some alternative ideas
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a background with Google Maps' fucntionallity.
So here is the idea:
I haven't found any library but I guess it can be solved by css grid.
Can you help me with a piece of advice or just to say how theoretically it can be solved?
You could use jQuery draggable. What you can do is have a container div with the overflow set to hidden and have a draggable image (your background) inside:
$("#draggable img").draggable();
#div1 {
height: 400px;
width: 400px;
background-color: blue;
overflow: hidden;
}
.image {
margin-top: -400px;
margin-left: -400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<span class="move" id="draggable">
<img src="https://placekitten.com/1600/1600" class="image"/>
</span>
</div>
If the snippet doesn't work here is the same code in jsfiddle.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I try to display DIV over the Google Map.
I know, there are many such questions on "stackoverflow", and many answers, but it didn't work in my example... :((((((((
My script:
<div class="b-map-content" id="map-content">
<div class="temp">
</div>
<div>
and styles:
.b-map-content{
position: relative;
width: 100%;
height: 550px;
}
.temp{
position: absolute;
top: 0;
right: 0;
height: 100px;
width: 100px;
background: #FF0000;
z-index: 9999;
}
When the page loading in some moment I see red square, but when map was loaded I don't see it again...
how it work You can see here: enter link description here
I will be very glad for help...
Try
<div class="map-container">
<div class="b-map-content" id="map-content"></div>
<div class="temp"></div>
</div>
When Google Maps initializes, I am guessing that it removes all inner elements within id="map-content", which is why you are seeing the flash of red.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have several buttons which are displayed inline with <h3> tags. All <h3> tags are of equal length but still the edges of the buttons are not aligned.
I want to align the edges of buttons so that it looks plain.
suppose your code looks like this:
<h3>hello</h3><input type="button" value="hello"></br>
<h3>hello 2</h3><input type="button" value="wad adwadaw a"></br>
<h3>hello 4</h3><input type="button" value="1231245 5"></br>
<h3>hello 55</h3><input type="button" value="asdasdddd"></br>
then the css should be:
h3{
width:100px;
display:inline-block;
}
input[type="button"]{
width:300px;
display:inline-block;
}
is this what you wanted?
CSS
<style type="text/css">
h3{
background:orange;
padding:10px 20px;
display:inline-block;
margin:0px
}
</style>
HTML
<h3>Home</h3>
<h3>About Us</h3>
<h3>Contact</h3>
You Should be Provide Screenshot or Code Sample for Getting Proper Answer.
Note: Equal Edges with Same Length is not Possible if Button Content have not Same Width.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Is it possible to attach a div to an image? As in, to make the div follow the image? I have a web app where the user can click on a part of the page, and the image moves to it with easing. I'd like a speech bubble to follow the image and remain above it, but I'm having trouble finding out what this requires.
Any guidance is appreciated!
Regards
When I should do this, I would make a Div containing your image and the div of the speech bubble.
<div class="topelement">
<img src="#" />
<div class="speechbubble"></div>
</div>
Then when the user clicks on the certain part of the page, you can move the div with de class "topelement".
Hope this helps
If this is the element which user needs to clicks:
<div id="showImage">
Show the image
</div>
Once the user clicks that, the below slider will be shown
<div class="divSlider">
<img src="http://images6.fanpop.com/image/photos/33100000/justin-bieber-2013-justin-bieber-33194067-1295-1500.jpg" />
<div class="speechbubble">Your bubble message here!</div>
</div>
CSS:
.speechbubble {
background-image: url("http://www.clker.com/cliparts/K/k/N/x/a/k/dialog-bubble-rectangle-md.png");
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
z-index: 100;
right: 0px;
position: absolute;
padding: 20px 30px;
color: red;
}
.divSlider {
width: 350px;
height: 300px;
position: relative;
display: none;
}
img {
float: left;
width: 300px;
}
By default am hiding the div in CSS itself.
now jQuery:
$(function() {
$("#showImage").click(function(){
$(".divSlider").fadeIn(2000);
});
});
Working Demo
This question already has answers here:
Auto-size dynamic text to fill fixed size container
(21 answers)
Closed 8 years ago.
I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.
I have made some images to help understand this problem:
So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.
I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow,
text-aligning all not giving me the result I want.
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1, #box2{
width: 400px;
height: 300px;
color: white;
margin: 10;
font-size:larger;
text-align:justify;
letter-spacing: 100%;
}
#box1 { background-color: green;}
#box2 { background-color: blue;}
</style>
</head>
<body>
<div id="box1">
Llorem ipsum foo bar baz
</div>
<div id="box2">
Foobar
</div>
</body>
</html>
Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?
As I said this may be a dupe of
Auto-size dynamic text to fill fixed size container.
The OP did a jQuery plugin for that means, you can download it here
It doesn't seem to up to date though!
Good luck!
You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.
Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).
HTML:
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
You also can set options to it:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS:
#responsive_headline {
width: 100%;
display: block;
}
And if you need it, FitText also has a no-jQuery version.
My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.