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.
Related
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 have a problem with scrolling over fixed element, it doesn't work on my site. But I saw that there is no such problem in some scrolling examples like this one. After a while I found a little difference - on my site the scrolling of the page is not on the html tag but on the of app's root tag.
Here you can find an example of the situation that I have - you can't scroll over the red block http://jsbin.com/rutogosesa/edit?html,css,output, and here an example where you can scroll over the red block http://jsbin.com/munixamuqo/edit?html,css,output.
My quesion is: how to allow scrolling in first example. I know that I can subscribe on onwheel event and move scrollbar mannually, but it looks weird as all browsers have smooth scrolling my implementation will broke its behaviour, especially for mac users. Maybe there are some other possible solutions?
Let's boil your trouble down to this: if the mouse is over #inner, you can't use the usual methods (spacebar, arrow keys, trackpad, wheel) to scroll #outer up and down.
If you need to keep everything you have, get around this by adding pointer-events: none to the inner element. (Note that this means you won't be able to interact with it at all - so any links in the inner element won't be clickable. Given the examples you gave in your question, that won't be a problem.)
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
pointer-events: none; /* this is your fix. note it doesn't work in IE < 9 */
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push" />
</div>
If you can get away with changing your html's styles, you can work around this by dropping the html {height: 100%; overflow: hidden}. This solution doesn't use pointer-events: none so you'll still be able to interact with the inner element!
html {
margin: 0; /* dropped html {height: 100%; overflow: hidden} */
}
body {
height: 100%;
margin: 0;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push"></div>
</div>
I've got a problem with jquery hide() and show() on internet explorer 10. I need a pop-up window for a banner I'm making, when clicking left bottom corner a div will show, when div is up and clicking on top right corner div will hide.
This work on modern browser, but not in internet explorer 10.
HTML
<div id="banner">
<button class="show"></button>
<div id="modal">
<button class="hide"></button>
</div>
</div>
CSS
#banner {
width: 468px;
height: 240px;
border: solid 1px black;
position: absolute;
overflow: hidden;
cursor: pointer; cursor: hand;
}
#modal {
width: 468px;
height: 240px;
display: none;
position: absolute;
z-index: 9999;
background-color: red;
}
.show {
width: 80px;
height: 35px;
bottom: 0px;
position: absolute;
z-index: 12;
}
.hide {
right: 0px;
top: 0px;
width: 50px;
height: 50px;
position: absolute;
z-index: 12;
}
Jquery
$(document).ready(function(){
$(".hide").click(function(){
$("#modal").hide();
});
$(".show").click(function(){
$("#modal").show();
});
});
EDIT - problem solved
It appears you cannot click empty tags (only specified width/height) in IE 10 and below, so I had to fill it with a transperant color (rgba 0,0,0,0.001).
I also realized it could be done without jquery, duh.
You can always use vanilla JS, and do something like:
document.getElementById('modal').style.display = 'block';
or
document.getElementById('modal').style.display = 'none';
This way is also more performance efficient than going through a jQuery object.
Hide and Show methods of Jquery toggles the CSS property display to none/block for applied HTML tag.So question rules out about compatibility.
Just correct the error on console of browser (F12) if any (I saw one unreferenced object) and try again .
Also, check the browser mode you are running. (F12).
I have two <div>s with absolute position. One is displayed and the other is display: none on load. When the link on the visible one is clicked it is moved and the other is displayed.
I have a third <div> with link that I would like to display directly below these. Since they’re both position: absolute I have not been able to find a way to do this. I have found various solutions, but most of them are workarounds for using absolute position. Since my <div>s need to show ontop of each other I unfortunately can’t remove the absolute positioning.
As such I have tried various combinations of position: absolute and position: relative on the three <div>s, but so far nothing has worked.
JSFiddle with my problem: https://jsfiddle.net/dagz9tLw/1/
<div> with id linkbar is the one that needs to be at the bottom.
The other two <div>s don’t have a set height so margin-top won’t work. linkbar also needs to be just below the <div>s and not right at the bottom of the page.
I experienced that using a div acting as a buffer is quite useful and easy to implement for this purpose. You just set it above your div#linkbar and adjust it's height on load and when the div#front get's repositioned:
$("#topBuffer").css("height", $("#front").offset().top + $("#front").height());
$("#showLink").click(function() {
if (!$("#back").is(":visible")) {
$("#back").show();
$("#front").animate({
'marginLeft': "+=30px"
});
$("#front").animate({
'marginTop': "+=20px"
});
$("#topBuffer").animate({
'height': "+=20px"
});
}
return true;
});
.front {
width: 400px;
display: block;
border: 2px solid #000000;
text-align: center;
position: absolute;
margin-top: 20px;
z-index: 10;
background-color: white;
}
.back {
display: none;
width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
z-index: 1;
margin-top: 20px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front" class="front">
<a id="showLink" href="javascript:void(0);">front</a>
</div>
<div id="back" class="back">
back
</div>
<div id="topBuffer"></div>
<div id="linkbar">
test
test
test
</div>
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.