I am creating a plugin that gives keyboard navigation to tabular table acrossmultipletables.When I have rowsthat run off screen I would like to scroll the window down.. and the reverse is true, when navigating up.Logically I need to get the position of the element that has focus and specify how much to scroll the window.
View 2 RepliesI'm using a code snippet to have a cursor placed in a form field once a page loads, see the below posted code.The form field in question is located below the fold.The problem is that when the page loads it will scroll the page downwards to show the form field, I don't want that happen. I only want the cursor to appear...not the whole page to scroll downwards when the page loads.what I can do to prevent the page from scrolling downward when using this code?It's happening with similar codes as well that places a cursor inside the form field.I only want the page to scroll downward when the user decides to scroll downward, not because of the cursor placement.
Code HTML4Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[code]....
jQuery - Scrolling browser Window. I have two demos of scrolling page content with jQuery.
This one - [url] is scrolling the contents inside a container and it works as I wanted on Mac/PC
Code:
I need the same effect as above but I need to scroll the whole browser window.
I have a demo here - [url]
Code:
Problem here is on the Mac the transition are jumpy and it seems to flash the first yellow div before sliding up or down. Testing on a PC it will slide down but won't slide up. How can I get the whole browser window to slide up and down with a smooth transition.
Given the following input tag which is enclosed within a hidden div tag:<input id="X" class="Y"/> this call (id-based) locates the tag: $(this).find("#X")but this one doesn't (class-based)I couldn't find any documentation indicating find() working differently when using id-based vs class-based selectors.
View 1 Replies View RelatedI have a page I am working and I am having some trouble with: I need to show and hide areas based on a radio selection. I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio buttonagain as it has form elements that have validaion on them. The validation is still trying to validate the form elements becuase they are still on the page but just not showing. This is the radio group the user makes the selection from:
<input name="terms_usr" type="radio" id="terms_usr_1" value="1"/>
<label for="terms_usr_1">Credit Card</label>
<input type="radio" name="terms_usr" id="terms_usr_2" value="2"/>
<label for="terms_usr_2">C.O.D</label>
[Code]....
I have a scrolling div that I am changing text color and background
color on a mouse over of a marker on a map. I also want the div with
the proper ID to come to the viewable area of the scrolling div when I
mouse over the marker on the map. Code:
I'm using a simple toggle function to reveal divs when clicking on the associated heading. What I'm aiming to achieve:
1. When the heading is clicked, the hidden div will be revealed and the page scrolled so that the heading is at the top of the viewport.
2. If the page has insufficient height for the heading to move to the top, the page height will be increased to allow this to occur.
3. When the heading is clicked again, the div will be hidden but the heading remain in its current position at the top of the viewport. If a div is being toggled closed when not at the top, the page having been scrolled, then it should remain in its current position.
Other things to consider:
Preventing the amount of any generated empty space at the page bottom from being sufficient to fill the entire viewport.
Current state of play:
The code below will move the heading and revealed div to the top of the viewport if the page height is sufficient. When the div is hidden again, the heading drops down to its original location on the page, which is disorienting for the user.
Markup
<h2 class="trigger">Switch<h2>
<div>Content to toggle</div>
jQuery
$(document).ready(function() {
$('.trigger').next('div').hide();
$('.trigger').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
$(this).next('div').toggle();
});
});
I've used this plugin many times and this is the first problem I've had with it (1.8.1). I've uploaded my standalone version (unstyled) here to demo: [link redacted, see reply for solution] try submitting the form, then focusing on some fields and attempting to resubmit. I have a form with 6 fields, all required (class attribute 'required' has been added to them all). On submit, only 2 of the fields display an error message as they should. The other fields do not act as required. Filling in data for the 2 working fields and re-submitting will work, when it shouldn't be.
However, if I click through to focus on the fields, they will appear to "get" the validator property. Clicking submit how, however, will actually toggle the error message on and off. I have never seen this kind of behavior in the past and am scratching my head how to proceed. I have checked in Chrome and Firefox, I have re-downloaded the plugin and used various jQuery versions, I have stripped out the functionality to a completely separate standalone page to remove any potential conflicts. Markup and JS validates. No luck.
I have two form elements, the first one I'm testing for a specific content length (5). If there is not that much content in the box, I would like it to continue to have focus.
However my code below will not set the focus back.. What am I missing?
there was any premade dropdown menu which opens based on what position you are on the page.
For example, when I'm on the top of the page and hover the mouse over the dropdown menu, the menu opens upward instead of downward because the navigation is mid-screen. But if I was to be more than halfway across the screen and still see the navigation as it was on top of the screen and hover the mouse over it, the dropdown menu opens downward as oppose to up.
Anybody know how to create this effect on mootools? code...
View 5 Replies View RelatedI can't find an example of what I am looking for but I'm pretty sure I have seen it!When you scroll down a page the first heading stays fixed on the screen and when the second heading is scrolled too this then stays on the screen until the third heading is reached and so forth.. Can this be done with jQuery?if H2 is top of view port stay fixed until next H2 is top of view port?
View 2 Replies View RelatedI want to select all input hidden fileds but want to their names and then select those elements.
View 1 Replies View RelatedI have the following HTML. I wish to select all the second column elements for only rows where the input is checked. For instance, if row 1 and row 3 was checked, I would want to select the td elements which contain row1_column2 and row3_column2.
<table><thead><tr>
<th><input type="checkbox" value="" class="checkAll" /></th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr></thead><tr>
<td><input type="checkbox" name="cb[]" value="1" /></td>
<td>row1_column2</td>
<td>row1_column3</td>
</tr><tr>
<td><input type="checkbox" name="cb[]" value="2" /></td>
<td>row2_column2</td>
<td>row2_column3</td>
</tr><tr>
<td><input type="checkbox" name="cb[]" value="3" /></td>
<td>row3_column2</td>
<td>row3_column3</td>
</tr></table>
I want to select all inputs that have the same exact values.I want to be able to grab those elements names.
View 5 Replies View RelatedGet distinct elements based on criteria?
View 1 Replies View RelatedI would like to select all elements where the height is set to 100%. Is this sort of selection possible using jQuery?
View 2 Replies View RelatedI would like to select all input elements on a page in which have a specific background-color.How would I go about doing that?
View 7 Replies View Relatedi want to control the 'Enter' key to set focus to the next element in
the form(instead of 'Tab'). and i want to know which element had the
focus when the Keypress even of the form is called. how can i get
that?
I need to have the cursor appear in the first input box on various pages. When I use the onLoad event in the body tag it works, but anywhere else it doesn't.
The problem is aside from my intro page, most of my other pages use a header and footer on the server side. The body tag is inside the header so I don't have access to it on the other pages. I tried adding a simple function at the bottom of the page, but it does not work.
<script>
function setFocus(){
frm.Name.focus();
}
setFocus();
</script>
I have a set of radio buttons on my pricing page:
And a corresponding text_field input element div I'd like to display based on which radio button the user selects:
When the page loads, I'd like to see:
When the user clicks on a (different) radio button, or clicks one for the first time, I'd like whichever div is currently showing to be hidden, and the newly selected one to be shown.
Right now I have jQuery code at the bottom of my page that looks like this:
For each of the four options.
When the page loads, the correct div is shown, and when I select a new button, the new div is shown, but the already showing one isn't hidden.
I've read some posts that suggest using change() instead of click(), but others indicate that's problematic in IE.
I have two divs that are in the same parent div, only one is shown at once. When I toggle the one that is smaller (height-wise), the position of the scroll bar (and hence the user's current location on the page) remains the same. But when I toggle back to the taller div, the scroll bar launches you back up almost to the top of the page.Is there a way I can stop this from happening? I tried return false which i knew wouldn't work. I also looked into scrollTop() but that doesn't seem like it will be of any help since it only returns values and does not set any values?
View 2 Replies View RelatedI'm using this small js to scroll a div, the problem is that it goes all the way to the bottom of the page and overlapping my footer, I need it to stop before the footer. [URL]
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version > 7;
if (!msie6) {
var top = $('#contact').offset().top - parseFloat($('#contact').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#contact').addClass('fixed');
} else {
// otherwise remove it
$('#contact').removeClass('fixed');
}});
}});
I'd like to build a toolbar which is positioned as "fixed" ad the bottom of the page (till now even too easy), but at a defined point I want it to change position from fixed to relative, sitting upon the footer of the page and remaining there.
Take a look at this exemple, which is perfect.. [URL] To do that I tried to search something on the web, but I've found only this: [URL] Now, the voice sticky elements seems to be what I was looking for but actually it is "upside down" and I couldn't be able to edit it to reverse it.. I'm trying (without any good result) to edit this part of index.php:
<script type="text/javascript">
$(document).ready(function() {
$('.top').addClass('hidden');
$.waypoints.settings.scrollThrottle = 30;
[Code]....
Am I right using this script? how can I find something "ready-to-use" on the web? or if there's nothing, how can I edit this one to fix my needs? And first of all... what is the name of this particular function (I mean something which change position while you scroll the page?)
I have a long web part page with so many controls. I nee that when I click ona button at the bottom of the page it should get the focus at top of the page in order to display populated information.
View 2 Replies View RelatedI've got the following function which works perfectly...
for (x=1;x<howMany;x++){
what = "b_" + whichProcess + "_" + x;
document.getElementById(what).style.display = ''
}
the function will pass how many elements there are to be changed along with their ID numbers... it's used to hide rows on tables... eg:
<tr id="b_1_1"></tr>
<tr id="b_1_2"></tr>
<tr id="b_1_3"></tr>
the above hide perfectly... but I have other rows such as
<tr id="b_1_1"></tr>
<tr id="b_1_2"></tr>
<tr id="b_1_3"></tr>
<tr id="b_2_1"></tr>
<tr id="b_2_2"></tr>
<tr id="b_3_1"></tr>
my question is how can I make a loop which will hide ALL elements which begin with "b_"