One of the features of a site I’m working on is a button similar to the Facebook “LIKE” or Twitter “Tweet” [really exciting stuff to help with, right? ]
As such I need to be able to open an iframe as a layer on the page but can’t load up a framework given the weight and potential for conflicts.
The goal here is to be as light as possible while also avoiding conflicts. The page is multi-part so a simple layer won’t do, it has to be a full fledged iFrame with the ability to fade the underlying window and close it down while also floating over page elements, drop downs, even flash.
Colorbox-min would be an ideal solution but the dependancy kills it.
I do pretty well with frameworks but on my own am a JS novice. In a world full of ready made scripts, Google isn’t being much help… Any suggestions on where to start?
Follow up question… and before any response either!
The same issue is going to plague me on the main script. Any suggestions on a simple tutorial for AJAX calls that does not need a framework to load? Doing a pretty simple routine where we load up a GET request, take the response data and update a DIV. No updates beyond than initial load.
Again I realize this is all info out there but with the abundance of jquery / yui tutorials, it’s near impossible for me to even find a mention of a script that doesn’t load something up to run.
Hi man, I got find something you https://developer.mozilla.org/en/AJAX. Very comprehensive API about js ajax. There are examples along the docs, you can check it out to so you can understand the API clearer.
Looking through this but wondering if anyone has played with floating windows [or tried] without the use of a library that may have found the limitations / benefits of a particular approach.
Re: Post 2:
I’m not following you, but I suspect you want a simple AJAX function:
I sometimes this - similar to jQuery’s $.get() & $.post() functions
// Get the new Request object
function XHR() {
var xhr = false;
xhr = window.ActiveXObject
? new ActiveXObject("Microsoft.XMLHTTP")
: new XMLHttpRequest();
return xhr;
}
// Build the request and get the reply back
// snd is the parameters, with GET this is null, with POST, it is the sent parameters
// type is either GET or POST
function request( url, snd, callback, type ) {
var http = XHR();
if (http) {
http.onreadystatechange = callback;
};
http.open(type, url, true);
if (type == "POST") {
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", snd.length);
http.setRequestHeader("Connection", "close");
}
http.send(snd);
}
Then I use this way:
GET:
var blh = document.getElementById("something");
blh.onclick = function() {
request(
"test.php?res=something",
null,
function() {
var res = document.getElementById("result");
res.innerHTML = this.responseText;
},
'GET'
);
}
POST:
var frm = document.forms[0];
frm.onsubmit = function() {
request(
"test.php",
"name=" + encodeURIComponent(frm.userName.value),
function() {
var res = document.getElementById("formResult");
res.innerHTML = this.responseText;
},
'POST'
);
return false;
}
]