Is there a way to access the super object when extending objects using $.extend?
I would like to extend an object, override a method, but call the overridden superclass method in the subclass method.
Hi, I have the following function which limits the amount of characters you can enter into a text area.
What's meant to happen is, if the text length is higher than the text limit, set an attribute of disabled="disabled" on the submit button, but it isn't getting set, my function code is as follows:
function limitChars(textid, limit, infodiv) {
var text = $('#'+textid).val();
var textlength = text.length;
if(textlength > limit) {
$('#' + infodiv).html('You cannot write more then '+limit+' characters!');
$('input#submit').attr('disabled', 'disabled');
} else {
$('#' + infodiv).html('You have '+ (limit - textlength) +' characters left.');
}
}
Any ideas?
I have a page with several galleries including accordions and sliders. The problem is that the page takes forever to load. Is there a way of wrapping an image in a bit of code or applying a class to it to force it to load only after everything else is loaded?
I am using the .eq() method to select a specific child element of a known element. It appears that the element indices are different in IE and in Chrome/FF, as .eq(2) returns different values depending on browser. (The element I'm looking for shows up as .eq(2) in FF/Chrome, but .eq(3) in IE)
For example,
alert($(this).parent().children().eq(2).text());
shows different results depending on the browser.
Is there a better way of doing this?
Hi
What im trying to do is that when the esc key is pressed on the text
input field (id = txtSearch), some code will run.
this is my code:
$(document).ready(function() {
$('#txtSearch').bind('keyup', function(e) {
var characterCode; // literal character code will be stored in this variable
if (e && e.which) { //if which property of event object is supported (NN4)
e = e;
characterCode = e.which;
}
else {
characterCode = e.keyCode;
}
if (characterCode == 27) //if esc key
{
//do stuff
}
});
}
It doesnt work for me. however, if i would change that line:
$('#txtSearch').bind('keyup', function(e) {
with:
$(document).bind('keyup', function(e) {
everything works. but i dont want to bind the keyup with esc to the
whole document...
any suggestions on how i can bind the the keyup only with the specific
text search element? (or its containing div or something)
Thanks!
Hello,
Is it possible to get the size of an element after resizing it using $(el).css()?
My code is:
function resize() {
$(".combobox").css('width', '100%');
var width = $(".combobox").width();
}
I've get the real value of the combobox only after calling the function a second time. The first time is gets the width before executing $(".combobox").css('width', '100%');
I suppose this is fault of the DOM not being recreated after the .css(). Is there any way to force DOM reloading?
Thanks in advance!
$('#customerAddress').text().replace(/\xA0/,"").replace(/\s+/," ");
Going after the value in a span (id=customerAddress) and I'd like to reduce all sections of whitespace to a single whitespace. The /\s+/ whould work except this app gets some character 160's between street address and state/zip
What is a better way to write this? this does not currently work.
i want move up the object, delay 1000ms , then hide it,
i get the code:
$("#test").animate({"top":"-=80px"},1500)
.animate({"top":"-=0px"},1000)
.animate({"opacity":"0"},500);
i use ".animate({"top":"-=0px"},1000)" to implement delay, it's not good.
i want:
$("#test").animate({"top":"-=80px"},1500)
.sleep(1000)
.animate({"opacity":"0"},500);
any idea? thanks! :)
Why does x alerts undefined for iframe but works for embed. I'm grabbing the iframe or embed code from a textarea
<iframe src="http://www.youtube.com/embed/9kiWvkj2ldWiU?hd=1"></iframe>
var textarea = $('#embedModal textarea'),
textareaValue = textarea.val(),
$embed = $($(textareaValue).find('iframe')),
x = $embed.attr('src');
alert(x); //alerts undefined for iframe
If you change find('iframe') to find('embed') and you try with the below embed code. then i'm able to get the value of src, but with iframe i get undefined. Seems strange.
<embed src="http://www.youtube.com/embed/9kiWvkj2ldWiU?hd=1"></embed>
Here is the script I am using.
$('.row').each(function(){
$(this).each(function(){
if($(this).find('.name').val()==""){
$(this).find('.name').val(data.name);
$(this).find('.autonomy').val(data.autonomy);
$(this).find('.purpose').val(data.purpose);
$(this).find('.flow').val(data.flow);
$(this).find('.relatedness').val(data.relatedness);
$(this).find('.challenge').val(data.challenge);
$(this).find('.mastery').val(data.mastery);
$(this).find('.colour').val(data.colour);
done=true;
}
if(done==true){
alert("here");
return false;
}
});
});
It just seems to totally ignore the return false and I can't seem to work out why!
hi,
i have a proj where on change of select box i am loading data from server. how do i make sure that until the data is loaded user cant do anything else on the page ..
I need a little piece of advice.
I have a test page with 2 fields: word number and URL
Also i have a button Push.
When i push the button i want to open the specified URL (it's local html files) and highlight the word at the "word number" position
Of course the code must ignore element nodes (<p>,<b>,<table> and so on)
i have included the plugin and written code like
if(page) { $.post(page,{},function(data){callBackFunction(data)}); }
function callBackFunction(data)
{
$('.page_change').html(data);
$('.page_change').effect("bounce", { times:3 }, 300);
$('#submit_show').show();
}
The data change is happening but the bouce effect i am not getting..how do i solve this issue..
Hi,
I have created image gallery slider, the images of which scale with the window size. My problem is I can't seem to create the right formula to ensure that the slider is at the right position when the window is scaled.
If I am at the first image and the slider 'left' offset is 0 then the scaling works fine and my offset is correct, however when I am on image two and my slider is offset by say -1500 and then the window is resized, the slider is then at the wrong offset.
Taking this into account I figured I could just add / subtract the new window size difference from the slider offset and therefore have everything in the right position. I was wrong. It works for the first two images but then If I am at the end of my slider on the last image I get a nice big gap between the end of the last image and the border of the page.
Can someone please show my where I am going wrong please? I've spent days on this :(
The relevant code is as follows:
$(window).bind('resize', function(event, delta) {
/* Resize work images - resizes all to document width */
resizeWorkImages('div.page.work div#work ul');
/* Position slider controls */
positionSliderControls();
/* Get the difference between the old window width and the new */
var windowDiff = (gLastWindowWidth - $(window).width()) * -1;
/* Apply difference to slider left position */
var newSliderLeftPos = stripPx($('div.page.work div#work ul').css('left')) - windowDiff;
/* Apply to slider */
$('div.page.work div#work ul').css('left',newSliderLeftPos+'px')
/* Update gSlider settings */
gSlider.update();
/* Record new window width */
gLastWindowWidth = $(window).width();
});
Thanks,
eb_dev
Hi guys, I have an HTML form consisting of some text-inputs. I'm using jqTransform to prettify them. Now I want to add two buttons that will add and remove text-input dynamically.
Adding is easy:
$('#container').append('');
$('input[name=foo]:last-child').jqTransInputText();
But removing is tricky:
$('WHAT-TO-SELECT').remove();
I can't do "input[name=foo]:last-child" since it's already wrapped (some divs) by jqTransform. To put this question in another way: How do I select based on "who has child of type input with 'foo' as its name"?
<script type="text/javascript">
$(document).ready(function() {
$('#tmpOpen').click(function() {
var value = $("#tmpOpen").attr("value");
if (value == "Expand") {
document.getElementById("tmpOpen").value = "Collapse";
$('#Grid tr[role="row"] td a').not('.icon-minus').click();
}
else {
document.getElementById("tmpOpen").value = "Expand";
$('#Grid tr[role="row"] td a').not('.icon-plus').click();
}
});
</script>
is this right what i am doign here? icon-plus is class name for a...
the html
<div class="stackwrapper" id="user1"></div>
<div class="stackwrapper" id="user2"></div>
<div class="userdrawings"></div>
the javascript
$('.stackwrapper').click(function(e){
var id=$(this).attr('id');
$('.userdrawings').load('loadSession.php?user='+id).fadeIn("slow");
});
Somehow it only works at once, only at the first click on stackwrapper, when I click on the second one, the function is not triggered again.
As I've come to understand using $('.whatever').click() only works for items created initially. Additional items won't respond in the correct fashion. I was then directed to using something like $('.whatever).on('click', myFunction()). However, I'm not detecting any difference, as newly created items are not called.
Here is a JSFiddle demonstration my example code: http://jsfiddle.net/atrus6/zaKZN/
My initial input plus 'Kill' will work in the correct fashion, however any additional 'input + kill's will not not do anything. Am I incorrectly using .on() or is it something else?
I've been wrestling with this problem for a couple hours now.
Essentially, what I need to do is take the following or similar HTML:
<div id="excpdivs">
<div class="excpdiv" id="excpdiv0">
Date: <input name="excp[0][date]">
Open: <input name="excp[0][open]">
Close: <input name="excp[0][close]">
</div>
<div class="excpdiv" id="expdiv1">
Date: <input name="excp[1][date]">
Open: <input name="excp[1][open]">
Close: <input name="excp[1][close]">
</div>
and get an array similar to the following to a php script:
Array
(
[0] => Array
(
[date] => 2012-09-15
[open] => 3:00
[close] => 5:00
)
[1] => Array
(
[date] => 2012-09-16
[open] => 2:00
[close] => 5:00
)
)
My main problem is getting the values from the input elements. My latest attempt is the following:
var results = [];
$(".excpdiv").each(function(){
var item = {};
var inpts = $(this).find("input");
item.date = $(inpts.get(0)).val();
item.open = $(inpts.get(1)).val();
item.close = $(inpts.get(2)).val();
results.push(item);
});
Am I on the right track or am I hopelessly lost?
i'm building a page, which will have categories that will contain a list of pages to go with them. at first all the list are hidden, and than I click on a category and the list slides down. this is the code of the script:
$(document).ready(function() {
$('.menu-list').hide();
$('.menu-title').click(function() {
if ($(this).next().is(':not(:visible)')) {
$('.menu-list:visible').slideUp();
$(this).next().slideDown();
}
});
The script works, but the problem is when I'm clicking on a category in a column that has more categories than the other. than the last category is moving to the left and I don't want it to. Here is the code in jsfiddle: http://jsfiddle.net/U7rKX/4/
Can you help me?
there are 2 multiple select list on my page , one is there with a seperate remove button . selecting an item there in the selected list is removing the item from the first select list also.how will i specify which list to remove item from in this code
$().ready(function() {
$('#remove').click(function() {
return !$('#FeatureList option:selected').remove();
});
});
I want to switch images on .click() using the url attr I can do so, but I can't figure out how to make it wait, until the animation is done to redirect to the new webpage.
Here's the js
$(function() {
$('.cv').click(function(){
$("#cv img").fadeOut(2000, function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", "images/cv2.png");
return true;
});
});
});
Here's the html:
<div id="cv" class="img one-third column">
<a class="cv" target="#" href="cv.joanlascano.com.ar">
<img src="images/cv1.png" alt="Curriculum"/>
<br />CV</a>
</div>
Thank you in advantage!