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.
Related
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.
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
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.
I'm sure I can't be the first person to have this problem, but I haven't had any luck finding the solution.
I'm using Shadowbox in its simplest form; just doing an image popup with a link like
Click here to view the image.
This works fine, but has one very odd side effect: When I click the link, all of the select inputs (i.e. drop-down boxes) of the form on my page disappear. A little snooping with Firebug reveals that the CSS is being modified to give the <select> tags the property visibility: hidden. When the image is dismissed, the inputs reappear.
Not surprisingly, this happens consistently across browsers.
Since the inputs all reappear, I could probably just leave things as they are. However, if (for example) the image can't be loaded, and the script can't display it, the inputs stay invisible. Also, it looks strange and it's driving me batty. :D
Other factors that may or may not be relevant:
I have done very little with Shadowbox in the past and could very well be missing something embarrassingly obvious.
My page and its form are generated by CakePHP.
The page uses jQuery, and Shadowbox is using the jQuery adapter.
The vanishing inputs do not have class attributes. They do have id attributes that are generated by CakePHP, but these names are very specific to my application and very unlikely to cause any CSS collisions.
As far as I can tell, all of the select inputs vanish, and no other element, input or otherwise, on the page is affected at all. (Even the labels associated with the inputs are unaffected.)
Versions: Shadowbox 3.0.3, jQuery 1.4.2, CakePHP 1.3
This is a semi-bug in shadowbox, most likely. The select tags are being hidden because in some versions of IE, they are rendered using windows native controls, and thus always appear "above" any other element with a z-index. This obviously is a problem for ShadowBox, so the solution is to hide them while showing the box. Shadowbox should clearly do this only for troublesome browsers, but I think they're taking a more generic approach of always hiding them.
I'm using JQuery version 1.4.2.
My goal is to let the user click the voice 'login' in the top menu to scroll Down the login form (as twitter).
Everything works fine, the insertAfter jQuery show the form as I want, but when the login button is clicked, it change its horizontally position by some pixels.
How is possible to let the 'login' button fixed after insertAfter (excuse me for the pun) ?
Make insertAfter insert after the login button's container and make sure you set a width on the login button's container. OR you could set the position of the login button to absolute and then it won't move at all
You're going to need to either edit your markup or css. I can't tell you more without seeing both.
-Bill
There could be a few reasons for this. One that possibly comes to mind is that the position is being set before scroll bars appear on the screen and changes it's position. One of my much loved tools is jQuery position, it allows you to absolutely attach the element on the page - perhaps try giving that a go? Otherwise, perhaps hide the element after all the content has loaded using document.load instead of .ready? And lastly, perhaps show some code? :-)