Bootstrap Tabs Hover modification - javascript

I altered the bootstrap tabs to work on hover and made some changes to hide the content tabs correctly.
I want it to function as a dynamic popup/flyout layer.
Now the problem is that it does not work properly when you dont hover over any content after hovering over the menu. I want it to be visible when hovering over the respective tab or over the content itself. The problem with my quick change of the original script is that it will still show the content when you leave the Tab to the left (1st menu item) or to the right (3rd menu item).
It is illustrated in the following jsFiddle:
http://jsfiddle.net/WnQvF/27/
A simple, clean solution would be appreciated.

Related

Angular 8 cannot get child panel to scroll properly to top of screen

I have a parent component that has 4 child components inside of it, each of them a primeNg panel with a form inside of them. The first 3 panels are expanded at all times(the collapse and expand icons are set to empty strings) and the last one is collapsed on load. On the last panel, I have a button that allows you to "Edit" the information which appears inside it and expands the panel.
What I would like is for this 4th panel to then get pulled to the top of the screen. However what actually happens is the panel expands and the scroll bar moves up, but the panel itself stays put.
I have tried several different options to get this working using various combinations of scrollTop, offsetTop, scrollIntoView, etc but nothing has worked. The scrollbar moves but the content does not, it stays where it was.
I even tried to set the id to an element half way down the form on the last panel and then used scrollIntoView: {block: 'center'} as an option...still nothing, same thing, it scrolls the scrollbar but not the content.
Can someone help me out with this and let me know what I am doing wrong?
in parent component:
<p-panel1></p-panel1>
<p-panel2></p-panel2>
<p-panel3></p-panel3>
<p-panel4 id='scrollToHere'></p-panel4> <---I want to scroll p-panel4 to top of the window
when the edit button is clicked
UPDATE:
Got it fixed by using setTimeout(document.getElementById('scrollToHere').scrollIntoView({behavior: 'smooth', block: 'start'}),0)
gotta be one of those weird DOM things where it tried to scroll before the panel was expanded...will try and change it to onAfterToggle but not sure if that will work because I am not using the icons and using a button to do it.
#Matte the scroll into view should work. But it seems that the scroll into view is triggered before you contents are expanded so try with some delay. And there should be more page content below your last panel if there is nothing and it is the last thing on page then the page would not scroll to the top of the height is smaller then the screen

Is there a CSS or Jquery term for side bar menu on a page with panel content on the righthandside

I'm looking to build something like this into my webpage:
I'm interested in the box at the bottom of my mockup, which shows the menu items on the lhs and the panel on the rhs that will show different content when clicked. I'd like to build it in html and jquery if possible.
I've seem similar things before, but I don't know the term for them. At the moment I'm googling show/hide panels show/hide menu buttons etc, but nothing is coming up. So hoping that this is a standard (ish) thing and that someone can help me out and let me know what I should be Googling!!!
Thanks!
It's a "tab panel" (or "tabbed panel"), with the tabs arranged vertically on the left. This is usually an option available on various tab panels even if they default to tabs across the top.

Multiple problems with twitter bootstrap - toggling tooltips, non-responsiveness

http://dynamo.viralsmods.com/becky
The circular images of people on the front page have a tooltip associated with them. When you hover over each tooltip for the first time, it shows, but any subsequent hover does not. What is the reason for this?
Secondly, if you view the website on a smaller screen (either mobile or just shrink your screen), the navbar shows the three lines instead of the links. When you click/ tap the three lines, it brings up a dropdown menu with the new links. When you tap it again to hide it, it hides and then automatically shows again. This error seems to be the same sort of problem with the tooltips, as it can't show/hide properly.
Any insight?
http://dynamo.viralsmods.com/becky/web/js/jQ.min.js (included in your page) is jQuery v1.7.1.
Bootstrap requires jQuery >=1.9.0
Upgrade your jQuery!

datepicker/datetimepicker jQuery widget appearing on different div

So, the scenario is that I have a webpage with two divs, one main div and a sliding div panel implemented using mmenu, which appears on a button click from the main div. And now I have a text box on the right sliding panel, on which I am trying to use the datepicker widget (also tried the datetimepicker widget - http://trentrichardson.com/examples/timepicker/).
Now, the problem is that when I click on the text box and the datepicker/datetimepicker widget appears but not on top of the text box but it appears at a distance on the main div. It seems that if I have the right panel clicked and then I hover over the widget, then also the widget does not seem to show the on hover button color changes, but if i click on the main div and then hover over the datepicker widget, then all the changes expected on hover occurs. So, it seems that the datepicker widget is drawn over the main div.
I have been trying to debug this for hours now, can anyone think of any reason why this might be happening and how to make the widget appear on top of the textbox in the sliding div and not on the main div.

Creating pull down menus

I am trying to creating a pull down menu in a navigation bar. I have the idea how to do it. I am just not succeeding in displaying the menu list on a layer above the "main page layer". The main page is shifted downwards when I click on the menu item. I am using display:none. How to force the menu list to appear above the main page without the main page changing its position?
If you wanna do using CSS then try adding CSS property position:absolute.
Here is an example of a CSS-driven menu using hierarchical list items: http://phrogz.net/JS/ul2menu/purecss_testsuite.html

Categories