|
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
.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;
}
.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($)
{
$.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
};
var o = o || {}; $.extend(options, o);
this.element = el; var self = this;
$.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.
function check()
{
}
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) {
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
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) {
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) {
document.hideshow.visibility = 'hidden';
}
else {
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) {
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) {
document.hideshow.visibility = 'visible';
}
else {
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
|
|
|
|
|
|
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. 
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
|
|
|
|
|
IS there any way to find out the URL of all opened browsers? Please reply.
Thanks a lot.
RK..
|
|
|
|
|
If you are opening the popup using a common function, then only you can track the windows and close all the popup windows if user clicks on logout.
|
|
|
|
|
Hi,
Greetings everyone!
In my web application in a certain form, I want to show help text for some of the labels. The codes are as following:
<dt style="position:relative;">Pathway<a href="#"><img src="Images/1280835207_information-balloon.png" alt="" border="=0" id="show" onmouseover="showDiv('show');" onmouseout="hideDiv('show','wrapper');" /></a>
<div id="wrapper" style="width:275px; position:absolute; left:180px; " >
<div style="background:url(Images/div_head.png) no-repeat ; width:275px; height:60px;"></div>
<div style="background:#d8d7d3; width:263px; padding:4px; border-left:2px solid #f39716;border-right:2px solid #f39716">hjgfdhfhhh hhhhhhh hhhhhhhh ghhghgj jhjuvhfgf hjfkdg hkijdkf hgtjnglk.</div>
<div style="background:url(Images/div_bot.png) no-repeat; width:275px; height:19px;">
</div>
</div>
</dt>
And the javascript is as follows :
<script type="text/javascript">
function hideDiv(sh,wr)
{
document.getElementById(sh).style.display = '';
document.getElementById(wr).style.display = 'none';
}
function showDiv(wr)
{
document.getElementById(wr).style.display = '';
}
</script>
The problem is that this help text will be shown for some more labels in the same page. You can see that I'm maintaining the position of the help-text div by maintaining it's left position :
position:absolute; left:50px;
So when the label-text is larger then this position will not be applied. Is there a way to dynamically maintain the left position? I mean to say for larger or smaller label-text the position of the help-div will be adjusted automatically. I'm not sure whether I'm successful in making my need clear. Can anyone please help me?
Thanks in advance.
|
|
|
|
|
Pass image object refrence in showdiv fn
onmouseover="showDiv(this,'wrapper');"
And set the left position dynamically
function showDiv(obj,wr) {
document.getElementById(wr).style.left = obj.offsetLeft + 'px';
document.getElementById(wr).style.display = '';
}
|
|
|
|
|
Hi guys.
How can i check Wheather file exist in paricular location or not
i saw some example but its not working.
Your answer would be helpful for me... Thanks
Shafiq
|
|
|
|
|
TRY it out
function CheckFile()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
FileExist = fso.FileExists("TEST.txt");
if (FileExist == true){
alert("True")
}
else
{
alert("FAIL");
}
}
Rating always..... WELCOME
Be a good listener...Because Opprtunity knoughts softly...N-Joy
|
|
|
|
|
Hey koolprasad
Thanks for reply. I already tried this it works only in case of IE (after change security setting in internet option Activexcontrol safe enable=enable which is not safe) and in another browser its not working...
what i am missing or what i need to do to work in all browser, without change in setting becouse client is not going to change in setting.
please share ur Idea
Thanks...
Shafiq
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
