I'm trying to make available zooming on scroll. I have one #mainDiv with multiple .foo tables inside with jsPlumb endpoints. When the user scrolls, #mainDiv should remain the same size and tables should resize, which actually happens, but table's endpoints don't change their size and place. take a look at this jsFiddle:
https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/
Fiddle is pretty big, but we only need the first javascript function. Drag few items to the right side, add new link and scroll. tables will change size, but endpoints remain the same. How can I fix this problem with endpoints?
Endpoints are not part of these tables, but they are part of jsPlumb library, which has setZoom() function for it's objects. This function does not work and I would like to know why. Connectors should also change their place.
Also, app must be working on touch devices as well. Does setZoom work on pinch zoom for touch devices and how can I implement this?
Update:
So based on the question, we can just use the below CSS to either start the scaling from the left or the right depending on the elements position within the parent container.
A CSS change is needed in the parent container, as shown below
#mainDiv {
display: inline-block;
width: 82%;
min-height: 100%;
box-sizing: border-box;
float: left;
position:relative;
margin: 0;
padding: 3px;
}
Please checkout the JSFiddle for the solution!
JSFiddle Demo
Old Answer:
I am assuming that the zoom happening at the center is the problem, since we zoom from the middle the table always exceeds the container boundary. I would suggest adding the below CSS class, so that the endpoints are preserved.
.elementTable{
transform-origin: 0% 0%;
}
Please find below a working JSFiddle with the implementation.
JSFiddle Demo
My assumption may be wrong, please explain what its missing and I'll try to solve it!
Related
I have an example of the layout I am going for in this jsfiddle.
If you run that fiddle and click the Leaflet button, everything works great (works great with google too, but I cant post my api key).
If you click Cesium, it does not seem to respect the flexbox space allotted to it. Any idea how to get Cesium to behave?
Note, you may have to resize your browser a bit to show the problem
This is because of some strangeness with flexbox attempting to preserve the canvas' aspect ratio (needlessly, in the case of Cesium, because it will just rerender on the next frame).
Here's a workaround. Edit the top of your jsFiddle CSS to look like this:
html {
height: 100%;
}
#cesiumContainer, .leaflet-container {
position: absolute;
width: 100%;
height: 100%;
}
Then, add one new rule to your existing .app .data .map block:
.app .data .map {
/* keep existing rules here */
position: relative;
}
Here's the modified jsFiddle.
This sets up a parent/child relationship, where the parent flexbox element has gained a position: relative, which means that any "absolute" children of it will be absolutely positioned within its coordinates (making them effectively relative to it). The child in this case is #cesiumContainer, which we have now positioned absolutely, not so much to gain the absolute nature of the coordinate system, merely to gain the side effect that the sizes of absolutely-positioned elements don't contribute to the document flow around them. This means that Cesium's canvas element can't push flexbox around, it must conform to it exactly, which is what we want.
I want to get the Search Bar and Menu Button in the foreground. wearethenewmedia.com/indextrial.html This is a static page, with no CMS.
I tried using Z-index on everything and had no success.
In the above example, I haven simply put a negative margin on the search bar to put it in the top part of the website. It's hidden behind the solar system image, sticking out a bit.
Also, see original at WeAreTheNewMedia.com. It's seriously too much code to post in here. (Multiple CSS and JS pages involved.)
Can someone use Firebug (Firefox plugin) and tinker around? We have tried adding "z-index" variables almost everywhere, throughout the CSS pages with no luck.
We're also trying to implement this sidebar with our Menu button. But have conflicting CSS and JS Link: wearethenewmedia.com/menu/index.html
Basically z-index does not work without defining the element's position, e.g.:
#sticky{
...
z-index: 5;
position: absolute;
}
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Margin is not the solution here, and z-index, doesn't have effect if there is no one of the positions set (relative, absolute, or fixed).
As I saw in the website, the solution could be adding position absolute to the header:
#sticky {
position: absolute;
top: 0;
z-index: 5;
}
Hope it helps!
I have created a custom css tooltip, however the tooltip width is very narrow (only 1-2 words per line).
Fiddle example of the problem
I would like the tooltip size to be dynamically generated, as I will be using it in a few places with different lengths of text (the text may also change at a later date). Another reason I need it to be dynamic is that it needs to allow for browser resizing and mobile view.
I have done a bit of research and played around with (not limited to) the following properties:
width: auto; /*doesn't change anything*/
max-width: ;/*max and min not useful as I want it to be dynamic*/
min-width: ;
white-space: normal; /*neither change anything*/
text-wrap: normal;
None of the above seem to give me a solution.
I can't use bootstrap in this project, but I am able to add JavaScript if that offers a possible solution.
Thanks in advance for any help.
The solution was to change position: absolute; to position: relative. This, however, messed up some other dependent styling which would need to be fixed.
Reasoning: Absolute requires a width to be set whereas relative can be dynamic.
I have been fighting with this thing for several weeks now. I just can't figure it out.
I'm trying to prevent horizontal scrolling of the body when the menu is open. Here is a complete jsbin:
http://jsbin.com/vopeq/38/edit
Seems like any solution only undoes other things that are working the way I would like them to. So I added the requirements to the jsbin to keep track of which are satisfied with each version.
UPDATE
Maybe it's too good to be true, but I think I have all requirements satisfied, but I still need to check on android devices:
http://jsbin.com/vopeq/61
The thing I learned, that was tripping me up for so long and I didn't realize it, is that overflow: hidden on the <body> element, in Mobile Safari, doesn't do squat! I had to move my styles to prevent scrolling down one level of elements.
And Ed4 pointed me in the right direction. I needed to set overflow: hidden on the parent of the element I'm moving with left: 85% instead of the element itself (I was trying to do it all on the <body>).
So I have a body > .container, on which I do the overflow: hidden and body > .container > .content, which I push over using position: relative and left: 85%.
Your question is more of a design spec than a question, so rather than try to design the whole layout for you, I'll point out why your jsbin doesn't work.
Don't try to set left on body. If body is protruding offscreen, you're not going to be able to reliably stop scrolling.
Instead, keep body stationary with 100% width and height, so it can serve as your visible window boundary. When you want to lock the scrolling, you can set overflow: hidden on body. Handle the slide-over and scrolling menu with separate divs inside body.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}