JavaScript - Chat Rooms Turn Into Browser Windows

Hey,

Is there any javascript that i can insert in my website pages, that will turn it upside down?

I have scripting that currently disables a C.O.D. option in a dropdown and disables a coupon code input box depending on login pulled from a cookie. I would like to use/modify this script to also disable a "free shipping" option depending on login with a condition of the cart subtotal (if ss_subtotal <= 199...) . I have all of the variables but cannot figure out the syntax to implement the modification. Here is the current script that disables the C.O.D. option and coupon box:

Code:

 <script type="text/javascript">

var LexiConn = {
    regCustomer: false,
    reg_cookie: /.*ss_reg_.*/,
    regGroup: null,
    restrictedCustomerGroups: /^wholesale$/,
    restrictedPaymentGroups: /^wholesale$/,
    restrictedPaymentOption: /^C\.O\.D\. $/,
    getCookie: function(){
        if (document.cookie.length>0){
            var ck = document.cookie.split(';');
            for(n=0; n<ck.length; n++){
                 var ck_name = ck[n].split(',');
                 if(LexiConn.reg_cookie.test(ck_name)){
                    reg_ck_s = ck_name[0].split('=');
                    reg_ck_value = reg_ck_s[1];
                    var reg_ck = reg_ck_value.split('|');
                    if(reg_ck[2]=='yes'){ 
                        LexiConn.regCustomer = true;
                    }
                    LexiConn.regGroup = reg_ck[1];
                 }
            }
        }
    },
    restrictCouponBox: function(){
        document.order.coupon_code.parentNode.style.display = 'none';
    },
    enableCouponBox: function(){
        document.order.coupon_code.parentNode.style.display = 'block';
    },
    disableCOD: function(){
        var paytype = document.getElementById('selPaytype');
        var payopt = paytype.options;
        var option_count = payopt.length - 1;
        for(n=option_count; n>0; n--){ 
            if(LexiConn.restrictedPaymentOption.test(paytype[n].innerHTML)){
                paytype.removeChild(payopt[n]);
            }
        }
    },
    restrictCouponReg: function(values){
        LexiConn.getCookie();
        if(LexiConn.regCustomer==true){
            if(LexiConn.restrictedCustomerGroups.test(LexiConn.regGroup)){
                LexiConn.restrictCouponBox();
            } else{
                LexiConn.enableCouponBox();
            }

            if(!LexiConn.restrictedPaymentGroups.test(LexiConn.regGroup)){
                    LexiConn.enableCOD();
            }

            
        } else{
                LexiConn.enableCouponBox();
                LexiConn.disableCOD();
        }
    }
}

 </script>

Here is the attempted modification:

Code:

		<script type="text/javascript">

var LexiConn = {
    regCustomer: false,
    reg_cookie: /.*ss_reg_.*/,
    regGroup: null,
    restrictedCustomerGroups: /^wholesale$/,
    restrictedPaymentGroups: /^wholesale$/,
    restrictedPaymentOption: /^C\.O\.D\. $/,
    restrictedShippingOption: /^ss_free$/,
    getCookie: function(){
        if (document.cookie.length>0){
            var ck = document.cookie.split(';');
            for(n=0; n<ck.length; n++){
                 var ck_name = ck[n].split(',');
                 if(LexiConn.reg_cookie.test(ck_name)){
                    reg_ck_s = ck_name[0].split('=');
                    reg_ck_value = reg_ck_s[1];
                    var reg_ck = reg_ck_value.split('|');
                    if(reg_ck[2]=='yes'){ 
                        LexiConn.regCustomer = true;
                    }
                    LexiConn.regGroup = reg_ck[1];
                 }
            }
        }
    },
    restrictCouponBox: function(){
        document.order.coupon_code.parentNode.style.display = 'none';
    },
    enableCouponBox: function(){
        document.order.coupon_code.parentNode.style.display = 'block';
    },
disableFreeShipping: function(){
	var ship = document.getElementByName("shipping");
    var shipopt = ship.options;
    var option_counter = shipopt.length - 1;
        for(n=option_counter; n>0; n--){ 
            if(LexiConn.restrictedShippingOption.test(ship[n].innerHTML)){
                shipping.removeChild(shipopt[n]);
				
			}
		}
	},
    disableCOD: function(){
        var paytype = document.getElementById('selPaytype');
        var payopt = paytype.options;
        var option_count = payopt.length - 1;
        for(n=option_count; n>0; n--){ 
            if(LexiConn.restrictedPaymentOption.test(paytype[n].innerHTML)){
                paytype.removeChild(payopt[n]);
            }
        }
    },
restrictCouponReg: function(values){
		int shippingtotal = 199;
		LexiConn.getCookie();
        if(LexiConn.regCustomer==true){
            if(LexiConn.restrictedCustomerGroups.test(LexiConn.regGroup)){
				if ('ss_subtotal' <= 'shippingtotal'){
					LexiConn.disableFreeShipping();
					LexiConn.restrictCouponBox();
				} 
				else{
					LexiConn.restrictCouponBox();
					}
				}
			else{
				LexiConn.enableCouponBox();
				}

			if(!LexiConn.restrictedPaymentGroups.test(LexiConn.regGroup)){
                    LexiConn.enableCOD();
					if ('ss_subtotal' <= 'shippingtotal'){
					LexiConn.disableFreeShipping();
				}
            }
			} 
		
		else{
					LexiConn.enableCouponBox();
					LexiConn.disableCOD();
			}
		}

 </script>

If the source code is needed i can post a shortened version of it.

Any help would be greatly appreciated.

if it fails (does not find the string)? I thought it gave out the value 'null' or some such, but apparently not.

Basically I want a function to execute, but only if replace will work. I need to do this as concisely as possible... Is there a simple way to do this?

Otherwise is there an 'include' function or something I could use to check for a string in a value and make it's existence the premise on which an if statement works?

Thanks in advance, sorry if this was incoherent... late nights and all.

I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar?

Also, how would I set the zindex so the bubbles are always in front of everything else.

Thank you in advance.

//Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com)
//Based on code by Altan d.o.o. (snow@altan.hr)
//For full source code and installation instructions to this script, visit http://www.dynamicdrive.com

var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "bubble.png"
snow[1] = "bubble2.png"
snow[2] = "bubble3.png"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 600, doc_height = 1024;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px';
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px';
}
}
setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>

Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.

