I'm trying to hide() show() an element when a specific checkbox is checked, the checkbox is nested within an asp Panel which is nested within a Web User Control.When the user control is loaded, the checkbox's id changes to the panel id + the checkbox id due to the face that i have an unknown number of user controls that can be added to the same aspx page.I need a way to hide a textbox when the checkbox is checked without using the '#controlId' syntax, and when i pass the txt.id its not working:
toggleMe: function toggleTest(ID) {
var elem = document.getElementById(ID);
var parentId = $(elem).parent().parent().parent().parent().attr("id");
pardon my ignorance if this topic has been discussed before - I couldn't construct a search query that returned anything of the like!
Currently I have a set of two div elements, both of which span the width and height of the window. The top div plays host to a user interface, and the bottom div to various editable elements. The problem here lies in the fact that the user interface div is intercepting all mouse events, and as such neither the lower div nor any of its children may be interacted with.
And so my question is just that: is there any way to pass events through an element, or, more specifically, transparent sections of div elements? I have considered simply triggering the same event on the lower div, but without the ability to pass offset coordinates to the .trigger() function, it would require a rather undesirable amount of code to calculate which element on the lower div to trigger the even on...
My other consideration is to minimize the dimensions of the user interface layer (something similar to 50 x 50 px) and use absolute positioning to position the user interface widgets, additionally using a div element below the bottom div to constrain the movement and resizing of user interface widgets.
I am working on a mini select manipulation, moving options back and fourth, etc.
What are some of the considerations between passing just the ID names of the two selects from the button that triggers the add/remove versus passing the selects?
I have a script that's dimming the page by appending a black transparent canvas element to the body, positioning it over the page with a high z-index, and then using clearRect to cut out the sections of canvas element so that certain sections of the actual site show through..I'm having a hard time figuring out the best way to pass a click through the canvas and onto whatever would accept it if the canvas wasn't in the way so a user can edit the text.
My first choice was hiding the canvas on mousedown, and then listening for mouseup for everything underneath. but it looks terrible to have that 200ms flicker. can a trigger() be used to emulate a click at a certain (pageX,pageY)? the last option i can think of would be adding 30 divs and duplicate the punched-out canvas..but that seems like a lot of math, does anyone know of a plugin that does this? a reverse blockUI
So, I read about the new method of passing an object map containing element properties when creating a new jQuery object (as discussed at the bottom of this article). The article says that it supports ALL events, but only gives examples of simple events that require no parameters. I'm trying to implement a live event using the following and can't get it to work:
var link = $('<a />', { text: config.appendTextMore, href: "#",
I have some existing code that I need to alter so that when the user clicks outside the element, the element disappears. I have looked at other show/hide element code, but I'm not sure how to integrate it with the script below.
There's a date form, with an calendar image icon. When you click on the calendar icon, a div with a calendar opens. Then you can click on the dates, that when clicked will fill out a textfield with the date.
I am trying to hide a div when the min length of a text box is two or greater but everything I've tried is a bust. Does anyone have a good snippet of code for this.
I have small online shop and in the top section I have a mini cart, which a user can click on and expand an area to see what products they have added to their cart. The problem I am having is that for a brief moment when the page initially loads the expandable area becomes visible until I the .ready (hide) function kicks in. Is there any way that I can actually hide the cart on page initialisation so its not visible even for a brief moment?
I have a hidden spinner div. When my jquery function is called -- I show the spinner. But, how do hide I the spinner div after the ajax request has completed?
$(function() { $(".pagination a").live("click", function() { var loader = $('#loader') loader.show() // <-- hidden loader div
I would have wished it under better circumstances. However, I'm having a quite annoying problem. I'm using jQuery UI hide effect and for some reason it messes with the DOM and/or and completely messes up some of my controls.$('#dvucCustomization').hide('fold', {}, 500);Is that the correct way to call the hide effect on a DIV element?I also tried simply:$('#dvucCustomization').hide('fold');and the same result: the JSs I have in the hidden/shown element are not working any more.
I made this small piece of code, and I think I made it in a very drawn out way. I am sure there is a lot quicker way to do it. I want all divs to be cleared that are in a certain div. So when one link is clicked, the visible div is replaced with the new one (depending on the link)
Here is the code I have done... $(document).ready(function(){ $(".untitled1link").click(function(){ $('.untitled1, .untitled2, .untitled3, .untitled4, .untitled5_1, .untitled5_2, .untitled5_3, .wall, .lightswitch, .detritus, .untitled6, .table, .socket, .socket2').hide(); $(".untitled1").fadeIn('5'); }); });
I just need a way to say clear all in that certain div, rather than having to name each class. I was thinking of giving each of those another class which is uniform across them all. But I don't think you can have two classes.
i've been breaking my brain about this issue for a bit now, so here is my question.
I have a SELECT with various OPTIONS
<select id="myselect" name="myselect"> <option value='$variable' >1 - variable ammount of this option</option> <option value='$variable' id="showOption">2 - gets added once at the end of the SELECT</option>
I have a loop that iterates over an array of objects.
Then for each of these objects, a div element containing an img element is created and appended to the document.
Further each img element must have an onclick event that basically changes the backgroundColor of it's enclosing div, as well as make changes to the associated object in the array.
The loops basically looks like this:
Code:
Now everything is created fine and the events are bound to the images, however, the only things that change in any of the onclick events are the very last container and object passed. For some reason it seems that the references in all the previous loops are replaced with the newer ones.
If I have something like this:html4strict Code: I'd get an error. Is there anyway I can make this work so that if I pass a value through as a parameter, I can use it when referencing a particular field?
I need to create a table where each element has certain specific properties.
For example, elements in the first column should always have a range of 0-100, and increment by 1. Elements in column 2 might have a range of 0-360, and increment by 0.1. Altogether there might be 8 elements in each row.
Since this is basically the same javascript function over and over, I wonder if there is a way to create some <input> element that might contain this knowledge in a way that javascript can access it.
where the javascript function could retrieve the class value?
Since this is going to be fairly complex, I'd like to make it fairly self-documenting and simple. It's much easier for a maintainer to understand class="precent" than "javascript:blah(0,100,1,event)", especially since I am also going to have to pass navigation information (is this a border element in the table? what are my neighbors? kind of information... - so that the actual information might end up being javascript:blah(0,100,1,5,21,16,18,0,1,0,0,event) to denote the data type, the 4 neighbors, and the 4 border conditions....
When introducing custom functionality to HTML elements we either use existing attributes to pass configuration parameters (like beetle's fValidate (http://www.peterbailey.net/fValidate/)) or invent our own (like my Tooltips (http://www.vladdy.net/webdesign/ToolTips.html)). While this method is ok for small amount of configuration information, it is not that flexible (you need to edit DTD) and becomes combersome when large amount of configuration parameters is needed.
I figured a more convinient way is to use a CSS like string to pass configuration parameters: <div myextension="parameter1: value1; parameter2-subparameter1: value2.1; parameter2-subparameter2: value2.2"> </div>
Then initialization routine would contain: if(myExtensionParameters = divElement.getAttribute('myExtension')) divElement.myExtension = new myExtensionObject(divElement,myExtensionParameters);
Definition of possible parameters and their values can be done using an array of regular expressions: myExtensionParamDefenitions = new Array(); myExtensionParamDefenitions['choiceparameter'] = /^s*(value1a|value1b|value1c)s*$/; myExtensionParamDefenitions['stringparameter'] = /^s*(w+)s*$/; myExtensionParamDefenitions['integerparameter'] = /^s*(d+)s*$/;
Constructor for the myExtensionObject would containd a parseParameters function: function myExtensionObject(divElement,myExtensionParameters) { this.params=new Array(); parseParameters(this.params,myExtensionParamDefenitions,myExtensionParameters); //Verify parameter initialization, if you like str='' for(e in this.params) str+= e + ': ' + this.params[e] + ' ' alert(str); //Do whatever you have to do... }
Function parseParameters has the following code: function parseParameters(object,definitions,parameters) { paramEntries = parameters.split(''); for(var i=0; i<paramEntries.length; i++) { paramEntry = paramEntries[i].split(':'); if(paramEntry.length == 2) { paramName = paramEntry[0].replace(/^s*([w-]+)s*$/,'$1'); if(definitions[paramName]) { res = definitions[paramName].exec(paramEntry[1]); if(res[1]) object[convertCSSName(paramName)] = res[1]; } } } }
Where convertCSSName function converts CSS type name (background-image) to javascript name (backgroundImage) function convertCSSName(cssName) { sn = cssName.split('-'); rs = sn[0]; for(var i=1; i<sn.length; i++) rs += sn[i].replace(/^(w)(w*)$/,function(str,p1,p2,offset,s){return p1.toUpperCase() + p2;}) return rs; }
As a result you have params array of myExtensionObject object populated with validated entries. Changes and expansion is done by simply editing myExtensionParamDefenitions array.
PS: The functions are coded more for clarity rather than for brevity - I'm certain there are ways to improve the implementation.
Basically, I have an element I want to hide before it is shown when a condition is met. For reference, it's checking whether a particular radio button is selected. if ($('[name="'+q1110.name+'"][value="'+q1110.value+'"]:not([checked])')) $('#_divhide').hide(1, function () { q1110.toggle = false; }); Right now, only in IE 6, it shows that element for a split second, then hides it. I don't want it shown at all unless the radio button is checked. As usual, I can't manipulate anything in HTML unless it's done through JS.
Also, the slideUp and slideDown functions don't work properly in IE 6. They do hide and show, but the animation isn't smooth. The element disappears and reappears without any animated effects. It's kind of a bummer since it works perfectly in FF 3.6.
I'm trying to develop a function to resize a control upon window resize. In regular javascript I would make a global array of control names and append code to the event that cycles through and resizes each control.For example
var proportionalizedImages=new Array(); proportionalizedImages.push(document.getElementById(ctrl)); if (window.addEventListener)[code]....
I'm wondering if there's a more elegant way to do this in jQuery. I've played around with it a bit, but i'm unsure how to get the control object to the resize function triggered by window resize without a global variable.
Alright, I got the basic idea (which is relatively easy):
function show_el(id) { var obj = document.getElementById(id); obj.style.display = "block"; } function hide_el(id) { var obj = document.getElementById(id); obj.style.display = "none"; }
The problem is, you need 2 different links, one to show the element, one to hide it. What I want is one link that changes depending on whether or not the element is showing: If it's showing, the link will be "Hide Element", if it's not, it'll be "Show Element."
I've seen this done a lot, mainly in expanding/collapsing, which is basically what I'm doing. I imagine it's not all that hard, but I just can't seem to figure it out.
