how to make ddslick popup overflow - javascript

I am trying to use ddSlick jquery plug-in(a drop down with images) on my page. I'm trying to add this dropdown plug-in into a panel with size Height:200 to Widht:100px.
The problem comes when i clicked on the drop down, the popup menu goes under the other page elements. So last part of the dropdown popup can not be shown to the user.
Please let me know how can I make sure these kind of widgets get to overflow on other page elements?
Thanks,

Check your element z-index css property. Z-index handles
elements position in z-axis. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Related

HTML 5 JS Draggable Below Viewport

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

Adjust top of div after load

I am currently using the Intersoft Webgrid 9 for a bunch of our pages. Some of the columns use the built in Calendar popup to edit the date.
The calendar is suppose to popup just under the textbox for editing. In Chrome, this works fine but in IE the popup shows up quite a bit above the textbox.
The calendar popup is a div that is added to the page when the calendar image is first clicked. After the initial click, the div remains on the page but either the visibility changes to hidden when no longer being used or the position changes based on the textbox being edited.
Since we are using Intersoft's resources, I do not have direct access to the javascript for the image click event. I have however been able to add an additional click event to the calendar image but it fires before the div is drawn. After that since the div is now on the page, I am able to adjust the top of the div with jquery through this click event.
So I guess if anyone knows of a way to adjust the calendar control through Intersoft's built in javascript that would be great. Otherwise, I guess I was wondering if there was a way to adjust the top of the div after it has initially been added to the page.
I have attached two images.
Incorrectly displayed
Correctly displayed in Chrome
Thank you so much in advance for any help!
Is the text input element which the calendar is appended to relative or absolute positioned? If the calendar is being positioned absolutely then its parent needs to have relative positioning in order to work as expected. If you append an child with absolute positioning to an element with absolute positioning then they will both use the closest parent with relative positioning to calculate where they should be rendered.

Making jQuery Popbox visible outside of its parent

Using the jQuery popbox library (http://gristmill.github.io/jquery-popbox/index.html) I encountered the following problem:
I have a huge div which has it's overflow set to auto. It is actually a tournament grid displaying a lot of matches to be played. Each match (separate divs) has a small info icon and upon clicking, I'm using the Popbox to display additional information in the window that comes up.
This is all working correctly, however, whenever I press the info icon on a div that's close to the bottom side or the left side of the parent div which has it's overflow set to auto, part of the popbox window is not visible as it ends up outside of the parent div. I'm looking for a user-friendly way to solve this issues.
Setting the parent's div overflow to visible is not an option as I need the scroll bars to appear if it gets too large. It would be nice though if I could make the Popbox window go outside of the parent div and be completely visible.
The other idea that I can think of right now is to set special classes to the info icons close to the edges and adjust the popbox window to the right/top so it is visible in the parent div regardless of its overflow.
I suggest you to use some special classes and make the popover "pop" on top/right.
You can see an example here: http://getbootstrap.com/javascript/#popovers
If you want to use Bootstrap you can make a custom build here: http://getbootstrap.com/customize/?id=6493526
Popover css+js is only additional ~ 10k min+gzip

Scrolling a scrollable DIV without Javascript?

I basically have a fixed width DIV with an unordered list inside that overflows to the right of the DIV when the list is too large. It basically looks like this:
http://i.imgur.com/Tr36X.jpg
Each list item (basically a 60x60 image) is clickable and it leads to a page with the same DIV element and same list items, except one is highlighted a different colour to show it's the current image. What I'm trying to do is get the one that's currently selected (it has a class="active" attribute) to show in the middle of the scrolling DIV, like so:
http://i.imgur.com/YtF1y.jpg
The only way I can think of doing it would be to have a Javascript file included on the page to find what list item has the class="active" attribute, and then scroll along to it using Javascript. Problem with this is, it won't initially be scrolled to the correct position when the page loads, the user will see it "jump" into position when the Javascript loads and gets executed.
Is there a way to do what I want without Javascript? I don't mind a little bit of markup and CSS hackery if need be.
Thanks!
I doubt that this can be solved only with CSS and HTML. Unless you use some other language (like PHP) that can generate you an HTML with changed order of DIVs.
But, I can solve your Javascript "jumping" problem.
You initially show your DIVs with css style="display:none;"
Do the scrolling with JavaScript (and other stuff like changing order of DIVs if needed).
Set css style="display:block;"
i.e. items will show up on the screen already scrolled.

Javascript dropdown

I did a dropdown using JavaScript where on mouseover the dropdown opens. Now since i am using it in a side menu, i would like that when i go over the dropdown, instead of the dropdown items get over the items underneath, i would like that the items underneath move lower to make space.
I managed to achieve this by removing the overflow in the CSS however the problem with this is that when i enter the web page, the dropdown is fully expanded until i go over it with the mouse.
Leave the overflow:hidden in the CSS.
Add to the element style.overflow = "visible" when you want the menu to appear and use style.overflow = "hidden" or style.overflow="" on the element when you want it hidden again.
You need to get/calculate the hight of dropdown layer (supposing this is in different layer) and add this height to underlying menu item box element (checking whether dropdown is visible or not, of course).

Categories