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>
Related
I want to create a file separator styled menu in react. I'm not very familiar with css, so i need a starting point. I have found many such menu components but all of them are full page.
I dont understand how to create the shape of the component, if it were a simple rectangle it would be possible, but the shape is the rectangle plus the button, i dont know how to manage that.
It will look something like this :
Alter clicking on "Filter Menu", it will slide into view:
Try like this
.menu-container {
display: inline-block;
position: fixed;
top: 30%;
left: 0;
}
.menu-body {
display: inline-block;
height: 200px;
width: 100px;
border: 1px solid black;
}
.activate-button {
display: inline-block;
height: 50px;
width: 20px;
border: 1px solid black;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
vertical-align: top;
}
<div>
<div class="menu-container">
<div class="menu-body">
</div>
<div class="activate-button">
</div>
</div>
<div>
That is actually a CSS/HTML only question.
However, to develop from scratch:
Draw a two column table and have the button in the second field
Or
Use Div containers and style them accordingly
Side Note:
Usually you'd use something like bootstrap or even ant.design.
There you have ready to use table components with possibility to filter (at least with ant.design) and for the filter seection popup you could use stuff like the modal component.
So, I am trying to do a little browser game with Javascript (jQuery). I have already fighting system and now I am trying to do movement system, so you can move around the world.
Let's say that I want to open map and go to town and then to shop. What is the best way to open MAP window and close all other windows, then open TOWN window and close MAP window, then open SHOP window and close TOWN window?
I tried something, but it feels a little bad.. Is this a good way to do it or not?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<style>
.shopBox {
width: 300px;
height: 100px;
border: 1px solid black;
display: none;
}
.mapBox {
width: 500px;
height: 500px;
border: 1px solid black;
display: none;
}
.button {
width: 50px;
height: auto;
border: 1px dashed black;
margin: 5px;
padding: 2px;
cursor: pointer;
}
.shop {
width: 50px;
height: 50px;
border: 1px solid black;
position: relative;
left: 50px;
top: 100px;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
$("#exit").hide();
$("#mapBtn").click(function(){
$("#map").show();
$("#exit").show();
$("#shop").hide();
$("#mapBtn").hide();
});
$("#shopImg").click(function(){
$("#map").hide();
$("#shop").show();
$("#exit").show();
});
});
</script>
<div class="button" id="mapBtn">Map</div>
<div class="mapBox" id="map">
This is your map
<div class="shop" id="shopImg">Shop!!</div>
</div>
<div class="shopBox" id="shop">Welcome to my shop!</div>
</body>
</html>
The code you have written looks functional. I don't see any problems. The only issue you will encounter is when you start introducing more details and complexity.
Just make sure you start making these into functions with annotations otherwise you will get lost.
An aside, consider the Unity Development Platform or Flash or consider using libraries which will save you a great deal of time: for example. Crafty
Otherwise, you'll learn as you'll continue coding. Focus on functionality and then optimization. Doing both with limited experience can be counterproductive.
Cheeers
you can select multiple elements at the same time like this
$("#mapBtn").click(function(){
$("#map, #exit").show();
$("#shop, #mapBtn").hide();
});
that will at least save you some space.
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.
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.
I have created a HTML layout for footer-docked sticking-out windows:
<style>
#footer-dock {
position: fixed;
bottom: 0px;
right: 0px;
height: 1x;
}
#wnd-cont {
float:right;
/* width is controlled from JS */
height: 1px;
}
#wnds-area {
float:right;
height: 1px;
}
.wnd-placer {
width: 270px;
height: 1px;
margin: 0 5px;
float: right;
}
/* floats out of placer */
.wnd {
overflow: hidden;
width: 270px;
position: absolute;
bottom: 0px;
}
.hdr {
border:1px solid green;
height: 32px;
background-color: green;
position: relative;
}
.title {
color: gray;
}
.bdy {
background: white;
border: 1px solid green;
height: 400px;
}
</style>
<div id="footer-dock">
<div id="wnd-cont">
<div id="wnds-area">
<div class="wnd-placer">
<div class="wnd">
<div class="hdr">
</div>
<div class="bdy">
Something else here Something else here Something else here Something here Something else here
</div>
</div>
</div>
<!-- other dynamically added windows go here -->
</div>
</div>
</div>
I need those placeholders and footer dock to be no more than 1px high, so I can click through the footer when there are no windows. The windows ( with all ofits contents) are added and removed dynamically using Javascript.
Everything works fine in Firefox and even in IE7, but Chrome has some weird problems.
At first, there were problems because I did not put 1px height to the footer and window placers - Chrome stacked windows onto each other. After putting 1px height, it started behave normally when adding windows, but when I remove any window using Javascript, the other windows do not reflow (they have .wnd-placer class with float: right) until I do one of the following:
zoom-in the page and then zoom back to 100% - suddenly everything jumps where it should be;
open developer panel and tweak some CSS of the .wnd-placer - just enable/disable of any property is enough, and again all my windows jump where they should be.
This is just Chrome specific, it seems, Chrome has some problems recalculating the layout of those .wnd-placer DIVs after I remove some of them.
Is there any way to force Chrome to redraw my windows (just like it does when I zoom-in/zoom-out or enable/disable any CSS property) so they reflow to the right, as they do in other browsers?
While there was no better answer, I did a following quick&dirty workaround for Chrome:
// force redraw for Chrome
$('#footer-dock').hide();
setTimeout(function(){
$('#footer-dock').show();
}, 10);
It works. Of course I would like to get rid of it, but I cannot find the "magical CSS" which would solve this issue.