|
JavaScript - Unable To See To The Ssl Padlock On A Modal Window Status Bar
Hi,
I am writing an application which needs to open a modal dialog window in a secure connection. I am able to open the dialog using HTTPS, but on the status bar I cannot see the SSL Padlock. The application is being written in .NET and the browser I use is IE 6.0. Any suggestions and feedback are welcome. Regards Totre Similar TutorialsHi all! I am struggling with getting a modal window to launch. The two problems I experience are as follows: 1) Images do not display in IE within the hidden <div> tags. (This I tested on another page less complicated. Click the "donate" button on this page using IE and firefox to see what I mean... http://www.clanreportdb.co.uk/report...ls.php?id=1473) 2) When integrating the <a> tag link to launch within PHP code, it fails to work. Here is my code, and hopefully someone will know what I am doing wrong: Code: <html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/report/images/close.gif" border="0" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<style type="text/css">
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: <? echo $highlightbg; ?>;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
</head>
</html>
<?php
foreach ($d as $f)
{
echo "{$f[1]}<a href=\"#?w=500\" rel=\"popup_name\" class=\"poplight\"><img src=\"/report/images/tick.gif\" border=\"0\"></a>";
?>
<html>
<div id="popup_name" class="popup_block">
//CONTENT HERE eg. <? echo $f[2]; ?>
//Image does not display in IE but does in firefox
<img src="/report/yes.gif">
</div>
</html>
<?
}
?>
I am working on my homework. On my page, I need to make a modal window, which is just a picture has x or close letter, shows up whenever people open the page. So far, I called a picture with onload in a body and centered the picture. I don't know if there is anyway that I can just put x or close somewhere so that whenever people click x or close, the picture is not going to be visible ( promoPic.style.visibility = "hidden" this is my code for the picture. And I though I can just put input button or any letters inside of picture because its wrapped by paragraph, but, I can't. I guess I am miss understanding some concept? Code: <body onload="promoCenter()"><p><img src="http://codingforums.com/images/hauntedHouse.jpg" id="promoPic" alt="Haunted House" height="400" width="400" /></p> Hi. I have a page in a modal window that fades in over the top of my site when clicked. When this page comes up in Google and is clicked it does not load up the site with the modal window over top, it just loads the content of the modal window on a full page. Is there a way to have the link on Google go to the page with the modal window over top? The modal window is "PrettyPhoto" using JQuery. Thanks in advance. Hi, I am working on a project in which I have to open my flash demo in a modal window. I got all the code for modal window and it is working great. The only problem is I am not able to open a flash file in modal window. Can any one guide me or suggest me how should I fix this. Thanks in advance. Vikrant Hi, I have a JQuery modal window and I am trying to pass the value of its input field to a hidden input field within a form but I can not seem to get the value when it is in the modal window. Modal Window Code: Code: <div id="modal-content" class="clearfix"> <h2> enter a name</h2> <div> <input id="enteredName" name="enteredName" type="text" value="" /> <a href="javascript:submitform(true)" name="save" id="save" class="btn"><span>Save</span></a> </div> <a href="javascript:submitform(false)" id="close" class="close-link">No thanks just carry on</a> </div> Javascript to set the value of the hidden field to equal the value of the modal input field Code: <script type="text/javascript">
function submitform(assignName) {
if (assignName) {
var hiddenfield = document.getElementById("hiddenfieldid");
hiddenfield.value = document.getElementById("enteredName").value;
}
var form = document.getElementById("formTest");
form.submit();
}
</script>
Any help would be much appreciated. Hi, well i used soh tanaka inline modal window which is a popup window like lightbox. But it failed to work with IE9 RELEASED CANDIDATE VERSION. Can anyone tell me that why is it having issue with a better version of explorer. I have made a video to show the error, as to make it more easy to explain what i am saying. here is the link to it http://www.youtube.com/watch?v=pHi9ZlGyWc0 i would look forward to the replies. thank you. On my main page, I have a list of item ID's which are assigned variables, the list is concatenated and so the variables are always different. So another thing that gets concatenated is a link, which uses javascript/jquery to open a popout modal window which is another php file called sharepost.php. I want to be able to transfer the php variables from the main page to append them on the end of the sharepost.php URL so I can use $_GET to grab them for use. Here's what I have... not working, but I figured I'd give it a try. Code: <?php
//use mysql to loop through some variables
$post_id = $setvalue;
$member_id = $anothersetvalue;
$list .= '
<div>
' . $post_id . '
</div>
<div>
' . $member_id . '
</div>
<div>
<a href="#" class="button" onClick="openup(); return false">Share This Post</a>
</div>
$the_link = " http://sharepost.php?post_id=' . $post_id . '&member_id=' . $member_id . ' ";
';
?>
<HTML>
<head>
<script>
// Displays an external page using an iframe
function openup(){
var src = "<?php echo $the_link;?>";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
height:150,
padding:0,
width:350
},
overlayClose:true,
});
}
</script>
</head>
<body>
<?php echo $list;?>
</body>
</HTML>
Hey there everyone I'm a bit new to javascript and having a bit of a problem. I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is: Code: <a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a> <div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST" /> </div> <div class="input file"> <label for="ImageFileName">File Name</label> <input type="file" name="data[Image][fileName]" id="ImageFileName" /> </div> <div class="submit"><input type="submit" value="Upload" /> </div> </form> </div> If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing. Can anyone enlighten me what I'm doing wrong? Hi All I have a list of links on my website with anchors coded the following way: <ul class="fav"><a href="/cgi-bin/send.pl?ID=XX" onMouseOver="window.status='http://www.domain.com'; return true;" onMouseOut="func_clear(); return true;" onClick="stat(294);" target="_blank">Linked domain name</a></ul> Then I have found on http://www.askthecssguy.com/2006/12/..._favicons.html a javascript to display a favicon image before each one of my links in the list; this script is working fine when getting the domain name from href value. But in my case the suitable domain name to load each favicon is present in window.status value. I have played a bit with the above scripts and finally I'm trying to use the following function: Code: function faviconizeFavicon() {
if (!document.getElementsByTagName) return false;
if (!document.createElement) return false;
var ul = document.getElementsByTagName("ul");
for (var i=0; i<ul.length; i++) {
if (ul[i].className == "fav") {
var links = ul[i].getElementsByTagName("a");
for (var j=0; j<links.length; j++) {
var hrefvalue = links[j].parentNode.innerHTML;
var domain = 'default_favicon.gif';
domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)\'/g);
try{
var cue1 = document.createElement("img");
cue1.className = "favicon";
cue1.src = 'default_favicon.gif';
cue1.id = 'img' +i+ j;
links[j].parentNode.insertBefore(cue1,links[j]);
var cue = document.createElement("img");
cue.className = "favicon";
var cuesrc = "http://"+ domain + "/favicon.ico";
cuesrc = cuesrc.replace("http://http://","http://");
cuesrc = cuesrc.replace("'/favicon.ico","/favicon.ico");
cue.setAttribute("imgid",'img' +i+ j);
cue.setAttribute("src",cuesrc);
cue.onload = function () {
document.getElementById(this.getAttribute("imgid")).src = this.src;
}
cue.setAttribute("src",cuesrc);
}
catch ( ex )
{
}
}
}
}
}
This javascript should display first the default locally available favicon gif before each link and then try to load original favicons from each domain and display them at the place of default favicon gif only if available. The above code works with any console errors but very randomly and not with all websites ?? Some favicons are loaded from distant websites and some of them never, independing of network quality or other factors! So I'm wondering why this code is not working for each link ? My question is: could you please have a look on my following Regex if this should work in every case with each domain name ? domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)\'/g); I put the apostrophe at the end because my url in window.status is always ended by a single closing. Also I'm asking if taking into account that ONLY my window.status value is placed between single apostrophes and ALL other values of my anchors are opened and closed with double apostrophes, maybe it would be easier to get my domain value searching for any value between two single apostrophes ?? My another question is: Is it possible that other javascripts present in my html code could interfere with this script and make it working randomly ? Thanks in advance for any clues I have a simple problem, I can't get the status bar to change. I am very new to javascript, and I am trying to practice some simple commands, and the onMouseOver event is suppose to change the status bar in my window. I can get it to change for onMouseOut but not onMouseOver. Here is what I have so far <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Exam</TITLE> </HEAD> <BODY> <H3>My Page</H3> <a href="http://www.google.com" onMouseOver="window.status='Visit google.';return true;" onMouseOut="window.status='Come back soon ';return true;">Visit Google</a> </BODY> </HTML> Hi there, I hope I post this in the right section. I'm trying to do a redirect using the below code: <script type="text/javascript"> window.location.href = "http://google.com" </script> FF and IE work as they should. Chrome doesn't. The request above to http://google.com, gets a 'canceled' status in Chrome browser > Development tools > "Network". I've tried several other functions: location.href = url location.replace(url) document.location = url location.assign(url) window.open(url, '_self') Same code pasted within a local html file works fine. Below is the redirect request that it's canceled by chrome: http://pastebin.com/hD36M1RG Any clues? Thanks Hi, I've been searching for a good tut on modal boxs for a while where they open in middle of screen like facebook boxs & i want to have one where you use onClick function from href link. example: <a href="#" onclick="'files/delete.php?postId=$post['id']','modal_box'">Delete</a> and so on with other things. Can anyone help. Thanks. i have some really annoying issues with a widget which is known inline modal you can see that widget after you click the play button in the given link below, please help me out, the issue is that use google chrome and then go to this place, the link is: http://www.bloghuts.com/2010/09/star-island.html and in this page click on play, then you yourself will see the error, please tell me what to do with this error. And another problem is that again open the above link in internet explorer and click the play button you will see a different kind of annoying problem, except these two explorers it works fine, PLEASE HELP ME I WOULD REALLY BE THANKFUL TO YOU. Hi there. I just started out learning javascript and jQuery.. and here's one of those bump that Im unable to pass through.. So here's the problem.. I tried writing a simple modal effect on the site I was working on.. since I'm fairly new to javascript and jQuery so please bear with me The problem that I am having is that the opacity of the #dialog (the white part in the middle ) is being inherited from the #mask.. the black part that covers the page.. I tried setting the opacity to #dialog{opacity:1;} but to no avail it's not working.. I'm trying to change the opacity cause the opacity is affecting the readability of the content.. Here's the simple code that I wrote.. can you please check them up? Its been only two days since I started reading about Javascript and jQuery so please have some mercy you can check up the page here.. http://dev.crownshipping.com.ph/single_update.html just click on the boats.. and the modal thingy will pop up.. hope someone can help and enlighten me.. I'mma fast learner.. if you can give resource links.. except w3schools.. I already read the whole thing Thanks Andrew here's the html code.. Code: <div id="mask">
<div id="dialog" class="window">
<!-- close button is defined as close class -->
<a href="#" class="close">Close X</a>
<h1>Vessel Name - KiKi C</h1>
<img src="images/single_update.jpg" alt="xxx"/>
</div><!--dialog-->
</div><!--mask-->
here's the javascript code.. Code: <script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
//select all the a tag with name equal to modal
$("a.modal").click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(document).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$('#dialog').css('top', winH/2-$(id).height()/2);
$('#dialog').css('left', winW/2-$(id).width()/2);
//transition effect
$('#dialog').fadeIn(2000);
$('#dialog').fadeTo("slow",1);
});
//if close button is clicked
$('.close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').fadeOut(1000);
});
});
</script>
Hey, ive been strugglng all day to centre a DIV with javascript in the centre of my page. Ive created a modal popup and id like it to stay in the screen even if the page has been scrolled down. And no matter what i try i cant get it to actually hit the centre of the screen. I should add that im totally new to javascript but decided i cant avoid learning javascript forever so here are my pathetic efforts.. Code: function ShowPopup(hoveritem, thepopup, theimage)
{
popVar = document.getElementById(thepopup);
//document.getElementById('hoverpopup').style.paddingLeft = screen.width/2-250;
//document.getElementById("hoverpopup").style.paddingTop = screen.height/2;
// Set position of hover-over popup
//popVar.style.top = hoveritem.offsetTop + 50;
//popVar.style.left = hoveritem.offsetLeft + 100;
// Set popup to visible
popVar.style.visibility = "Visible";
}
Ive tried loads of other things too, whats commented out has been my last effort. Im doing other things too in the function in case you wondered. But any ideas how i can do this, sorry if ive not been too clear! I want to disable modal box when the page it is attached to is being viewed on a mobile device. I have tried what I know and have crashed and burned. Help will be greatly appreciated. This is the code that I have use... Code: <script src="/o/4055/images/jquery.avgrund.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function() {
$(".hidden").avgrund({
width: 500, // max is 640px
height: 340, // max is 350px
showClose: true, // switch to 'true' for enabling close button
showCloseText: 'close', // type your text for close button
closeByEscape: false, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
enableStackAnimation: false, // another animation type
onBlurContainer: 'div#container', // enables blur filter for specified block
template: '<div style="margin: 0 auto; padding:0; width:500px; height:350px;">' +
'<a href="https://afl.salsalabs.com/o/4055/p/salsa/donation/common/public/?donate_page_KEY=7606" style="border:none;" target="_blank"><img src="http://i1298.photobucket.com/albums/ag60/ProdSolutions/Lightbox_1_zpscead0a26.jpg" width="500px" height="350px" /></a>' +
'</div>',
onUnload: function() {
var date = new Date();
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
$.cookie("ARA_October_2014","true",{path:"/",expires:date});
}
});
$(".hidden").trigger('click');
});
$("#submitContribution").attr('value', 'Donate Now');
$("label[for=cc_number]").after($('div#useCC fieldset#credit_card_information div.formRow div.helpText'));
$("#credit_card_information > div:nth-child(6) > label:nth-child(1) > a:nth-child(1)").before($('#CVV2'));
$('#personal_information > legend:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Your Information', 'Your Billing Information'));
});
$('div.formRow:nth-child(19) > label:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Phone', 'Your Phone'));
});
$('#credit_card_information legend').each(function() {
var text = $(this).text();
$(this).text(text.replace('Credit Card Information', 'Payment Information'));
});
$('#credit_card_information > div:nth-child(3) > label:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Card Number', 'Credit Card Number'));
});
$('#submit > p:nth-child(2)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Please click the submit button only once.', 'Please click this button only once.'));
});
$('.readMore').click(function(){
$('.readMore').hide('slow');
$('.text2').show('slow');
});
</script>
I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax. I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope. I also tried writing separate plugin for my need but i don't have clear idea how does it work. So please either suggest a way or give me link to article which is simple to understand and can clear how it work. Hi i'm in need of some help with a javascript function I have been working day and night trying to get this to work and its almost there, basicly what I am trying to do is create a facebook like status update box with user tagging and member search drop down. Currently I have the status update input where users can enter in their status update, this also has a user tagging system with it which when you type the '@' symbol the friend search displays and once a name is clicked the @ sign plus what you was writing gets replaced with that name but what I am in need of is someone who can sort this problem out, this problem is I want the user to click on the name but once clicked i need the name to show up as a blue link just like facebook do and also i need the backend of the system to check when a name is click to get the id number of that user and set the bbcode in the status area as my bbcode system uses [quote=123432]username[/quote] which is how what quotes the user now I also need to have a rich text area instead of the standard html one as I need the area to display the link and not the bbcode. If any one can help please reply, Thank you, DJCMBear. P.S. Here are the codes I have so far just for someone to over look to see if they can sort it out. The Javascript Class: Code: <script type="text/javascript">
var SDK = {
setCursor: function(el)
{
if(el.selectionStart)
{
return el.selectionStart;
}
else if (document.selection)
{
el.focus();
var r = document.selection.createRange();
if (r == null)
{
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
},
displayFriends: function(cp)
{
var friendSession = document.getElementById('fsi');
var friendSelect = document.getElementById('fs');
var selectText = document.getElementById('fst');
var info = friendSession.value.split(':');
var checker = info[0];
var position = parseInt(info[1]);
if(window.event.keyCode == 192 && friendSession.value == 0)
{
friendSelect.style.display = 'block';
friendSession.value = 1+':'+this.setCursor(cp);
}
else if(friendSession.value == 0)
{
friendSelect.style.display = 'none';
}
else if(friendSession.value == 1 && window.event.keyCode == 8 && selectText.value.substr(position,1) != "@")
{
friendSession.value = 0;
friendSelect.style.display = 'none';
}
},
selectFriend: function(selection)
{
var input = document.getElementById('fst');
var info = document.getElementById('fsi').value.split(':');
var checker = info[0];
var position = parseInt(info[1]);
if(checker == 1)
{
input.focus();
input.value = input.value.substring(0,position)+selection.innerHTML+' ';
document.getElementById('fsi').value = 0;
document.getElementById('fs').style.display = 'none';
input.focus();
}
},
shrink: function(current,newid)
{
var friendSession = document.getElementById('fsi');
var old = document.getElementById(newid);
if(current.value == '' && friendSession.value.substring(0,1) != 1)
{
current.style.display = 'none';
current.value = '';
old.style.display = 'block';
}
},
grow: function(current,newid)
{
var input = document.getElementById(newid);
current.style.display = 'none';
input.style.display = 'block';
input.style.height = '70px';
input.focus();
},
StatusForm: function(info)
{
var form = "<div id=\"statusUpdater\"><div onclick=\"SDK.grow(this,\'fst\');\" id=\"dfst\">"+info.defaultTxt+"</div>";
form += "<textarea style=\"display:none;\" id=\"fst\" onclick=\"SDK.grow(this,'fst');\" onblur=\"SDK.shrink(this,'dfst');\" onkeydown=\"SDK.displayFriends(this);\" onkeyup=\"SDK.displayFriends(this);\"></textarea>";
form += "<input type=\"hidden\" id=\"fsi\" value=\"0\" /><div id=\"fs\" style=\"display:none;\">";
form += "<ul><li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">Bobby Frank</li>";
form += "<li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">Dan Dave</li>";
form += "<li onclick=\"SDK.selectFriend(this);\" style=\"cursor:pointer;\">John Doe</li></ul></div></div>";
document.write(form);
}
}
</script>
The CSS Styles: Code: <style type="text/css">
* {
margin: 0;
padding: 0;
}
#statusUpdater {
width: 500px;
margin: 30px auto;
}
#fst {
width: 100%;
}
#dfst {
width: 98.5%;
}
#fst, #dfst {
font-family: arial;
padding: 3px;
font-size: 14px;
resize: none;
border: 1px solid #666;
color: #666;
cursor: text;
background: #fff;
overflow-y: auto;
height: 16px;
}
#fs {
margin: 0;
width: 99.8%;
border: 1px solid #000;
border-top: 0px;
}
#fs ul {
list-style: none;
}
#fs li {
padding: 3px;
}
</style>
The Javascript Form Call: Code: <script type="text/javascript">SDK.StatusForm({'defaultTxt':'What\'s on your mind?','action':'http:\/\/www.example.com\/ajax\/statusPost.ax'});</script>
I've started studying JavaScript recently. The following simple scenario from the Russian textbook is not implemented properly on my PC. Code: <HTML>
<HEAD>
<TITLE>Link Description</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function describe(text) {
window.status = text;
return true;
}
function clearstatus() {
window.status="";
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Link Description</h1>
<P><i>Put mouse pointer over links to display their description</i></P>
<ul>
<li><A HREF="order.html"
onMouseOver="describe('Закажите товар'); return true;"
onMouseOut="clearstatus()";>
Заказ товаров</A>
<li><A HREF="email.html"
onMouseOver="describe('Направьте письмо'); return true;"
onMouseOut="clearstatus()";>
Email</A>
<li><A HREF="complain.html"
onMouseOver="describe('Раскритикуйте все'); return true;"
onMouseOut="clearstatus()";>
Отдел защиты прав потребителей</A>
</ul>
</BODY>
</HTML>
I just typed the script from the book char by char. I use Firefox browser, v.3.5.7. The error console does not display any mistakes. Please, explain me why on placing mouse over a link the status bar displays A HREF text instead of the link description. Hi. I'm currently putting together a website. On one of my pages, I get "Error on page" in the status bar when viewing it in Internet Explorer. I don't get this message in Firefox. I have an external javascript (code below) for tooltips on the webpage. I did not write the script, I merely changed one or two things. When I double click the status bar to see what the message is, it says: 'tt.timer' is null or not an object. Line: 70 Char: 3 I'm new to javascript, and so I'm not sure of what I need to alter. Can anyone see what i'm missing/doing wrong? Any help would be really appreciated! Code: var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 60;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.getElementById('faqid').scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
|
|||||||