JQuery :: Prevent Unorder List Submenu From Extending Past Viewport
Feb 10, 2011Im trying to prevent my unorder list submenu from extending past the viewport.[code]
View 3 RepliesIm trying to prevent my unorder list submenu from extending past the viewport.[code]
View 3 RepliesI'm currently trying to parse through all the children list items within a navigation menu so that I can trim off a trailing "|" character. I'm trying the following but its not working correctly,
$('#nav > li > ul > li').each(function() {
var str = $(this).text();
$(this).text(str.replace("|", ""));
});
I want to write a select control and use a Javascript function to
handle all click events on the control. Under certain circumstances I
also wish to prevent the dropdown's list from being rendered.
Here is a sample showing what I am _unsuccessfully_ trying to do.
A client is using an analytics tracking script that needs to be updated each time the DOM is modified (ie, an element is added or removed). Basically this script allows the client to track user actions on the site (clicks, mouseovers, etc.) and, if the user is having issues, replay the entire session to help them with their problem. The issue we're running into is that this tracking script takes a cache of the DOM tree on page load, and when the DOM is updated it needs to specifically be notified that there has been a change... or else the script won't be able to see the nodes that have been added/removed.
Assuming all DOM manipulation is done using jQuery functions, is there a way to run some function every time the DOM is manipulated? I've noticed that all the DOM manipulation functions seem to run through the internal $.fn.domManip function, so I was wondering if it's possible to extend or replace this function from another JS file (assuming of course that all the manipulation functions DO in fact run through $.fn.domManip)?
Example (don't take this code seriously, it's more meant to illustrate what I'm trying to do):
var oldDomManip = $.fn.domManip; //Copy the function (I know this isn't right)
$.fn.domManip = function() {
oldDomManip(arguments);
//update the analytics program by calling it's update function here...
}
I'm writing a plugin for jQuery for catching 2 succesive keypresses. I'll paste the plugin I wrote below It doesn't work on Opera . The Developer tools of Opera gave no errors and I can't find any problems, it just doesn't work.(I've used Opera 10.0). o it only works on Firefox (tested on 3.0.14). I'm curious if there is a way to find out why it's not working on Opera and to fix it.
[Code]...
I have 50 thumbnails running vertically down the page, so that the viewer must scroll quite a bit to see them all. When a thumbnail is clicked I want to display the full size image in the middle of the viewport. Thus, the top offset of the absolute div that displays the full size picture will change depending on how far down the viewer has scrolled.
I can bind a function to the <img> tag that will set the top offset of the div where the full size images are displayed but I don't know how to get the current position of the viewport, or how to position something with respect to the viewport.
Can jQuery pull the viewport position out of the DOM and let me center something in it?
How can i find the DIV position (top and left) relative to viewport ?
View 1 Replies View RelatedI am working wiht this JQuery plug in that now one of my clients wants to turn it into a slideshow feature. I am not that familiar with JQuery plug ins so I wanted to get some input from some of you.
On the header of my html page:
Code:
$(document).bgStretcher({
images: ['1.jpg', '2.jpg', '3.jpg', '4.jpg'],
imageWidth: 1668, imageHeight: 1035, nextSlideDelay: 3000, slideShowSpeed: 4000
});
I was able to add a click handler to trigger the a function on the plugin called loadslide().
Code:
$(document).ready(function ($) {
$('.slideNo').each(function (i) {
$(this).click(function () {
loadSlide(i);
[Code].....
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-
[code]....
The mouse position tutorial has an example of how to find the click position within an element. How do you find the click position within the viewport?
View 1 Replies View RelatedI'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();
});
});
Essentially the idea is to make Element-B and Element-C to cover the area horizontally starting from center of Element-A and ending at the edge of viewport.So, I guess i want to get the distance value from the center of Element-A to the edge of viewport
Additional notes:
Element-A doesnt have static position or size.
Element-B and Element-C verticalposition or height is
irrelevant.
I was thinking something like this:Calculate width of Element-A and divide it by two ( Or just get half the width if theres a way. )
Get the distance from the edge of Element-A to the edge of Viewport Add up these calculated values.Of course unless theres way to get that this width straight up )I was trying to look for a way to do list item 2.
I'm working on a mysql browser / edit-in-place app which presents the user with a floating UI (think lightbox), that contains widgets appropriate for the given field they've clicked on.
Presently, rather than centering the UI element like a lightbox however, I find it best to keep it relative to their mouse, so that they don't have to traverse halfway across the screen with their mouse to interact with the interface if they've clicked something (for instance) on the bottom left.
The problem however should be apparent: if they click something towards the bottom of the screen, we need to adjust the css top/left properties so that the UI remains within the viewable area and doesn't run beyond the viewport, if possible. I've seen this done tons of times with tooltips.
I've thrown some basic awareness together using$(window).height() / width(), but if anyone could point me to a maturealgorithmfor harvesting the appropriate offset.
I don't know if this is a browser bug. I positioned a div at the bottom of the page just underneath the viewport, calculating it with $(document).height() and animate it to bottom:0, works great even when scrolling, cause of updating with the scroll-event. But when I reload this page or scroll down a bit the original position value was used, so it animates to the original viewport value.
View 1 Replies View RelatedI have a wordpress website with which I wish to provide content via an iframe on facebook.. Without using a wordpress plugin, I would like to know if I provide a function in jquery that basically says if viewport is equal to 520px then either load this css file or add this body class.. Also, if viewport is = to 520px then hide this element.. I think this can be done but after a lot of searching, I cannot seem to find a definative answer..
View 2 Replies View RelatedI have the following code:
var img = new Image();
img.myProperty = 'something';
I've tried Image.prototype.myProperty and a few other things. It seems IE just doesn't want me extending the Image object.
I'm looking for a way to add more field depending on the user's input,. e.g. the user inputs ཆ' in the option, and 10 more sets of fields are displayed below on the same page. How do I go about accomplishing this?
View 1 Replies View RelatedI'm embarking on a rather interesting wine cellaring project where I need to enable a user to add form fields (a complete table row with several fields) on demand.
If they start filling out the form and need another row for another bottle, I need them to be able to click a button that adds a new row to the table with the same fields.
I also need perhaps another button that will create the row and duplicate the form field values of that row. The winery, wine namen and variety may be the same but the year may change and I dont wan thte user to have to do any double entry. I've been researching DOM and have been looking at sites like Quirksmode.
Am I heading in the right direction? I'm just about to go an buy a book on DOM and start really getting into it.
does someone know how to add a submenu or menu like this sample [URL]...scripts/jquery_simple_drop_down_menu/# but not on a ul but on a button (<button id="rerun">Refresh</button>) Or having a menu with submenu where the first item looks like the button. And the button have the same style than here [URL]..
View 2 Replies View RelatedJavascript has a very small math function list. However there is no
reason that this list can not be extended greatly. Speed is not an
issue, unless you nest complicated calculations several levels deep. In
that case you need much more ram than a PC has to store functions
calculated in loops so that you do not have to recalculate every time
you cycle through the nest of loops. Using a HD for storage to extend
ram is much too slow for many applications.
Some functions such as hyperbolic ones are easy to add, since they are
just simple combinations of the built in javascript math functions. I
have found a few examples on the web such as Bessel functions. I found
far fewer javascript math functions than I expected on Google searches.
Thus I have had to write several functions of my own.
See http://www.cwdjr.net/math/I0L0andI1L1.html for an example of two
"functions from hell" that are very difficult to evaluate. Fortunately
there are Fortran programs that can be used as a starting point. I was
able to modify the Fortran programs to work on javascript. I have used
these functions for technical applications in the past.
The page is set up to reject the NN 4 series, because it will not
support some of the script needed such as .toExponential(n) and
to.Fixed(n)for writing output in exponential or fixed format. I was
amazed that even the old MSNTV(former WebTV) set-top box, that no
longer is being made, will even support these output formats. I wonder
about IE4. If it will not support these output formats, I can easly
block it by checking for document.getElementById.
The code works properly on the latest versions of IE6, MSN9, Firefox,
Mozilla, Netscape, and Opera. I am not selling anything, so for a
special interest page such as this, I see no need to support older
browsers.
The advantage of doing math with javascript is that it is so portable.
You can do it anywhere you can use a computer, or you can do it on your
own local computer offline. There are several math programs for PCs
that will do very much more than you can hope to do with javascript.
Unfortunately the program I would like costs about US$ 1800. Also there
are versions you can install on a server, but these also are expensive.
I am trying to create an HTML form in which user will enter different items (he wants to purchase) in text fields. One text field is used for one item. Now it is not known in advance how much items the user will purchase so we cannot decide the total text fields required in advance. Is is possible to increase the number of text fields (using JavaScript) one by one if the user requires more fields
View 4 Replies View RelatedHow do I extend both the table and the input form? Ultimately, I want it to look like this:
_____________________________
|header |header |header |header |
| INPUT | INPUT | INPUT | INPUT |
Add Row of Inputs Link
_____________________________
|header |header |header |header |
| INPUT | INPUT | INPUT | INPUT |
| INPUT | INPUT | INPUT | INPUT |
Add Row of Inputs Link
I know how to make the html row by using getElementById() or so and I know how to make an input field by createElement() but how do I create and append(?) them together, specifically the multiple input fields inside of the html row?
My website has demo music tracks and a Flash player. I've put the site in a frameset so that music continues to play while the user is browsing around.
The Flash player and menu are in a thin horizontal bar along the top of the page (top frame). I just realised that my nice JS drop-down menus are not displaying because of the frame... is there any way of getting them to extend beyond the frame they're contained in ?? Code:
I use superfish horizontal nav-bar style. Subcategories appearhorizontally below categories.The problem is that when I take themouse from the category name to reach one of their subcats, thesubmenu disappears! The subcategories disappear too fast! Is there away to fix this?
View 1 Replies View RelatedI have developed a vertical accordion menu and all is great except for the fact that some of the submenus are long and run beyond the bottom of the viewport. I need to detect the position of the UL, find out how many pixels are below the page fold, and lift the UL up by that many pixels so the UL does not go below the fold. The UL in question is positioned absolutely inside of a relatively positioned parent so I can easily use a negative top position to lift the UL but how do I get the number of pixels that the UL descends below the page fold?
View 2 Replies View RelatedI got a div, I'd like some code to be executed onClick, that'd move the div to the top of the viewport (not to the top of the page), kinda like a "vertical float".
Is there a way to do this? I've seen annoying menus/ advertisements that stick to the top of the window even if you scroll down.