My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off.

I have my checkbox created as well as all the effects working for it.

Here is a piece of the main code as well as a link to the ambilight.js file
Code:

            <label name="ambilightToggle">
			<input type="checkbox" name="toggle"/>
			<div class="toggle-switch">
				<div class="handle"></div>
				<div class="track">
					<span>OFF</span><span>ON</span>
				</div>
			</div>
			</label>
        
    	</div>
	</div>
    
    
	<div id="main" class="clearfix">
    
        <div id="video-edge">
                <img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
                <div id="video-wrap" class="video-js-box moo-css">
                    <video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
                      <source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                      <source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
                      <source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
                    </video>
                </div>
         </div>
         
         		<script type="text/javascript">
                    ambiLight.create(document.getElementById('example'))
                </script>

Portfolio Page

http://www.eschulist.com/test/js/ambilight.js



I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn.
Code:

<script type="text/javascript">
   $(document).ready(function(){
   $(this).click(function(){
       $('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
   });
   });
</script>

Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe?

Hey guys. Didnt know what forum to put this in, but i figured i would put it here.

Basically im making an ajax chat client.

I dont know if anyone here as ever looked at googles chat client code, but if anyone knows how to make one function the same way as it, I would love if you would help me figure it out.

I tried making a chat client, but it ended up being slow, buggy, and you couldnt select text because the innerhtml was refresshing so much.

So how can I make a good chat client like googles?

Thanks!

Hello.

I'm currently playing with some projects, and one of them is creating a simple 2D chat, where users have an avatar, that they can move around and chat with.

I want to do this with PHP and jQuery. Question here is, if I set it to auto-update the chat every 1 second, and get the new values in the database (if user has moved position), will it suck up too much bandwidth if there's 5 - 30 users online at the same time?

I know there's other better ways of creating a 2D chat, but I'm just doing this for practice of my programming skills.

Hello all,

Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it.

I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent.

The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html

and the script is:
Code:

var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();

with Code:

var menu=new menu.dd("menu");
menu.init("menu","menuhover");

used on my html page to call the script.


I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3).

I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible.

I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it.

I'd appreciate anyone's insight on this.

Thanks
Tom

Does anyone know of a good tutorial on how to make a good node.js chat?

I need a chat that a decent VPS server can handle ~100 simultaneous users with and apparently I should be using node.js but have no experience with it.

What should I look at?

Thanks!

Hello,

I am very new to javascript, and I'm having a hard time finding a way to easily add some chat code to our website without manually adding it to every page.

Here's the deal: I need to add this code to every page of our website:
Code:

<div id="cihfi9" style="z-index:100;position:absolute;"></div><div id="schfi9" style="display:inline;float:right;"></div><div id="sdhfi9" style="display:none"></div><script type="text/javascript">var sehfi9=document.createElement("script");sehfi9.type="text/javascript";var sehfi9s=(location.protocol.indexOf("https")==0?"https://secure.providesupport.com/image":"http://image.providesupport.com")+"/js/mrcuser/safe-standard.js?ps_h=hfi9\u0026ps_t="+new Date().getTime();setTimeout("sehfi9.src=sehfi9s;document.getElementById('sdhfi9').appendChild(sehfi9)",1)</script><noscript><div style="display:inline"><a href="http://www.providesupport.com?messenger=mrcuser">Live Support</a></div></noscript>

I would like the chat icon to appear at the top of each page next to our main menu links. Our main menu links are called from one javascript file. I would like to figure out a way to add this code to the javascript file, so I only have to add it once. The javascript file only has one line of code: document.write(all of our main menu links).

