CSS not getting implemented on the jQuery dialog within IE8 - JavaScript Discussion Boards

Hi Gray,

We have 1000 pages and we are using .JS files and some include files as well, So I guess I do not need to slam my hand in door and do not need to write with broken finger... Laugh | :laugh:

SO do you have any soluation for this now? Smile | :)

var openWindows = new Array();
window.openCustom = function(){
openWindows.push(window.open(arguments[0],arguments[1],arguments[2]));
}

Global search and replace window.open with window.openCustom. Then in your unload handler loop through openWindows. If you leave windows open and refresh the main page then you need to use an XMLHTTPRequest or some other callback mechanism to store the open windows on the server so it can be reloaded on postback.

You asked this a few days ago.

http://www.codeproject.com/Messages/3556165/Re-How-to-close-all-pop-up-on-click-on-logout.aspx[^]

Please do not continue to repost the same question. Especially when you have received answers to the original question.

I know the language. I've read a book. - _Madmatt

Hi Mark,

I am not posting the same question. I know I asked this few days back but I have not find out the soluation. SO I am sharing what I am thinking off to find the solution. It might be possible that some one got some clue from the logic which is running in mind and can come up with some solution. I hope to get something from you guys.

Cheers,
RK..

From 14:01 4 Aug '10:

"I want to close all the pop-up windows if user click on log out link..."

From 50mins ago:

"My requirement is to close all the open pop-up windows when user click log-out..."

From 0:07 5 Aug '10

"I mean of not change existing modules means I can not change each and every program..."

From 50mins ago:

"The problem is that I can not change all the pages of application..."

Looks like a repost to me. Just because you changed the wording a little doesn't make it new or different.

I know the language. I've read a book. - _Madmatt

Hey experts
I am facing a problem from last couple of week,I am not finding any solution for that.
I need to check some file in local machine like- "c:\test.txt" through java script when page is getting load,so i can show/Hide a div accordingly.
although i tried

var fso = new ActiveXObject("Scripting.FileSystemObject");
// if condition to check whether the specified file exists or not.
if(fso.FileExists("C:\\test.txt"))
but its work in IE only after changing some setting in internet option, which is not secure.

Can anybody give right solution for all browser
It would be great
Thanks in Adv..
Shafiq

Yes, you did ask this a while ago. And you were given the answer then.

Hi,

I am new to jQuery. We are using jQuery ui.1.0 in our project. We are using jQuery to show the dialog box. It has CSS implmented for the dialog title and the content. The CSS works well within the dialog box when seen in IE6 but the CSS does not get implemented when the same dialog box is opened/diaplayed in IE8.

Within the IIS I have added below header for the page where the dialogbox is been implemented.

Header name => X-UA-Compatible
Header value => ID=6

What other changes do I need to make in order to make this work in IE8 as well?

Below is the .css code

/* This file skins dialog */

.flora .ui-dialog,
.flora.ui-dialog {
	background-color: #e6f7d4;
}

.flora .ui-dialog .ui-dialog-titlebar,
.flora.ui-dialog .ui-dialog-titlebar {
	border-bottom: 1px solid #d8d2aa;
	background: #ff9900 url(i/dialog-title.gif) repeat-x;
	padding: 0px;
	cursor: move;
	height: 28px;
	_height: 29px;
}

.flora .ui-dialog .ui-dialog-titlebar-close,
.flora.ui-dialog .ui-dialog-titlebar-close {
	width: 16px;
	height: 16px;
	background: url(i/dialog-titlebar-close.png) no-repeat;
	position:absolute;
	top: 6px;
	right: 7px;
	cursor: default;
}

.flora .ui-dialog .ui-dialog-titlebar-close-hover,
.flora.ui-dialog .ui-dialog-titlebar-close-hover {
	background: url(i/dialog-titlebar-close-hover.png) no-repeat;
}

.flora .ui-dialog .ui-dialog-title,
.flora.ui-dialog .ui-dialog-title {
	margin-left: 5px;
	color: white;
	font-weight: bold;
	position: relative;
	top: 7px;
	left: 4px;
}

.flora .ui-dialog .ui-dialog-content,
.flora.ui-dialog .ui-dialog-content {
	margin: 1.2em;
}

.flora .ui-dialog .ui-dialog-buttonpane,
.flora.ui-dialog .ui-dialog-buttonpane {
	position: absolute;
	bottom: 8px;
	right: 12px;
	width: 100%;
	text-align: right;
}

