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! :)
I'm trying to have the content of the an HTML textbox be selected fully onFocus.
I know the simple solution of putting a onfocus="this.select()" on the component but this is not a good solution because if a user double clicks into the area the selection is lost and in browsers like chrome it is rarely working like it should and just reverts into input form.
I have searched on Google for a little while and can't find a good solution, most suggestions are of this simple solution.
What I would like it is that the selection inside the textbox not change once selected and if possible the user should not be able to edit the content of the textbox, for example if you have used AdSense when you grab code from AdSense the selection never changes and your unable to alter the code in the textbox.
Any solutions would be appreciated.
Using a lightbox like ColorBox or jQuery Lightbox Plugin how can i make a single link which opens a gallery / array of images?
For example i have 1 thumbnail and when a user clicks it i want it to open multiple pictures in the lightbox so the user can click next or previous to view all the pictures within that gallery.
My thinking was that i just do it as normal 1 link to 1 picture then use jquery to hide all but the first link. There must be a better way?
Thanks.
I'm having an issue trying to get an accurate running total for my calculations. When you enter numbers into the input field I get an accurate total for that line item, but the grand total comes out to a higher number. Note that this is a dynamic form and that the id's will change depending on how many form fields I have added to the form. Also, I have it set to make the calculations onKeyUp for each input field instead of a calculate button.
The code that calculates a single item is this:
function calcLineItem(id) {
var id = $(id).attr("id");
var Item1 = $("#Item1" + id).val();
var Item2 = $("#Item2" + id).val();
var Item3 = $("#Item3" + id).val();
function calcTotal(Item1, Item2, Item3){
var total;
total = Math.round((Item1 * Item2) * Item3);
return total;
}
$("#total" + id).text(calcTotal(Item1, Item2, Item3));
calcAllFields();
}
This will give me the total of this particular input field. The function at the end, calcAllFields(), is supposed to do the calculations for all items in my form to give me the grand total of all input fields:
function calcAllFields(id) {
var id = $(id).attr("id");
$('#target1').text($("#total" + id).map(function() {
var currentValue = parseFloat(document.getElementById("currentTotal").value);
var newValue = parseFloat($("#total" + id).text());
var newTotal = currentValue + newValue;
document.getElementById("currentTotal").value = newTotal;
return newTotal;
}).get().join());
}
The variable currentTotal is getting its value from a hidden field on my form:
<input type="hidden" id="currentTotal" value="0">
As I enter numbers a field the calculation for that line will be accurate, but the grand total will be inaccurate because the value for currentTotal will continue to increment with every key stroke I make in the input field. Any ideas on how to avoid this from happening?
I am trying to get the following link to work.
<a href='#' onclick='window.open(" | &ESPP_Info_URL | ");return false;'>Employee Stock Purchase Plan Information</a>
Basically the &ESPP_Info_URL variable takes in a url so that the code below looks like...
<a onclick="window.open(https://...);return false;" href="#">Employee Stock Purchase Plan Information</a>
But when I click the url it just refreshes the page. Does anyone know how to get this to access the link within the window.open function?
I have a classified website, with pretty sophisticated searching, and I am about to implement a function where the last three queries is displayed for the user, so that the user can go back easier through the queries.
This because for each query the user has to provide a lot of input.
I have four questions for you:
I wonder, how can I save the actual query (SELECT * FROM etc etc)...?
Do I need to add some form of encryption to be on the safe side?
How will this affect performance? (I don't like the fact that cookies slow websites down)
Anything else to think about?
If you need more input, let me know...
Btw, the website is PHP based.
Thanks
I have successfully set up this plugin before so I am curious as to what I am doing wrong here. I have built the ability for users to add tags to questions. I am not using tagging plugin here but that shouldn't matter for this.
With respect to the auto complete, I am trying to have the form located in the /views/questions/show.html.erb file access the Tags table and display entries in the tags.tags_name column.
When I begin to type in the field I get the following error message:
Processing QuestionsController#show (for 127.0.0.1 at 2010-05-31 15:22:20) [GET]
Parameters: {"tag"=>{"tag_name"=>"a"}, "id"=>"auto_complete_for_tag_tag_name"}
Question Load (0.1ms) SELECT * FROM "questions" WHERE ("questions"."id" = 0)
ActiveRecord::RecordNotFound (Couldn't find Question with ID=auto_complete_for_tag_tag_name):
app/controllers/application_controller.rb:15:in `init_data'
For some reason I am actually passing the field name as the Question.id.
The plugin set up is fairly simple as you add the following line to your controller:
auto_complete_for :tag, :tag_name
and the following line in your routes.rb file:
map.resources :tags, :collection => {:auto_complete_for_tag_tag_name => :get }
I have added the controller line to both my tags and questions controller and also mapped resources for both tags and questions in my routes.rb file:
map.resources :tags, :collection => {:auto_complete_for_tag_tag_name => :get }
map.resources :questions, :collection => {:auto_complete_for_tag_tag_name => :get }
I have played around with removing either or of the above but can't seem to fix it. Any ideas what I am doing wrong here?
UPDATE:
My QuestionsController#show action is fishing posts by:
@question = Question.find(params[:id])
Issue I have is I can use tags, but I would like to style particular words. Adding a class doesnt work, is it because I am within script dom ?
Example:
var config = [
{
"name" : "tour_1",
"bgcolor" : "black",
"color" : "white",
"position" : "BR",
"text" : "Customize your user profile, it's easy. This is your shop window on <strong>here</strong> and <strong>there</strong>",
"time" : 4000
}
Instead of strong, I would like to apply class, like
<p class="orange">
But it wont have it, any suggestions... please
The function essentially contains 2 statements:
statement1; and statement2;
If statement1 fetches some records,just return them as result;If it doesn't fetch any result,return the result of statement2.
I am trying to add a vclick to a dynamic JQM listview. But I can not figure out how to identify which number is being clicked.
http://jsfiddle.net/2hR9w/
for (var x=0; x<2; x++ ) {
$("#listitem"+x).bind("vclick",function(e)
{ console.log("clicked"+x); });
console.log(x);
}
?
Something is wrong with the code, but i can't figure out why x is always the max loop value, since I feel like it should be set at the time of the loop.
it always reads clicked2, never clicked1.
I used a code:
jQuery.fn.MyFunction = function(){
return this.each(function() {
attributes = "test";
return attributes;
});}
But when I call
var1 = $(this).MyFunction();alert(var1);
I got an [object], but not the "test".
How to allow jquery plugin return a some value?
hello, i am trying to get the headers of an ajax request i made through jquery
$.get(url,
function(response, textStatus, headers ) {
console.log("Response: %o", response);
console.log("TextStatus: %o", textStatus);
console.log("Request: %o", headers);
}
);
this does not seem to be working however:
the response and textstatus are printing, but the "headers" object seems to be undefined
i simply want to check if it is what i expect (content type='excel', etc) or if the response type is html, i can assume the page i was calling is an error
I want to make it so that everytime you click on an 'h2' tag, the 'input' inside gets selected and the 'h2' tag changes background, but if another 'h2' tag is clicked, the current highlight and 'input' selection changes accordingly.
problem is that I have 3 different that do the same and with my code all the 3 forms are affected rather one. How do i limit my changes to only be contained to that form. Here is some code for clarification
'
<form>
...
<h2 onclick="document.getElementById(1001).checked='True'
$('h2').removeClass('selected');
$(this).addClass('selected');
">
CONTENT
<input type="radio" name="radio" id="1001" value="1001" />
</h2>
...
</form>
I'm sure I'm simply overlooking something in the Facebook API docs. Basically, after I've loaded the FB Graph, I need to know if the session is active... I cannot simply assume they're logged out and simply re-render if they're logged in once the 'auth.statusChange' event is triggered. I need to know right off the bat.
Below is the code that I've used. Most importantly the FB.getLoginStatus/getAuthResponse/getAccessToken don't work like I'd expect; essentially where it indicates, when invoked, whether they're logged in or out.
(function(d) {
// Create fb-root
var fb_root = document.createElement('div');
fb_root.id = "fb-root";
document.getElementsByTagName('body')[0].appendChild( fb_root );
// Load FB Async
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
// App config-data
var config = {
appId : XXXX,
cookie: true,
status: true,
frictionlessRequests: true
};
window.fbAsyncInit = function() {
// This won't work.
// I can't assume they're logged out and rely on this to tell me they're logged in.
FB.Event.subscribe('auth.statusChange', function(response) {});
// Init
FB.init(config);
// These do not inidicate if the user is logged out :(
FB.getLoginStatus(function(response) { });
FB.getAuthResponse(function(response) { });
FB.getAccessToken(function(response) { });
};
}(document));
Any help is much appreciated. :)
I have an unordered list with no list items.
I get some information from the user, I run it through my database using AJAX and the servers sends back a JSON object response.
Then I append each list item I want to display to the list using something like
$('blabla').append('<li>information</li>')
My question is, since the li elements were not there at the time the DOM was ready, how can I bind a click event to them?
Here is my full code:
$(function(){
var timer;
$('#f').keyup(function(){
clearTimeout(timer);
timer = setTimeout(getSuggestions, 400);
});
})
function getSuggestions(){
var a = $('#f')[0].value.length;
if( a < 3){
if(a == 0){
$('#ajaxerror').hide(300,function(){
$('#loading').hide(300,function(){
$('#suggest').hide(300)
})
})
}
return;
}
$('#loading').slideDown(200,function(){
$.ajax({
url: '/models/AJAX/suggest.php',
dataType: 'json',
data: {'data' : $('#f')[0].value },
success: function(response){
$('#ajaxerror').hide(0,function(){
$('#loading').hide(100,function(){
$('#suggest ul li').remove();
for(var b = 0; b < ( response.rows * 3); b = b + 3){
$('#suggest ul').append('<li>'+response[b]+' '+response[b+1]+' '+response[b+2]+'</li>')
// MISSING SOME CODE HERE TO BIND CLICK EVENT TO NEWLY CREATED LI
}
$('#suggest').show(300)
})
})
},
error: function(){
$('#suggest').hide(0,function(){
$('#loading').slideUp(100,function(){
$('#ajaxerror').show(300)
})
})
}
})
})
}
Hi all,
I am having an issue positioning a background image using the following jquery background position command in Firefox, Google Chrome, and Safari. The code works correctly in IE 8.
$('#element).css({ backgroundPosition: 'xpx ypx' });
The x position of the image is calculated dynamically based on window size and the y position is static. The css appears to be modified correctly, however, the background image I am attempting to overlay is absent. See jscript code below:
$(window).resize(function () {
// image positioning variables
var windowwidth = $(window).width();
var imgwidth = $('#imgFluid').width();
var offset = $('#divFluidBlur').offset();
// calculate and implement position
blurPositionLeft = (windowwidth - imgwidth) - offset.left;
$('#divFluidBlur').css({ backgroundPosition: blurPositionLeft + 'px' + ' 30px' });
// debug: display actual css Background Position of element to text box
$("#txtActualBackgroundpos").val(document.getElementById ("divFluidBlur").style.backgroundPosition);
Thanks in advance for your help,
Andrew
I have a div container with a text that has been previously typed in by the user. I would like to adjust the size of the div to this text. I cannot have fixed size because I dont know the length of the text. If there is no size specified div takes the width of entire window. This cause some problems for me because I am using JQuery draggable plugin and the scrollbars appear immediately when the div is dragged. Any advice on that?
I have recently done a very simple highlighting with jQuery and a highlight plugin. It looks like this:
$('myButton').click(function() {
$('body').highlight($('#myInputText').val());
});
But I wonder how can I do the Chrome like highlighting, I mean highlight the letters whenever I type in some letter in textbox without submitting. I think maybe use a keyup event... Any ideas?
{"paging": {"pageNum":2,"action":"Next","type":"","availableCacheName":"getAllFunds","selectedCacheName":"","showFrom":101,"showTo":200,"totalRec":289,"pageSize":100},
"Data":[{"sourceCodeId":0,"radio_fund":"individua
l","availableFunds":[],"fundId":288,"searchName":[],"fundName":"Asian Equity Fund A Class Income","srcFundGrpId":"PGI","firstElement":0,"las
tElement":0,"totalElements":0,"pageList":[],"standardExtract":true}]
I have json file with above format with two fileds,one paging and one is Data array.
I able to retrieve values of paging,but i am not able to retrieve the values of data array with .each function of jquery.
Any suggestions or inputs really appreciated.
Hello, I was making a small thing in HTML and basically I have some "frames" like
<div id="frame_1">
...
</div>
<div id="frame_2">
...
</div>
...
Basically what I want is for only one frame to be visible at one time and to navigate between frames easily with previous and next buttons (navigation by frame number a plus, but not required)
Before I set out to write it myself I figured someone had already done it so has it been done?
I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox.
Here is the JS file :
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
dynDiv.class="main";
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
question_div.class="question";
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
answer_div.class="answer";
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
Here is the css file :
.question
{
width: 40%;
height: auto;
float: left;
display: inline-block;
text-align: justify;
word-wrap:break-word;
}
.answer
{
padding-left:10%;
width: 40%;
height: auto;
float: left;
overflow: auto;
word-wrap:break-word;
}
.main
{
width: auto;
background-color:gray;
height: auto;
overflow: auto;
word-wrap:break-word;
}
My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line ?
Thank You.
PS : should I stick with the current idea of using div or should I try some other approach ? like tables ?
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! :)
Following DOM structure:
<ul>
<li class="item">yes</li>
<li>no</li>
<li class="item">yes</li>
<li>
<ul>
<li class="item">no</li>
</ul>
</li>
</ul>
Assuming I have the outer <ul> in $ul. How do I get the two immediate children which have the item-class?
In jQuery I would write something like this:
$ul.children().filter(".item")
$ul.children(".item")
$ul.find("> .item")
How do I to this with Prototype?
I tried the following ...
$ul.select("> .item") //WRONG
... but it does does exactly the opposite and returns the one inner <li>