To empty a div and replace it with an image I am using:
$(this).html('');
$('<img/>', {
src: 'blah.gif'
}).appendTo(this);
Is there a better way to do this?
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"?
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?
This is my Javascript:
$(document).ready(function() {
$('#like').bind('keydown', function(e) {
if(e.keyCode == 13) {
var likeMsg = $('#like').val();
if(likeMsg) {
// Send the AJAX request to like.php
$.ajax({
url: 'like.php',
success: function(data) {
alert('Content: ' + data);
}
});
}
}
});
});
And this is my like.php file:
<?php
echo "It works! :)";
?>
When I press enter on the #like input, it seems the AJAX request is sent and an alert box comes up saying: Content:, but there's no data being sent back from like.php...
I have checked if the file exists and if it's in the same directory and whatever and it is, so I'm pretty much clueless atm.
Does anyone know what could be wrong here? Cheers.
I am trying to generate a table dynamically using ajax call. To simplify things i have just added my code to js fiddle here - http://jsfiddle.net/5yLrE/81/
As you click on the button "HI" first two columns are created properly.. but some how as the td length reaches 2 . its not creating another row. The reason is that when i do find on the table elements its actually retrieving the children table elements. Can some one pls help.
I want a two column table.. Thank you.
sample code:
var tr = $("#maintable tbody tr:first");
if(!tr.length || tr.find("td:first").length >= max) {
$("#maintable").append("<tr>");
}
if(count==0) {
$("#maintable tr:last").append("<td>hi"+content+"</td>");
}
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();
});
});
All I want to do is on .click() is .animate #slip, essentially Im changing the css at the moment from top: 10px to top: 0px
Instead of it being quite clunky i'd like to animate the movement on the change of CSS.
Currently use .toggleClass to achieve this:
$("#div1").click(function() {
$("#div2t").toggleClass('min');
});
Hi
I am using fanxybox 1.2.6 but it's getting closed despite of mentionig onContentClick:false
Here is the code:
$("#"+vari).fancybox({'hideOnContentClick':false }).trigger('click');
Kindly help me out
p.s: The window is loading content from other URL(via Iframe)
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! :)
$('.testimonials blockquote p')
.prepend('“')
.append('”');
...prepends and appends TWICE. How do I prepend ldquo + whatever content inside the p + rdquo?
Thanks!
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.
Sorry for such a simple question but I can't seem to find the solution.
I am trying to fade in and out some divs.
Divs have an ID of "div1", "div2", "div3".
My code is:
var Divs = new Array("div1", "div2", "div3");
I want to fade out one div and then fade in the next on top of it.
I have a setinterval that runs every 5 seconds and checked it works.
Inside it is this code:
$(Divs[1]).fadeOut(1000);
$(Divs[2]).fadeIn(1000);
However nothing happens when the timer method is ran. Any ideas?
<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...
function testing() {
$.ajax({
type: "POST",
url: "testing.php",
data: "call="+$("#abc").val(),
success: function(msg){
alert( msg );
}
});
}
I want to post the data to testing.php but if i got special characters like & sign. it will create the problem. How do i go about it?
Thank You
Here's another clichéd problem, but I couldn't find an exact match to this.
I haven't posted any source here, as you can freely see all that is there on the link. :-)
Statement:I have a web page at http://agrimgupta.com/antaragni/
Disclaimer: Pardon me for the pathetic coding on that page. ;-) It was done on a very short interval. Improvements will be done at a later stage.
Observation: This page is functioning normally on my localhost on all browsers.
Problem: IE 8 is crawling (nearly hanging) while loading this page from the website. Although it is working fine on localhost. When on the website, It fails to render the mouseover effects, doing them in almost what seems like a minute.
Question: How to resolve this stuck up of IE? It is necessary to resolve this.
Thanks in Advance
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!
Hey guys quick question, I have an add remove script that will add a unique element and should remove it on a click function but does not. I think it is because the added object is not in the DOM when page is loaded but I am not sure how to fix this. IF anyone has any advice I would greatly appreciate it.
$(document).ready(function(){
if (action=='content-change'){
$('#droppable2-inner').empty().append('<div id="content-image"><img id="visual-background2" src=' + src + '></div><div id="drop-content" action="drop-image">x</div>');
}
$("#drop-content").click(function() {
$('#content-image').remove();
});
})
hey guys,
someone already helped me solving the following problem: i wanted to iterate with my up and down arrows through list-items. http://jsfiddle.net/zBjrS/1/
in this example i only had one UL and wanted to navigate through its list-items.
meannwhile i have multiple ul's underneath each other and want to navigate seemlessly through all of them as if there were only one UL. http://jsfiddle.net/zBjrS/2/
any idea how i could do that?
thank you
Take the following example:
$.fn.foo = function() {
var $input = $('<input type="text"/>');
var $button_one = $('<button>One</button>');
var $button_two = $('<button>Two</button>');
$button_one.click(function(){
$input.val('hey');
});
$button_two.click(function(){
$input.replaceWith( $input.val('').clone( true ) );
});
this.append($input, $button_one, $button_two);
};
Check the demo: http://jsbin.com/ezexah/1/edit
Now click "one" and you should see "hey" in the input. Next click "two" and then click "one" again and it doesn't work. Even using the true option in clone to copy all events it still does not work. Any ideas?
<script>
//when page is ready do the following
$(document).ready(function()
{
//set interval of refresh
setInterval(doAjaxMethod, 1000);
});
function doAjaxMethod(id)
{
$.ajax({
url: "getStatus/"+id,
dataType: "json",
success: function(json)
{
$('#ajaxStatus').html(json.status);
}
});
</script>
<%
//How can I do something like this
int n = object.size();
for(int i=0; i<n; i++)
{
doAjaxMethod(object.getId());
}
%>
<div id=ajaxStatus> status updates here </div>
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?
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've got no clue how to do the following, so I wasn't sure what to search for either.
For validating my registration form I've a javascript function that checkes the existence of the inserted username in the database onblur of the username textfield.
function checkUsername(username){
$.post("checkmail.php", {mail: mailcheck} , function(data){
var $response=$(data);
var response = $response.filter('#mail-response').text();
if(response == "taken") {
document.getElementById('username').style.borderColor = rood;
valid = false;
}
});
}
This works fine, but now I want to validate it again onsubmit of the form in case users decide to submit an existing username.
function validateForm() {
var valid = true;
//checks different fields
//now check voor username existence
var username = document.getElementById('username').value;
checkUsername.call(username);
if (!valid) {
return false;
}
else {
return true;
}
}
I'm not familiar enough with Javascript to get this working. Probably thinking in the wrong direction...