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 ?
I'm using jqtransform on my site. When the user is on a for them to be able to use hot keys to move through the selections. I added this function:
$wrapper.find('a').keydown(function (e) {
var Esc = 27;
var code = (e.keyCode ? e.keyCode : e.which);
if(code== Esc || (code>=65 &&code<=90)){
var letter = String.fromCharCode(code);
if (code==Esc)
keyCodes = "";
else{
if (keyCodes=='')
keyCodes += letter;
else
keyCodes += letter.toLowerCase();
var item = $wrapper.find('a[text^=\'' + keyCodes + '\']:first');
item.click();
}
}
});
inside of $.fn.jqTransSelect.
This code works fine in all browsers but IE. the only thing i can find is that IE doesn't like the click event. Can anyone please help me with this?
If i debug into the code I can see that item is a select not an anchor like i would expect it to be, and that confuses me even more.
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 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.
i am using WCF to return my data and not sure how sure how i will bind the gridview once i get the data on the clientside? any help?
ContactServiceProxy.invoke({ serviceMethod: "Holidays",
callback: function(response) {
//how to bind gridview here?
},
error: function(xhr, errorMsg, thrown) {
postErrorAndUnBlockUI(xhr, errorMsg, thrown);
}
});
//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
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
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;
});
Hello
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
I read this tutorial and there was a talk about secondary functions in a plugin.
How can I use those functions outside the plugin?
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?
Hey,
I'm trying to dynamically add a validation rule to some dynamic controls:
$("input[id*=Hours]").rules("add", "required");
However this line gives me the following error:
$.data(element.form, "validator") is null
Defining rules the static way with the validate function works fine. What am I doing wrong?
Thanks,
Justin
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>');
})
})
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 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'm making a typing tutor program using javascript. Everything is going well except that if activates browser hotkeys which disrupts the functionality of the program. When I press the single quote in Firefox it triggers "Quick find (links only)" short cut and in all browsers when I press space the page scrolls down a page. Everything is working fine outside of this. Here's the code in the head:
<script type="text/javascript">
$(document).ready(function() {
executeType();
});
</script>
And the code I am using to capture the keyboard (simplified, but tested):
function executeType() {
$(document).keydown(function(event) {
alert(event.keyCode);
});
}
How do I apply jQueryUI styles to an asp:Button. Here is the problem: jqueryUI button requires you to have the following format <button>Test button</button>
When I try to use an asp button server control, <asp:Button />, asp:Button renders as <input type=button>Test button </input>
Thanks in advance,
Sashidhar Kokku
So, throughout my entire document, I would like for every single time the user hovers over an element with a specific class name, I would like a class to be added.
My CSS looks like this:
.hotspot:hover, .hotspothover
{
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
z-index: 1;
}
Class name: "hotspot".
I tried this, but it doesn't seem to work:
$("#hotspot.hover #hotspothover").addClass("bubble bottom");
Thanks.
Hi all,
I feel confused of the dot and hash symbols in the following example:
<DIV ID="row">
<DIV ID="c1">
<Input type="radio" name="testing" id="testing" VALUE="1">testing1
</DIV>
</DIV>
Code 1:
$('#row DIV').mouseover(function(){
$('#row DIV).addClass('testing');
});
Code 2
$('.row div').mouseover(function(){
$(this).addClass('testing');
});?
Codes 1 and 2 look very similar, and so it makes me so confused that
when I should use ".row div" to refer to a specific DIV instead of using "#row div" ?
I'd like the load content of my tabs thru AJAX, but only on the first tab click. Now the tabs gets loaded every time I click on any tab. Is this possible ?
My html
<div id="tabContainer">
<ul>
<li><a href="/Home/Tab1">Tab1</a></li>
<li><a href="/Home/Tab2">Tab2</a></li>
<li><a href="/Home/Tab3">Tab3</a></li>
</ul>
</div>
EDIT
I cannot use the Cache option,because the content in the tabs may change..
Hi There,
I have whole bunch of <div class="productlistname"><a href="#">The Text!</a></div>. What I want to do go through all .productlistname and truncate the text and replace the current text with the truncated version.
Here is what I have so far:
$(".productlistname a").html($(".productlistname a").html().substring(0,10));
This just truncate the first one and replaces the rest of .productlistname with the truncated version of the first one.
I have a code that would call $.load() to get an HTML fragment. In the fragment there will be a list of images and a script that would do some calculation based on the list size. The fragment looks like
<div>
<ul>
<li><img .../></li>
<li><img .../></li>
...
</ul>
</div>
<script>
//... script to do calculation on the list width
</script>
Originally, I use css's max-width to ensure that the image would not exceed 180px. But as IE has no max-width, I use the expression hack. However, it seems when the image are first load, the script cannot get a correct width of image list. Seems like the script load earlier than the CSS expression.
If it is a new page, I can certainly call $(window).load() to ensure all the images are loaded. But what can I do in an ajax html fragment request?
JavaScript
$(function() {
$('#lol').hover(function() {
$(this).stop().animate({opacity:0.5});
},function() {
$(this).stop().animate({opacity:1});
});
});
CSS
#lol {
padding:20px; background-color:#FF0000; color:#FFF; font-size:15px; font-family:arial; width:300px; opacity:1; filter:alpha(opacity=100); position:relative;
}
HTML
<div id="lol">text</div>
In Firefox and Internet Explorer it works fine but in Chrome, the text get weird on fade -- it look like that text is losing cleartype.
How can I fix it?
How it looks on fade: Click to see