I want to add arrow mark to extjs window as marked below. I have created window with all the required form fields and i can point out the place where the user clicked. Now my requirement is to add arrow to that window.
Thanks in Advance.
<div id="overlay"> Hello World </div>
#overlay {
width: 200px;
height: 50px;
position:relative;
background-color: green;
}
#overlay:after {
content: "";
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
border-top: 10px solid green;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
The div after overlay is looking like this. In the same way we can add overlay for sencha extjs window.
There are .x and .y properties of Window. They exist for absolute positioning. You should get mouse pointer's coordinates and then calculate window's position.
Related
I am currently dynamically creating x number of divs and within each div, I have a button that shows a popup whenever clicked.
I am trying to position the button below the specific button that triggered it but the position of the popup is always static for a reason, it does not move below the button.
<div className="popWrap">
<div className="popup" id="pop" style={{display: 'none'}}>
<Card className="myCardStyle">
<CardHeader>hello</CardHeader>
<CardBody>body</CardBody>
</Card>
</div>
<button className="myBtn" onClick={this.displayBtn}>View Button Info</button>
</div>
Here is my css:
.myCardStyle {
width: 100%;
}
.popup {
z-index: 10000;
}
.popwrap{
border:1px solid pink;
padding:1px;
position: inherit;
display:inline-block;
}
Anyone can suggest a solution? Thanks in advance!
You could add position: relative; to the .popWrap div. Then you can set position: absolute; to the .popup element and give it a specific (top) position to move it where you want it to be.
Example:
.popup {
position: absolute;
top: 50px;
z-index: 10000;
}
.popWrap {
position: relative;
border: 1px solid pink;
padding: 1px;
display: inline-block;
}
I am working on a project and the client gave me a task to open a browser window on the click of button like a popup but it is not a popup, I have to open a browser window and that is not complicated but they gave me a design to give border radius to browser window and make browser window's sides CURVY like in the image.
I did not find any solution of this. Is it possible? If yes then please reply me.
Thanks in advance
ANSWER: You cannot make a WINDOW with curved corners
You would have to rewrite the browser code to do so.
CSS does not apply to the browser itself, only the content
But you can pop a curved div:
window.addEventListener("load", function() { // on page load
document.getElementById("popBtn").addEventListener("click", function() {
document.getElementById("popDiv").classList.toggle("hide");
});
});
body {
background-color: #CEEDDC
}
div.pop {
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid #000;
border-radius: 55px;
-moz-border-radius: 15px;
background-color: red;
position: absolute;
top: 100px;
left: 200px;
}
.hide {
display: none;
}
<button id="popBtn" type="button">Pop</button>
<div id="popDiv" class="pop hide">
<h1>Here you could have an iFrame if needed</h1>
</div>
I'm trying to create a slider whose handle jumps to where one clicks on the track, in addition to being able to be dragged.
Right now, I can drag it; but it doesn't respond when I click somewhere on the track.
PS: Just found the reason. I have another div placed on top of the slider track acting as a progress bar, so that when I click on the slider track, I'm actually clicking the progress bar div. My solution was to set the slider div's background to "transparent" and "z-index: 2" in the css file. Apparently this allows the display of the progressbar div underneath it while preserving the function of clicking on the track.
#audio_slider{
position: absolute;
margin-top: 5px;
height: 12px;
width: 95%;
float: left;
border: 2px solid white;
z-index: 2;
background: transparent;
}
#audio_progress {
position: absolute;
margin-top: 6px;
border: none;
float: left;
width: 95%;
height: 11px;
display:inline-block;
}
I have two divs with borders, how do I remove only the border where the 2 divs touch like the picture below shows? But without background overlapping, I mean here background must be transparent.
Question sounds seam like this one Partial Border in CSS but!! without background color overlapping. and also it's liquid dimension, mean not fixed.
If your divs are both static height, you can use a pseudo element to fake the border:
div {
border: 1px solid black;
}
#small {
border-right-width: 0;
height: 80px;
}
#big {
border-left-width: 0;
height: 200px;
position: relative;
}
#big:before {
content: ' ';
border-left: 1px solid black;
position: absolute;
height: 120px;
left: 0; top: 80px;
}
Here's the fiddle: http://jsfiddle.net/FrKZy/
You could probably make it work with dynamic heights using Javascript.
Warning: this won't work in IE7 or under.
I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is:
EDIT: using the prototype refactor from remi bourgarel:
function socialMenuInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden.
EDIT: This is the html and css I am using:
<div id="share_words">share</div>
<div id="sociable_menu"></div>
#share_words{
display: none;
border: 1px solid white;
position: absolute;
right: 320px;
top:0px;
padding: 4px;
background-image: url('/images/icons/group.png');
background-repeat: no-repeat;
background-position:7px 6px;
text-indent:26px;
color: white;
z-index: 15;
}
#sociable_menu{
border: 1px solid black;
padding: 5px;
position: absolute;
right: 275px;
top: -10px;
z-index: 20;
}
Thanks for any help.
You're not using prorotype...try this
function socialLinkInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
But i'll need your html code to be more helpful