SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard silver trophy
    Join Date
    Aug 2003
    Location
    Southern California
    Posts
    4,686
    Mentioned
    19 Post(s)
    Tagged
    0 Thread(s)

    Launching a floating iframe without jquery / yui / plugins?

    Hello javascript gurus!

    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?
    - Ted S

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    Aug 2003
    Location
    Southern California
    Posts
    4,686
    Mentioned
    19 Post(s)
    Tagged
    0 Thread(s)
    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.
    - Ted S

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    Aug 2003
    Location
    Southern California
    Posts
    4,686
    Mentioned
    19 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by runrunforest View Post
    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.
    Thanks!

    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.
    - Ted S

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Re: Post 1:

    Some *boxes without dependencies:

    Tinybox: JavaScript Modal Windows – TinyBox2 - Web Development Blog
    Greybox: Orangoo Labs - GreyBox
    Lightbox Plus: Lightbox Plus
    Modal Popups: Javascript Modal Popups : Javascript Modal Popups
    Clearbox: clearbox 3.6 - created by kreatura

    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
    Code JavaScript:
    // 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:
    Code JavaScript:
    	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:
    Code JavaScript:
    	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;
    	}

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    Aug 2003
    Location
    Southern California
    Posts
    4,686
    Mentioned
    19 Post(s)
    Tagged
    0 Thread(s)
    That's awesome! Thanks so much
    - Ted S


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •