I am looking to create an expandable div that slides in from the right on google maps. The functionality should be similar to what the #app-viewcard-strip does here: https://www.google.com/maps/#41.5278682,-76.2402656,12z
Video for reference: https://streamable.com/afrk3
The main functionality being that the div is apart of the controls and moves the controls upwards to fit the div. I am looking to do the same functionality but move controls to the left.
I have a prototype here: https://codepen.io/ParoXsitiC/pen/EzLMZv
However I cannot get the #mySidenav to be contained within #mapPlaceholder
The absolute position is calculated from the closest parent that has either position relative or position absolute.
So just add position:relative; to #mapPlaceholder.
Related
I created this scroll effect, where div is divided into left and right side - left side contains of images, that change based on scroll position and it's fixed and right side is scrolling content.
This is my idea:
https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css
To describe the sandbox - you can see that my scroll effect works, but right div scrolls only when mouse is on that right div, what I need is that content of that right div will scroll down also when mouse is on left div
I tried to make the whole container's position fixed so it doesn't move, but it did not work. Is there a way how to achieve it?
Here is example of what I would like it to be like:
(starts with STEP 1)
https://honextmaterial.com/process/
To achieve your goal in React, you need a combination of some CSS and the JS scroll event. First, assign position: sticky to the element you need to be fixed when it's about to leave the viewport. Then, using a React ref, you access the scroll position of the scrollable div and use that logic to set your image source (you should avoid accessing the DOM directly with getElementById in React).
Here's a working codesandbox example
You could do this basically with only CSS. You could make the right (scrollable) side overlap the left side with position: absolute. Then the whole area is scrollable. After that you'd change the width of the inner element to 60% and you'd visually have the same output as before. I changed your codesandbox accordingly: https://codesandbox.io/s/scroll-effect-forked-55qsf
The only downside is, that the left side is not clickable, scrollable etc. anymore. If you want to keep HTML & CSS like before, you'd have to capture the scroll-event and run some JavaScript code.
I have a problem with dragging an element below the viewport. When I try to drag the element below the viewport the page will not autoscroll. As you can see in the image I have provided I am trying to drag an element below. The only way I can scroll below the viewport to drop my element in Firefox is to use the mouse wheel.
If I left click and hold while dragging down on this Stack Overflow page the viewport autoscolls downward. This is how I need my web app to perform.
I'm not really sure where to start with this as it is a paid WordPress plugin called Learndash that not properly coded.
Can anyone point me to the correct solution to this problem?
Thanks.
Checkout this link to automatically scroll the window.
https://www.bennadel.com/blog/3460-automatically-scroll-the-window-when-the-user-approaches-the-viewport-edge-in-javascript.htm
Edit:
Add a margin below your div to allow space to insert
Or add the CSS properties height:500px and overflow-y:scroll in your div
I plan on creating a layer of absolutely positioned elements that is moved around with jQuery. I need to create a frame, on top of and around this layer, that has a fixed viewport in the center and edges which flow to the edges of the browser viewport, creating a mask that hides portions of the main layer that is moved around underneath.
Currently I am using four divs to create the frame and setting their dimensions onload with a jQuery statement like this:
`$("#viewportLeft,#viewportRight").css("width",($(window).width()-[maskViewportWidth])/2);`
Any better ideas?
Why not just move a div around inside another div?
Does anyone out there have a good example of a vertical content rotator in jQuery or Javascript? Especially ones with navigation arrows and thumbnails?
Most that I've seen are horizontal.
jCarousel will do this for you. Here's an example showing the vertical functionality (with arrows).
I'll make a suggestion for you. Create a div with a defined height and overflow set to hidden. Create another div inside the defined height div and place your content with it. Using the animate function of jquery, animate the child div upwards with marginTop or top with relative positioning. Use some creativity to make it pretty or dynamically load content.
If you really need a script i'll make one for you. But you can just get any horizontal carusel and change the left/right attributes with top/bottom (the ones in animation). Also jCarousel is a good example. (the one Andrew suggested).
I am trying to make a user generated nav bar.
This nav bar because it is dynamically created may have more tabs on it than the width of the nav bar.
That being the case, I would like to make it so that the nav will scroll from left to right.
Currently I use an image mapping technique where I plot coordinates on an image and move divs based on position which calculates speed and direction of movement.
The problem is background images may not have image maps applied to them. The general workaround is to create invisible divs on top that would represent my coordinates, but since my text would be there, and I don't want to mess with a z-index at all, that option is deprecated.
Any ideas how to do this any other way?
Here it is.
http://valums.com/scroll-menu-jquery/