Buttons on top of html/javascript canvas - javascript

I have a <div> element in which I load cytoscape.js which is just a tool to draw graphs.
In the top corner of this <div> element, I want some buttons (<button type="button" class="btn btn-primary">, etc.).
I want something like this example. In the example, the cytoscape elements are on top of the <h1> element because the <div> element has position: absolute; height: 100%; z-index: 999; .... I want it reversed, so the other elements are on top of the cytoscape canvas.
I also want a top navbar.
I guess I should use something like
<div id="navbar" style="position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 50px;>
</div>
<div id="main" style="position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 100%;>
<button type="button">Some text</button>
</div>
If I use this approach, the page becomes more than 100% in height (the vertical scrollbar becomes visible).. And if I click one of the buttons, it means that I also click in the "main" <div> element, which causes the javascript to create a node.

Related

how to make a div to be fixed in the layout(container)?

I made an example. How to make that green div to have fixed position in the container?
<div class="container">
<div class="row">
<div class="col-xs-4">hey hou</div>
<div class="col-xs-8">
<div>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
<div id="fixed">This div should aligned to the left like yellow div and fixed</div>
</div>
</div>
</div>
Please not all elements must stay at same positions as they are now and green div should be fixed!
So it should looks like this:
and when the user scrolls the site:
Please note that this only works on specific dimensions. You will need (a lot) of media queries and/or JavaScript/jQuery to get it working on all window sizes.
You can use translateX to reposition your div.
This is the CSS for the #fixed div:
#fixed {
position: fixed;
top: 100px;
background: green;
width: 100px;
transform: translateX(-265px);
}
Here is the updated JSFiddle
Just change your fixed div to `absolute and position accordingly like this:
#fixed {
position: absolute;
left: -300px;
top: 100px;
background: green;
width: 100px;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/uLa02c62/2/

Expand a div to full screen

I am using bootstrap 3 and jQuery. I have a div on my page right now that is 500 x 400 and it is sitting inside of a bootstrap row and col div. for example:
<div class="row">
<div class="col-lg-12">
<div id="myDiv"></div>
</div>
</div>
I want to use jQuery to tell this div to go full screen. When I click on my button to make it go full screen it seems to be locked inside of the bootstrap row and goes to 100% x 100% inside of the parent div. Is there anyway to tell #myDiv to eject from the parent that it is in and go full screen.
My css:
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
See this demo fiddle
CSS
#myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#myDiv{background:#cc0000; width:500px; height:400px;}
HTML
<div class="row">
<div class="col-lg-12">
<div id="myDiv">
my div
<button>Full Screen</button>
</div>
</div>
JS:
$('button').click(function(e){
$('#myDiv').toggleClass('fullscreen');
});
The trick is in setting position:fixed, by toggling the .fullscreen class. This takes it outside of the normal dom tree, so to speak, and sizes/positions it relative to the window.
HTH,
-Ted
JQuery
$('#button').click(function(){
$('#myDiv').css({"top":"0","bottom":"0","left":"0","right":"0"});
});
CSS
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
There is a little error in your css. Change the . to #.

How to use an image as a frame, and scroll inside? Simulating a phone on a website

I'm not sure what this is called, but how do developers accomplish being able to have, say a hollow image of a Nexus phone, and then scroll content inside of it? It's an ingenious way to simulate how a product will work in real life, so how does one pull this off?
Here's an example, about halfway down the page.
http://grupoweb.upf.edu/innova/q_kly/#step-6
#silversunhunter
I am able to get both images displayed, but the content seems to be completely obscuring the parent div. I measured the images and the dimensions are correct afaik.
css:
.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;
}
.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}
HTML:
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div id="nexus5-frame">
<div id="nexus5-content">
<img src="img/content.png"/>
</div>
</div>
</div>
You need to set the image as a background image in the parent div. Then a properly measured div inside that is absolutely positioned can be your scrollable content.
<div id="main">
<div id="content"></div>
</div>
the phone image is 345px × 661px
#main {
background: url(/filelocation) no-repeat;
height: 661px;
width: 345px;
position: relative;
}
the screen is 305x601 (hypothetically)
#content {
overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
height: 601px;
width: 305px;
position: absolute;
left: 20px;
top: 30px;
}

Create list layer over map with CSS

I want to build an mobile app interface which basically shows two different things, a list and a map. But instead of having a plain tap-bar at the bottom with two entries, I want to show the two things with as layers (for example like the Google Maps App (on iOS), where you can drag a drawer from the bottom to the top and interact with it, but you can also interact with the underneath map when the drawer is at the bottom again).
A good picture is that one (the map should be fullscreen underneath the list-view, and you should be able to drag the list to the top, and slide through the list, but also when the map is visible to interact with the map (pinch to zoom, etc.)).
I thought of building a map-div with a lower z-index than the list-div, giving the list-div a top-padding of 200px (so that the map is always visible a little bit, and the list is not on top) and giving the list-div a transparent .png background. But then the area on top of the list-div is not clickable, so I can't interact with the underneath map-div (because of the padding and the transparent background of the list-div).
Is this possible with plain CSS?
EDIT: I think I got the solution, which looks like:
<html>
<style>
html {
width: 100%;
height: 100%;
}
.map {
background-color: yellow;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.list {
height: 1000px;
width: 100%;
background-color: blue;
position: relative;
margin-top: 200px;
z-index: 1;
}
.layer {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<body>
<div class="map">
<h1>Map</h1>
</div>
<div class="layer">
<div class="list">
<h1>List</h1>
</div>
</div>
</body>
</html>

Put overlay on document with transparent window

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.

Categories