.flora .ui-dialog .ui-dialog-buttonpane button,
.flora.ui-dialog .ui-dialog-buttonpane button {
	margin: 6px;
}

/* Dialog handle styles */
.flora .ui-dialog .ui-resizable-n,
.flora.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: transparent url(i/dialog-n.gif) repeat scroll center top; }

.flora .ui-dialog .ui-resizable-s,
.flora.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: transparent url(i/dialog-s.gif) repeat scroll center top; }

.flora .ui-dialog .ui-resizable-e,
.flora.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; background: transparent url(i/dialog-e.gif) repeat scroll right center; }

.flora .ui-dialog .ui-resizable-w,
.flora.ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0px; height: 100%; background: transparent url(i/dialog-w.gif) repeat scroll right center; }

.flora .ui-dialog .ui-resizable-se,
.flora.ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: transparent url(i/dialog-se.gif); }

.flora .ui-dialog .ui-resizable-sw,
.flora.ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: transparent url(i/dialog-sw.gif); }

.flora .ui-dialog .ui-resizable-nw,
.flora.ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px; left: 0px; top: 0px; background: transparent url(i/dialog-nw.gif); }

.flora .ui-dialog .ui-resizable-ne,
.flora.ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px; right: 0px; top: 0px; background: transparent url(i/dialog-ne.gif); }

Below is the jQuery code

(function($)
{
	//If the UI scope is not availalable, add it
	$.ui = $.ui || {};

	$.fn.dialog = function(o) {
		return this.each(function() {
			if (!$(this).is(".ui-dialog")) new $.ui.dialog(this, o);
		});
	}
	$.fn.dialogOpen = function() {
		return this.each(function() {
			var contentEl;
			if ($(this).parents(".ui-dialog").length) contentEl = this;
			if (!contentEl && $(this).is(".ui-dialog")) contentEl = $('.ui-dialog-content', this)[0];
			$.ui.dialogOpen(contentEl)
		});
	}
	$.fn.dialogClose = function() {
		return this.each(function() {
			var contentEl;
			if ($(this).parents(".ui-dialog").length) contentEl = this;
			if (!contentEl && $(this).is(".ui-dialog")) contentEl = $('.ui-dialog-content', this)[0];
			$.ui.dialogClose(contentEl);
		});
	}

	$.ui.dialog = function(el, o) {
		
		var options = {
			width: 300,
			height: 200,
			position: 'center',
			buttons: [],
			modal: false,
			drag: true,
			resize: true,
			shadow: false // It's quite slow
		};
		var o = o || {}; $.extend(options, o); //Extend and copy options
		this.element = el; var self = this; //Do bindings
		$.data(this.element, "ui-dialog", this);

		var uiDialogContent = $(el).addClass('ui-dialog-content')
			.wrap(document.createElement('div'))
			.wrap(document.createElement('div'));
		var uiDialogContainer = uiDialogContent.parent().addClass('ui-dialog-container').css({position: 'relative'});
		var uiDialog = uiDialogContainer.parent()
			.addClass('ui-dialog').addClass(uiDialogContent.attr('className'))
			.css({position: 'absolute', width: options.width, height: options.height});
    
        if (options.modal == false && options.resize == true) {
		    uiDialog.append("<div class='ui-resizable-n ui-resizable-handle'></div>")
                .append("<div class='ui-resizable-s ui-resizable-handle'></div>")
                .append("<div class='ui-resizable-e ui-resizable-handle'></div>")
                .append("<div class='ui-resizable-w ui-resizable-handle'></div>")
                .append("<div class='ui-resizable-ne ui-resizable-handle'></div>")
                .append("<div class='ui-resizable-se ui-resizable-handle'></div>")
                .append("<div class='ui-resizable-sw ui-resizable-handle'></div>")
                .append("<div class='ui-resizable-nw ui-resizable-handle'></div>");
      
		    uiDialog.resizable();
		}

		uiDialogContainer.prepend('<div class="ui-dialog-titlebar"></div>');
		var uiDialogTitlebar = $('.ui-dialog-titlebar', uiDialogContainer);
		var title = (options.title) ? options.title : (uiDialogContent.attr('title')) ? uiDialogContent.attr('title') : '';
		uiDialogTitlebar.append('<span class="ui-dialog-title">' + title + '</span>');
		uiDialogTitlebar.append('<div class="ui-dialog-titlebar-close"></div>');
		$('.ui-dialog-titlebar-close', uiDialogTitlebar)
			.hover(function() { $(this).addClass('ui-dialog-titlebar-close-hover'); }, 
			       function() { $(this).removeClass('ui-dialog-titlebar-close-hover'); })
			.mousedown(function(ev) {
				ev.stopPropagation();
			})
			.click(function() {
				self.close();
			});
		var l = 0;
		$.each(options.buttons, function() { l = 1; return false; });
        if (l == 1) {
		    uiDialog.append('<div class="ui-dialog-buttonpane"></div>');
		    var uiDialogButtonPane = $('.ui-dialog-buttonpane', uiDialog);
		    $.each(options.buttons, function(name, value) {
		    	var btn = $(document.createElement('button')).text(name).click(value);
		    	uiDialogButtonPane.append(btn);
		    });
		}
        
        if (options.modal == false && options.drag == true) {
		    uiDialog.draggable({ handle: '.ui-dialog-titlebar' });
        }
        
		this.open = function() {
			var wnd = $(window), top = 0, left = 0;
			switch (options.position) {
				case 'center':
					top = (wnd.height() / 2) - (uiDialog.height() / 2);
					left = (wnd.width() / 2) - (uiDialog.width() / 2);
					break;
				case 'left':
				    top = (wnd.height() / 2) - (uiDialog.height() / 2);
				    left = 0;
				    break;
				case 'top':
    			    top = 0;
					left = (wnd.width() / 2) - (uiDialog.width() / 2);
					break;
			}
			uiDialog.css({top: top, left: left});
			uiDialog.appendTo('body').show();
		};

		this.close = function() {
			uiDialog.hide();
		};

		uiDialog.show();
		this.open();
        if (options.shadow && $.fn.shadow != undefined) {
            uiDialog.shadow();
        }
	}

	$.ui.dialogOpen = function(el) {
		$.data(el, "ui-dialog").open();
	}

	$.ui.dialogClose = function(el) {
		$.data(el, "ui-dialog").close();
	}

})(jQuery);

