My slideDown effects didn't showup after invoking load method , my code is :
$("#outerDiv").load("vacation.do #innerDiv",{},function () {$("#outerDiv").slideDown("slow");});
What's the problem ?
Hey everybody,
I'm currently trying to figure out how can I iterate over all of the objects in an JSON response. My object may have endless sub objects and they may also have endless sub objects.
{
"obj1" : {
"obj1.1" : "test",
"obj1.2" : {
"obj1.1.1" : true,
"obj1.1.2" : "test2",
"obj1.1.3" : {
... // etc
}
}
}
}
I was just wondering if there is a out of the box script that can handle such kind of objects?
Thanks in advance,
The Devil
Hi,
can somebody please tell me, how can I display json data returning from the ajax call. I am new to this.
$.ajax({
type: "POST",
dataType: 'JSON',
//data: "{'ntid':'john'}",
//contentType: "application/json; charset=utf-8",
//processData: false,
url: "Testing.aspx/SendMessage",
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
},
success: function(result, txtStatus, httpRequest) {
alert(txtStatus);
the_object = result;
$('#status').html(concatObject(the_object));
}
above is the js file. should i need to do something on asp file directly to display it. if yes, then how? please reply me soon. i m stuck here and unable to display data here
I'm trying to implement this dropdown menu with flyouts:
http://jsfiddle.net/chunkymonkey/fr6x4/
In Chrome certain categories can be expanded to show their subcategories while others show nothing when opened up.
For example:
Alternative Rock can be expanded to show its multiple subcategories . . . BUT . . .
World Music, which has as many subcategories, shows no subcategories when expanded.
(SCREENSHOT: http://i.imgur.com/0WorR.jpg)
I thought I had tracked this problem down to a problem with they way the dimensions of the dropdown elements are calculated in the original code:
First change:
- var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180;
+ var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * container.width();
Second change:
Remove:
var checkMenuHeight = function(el)
{
if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') };
el.css({ height: options.maxHeight });
};
Add:
var checkMenuHeight = function(el)
{
var max_height = options.maxHeight - breadcrumb.getTotalHeight();
if (el.height() > max_height)
{
el.addClass('fg-menu-scroll');
el.height(max_height);
topList.height(max_height);
}
else
{
if (topList.height() < el.height())
{
topList.height(el.height());
}
}
};
But it's still not working only on Chrome (version 8, Windows & Mac) (not sure why Chrome is different).
I've been using CutyCapt to take screen shots of several web pages with great success. My challenge now is to paint a few dots on those screen shots that represent where a user clicked.
CutyCapt goes through a process of resizing the web page to the scroll width before taking a screen shot. That's extremely useful because you only get content and not much (if any) of the page's background.
My challenge is trying to map a user's mouse X coordinates to the screen shot. Obviously users have different screen resolutions and have their browser window open to different sizes. The image below shows 3 examples with the same logo. Assume, for example, that the logo is 10 pixels to the left edge of the content area (in red).
In each of these cases, and for any resolution, I need a JavaScript routine that will calculate that the logo's X coordinate is 10. Again, the challenge (I think) is differing resolutions. In the center-aligned examples, the logo's position, as measured from the left edge of the browser (in black), differs with changing browser size. The left-aligned example should be simple as the logo never moves as the screen resizes.
Can anyone think of a way to calculate the scrollable width of a page? In other words, I'm looking for a JavaScript solution to calculate the minimum width of the browser window before a horizontal scroll bar shows up.
Thanks for your help!
I am having an undesired effect when I drag a div from a container div which is set as overflow: scroll.
I have found an example of someone else where they have had the issue but I have been unable to find a resolution
Example on Paste bin
What happens is that the scroll is just increased, I can see why this would be the desired behaviour if you wanted to drag to a destination within the scrollable div but I want to be able to take it outside of its scrolling grasp.
Thanks, Phill
$('#passport_expiry').datepicker({dateFormat: 'mm/y'});
I have the above code works. I select a date using the datepicker and it updates the textfield. The problem is that when I try to select another date, it doesn't update the textfield. It seems that when the textfield already has a value, it doesn't update it.
i have two tables. <table id='1'></table> and <table id='2'></table>. When i put this code:
$(document).ready(function()
{
//for table row
$("tr:even").css("background-color", "#F4F4F8");
$("tr:odd").css("background-color", "#EFF1F1");
});
Both the tables got it alternate row colors, which i dont want, i want only to color the table with id=2. how it can be accomplished?
hi all,
i'm accessing the stylesheet collection like this:
var css = document.styleSheets[0];
it returns eg. http://www.mydomain.com/css/main.css
question: how can i strip the domain name to just get /css/main.css ?
thx
There are several elements that are selected by $("#foo"). $("#foo").text() returns the text of each element concatenated together. I just want the text of one element. What is the best way to do this?
$("#foo")[0].text() fails.
Can anyone think of a (preferably quick) way to move the data() attached to a DOM element to a new instance of itself?
The lightbox plugin I'm using deletes and re-appends and element to the page in order to display it in the lightbox (to aviod the multiple-ids issue that ASP.net has), and obviously the .data() that is attached to the element is lost when this happens.
I'm trying to get the background image of a legacy div (by which I mean it already has a background image, which I cannot control & thus have to initially over-write) to smoothly fade between new images indefinitely. Here's what I have so far:
var images = [
"/images/home/19041085158.jpg",
"/images/home/19041085513.jpg",
"/images/home/19041085612.jpg"
];
var counter = 0;
setInterval(function() {
$(".home_banner").css('backgroundImage', 'url("'+images[counter]+'")');
counter++;
if (counter == images.length) {
counter = 0;
}
}, 2000);
Trouble is, it's not smooth (I'm aiming for something like the innerfade plugin).
EDIT: question originally said "and it's not indefinite (it only runs once through the array).", but Mario corrected my stupid naming error.
EDIT2: I'm now using Reigel's answer (see below), which works perfectly, but I still can't find any way to fade between the images smoothly.
All help greatfully appreciated :)
Hello friends..
colNames: ['A','B','C','D'],
colModel: [
{ name: 'A', index: 'A', width: 90 },
{ name: 'B', index: 'B', width: 100 },
{ name: 'C', index: 'C', width: 70 },
{ name: 'D', index: 'D', edittype: 'select', width: 100, editoptions: { value: { 1: 'Yes', 2: 'No'}} }
],
My concersn here is.. I am displying A B C D values from db2... for Last Column D I need to put defalut drop down list for all the rows.
Thanks can any body help me out..
thanks
Hi All,
in my js I have a var in which i have stored innerHTML.
the var is having value something like
<h2>headline<h2>
<div>....</div>
...........
Now I want to retrieve value of h2 tag..what I am doing is
$(myvar).find("h2").text()
but its not working...what should be the exact syntax.
Thanks.
//dom
<div id='toBeCloned'><span>Some name</span></div>
<div id='targetElm'></div>
//js
$(function () {
//creating a clone
var _clone = $('#toBeCloned').clone(true);
// target element
var _target = $('#targetElm');
//now target element is to be filled with cloned element with data of span changed
var _someData = [1, 2, 3, 4];
//loop through data
$.each(_someData, function (i, data) {
var _newElm = {};
$.extend(_newElm, _clone);//copy cloned to new Elm
_newElm.find('span').html(data); //edit content of span
alert('p'); // alert added to show that append in next line inspite of adding new element to dom just updating the previous one
_target.append(_newElm);//update target
});
});
expected Result:
1 2 3 4
resut iam getting is
4
Here is my test page (dont mind the layout right now)
https://www.bcidaho.com/test_kalyani/employer-plans-test.asp
i found something weird. if you click back and forth between tab 1 and tab 2, its fine.
if you click tab 3, and got to another tab, the content dissapears... and i can not figure out why???
I am boggled, and can not figure out why it does this.... is it a display:hide element in the CSS?
here is a link to the CSS file: https://www.bcidaho.com/css/employer.css
here is a link to the javascript files that i use:
https://www.bcidaho.com/js/ui.toggle-employers.js
https://www.bcidaho.com/js/tabbed-menu3.js
I'm not sure what is causing this, but I am using cluetip and binding it to a live event (either click or mouseenter), but in each situation the cluetip isn't firing until after one click or hover event. I am using the live event for ajax loaded content, but I'm also having this issue with non-Ajax loaded content. I'm not sure why this is happening - can anyone see where I might be going wrong? Many thanks.
$("a.jTip").live("click", function(){
$('a.jTip').cluetip({
attribute: 'href',
cluetipClass: 'jtip',
arrows: true,
activation: 'click',
ajaxCache: false,
dropShadow: true,
sticky: true,
mouseOutClose: false,
closePosition: 'title'
})
return false;
});
I found the code somewhere in the world, and due to its dead simple nature, I found some things in need to fix, like when hovering the trigger, the content is jumping up down before it settled. I have tried to change the trigger from the title of the accordion block to the whole accordion block to no use.
I need help to add a delay and only do the accordion when the cursor is focus in the block. I have corrected my css to make sure the block is covering the hidden part as well when toggled.
Here is my latest modified code:
var acTrig = ".accordion .title";
$(acTrig).hover(function() {
$(".accordion .content").slideUp("normal");
$(this).next(".content").slideDown("normal");
});
$(acTrig).next(".content").hide();
$(acTrig).next(".content").eq(0).css('display', 'block');
This is the HTML:
<div class="accordion clearfix">
<div class="title">some Title 1</div>
<div class="content">
some content blah
</div>
</div>
<div class="accordion clearfix">
<div class="title">some Title 2</div>
<div class="content">
some content blah
</div>
</div>
<div class="accordion clearfix">
<div class="title">some Title 3</div>
<div class="content">
some content blah
</div>
</div>
I think I need a way to stop event bubbling somewhere around the code, but can't get it right.
Any help would be very much appreciated.
Thanks as always.
I have a table of data that I need to dynamically add a column to. Lets say I have this basic table to start with:
<table>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
</table>
I would like to insert a column between cell 1 and cell 2 in each row... I've tried this but it just isn't working like I expect... maybe I need more caffeine.
$(document).ready(function(){
$('table').find('tr').each(function(){
$(this).prepend('<td>cell 1a</td>');
})
})
I have a number of inputs on a page function as JQ UI datepicker. Each needs to have different settings. I want to minimize the JS so I save the settings as an attribute in each individual .
<input type="text" class="datepicker" name="dateofbirth" id="dateofbirth" size="20" value="" options="{ dateFormat: 'yy-mm-dd',changeYear: true,yearRange: '1920:2010'}" />
<input type="text" class="datepicker" name="expdate" id="expdate" size="20" value="" options="{ yearRange: '2011:2020'}" />
I use js to load the options dynamically as the settings.
$(document).ready(function(){
$(".datepicker").each(function(index){
$(this).datepicker("option" , $(this).attr('options'));
});
});
datepicker is not functioning. If I empty the parentheses after $this.datepicker it works fine.
I have also tried another way to assign settings. ("option",...) no dice.
Almost all is dialed in except then I click the pause/play button, the current activeSlide div doesn't fade in on rollover like the other slides do. Bit at a loss to figure out why it's not allowing hover even though it works when the cycle is not manually paused (i.e. when just rolling over the pager numbers).
Thanks for any guidance!
http://www.xtracycle.com/home-test-a-rooney
Hi there,
I am working on a project, which I need a special body-background for. The background-color should cycle through the color spectrum like a mood light. So I found this:
http://buildinternet.com/2009/09/its-a-rainbow-color-changing-text-and-backgrounds/
"But" this snippet is working with the RGB colorspace which has some very light and dark colors in it. Getting just bright colors will only work with the HSV colorspace (e.g. having S and V static at 100 and letting H cycle). I don’t know how to convert and in fact how to pimp this snippet for my needs.
Does anyone has an idea??
Thanks in advance. Best, Floyd
I have a sortable list (of tasks). It helps prioritize tasks, so I want to keep this functionality. Now I want to add subtasks to the functionality: I want to enable users to drag one task over to another task and drop it there to turn it into a subtask.
Applying .draggable() and .droppable() to items that are already sortable has no effect. What could I do?