I'm using geocoding to display a google map with the users location displayed. I'm looking the map to be situated with a sliding menu. The problem I have is when you open out the sliding menu the map only takes up a small area in the top left corner, but as soon as you resize the browser window the map takes up the full area like I want it to. This happens no matter what way you resize the browser window even by making it smaller. Let me know if you need to see more of my code than this:
Sliding menu function
$(document).ready(function()
{
$(".content").hide(); //updated line, removing the #panel ID.
$('#tab').toggle(function() //adding a toggle function to the #tab
{
$('#panel').stop().animate(
{
width:"800px", opacity:0.8 //to adjust width of bar
}
, 500, function() //sliding the #panel to 200px
{
$('.content').fadeIn('slow'); //slides the content into view.
});
},
function() //when the #tab is next cliked
{
$('.content').fadeOut('slow', function() //fade out the content
{
$('#panel').stop().animate(
{
width:"0", opacity:0.1 //slide the #panel back to a width of 0
}
, 500);
});
});
});
Sliding menu html
<div id="panel">
<div class="content">
<div id="mapContainer"></div>
</div>
</div>
CSS
#tab {
width: 30px;
height: 100px;
position: fixed;
left: 0px;
top: 100px;
display: block;
cursor: pointer;
background-color: #ff0000;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#panel {
position: fixed;
left: 0px;
top: 50px;
background-color: #ffffff;
height: 500px;
width: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;
}
The map container requires a width and height to correctly display the map but it seems the animations are interfering with the values.
The map works when the browser is resized as the width and height are correctly set and the resize event is raised.
The quickest solution to your problem would be to call the resize method when the animation has finished as so:
google.maps.event.trigger(map, 'resize');
JSFiddle Update: http://jsfiddle.net/uADHv/2/
Related
On my page, I'm displaying a log file in a div element with overflow-y:auto. In the top right corner of the div, I'm overlaying a close button div with position:relative.
When the scrollbar appears, the button is overlaying the scrollbar which is hard to see and looks ugly. You can see an example here: https://jsfiddle.net/4azw0rLf/
Moving it with javascript when scrollHeight exceeds clientHeight feels like a hack. Is there an option in CSS to move the close button to the left for the width of the scrollbar as soon as it appears?
You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.
EDIT
With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;
It is not compatible with all browsers, but with most, you can check compatibility here.
const terminal = document.getElementById("terminal");
addText = () => {
terminal.innerHTML += "overflowing line<br>";
}
#container-terminal {
position: relative;
overflow-y: auto;
border: 2px solid;
height: 100px;
width: 200px;
}
#terminal {
position: absolute;
height: 100%;
width: 100%;
}
#closeBtn {
background-color: red;
position: -webkit-sticky;
position: sticky;
top:0px;
width: 20px;
display: inline-block;
float: right;
}
<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>
<div id="container-terminal">
<div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
<div id="closeBtn">X</div>
</div>
I added code to make a div, #pending-friend-list-dropdown, close when clicking outside of it. This works fine, but now when clicking on my image div, friend-icon, the drop-down div will not close now.
As you can see in my snippet, the image div is what opens the drop-down box. I am just trying to figure out how that image div can be used to open and close the drop-down, while using the mouseup function to close the drop-down div as well.
//Hiding Pending Friend Drop-down when clicking out of it
$(document).mouseup(function (e)
{
var container = $("#pending-friend-list-dropdown");
var friend_icon = $("#friend-icon");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
else if (friend_icon.has(e.target)) {
container.hide();
}
});
//Toggle Pending Friend List
$("#friend-icon").click(function() {
$('#pending-friend-list-dropdown').toggle(100);
});
#main-bar {
width: 85%;
height: 60px;
position: relative;
margin-left: 15%;
background: red;
padding: 3px 0;
}
#main-bar-container {
border: 1px solid black;
margin: 0 10px;
position: relative;
width: 95%;
height: 56px;
left: 2%;
}
/*---- Pending Friends List----*/
#friend-icon {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20%;
top: 15px;
}
#friend-icon img {
height: 30px;
width: 30px;
}
#pending-friend-list-dropdown {
height: 500px;
width: 400px;
overflow: scroll;
z-index: 100000;
position: absolute;
left: 70%;
top: 70px;
background: blue;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-bar">
<div id="main-bar-container">
<div id="friend-icon"><img src="../icons/collection/social.png" alt="Pending Friends"></div>
</div>
</div>
<div id="pending-friend-list-dropdown">
</div>
You can achieve this more simply by running the code whenever someone clicks on the html-element (the entire page).
Then check if the click is located on certain elements.
There is also no need to give the instructions in two places for what to be done when clicking on "#friend-icon". I have removed the second instance of this in the below code, and just moved the .toggle up to the if statement.
It now works like a charm:
$("html").click(function(event)
{
var container = "#pending-friend-list-dropdown";
var friend_icon = '#friend-icon, #friend-icon img';
if ( $(event.target).is(friend_icon) ) // clicking on the toggler-div or the img it contains
{
$(container).toggle(100);
}
else if (!$(event.target).is(friend_icon) // clicking outside of the toggler
&& !$(event.target).is(container)) // and outside of the toggled div itself
{
$(container).hide();
}
});
Here's a jsfiddle: https://jsfiddle.net/r54ardcz/2/
I'll give a third option just so that all the ones I know are on this site. This is the option that Office Fabric UI uses (https://dev.office.com/fabric#/components/contextualmenu) where I think #zheer-mchammer-husain's answer is more along the Twitter Bootstrap model.
Essentially you create a layer over your whole page (height: 100vh and width: 100vw; position: fixed) and then put your dropdown content inside that layer. When the user clicks that layer, it closes the whole layer at once disappears and all is done.
Say I have divA that partially overlaps divB. How can I allow clicks on divA to pass through to divB but still have hover fired when hovering over divA?
I'm aware of pointer-events:none; and this makes the clicks pass through but it also prevents the hover.
I have also tried the below, but it did not allow clicks to fall through
$(document).on('click', '.feedback-helper', function(e){
e.preventDefault();
})
Picture the relation of the divs like:
Here is the why of it (read as: "let's avoid an X Y problem"):
I'm working on an implementation of feedback.js
To see the issue:
view the feedback.js demo
click the feedback button in the bottom right
draw a box on the screen to highlight a section
click the "black out" button
try to draw a box inside the first box you can't because the click is blocked by the first box
I need to allow drawing a blackout box over a highlighted area but if I set pointer-events:none; I will lose other hover functionality I have on those elements.
Here is a jsFiddle example
All solutions welcome
I checked your example page and if you set a slightly lower z-index on data-type="highlight" that could take care of the problem, try a z-index of 29990 in comparison to your current 30000. This should allow you to target the highlighted feedback area and overlay it with the blackout elements.
You could get the click event for the overlaying element to initiate the click event for the underlying element.
Native JS Example:
document.getElementById('divA').addEventListener('click', function() {
alert('Clicked A');
});
document.getElementById('divB').addEventListener('click', function() {
var event = document.createEvent('HTMLEvents');
event.initEvent('click', true, false);
document.getElementById('divA').dispatchEvent(event);
});
div {
cursor: pointer;
border: 1px solid black;
}
#divA {
height: 300px;
width: 300px;
background: whitesmoke;
}
#divB {
height: 30px;
width: 30px;
background: grey;
position: absolute;
left: 100px;
top: 100px;
}
#divB:hover {
background: green;
}
<div id="divA"></div>
<div id="divB"></div>
jQuery Example:
$('#divA').on('click', function() {
alert('Clicked A');
});
$('#divB').on('click', function() {
$('#divA').trigger('click');
});
div {
cursor: pointer;
border: 1px solid black;
}
#divA {
height: 300px;
width: 300px;
background: whitesmoke;
}
#divB {
height: 30px;
width: 30px;
background: grey;
position: absolute;
left: 100px;
top: 100px;
}
#divB:hover {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA"></div>
<div id="divB"></div>
Another option is to use a pseudo element instead. Perhaps that will do what you need.
$('#toggleBlack').on('click', function() {
$('#divA').toggleClass('hidden');
});
div {
border: 1px solid black;
}
#divA {
background: whitesmoke;
position: relative;
}
#divA.hidden:before {
position: absolute;
content: ' ';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">Highlight the text once I'm hidden and cut/copy/drag</div>
<br />
<br />
<button id="toggleBlack">Toggle Hidden</button>
Jsfiddle is here: http://fiddle.jshell.net/Msd7v/29/
Here is my Javascript:
$('#app').contents().find('.dragOption').draggable({
iframeFix:true,
scroll: true
});
and then in the iFrame
#html
<div id='box'>
<div class='dragOption'></div>
</div>
#css
#box {
background: red;
height: 600px;
width: 100%;
left:10;
z-index: 10000;
position: relative;
top: 10;
}
.dragOption {
height: 80px;
width: 200px;
position: absolute;
z-index: 100001;
outline: 1px solid #000;
top: 400px;
}
When you try to move the draggable div when you are already scrolled down, the draggable library doesn't take into account the window height. Is there a way to offset this? or a monkey patch for the library so you can force it to recognize the correct scroll distance and not have the draggable div jump up to the top of the iframe above the fold?
I would like to do something with my document which is quite unique (haven't seen it before) and thus maybe not even possible.
What I would like is to have a div which will overlay everything in the document, maybe give it background black so that nothing is visible. Second I would like to have a small squire window in the overlay which doesn't share the black background, in fact it is somewhat transparent and therefore it would be possible to 'peek' trough that window to see document content. But only the content where this window is. It would be kinda like those "zoom" plugins in which only a small portion is being zoomed, but in this case it would show specific content. Any idea how to create such a thing?
An example of what you can do is the following (it may not be the best but it works)
HTML
<div id='peakview'></div> <!-- This div is your view window -->
<div id='out'>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
<div class='overlay'></div>
</div>
The <div> inside of #out will re-size accordingly to the position of #peakview creating the illusion of a full overlay. This can be done with simple css and some calculus.
Mainly what you need is the position of the element on screen.
var h = $(this).offset().top;
var l = $(this).offset().left;
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth()));
//right offset
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth()));
//bottom offset
In my example I used .draggable() from jQuery UI to move the div around. And while dragging the 4 divs shown above are adjusting their height and width to fill up the space between #peakview and document border.
An example for the first div
$('.overlay:eq(0)').css({
top: 0,
left: 0,
width: '100%',
height: h //the height is always changing depending on the #peakview .offset().top
});
In this fiddle you will see how the filling divs behave
Another ruff start:
http://jsfiddle.net/XDrSA/
This require some extra work, but it may suit your needs.
HTML:
<div id="yourContent" style="width: 300px; margin:100px auto;">
<input type="button" id="zoom" value="Click to zoom"/>
</div>
<div id="zoomer">
<div id="window">This is your "window"</div>
<div id="overlay_top"></div>
<div id="overlay_left"></div>
<div id="overlay_right"></div>
<div id="overlay_bottom"></div>
</div>
CSS:
body {
margin:0;
padding:0;
}
#zoomer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
display: none;
}
#overlay_top {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
top: 0
}
#overlay_right {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
right: 0;
}
#overlay_left {
height: 100%;
width: 20%;
background-color: black;
position: absolute;
left: 0;
}
#overlay_bottom {
height: 20%;
width: 100%;
background-color: black;
position: absolute;
bottom: 0;
}
#window {
margin: 0 auto;
height: 100%;
width: 80%;
position: absolute;
background-color: rgba(0,0,0,.5);
}
And a piece of javascript:
$('#zoom').click(function() {
$('#zoomer').fadeIn();
});
You may need to stumble with the positioning, and the window will be a fixed size one. Not draggable though.