Regards,
Vipul Mehta

well, this seems to be a silly question but is getting on my nerves -.-

i am working with Javascript and Jquery,
i have a password <input> tag which is not nested in a form, i want to check wether the input matches a constant defined by me when typed by user and length = 4

here goes my current code :

<div id="pin">
PIN:<input id="pinin" type="password" value="" onchange="showValue(this);" size="5" name="password" maxlength="4"></input>
<button value="Validate" name="Validate" onclick="javascript:check()">Validate</button><br />
<a href="publ.html" title="Public Page">I dont know PIN, go to Public Page >></a><br />
</div>
i had to add " to div, else it would just show "pin"

Shantanu Gupta 1337 wrote:
but is getting on my nerves

Which part of it is gettng on your nerves?
You already have tied 'check()' javascript method on button click.

JavaScript

//define a JS 
function check()
{
  // verify if text entered in password field matches your pin. Done!  
}

BTW: Why have you defined 'onchange="showValue(this);' for password field? It doesn't make sense here based on other control validating it.

it is not for validating, it is for checking if the code entered is same as that defined by me on a file located in ../public_html/
so that it cannot be accessed and value is called when Jsp needs it using <?php echo fopen... ?>

the part getting on my nerve is, the event does not fire onchange (when i type) but when i close the tab with data in it, it suddenly pops up with the correct answer if it is alert($('#pinin').val()));

what i want is when the len of pinin reaches 4, it checks if its value is equal to my const. and if true display a alert or redirect.

Shantanu Gupta 1337 wrote:
the event does not fire onchange (when i type)

Dude, onchange will only fire once the focus goes away from the textbox! If you need to check at the time of entering data then use 'onKeyUp' instead of onchange.

thank you mate, that did just the trick i was looking for.

Gosh W3C didnt mention that event for textbox, will remember this. Thanks again..

function check(obj) {
	var pin1 = parseStr(obj.value);
	if (pin1.length == 4) {
		// Will obfuscate PIN using hashes in later builds...
		if (pin1 == "3924") {
			<?php setcookie... ?>
			window.alert('Welcome master, Redirecting you');
			setTimeout(function() {
				document.location ='main.php';
		      }, 2000);
		} else {
			<?php setcookie... ?>
			window.alert('Invalid Pin, Rerouting to Public Page.');
			setTimeout(function() {
				document.location ='publ.php';
			}, 2000);
	      }
	}
}

Just in case you were wondering why i used master, This is still in development and i like being treated like a Master... xP

modified on Sunday, August 8, 2010 1:09 PM

Shantanu Gupta 1337 wrote:
W3C didnt mention that event for textbox

