I'm creating a popup for elements in the DOM, much like Qtip. I know there are alot of done plugins for this but I wanted to create one myself.
Basicly what the code does:
Hover element, take that elements offset and alter a little bit so that the popup is over the element.
Show the popup element and then change its position according to the element that was hovered.
But it seems like I've failed. It doesn't work in IE7.
When I hover an element in IE7 my popup shows in the right location BUT the element that was hovered changes position.
JSfiddle: http://jsfiddle.net/egj46/
I can't say what exactly is causing that, it can be solved by moving the popup div "pHolder" to after the content.
Related
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
I just started working with SVG images and I was wondering if it is possible to create a text link that when on click, it focuses on a specific element.
For example, I have a text that is located on the far left of my screen and a circle element that can only be seen if I scroll to the far right. And when I click on said text, it would then scroll or jump to that element.
I'm still somewhat a beginner at this, so any help would be greatly appreciated.
If you want to snap to an element, you can always do the following.
<div id="snap-to-me"></div>
SNAP
Upon clicking the link, the page will try to find an element with that id, and snap to it.
If you want animated scrolling, I suggest you checkout a library that supports it. jQuery being an obvious, good choice.
After searching the net for several hours, I decided to write my own code for a horizontal dropdown menu that allows html content in the dropdowns instead of the standard 'list' items everyone uses. I have very little code compared to most of the dropdowns I found. I have two issues that are driving me crazy.
Issue #1:
When you mouse over the Category, the 'dropdown' div appears as it should, but when you go to mouseover the 'dropdown' div it disappears. But if you mouseover another category the 'dropdown' div disappears and the new one appears as they both should. What am I missing?
Issue #2:
If you stop the cursor right over where the underline link of the Category appears and leave it there, the 'dropdown' div appears to blink by popping up twice. Can't figure that out either?
I have posted my code here: http://jsfiddle.net/UXxL8/
Thanks so much and I know it's probably something simple I'm overlooking. But you know how it is after you stare at the same code for too long...
Right now you're attaching your behaviors directly to the anchors. When you mouse down to the newly exposed contents you've gone beyond your anchor area and mouseout is triggered. If you place both your anchor and your dropdown inside the same container and then attach your events to that container you'll get the expected behavior.
I would also recommend using mouseenter and mouseleave rather than mouseover and mouseout since you will have child elements with your menu. This question is a good description of why that's advisable.
I set up an updated fiddle here. The Category 3 menu item has been updated.
You also need to bind the mouseover/mouseout to the dropdowns. And the reason why the dropdown is blinking is because animation functions get queued - fadeIn starts after the fadeOut has finished, so you need to stop the current animation before adding another.
Here's the improved code.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.