When using third-party libraries such as jquery, yui-reset, swfobject and so on, do you link to the hosted versions, or download and host your own versions?
Pros and cons either way?
I am developing an asp.net mvc application and have ajax calls on my page. Here is a form which I load by ajax call to page :
The form is located in a partial view
<div id="CreateCultureArea">
<%
using (Ajax.BeginForm("CreateCulture", "Admin", new AjaxOptions() { OnSuccess = "handleCreateCulture" }))
{ %>
.....
<% } %>
</div>
The following script is located in a view
$('.CreateCulture').live('click', function (e) {
e.preventDefault();
var idval = this.id;
$.ajax({
url: "/Admin/CreateCulture",
dataType: 'html',
data: { id: idval },
success: function (mydata) {
$("#CultureContentArea").empty();
$("#CultureContentArea").empty().hide().append(mydata).fadeIn(2000);
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
},
type: "GET"
});
return false;
})
</script>
When users click on a link with CreateCulture class, the form is loaded to page. But as I saw the requests in firebug, it calls the action multiple times. I read similar posts like mine on stackoverflow.com and most of them suggested removing repetitive "jquery.unobtrusive-ajax.min.js" calss in page, but as I saw the output page I only see on link to the "jquery.unobtrusive-ajax.min.js" script.
I am using asp.net.
I have taken one Hidden value and assigning value to that hidden variable in Java-script.
aspx: <input type="hidden" runat="server" id="hdnProductionIds" value="0" name="hdnProductionIds" />
JS:
document.getElementById("ctl00_ContentPlaceHolder1_hdnProductionIds").value = "123";
I want to use that hidden value in server side coding(vb.net). But while do-post back, hidden variable value becomes Zero (default value)
Can any one please suggest me.
Thanks, Jagadi.
I’m new (only two weeks old) in Jquery, so please bear with me.
I know that a very similar question was asked some time ago
but I do not know how to adapt the answer to my problem.
I have a very wide multicolumn layout something like this:
| aaaa | bbbb | cccc | … |
| aaaa | b | cc | … |
| aaa | cccc | ddd | … |
The code looks like:
<div id="container">
<p>aaaaaaaaaaa</p>
<p>bbbbb</p>
<p>ccccccccccc</p>
<p>dddddddddd</p>
...
<p>xxxxxx</p>
</div>
There is no vertical scrolling and the container width
is set in such a way that only two columns are shown.
The user scrolls left or right to see the relevant text.
What I want is to get the position currently on display,
store it (maybe in a cookie) and retrieve it the next
time the user opens the page.
I think that I need a way of finding out what paragraph
is currently the left-top most, but other suggestions
are very welcome.
Any ideas?
btw: this is an internal project, so Mozilla only :-)
Thanks
Lolo
I know its been asked many times already but no one could come up with solution so far.
The idea is to have one form separated into few steps and validate each step on next click of the button. I know jquery validation plugin is offering quite complicated way of doing it with accordion but can anyone come up with a simple solution something like
var stepOne = {
rules: {
fieldname1: "required",
fieldname2: "required",
}
}
$("form").validate(stepOne); //onclick
hope someone could suggest the best way of doing it.
Thanks.
function VisibleDiv(obj) {
if (obj == BaseLog) {
var objStyle = document.getElementById('DivCalls').style;
if (objStyle.display == "block")
objStyle.display = "none";
else
objStyle.display = "block";
}
else if (obj == ViewReports) {
var objStyle = document.getElementById('DivReports').style;
if (objStyle.display == "block")
objStyle.display = "none";
else
objStyle.display = "block";
}
else if (obj ==Management) {
var objStyle = document.getElementById('DivManage').style;
if (objStyle.display == "block")
objStyle.display = "none";
else
objStyle.display = "block";
}
<a href="#" id="BaseLog" class="TextHeader" onclick="VisibleDiv(this)">Base Log </a>
in the above code is working in IE but not working in mozilla 3.6.
I have checked that obj==BaseLog is not working in the above code.
I have tried many options like
event.srcelement
window.event.srcelement
but all in vain.
when I debug the code ,I found that obj is having complete value for IE but
the same obj is having all the names .ie. the name of tag,id and class for "Base Log" seperated by #. i.e a#BaseLog#TextHeader#
Please suggest what shoud I do?
Hi to all. I'm trying to optimize a website. The flow is i tried to query a certain table and all of its data entry in a page(w/ toolbars), work fine. When i tried to edit the page the problem is when i click the checkbox button i have to wait 2-5sec just by clicking it. I limit the viewing of entry to 5 only but the response on checkbox doesn't change. The tables have 100 entries in them.
function checkAccess(celDiv,id)
{
var celValue = $(celDiv).html();
if (celValue==1) $(celDiv).html("<input type='checkbox' value='"+$(celDiv).html()+"' checked disabled>")
else $(celDiv).html("<input type='checkbox' value='"+$(celDiv).html()+"' disabled>")
$(celDiv).click
(
function()
{
$('input',this).each(
function(){
tr_idx = $('#detFlex1 tbody tr').index($(this).parent().parent().parent());
td_idx = $('#detFlex1 tbody tr:eq('+tr_idx+') td').index($(this).parent().parent());
td_last = 13;
for(var td=td_idx+1; td<=td_last;td++)
{
if ($(this).attr('checked') == true)
{
df[0].rows[tr_idx].cell[td_idx] = 1;//index[1] = Full Access
if (td_idx==3)
{
df[0].rows[tr_idx].cell[td] = 1;
}
df[0].rows[tr_idx].cell[2] = 1;
if (td_idx > 3)
{
df[0].rows[tr_idx].cell[2] = 1;
}
}
else
{
df[0].rows[tr_idx].cell[td_idx] = 0;//index[0] = With Access
if (td_idx==2)
{
df[0].rows[tr_idx].cell[td] = 0;
}
else if (td_idx==3)
{
df[0].rows[tr_idx].cell[td] = 0;
}
if (td_idx > 3)
{
df[0].rows[tr_idx].cell[3] = 0;
}
}
}
$('#detFlex1').flexAddData(df[0]);
$('.toolbar a[title=Edit Item]').trigger('click');
});
}
);
}
I've thought that the problem is this above code. Could anyone help me simplify this code.?
I have a snippet of code that alters the contents of a DIV to match the contents of a textarea and then applies the height change in the DIV to the textarea element.
function growTextArea(parameter) {
$('div').find("[data-fieldid='1_description']").text($(parameter).val());
// No Works
height = $('.hiddenDiv').find("[data-fieldid='1_description']").outerHeight();
alert(height);
// Works
heightDiv = $('.hiddenDiv').outerHeight();
alert(heightDiv);
$(parameter).css('height', $('div').find("[data-fieldid='1_description']").outerHeight());
}
The DIV contents change properly, so the search function is working properly, however the search function always returns the original height of the DIV. The function is called by onKeyUp in the textarea. If the .find is swapped out for a .hiddenDiv the height change is reflected properly.
Round two. First was "How do I get all supported CSS properties in WebKit?".
I'm looking for magic CSSkeywords function:
CSSkeywords('float') --> ['left', 'right', 'none']
CSSkeywords('width') --> ['auto']
CSSkeywords('background') --> [
["repeat", "repeat-x", "repeat-y", "no-repeat"],
["scroll", "fixed"],
["top", "center", "bottom", "left"],
/*regexp for color*/,
/*regexp for url*/,
"none"
]
Right now, the text seems not to be exactly vertical centered.
It seems that there is more top-padding than bottom-padding.
Although of course, there is no padding in the CSS. How do I make this completely vertical aligned?
I've edited this piece of code from the Data Tables Plugin witch makes a tr click able and pops open another tr with details from the clicked tr. This piece of code is the event listener for opening and closing. When "details" are open the img should be images/details_close.png and they are closed the img should be images/details_open.png and have a swap occurring when it opens and closes when clicked. What is happening is there is no swap going on when its open or closed I still only get the "details_open.png". I don't knoe if I'm just not selecting the img tag properly or whats going on.
Link to project:
http://www2.kent.k12.wa.us/ksd/it/www/mobile/elementary.html
$('#example tbody').on('click', 'td', function (e) {
var myImage = $(this).find("img");
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
myImage.src = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
myImage.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
maybe all of you saw the Apple html5 shocases...thing is they didnt put online anything downloadable, am I right? someone found a 360 example that we can download and use as is instead of going trought the Safari Reference book...?
thanks
Here's the link to my code: http://jsbin.com/edago3/edit
I would love to find out what improvements could be made to make it smaller and more efficient.
Any help is appreciated.
Hi guys,
I'm developing a Flash website (as3) where I need to be able to upload directly to YouTube by using the DATA API.
However in order to do so, I had to use a proper HTML form on top of my flash object.
Why? Because of the Browser Based Upload restictions.
I first hide the form using JQuery and with a little CSS the form is display just where I want it.
Within flash I use ExternalInterface.call() to show/hide the form when I need it!
ExternalInterface.call("YTUploader.showIt");
The upload process is working great my only problem is that the form can be displayed easily...
You just need a tool like firebug and you can use the form wherever you want on my flash app.
So I was wandering which will be the best way to 'protect' this form or the best way to limit its access.
Any advices will be appreciated.
Thanks for your time.
Jk.
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
On click, I'd like to addclass active to the parent li element while also removing the active class from any other element which may be active already.
Thanks!
Hi,
I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?
I'm stuck in a rut. I hope some one can help.
Basically, I am building an AJAX mobile web app with jQuery. I am able to parse a specific XML file just fine, but I want the option to parse other XML files based on the link they were clicked on and load them on the fly into the same DIV or UL.
So:
click on Link1, loads XML1
click on Link2, loads XML2
I would like to be able to do this all client side, so no PHP (or is that a bad idea?). This the jquery code I've been using:
$(document).ready(function() {
$("a.load_ajax").click(loadAjax());
function loadAjax() {
var fileID = get('?lineID=');
var dataID = "xml/" + fileID + ".xml"
$.ajax({
type: "GET",
url: dataID,
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("train").each(function() {
$("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
});
}
}
});
Its just not working at all. I have been passing the variable using GET in the url. So the link in the HTML goes to /?lineID=SBD_to_Union and it should load the XML file called SBD_to_Union.xml
Making sense to anyone? I'd appreciate some help.
I'm creating a website using node.js. I have seen many libraries mentioned that piggy back on top of imagemagick etc. There is a list here: https://github.com/ry/node/wiki/modules#graphics
What I'm trying to do is take the image that a user uploads, crop it/size it to certain dimensions the site requires. What is the best/most active script to do this? I'd like one with npm support. Does anyone have actual experience using some of these?
I tried: $('#canvas').append('<div class="tile"></div>').css({left: leftPos, top: topPos});, but that sets the style of #canvas rather than the appended element.
I then tried: $('#canvas').append(('<div class="tile"></div>').css({left: leftPos, top: topPos}));, but that gives the error "Object <div class="tile"></div> has no method 'css'".
How can I add the element and set its style at the same time?
I don't know much about jquery at all, so bear with my ignorance, but I'm pretty sure I can accomplish this with jquery.
I need jquery to check if an element exists, and if so, add a class to a different element. For example,
if class "minimal-price-link" exists, then add a class to "regular-price" or what I really am wanting to do is make the regular-price strikethrough.
Here's the code:
<div class="price-box">
<span class="regular-price" id="product-price-2">
<span class="price">$240.00</span>
</span>
<a href="http://stemulation.com/order/sfs30.html" class="minimal-price-link">
<span class="label">Your Price:</span>
<span class="price" id="product-minimal-price-2">$110.00</span>
</a>
</div>
I refresh pages by writing window.location = window.location; however this doesnt work on a page like /page#c22. It will just jump to whereever c22 is. How do i refresh the page? It does not need to use go to #c22 once refreshed but i am sure there is a more dependable way then window.location = window.location
I can see how buffers, and strings can be sent as chunks, but I'm having a problem thinking about how streams can be dealt when working in object mode.
Say I have a byte stream from an http request message. I want to take that message, parse, and then transform it into one big object.
I already know how to parse the message. What I'm wondering is if the message is big so it has many chunks, but I want to make one object for the output how can I make sure the data event waits for the whole thing?
Is this just a matter of not using the push method until the chunked data has finished being sent?
That would then restrict the stream data output to a smaller object which I think I'm fine with for now.
As an added condition the larger data will be reduced in size after the the transform.
We have developed a page with a asp.net and debugging it accidentally we have discovered on our page button with the next code on onclik attribute
onclick="__doPostBack('ctl00$FormPlace$m_userTaskMarkAsUnreadButton',''); __doPostBack('ctl00$FormPlace$m_userTaskMarkAsUnreadButton','');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$FormPlace$m_userTaskMarkAsUnreadButton", "", true, "", "", false, false))"
It seems that the button do three postbacks but when we click it only cause on postback. With this code seems that de button will cause three postbacks!!
We have try it with Internet Explorer and Firefox and the button only cause on postback always. Are browsers who avoid that the button do three postback ? Or Is Asp.net server who avoid the three postback? We don't understand why the button behaves correctly if onclick attribute has three call to do Postbacks.
Thanks