Is there a way to add the chat code to the main menu javascript file so that the chat icon will appear on every page, or is this impossible?

Thanks for your help!

What is the most efficient type of chat to make?

From what I see online most people use a database and limit the number of results they return, but I noticed that some chats, like google and facebook, for some reason are able to load the full chat and get results almost instantly.

How do they do it?

I would love to make a replica of a google chat and just redesign the way it looks. If anyone can help me with the javascript/php part of this, that would be great.

thanks!

So, I need help with a script that swaps out chatango chats and allows you to expand/shrink them. Here's the source:

Code:

<div id="chatWrap">
	<div id="cbox"></div>
	<div id="ccon">
		<button onclick="switchChat();">Switch to <strong id="cnext">Chat Title</strong></button>
		<button id="csize" onclick="resizeChat();">Expand</button>
	</div>
</div><br />
<div id="chatNotice" style="display:none;">Note: When you switch chats, the expand/shrink button stops working until you reload the page. Hopefully this will be fixed soon. <a href="javascript:void(0);" onclick="javascript:get('chatNotice').style.display='none';">[Hide this Notice]</a></div>
<script type="text/javascript"><!-- // --><![CDATA[
	var chats = [];
	chats[0] = ['Forums Chat','dh-forums-chat', 1249524788838];
	chats[1] = ['Main Chat', 'dh-chat', 1247103393344];
	var chat = {
		'opt': 'b=60&f=50&l=999999&q=999999&r=100&s=1',
		'ref': 'www.dubhappy.com',
		'cur': 0,
		'delay': 1.5,
		'params': [['wmode','transparent'] , ['allowscriptaccess','always'] , ['allownetworking','internal']]
	}

	var chatState = 0;
	var chatStates = [];
	chatStates[0] = ['Expand', '300px'];
	chatStates[1] = ['Shrink', '500px'];

	var eles=[''];
	function get(id){eles[id]=eles[id]||document.getElementById(id)||false;return eles[id];}
	function cE(e){return document.createElement(e);}
	function cT(s){return document.createTextNode(s);}

	var ie = false;

	function aO(d, t, src, p, id ){
		var o, e, i;
		if (!ie){ o = cE('object');o.data = src; } 		
		else { o = cE('embed'); o.src = src; }
		o.id = id;
		if (!ie){ p.push( ['movie', src] ); }
		if ( typeof(id) === 'String' ){o.id = id;}
		o.type = t;
		for(i = 0; i < p.length; i++){
			e = cE('param');
			e.name = p[i][0];
			e.value = p[i][1];
			o.appendChild(e);
		}
		d.appendChild(o);
	}

	function switchChat(){
		var x = chat.cur;
		chat.cur = (x + 1) % chats.length;
		var c = chats[x];
		var src = 'http://st.chatango.com/flash/group.swf?ref=' + chat.ref + '&gn=' + c[1] + '.chatango.com&cid=' + c[2] + '&' + chat.opt;
		get('cbox').innerHTML = '';
		aO( get('cbox'), 'application/x-shockwave-flash', src, chat.params, 'chat' );
		get('ccon').style.display = 'block'; // qfix
		get('cnext').innerHTML = chats[chat.cur][0];

		get('chat').style.height = chatStates[chatState][1];
		get('csize').innerHTML = chatStates[chatState][0];
	}
	
	function resizeChat(){
		if(chatState == 0)
			chatState = 1;
		else
			chatState = 0;
		get('chat').style.height = chatStates[chatState][1];
		get('csize').innerHTML = chatStates[chatState][0];
	}

	function chatInit(){
		if (navigator.userAgent.indexOf('MSIE') !== -1){ie = true;}
		if ( chat.delay <= 0 ){
			switchChat();
		} else {
			var i = cE('img');
			i.src = 'http://dubhappy.com/ajax-loader.gif';
			get('cbox').appendChild(i);
			get('cbox').appendChild( cT(' Loading Chat...') );
			window.clk = setTimeout( function(){switchChat(); get('chatNotice').style.display = '';}, chat.delay * 1000 );
		}
		delete chatInit;
	}
	chatInit();
//]]></script>

There's also some CSS:

Code:

/* Chat Styling */
#chatWrap{ 
   width: 235px; 
   margin: 0 auto;
}
   
#chat{
   height: 300px;
   width: 235px;
}
      
#ccon{display: none;}
      
#ccon a{
   text-decoration: none;
   display: block;
}

This is implemented at http://forums.dubhappy.com/
As you can see by the notice under the chatbox, after swapping out the chats, the expand/shrink button no longer works until you reload the page. Do you know how to fix this? I've spent way too much time trying to figure out why this was happening. Much thanks if you manage to figure out the problem.

I want to make a chat-box so people can log in under a nickname and talk to eachother, anyone have any idea how i can go about doing this?

Im not sure what type of script it is, but another site i saw had a webcam chat room that was a swf file. I know that flash, but where can i get a script for a Webcam chat room to set up on my site.

Thanks