Check if a element is on the actual page - javascript

I'm using a poshytip, it is working fine, until I want to display my tip on the element that is under the current page (I mean that page where I have to scroll down to see it, don't really know how to name it properly). Unfortunately, poshytip has some bugs related to that - if I want to display a tip on the element that is currently lower than the current page position, then tip is showing at the bottom of my page. Havent seen any better tip plugin than this, so I decided to fix it on my own.
The question is - is there a way in jQuery/javascript to check if the element (for example the input with ID) is on the current page that user is viewing? By saying current page I mean the top of the page - my element is placed much lower, so user have to scroll down the page to see it, so is there a way to do something like: if user is scrolling down the page, and the element will be finally visible then send alert to the user?
I know this may be kinda complicated, but couldn't find any better words to describe my problem, I'd answer additional questions, if you have one.

If you want to test for an element's visibility in the viewport, you should reference this post here as it's outlined quite clearly.
On another note, I prefer using the jQuery tools suite for my Tooltip plugin of choice. You can see it here

Related

How to make element go back to original position using JavaScript

So, I'm making a navbar where , when I'll be clicking an icon it'll move a bit upwards. And it works fine. But the problem is the icon is now stuck permanently on that place. How do I make it go back to original place when I click somewhere else??
i tried searching on yt and google but idk how to search it up in short and due to that i didn't get anything useful. I'm very new in JavaScript so a simple explanation would be best for me.. tnx!!
Personally, I would put the icon in the label element, which was linked (via for) to the input radio. And I would link the position to label:checked (in CSS class) And when another icon is clicked (which is maked the same way), the previous icon is automatically unchecked (by radio). And I don't even need javascript :-)

How to modify spin.js to block the UI and show on the center of the screen

I'm already using spin.js in my application. I like it because it's pure JS and at least for me solved some issues that I was having using a loading image. However the default behaviour has two things that I would really like to change.
Here is a simple Fiddle example which is simple but very well illustrates what I would like to achieve.
I have a very long from and at the beginning of the HTML file I have <div id="show-spinner"></div> so when the user clicks Submit I can:
var target = document.getElementById('show-spinner');
var spinner = new Spinner().spin(target);
The problem is that when I'm at the end of the form where the submit button is when I call the spinner it shows in such a way that I may very well not see it at all, as it is in my Fiddle example (at least if you are using some low(laptop) resolution) but no matter the resoution there's always the chance to get so down below that you can't actually see that the spinner is shown. Which kinda leads me to the nex problem which I think is realted to the first - I would like to show the spinner always at the center of media screen (the laptop display for example) and also - since for example I don't want the user to be able to click Submit twice and in I would say, all of the cases, when I show the spinner I would like the user to not be able to interact with the UI - I mean, to click buttons, write stuff in inputs and so on so I would like to show some sort of load mask or I'm not sure how it's called, just like when you call alert()
So to sum it up - from what is it right now in my fiddle example I would like to change it to some alert like behaviour so that no matter where I am on the HTML dom I always get some sort of spinning animation on the center of my screen and mask diasbling the user to interact with the UI.
Since this sounds to me as kind of trivial task, or at least something that have been solved already I would accept answer pointing to plugin that provide such functionality. The only thing - I woul prefer to use something that is pure JS and doesn't use images.. but I will apreciate all suggestions!

Need an anchor link that only moves Overflow text box without Scrolling Browser

I'm trying to figure out a way of clicking an Anchor link TEMPLATES
on the top of my page without having the browser scroll to the point of my anchor.
Sounds redundant huh?
Wait.
My anchor link is inside of a overflow: Hidden text box where clicking the Anchor link
at the top of my page should only raise the anchor in the Overflow text box displaying it's
content, like having a new webpage. From a layout perspective the browser must always be at the top of the page where my form is.
Anyone have a clue?
Thanks
UPDATE:::
Oh spoke to soon, looks like the Css and Javascript - Show and Hide method would be more adequate.
Found here: http://webdesign.about.com/od/dhtml/a/aa101507.htm
Thank internet!
It is very easy do so. What you are trying to do is to have a parent div/view which would act as the main div and all the other divs/views will be loaded or unloaded within it dynamically or so as its children. It would better to employ a design pattern such as "MVC", but it can be done via JQuery straight up. If I was to tackle something like this, I would have a "navigation view" and then content views so when a user clicks on the desired navigation link, that particular view will be loaded or scrolled in. (Of course, you need to experiment and line your depths as desired for the content views).
This is how Flash is programmed. This is a very high level explanation, and I hope it gives you somewhat of an idea about getting it going.

Disabling a checkbox until an iframe has scrolled

I suspect this is probably not possible due to browser security, however I have a form at the end of which is an iframe displaying our terms and conditions page. Below is a checkbox for agreeing to these terms and conditions.
Other sites I have seen require you to scroll down in the terms and conditions before the checkbox is active but i suspect this is done with a textarea or scrollable div rather than an iframe.
As such is anyone aware of how you can spot when an iframe has scrolled in javascript or jQuery so I can enable the checkbox once it has been scrolled.
Following code in your embedded document should do it.
$(window).scroll(function () {
if ($(document).height() <= $(window).height() + $(window).scrollTop())
$("#chk", window.parent.document).removeAttr("disabled");
});
I have not seen a check box automatically become active after scrolling, and actually cannot see the purpose of it. What difference does it make if the checkbox is active or not when it's hidden?
I would also add that I may have misunderstood your question. Do you want the checkbox to become selected after scroll? Again this would be pretty dangerous because you could find that your users end up agreeing to your terms by default because of the code that you are about to write.
Having said all that what you are asking may be answered in the question I asked a while ago here
I'm not sure you can do that (but I'm not sure you can't). Here is an alternate solution for you:
Simply put the checkbox in your iframe. The user will only see it when having scrolled down the iframe.
Hint: you can also put everything in a div with fixed size and overflow-y:scroll in your CSS. Doing this, the checkbox will be in your page.

How to make popup help/info message?

How do show pop up help messages in jquery?
I.e You might want to let the user know about a new feature, or might want to provide the user with help on how to use a feature.
Your best bet to get started would be the jQuery Dialog which is part of jQuery UI. That can give you basic message abilities
You could use a popup lightbox plugin, there are plenty available, but I'd recommend FancyBox because it's flexible, easy to use, and looks quite professional. You can them to display any content, including simple text, buttons, forms, iframes and images.
Have a div element hidden. Position is absolute, z-index to something greater than 0 (css).
Onclick on some button or something, have javascript change the display of this element to block.

Categories