It's covered in just about every JavaScript reference resource WTF | :WTF:

I know the language. I've read a book. - _Madmatt

Hello,

Is there any kind of event that I can hook into that will indicate whether or not the print-dialog window of adobe's browser plug-in has gone away. If they clicked print I want to close the window but can't find away to get an indicator that this action has been done.

Thank you.
Nathan

'Never argue with an idiot; they'll drag you down to their level and beat you with experience.' ~ anonymous

Hi,

I have a DIV tag that I want to hide the content when the webpage loads and you can click a link to show the content in the tag or hide it. What I am wanting to do is have one link that says "show" before you click it and when you click it, shows the content of the DIV and the text changes to "hide" and when you click "hide" the DIV content hides and the text reverts to saying "show" and when you click it, it shows the DIV content and so on.

Code in header:

<script language=javascript type='text/javascript'> 
function hideDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideshow').style.visibility = 'hidden'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.hideshow.visibility = 'hidden'; 
} 
else { // IE 4 
document.all.hideshow.style.visibility = 'hidden'; 
} 
} 
} 

function showDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideshow').style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.hideshow.visibility = 'visible'; 
} 
else { // IE 4 
document.all.hideshow.style.visibility = 'visible'; 
} 
} 
} 
</script>

the DIV tag where the content is placed in is this:

<div id="hideshow" class="style111">;

Content here

</div>

I have this code to show and hide the div tag:

<a onclick="javascript:showDiv()"</a class="style110"> show</a><a onclick="javascript:hideDiv()" class="style110">hide</a>

Is there a way of using one link to show and hide the div tag rather than two seperate links? And is there a way of automatically hide the content when the page loads so you have to click "show" to show the content?

Thanks in advance

In the end we're all just the same

Look at JQuery, particularly the toggle[^] method.

JQuery is also cross-browser compatible so you won't need the all of the tedious, error prone code above to support multiple browsers.

I know the language. I've read a book. - _Madmatt

Personally, I would forget about Netscape users. Anypme that still uses Netscape 4 gets what they deserve.... And while JQuery is good, it won't help you understand anything, and IMHO is a bit like using a sledgehammer to crack a nut, in this scenario anyway.

The following will work in most browsers - you won't get too many complaints. NB, you don't, of course, need to pass the element ID's as variables to the toggle function, but could hard-code them within - but doing so makes it more generic for use elsewhere, or with more than one such show/hide link on the same page.

<html>
<head>
    <title></title> 
<script language="javascript">
  function toggleDiv(d, h) {
     var div = document.getElementById(d);
     var lnk = document.getElementById(h);
	 if (div.style.display == 'none') {
	   div.style.display = 'inline';
	   lnk.innerHTML = 'Hide';
	 } else {
	   div.style.display = 'none';
	   lnk.innerHTML = 'Show';
	 }
  }
</script>
</head>
<body>
<form id="form1" >
    <div><p><a href="#" id="lnk" onclick="toggleDiv('fred','lnk')">Show</a></p></div>
    <div id="fred" style="display:none;">Now you see me</div>
</form>
</body>
</html>

Dot't use

style.visibility = 'visible'

use

style.display = 'none'

Rating always..... WELCOME

Be a good listener...Because Opprtunity Knock softly...

Hi..

can i send email via javascript.

how would i eliminate further input popup boxes which appear at submitting email.
(popups like smtp settings and email id etc)

thanks,
hemant

By:
Hemant Thaker

Using mailto, you can try. Have a look at this article: Can JavaScript email a form?[^]

Hi All,

I am facing a problem in my application and need you guys help. The problem is to I want to close all the pop-up windows if user click on log out link or id user directly close the browser. I need to perform all this with the help of JavaScript. Is any one can please help me to solve this? One constraint is that I can not change existing modules. Frown | :(

Thanks a lot in Advance.

Thanks,
RK...

RajinderKamboj wrote:
I can not change existing modules

If you can't make any changes then how are you going to do anything?

The first thing would be to redesign and not use popups. Otherwise you'll need to keep track of windows that are opened and close them during log out or on the close event of the main window

I know the language. I've read a book. - _Madmatt

Hi Mark,

Thanks for reply. I mean of not change existing modules means I can not change each and every program which is opening the pop-up. I can change some of main programs. Can you please give me soluation for this?

Thanks a lot once again.

Thanks,
RK..

InderK wrote:
Can you please give me soluation for this?

There is no solution if you don't have control over the apps that are opening the windows

I know the language. I've read a book. - _Madmatt