|
JavaScript - Onfocus Not Working...
Hi all,
I have a REALLY strange problem - maybe a new set of eyes can help me. Look at these pieces of code: This generates the code Code: <!-- BEGIN code_open -->
<dl class="codebox">
<dt>{L_CODE}:
<a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">{L_SELECT_ALL_CODE}</a>
</dt>
<dd>
<pre onfocus="doTest(this)">
<!-- END code_open -->
<!-- BEGIN code_close -->
</pre>
</dd>
</dl>
<!-- END code_close -->
Test JS just for now Code: var doTest = function(a) {
alert(a);
}
The HTML as seen by Firebug Code: <dt>Code: <a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">Select all</a></dt><dd> <pre onfocus="doTest(this)"> Test Test Test </code></pre></dd> One little problem... it doesn't work!!! And yes the function being called is accessible. For that matter, simply putting "alert('hello')" into the "onfocus" also fails. I even checked at W3CSchools to verify that: (1) The <pre> element supports "onfocus" (it does). (2) I ran their "Try it" and "onfocus" is working in my browser (Firefox 3.6.17, WinXP 32). What the heck??????????? Any ideas? Thanks! -- Roger Similar TutorialsHi, I'm working on a website and am having difficulty figuring out how to have a function triggered when the window becomes active. I am having limited success with: <body onFocus=myFunction();> This works fine with Firefox and Safari, but not Internet Explorer. Is there a way to achieve this in all 3 browsers? Thanks. Hello The onFocus events I have come across seem to deal with changing the background colour of the field on a Web form, so that the active field is a different colour to the background field of the other form elements. But how would I use onFocus simply to have the cursor moving in the active field (on a Web form it might be the 'name' field for example)? The code I have at the moment looks like this: Code: <!DOCTYPE etc
<head>
<title>Janko</title>
<style type="text/css">
body
{
font-family: Arial, Sans-Serif;
font-size: 13px;
}
#inputArea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
background-color: #d6e5f4;
padding: 10px;
width:310px;
}
#inputArea input, #inputArea textarea
{
font-family: Arial, Sans-Serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
width: 300px;
}
.activeField
{
background-image: none;
background-color: #ffffff;
border: solid 1px #33677F;
}
.idle
{
border: solid 1px #85b1de;
background-image: url( 'blue_bg.png' );
background-repeat: repeat-x;
background-position: top;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input, textarea").addClass("idle");
$("input, textarea").focus(function(){
$(this).addClass("activeField").removeClass("idle");
}).blur(function(){
$(this).removeClass("activeField").addClass("idle");
});
});
</script>
</head>
<body>
<h2><a href="www.jankoatwarpspeed.com">Janko At Warp Speed</a></h2>
<p>This example is from the article <a href="http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx">Enhance your input fields with simple CSS tricks</a></p>
<div id="inputArea">
<label for="txtName">
Name</label>
<input id="Text16" type="text" />
<label for="txtEmail">
Email</label>
<input id="Text17" type="text" />
<label for="txtWebsite">
Subject</label>
<input id="Text18" type="text" />
<label for="txtComment">
Message</label>
<textarea id="Textarea6" rows="4" cols="30"></textarea></div>
</body>
</html>
Many thanks Steve greetings, i have a function that sets the onfocus and onblur event for every item in a table which then tells it to the change the class name. for some reason this doesn't seem to be working with the <select> inputs. i have heard it has something to do with how the option list re-loads itself??? Code: function setTableActivation(){
tableDiv = document.getElementById("tables");
tables = tableDiv.getElementsByTagName("table");
count = tables.length;
for(var h=0;h<count;h++){
var table = tables[h];
table.accessKey = h;
table.onfocus = function(){tables[this.accessKey].className = "activeTable";};
table.onblur = function(){tables[this.accessKey].className = "searchreal";};
for(var i=0;i<table.rows.length;i++){
row = table.rows[i];
row.accessKey = h;
row.onfocus = function(){tables[this.accessKey].className = "activeTable";};
row.onblur = function(){tables[this.accessKey].className = "searchreal";};
for(var j=0;j<table.rows[i].cells.length;j++){
cell = table.rows[i].cells[j];
cell.accessKey = h;
cell.onfocus = function(){tables[this.accessKey].className = "activeTable";};
cell.onblur = function(){tables[this.accessKey].className = "searchreal";};
for (var k = 0; k < cell.childNodes.length; k++) {
if (cell.childNodes[k].nodeType == document.ELEMENT_NODE) {
cell.childNodes[k].accessKey = h;
cell.childNodes[k].onfocus = function(){tables[this.accessKey].className = "activeTable";};
cell.childNodes[k].onblur = function(){tables[this.accessKey].className = "searchreal";};
if(cell.childNodes[k].tagName == "SELECT"){
}
}
}
}
}
}
}
Hi, can someone show me why I cant get the onfocus and onblur to loop thru the function showTextContent() when entering the words one, two, three or four. I have tried for days, googled and lost a lot of hair trying to figure it out. http://www.data-affiliates.com/DL234...5/attempt.html Code: <html>
<!-- Created on: 08.08.2009 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="sdfgdfg">
<meta name="generator" content="AceHTML 6 Pro">
<link rel="stylesheet" href="vid61.css" type="text/css" media="screen" />
<script type="text/javascript">
function toggle(id, status){
document.getElementById(id).style.visibility = status;
}
function myFocus(element)
{
if (element.value == element.defaultValue) {
element.value = '';
}
}
function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
function populateSearchField(){
var specialChars = "\\.+*?[^]$(){}=!<>|:,-=/";
var ignoreList = ["a", "the"];
var i, j, searchFld, keywords;
if (!(searchFld = document.getElementsByName('formcontent')[0])) return;
if (!(keywords = document.referrer.match(/[pq]=(.*?)&/))) return;
var preg_quote = function(str){return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!<>\|\:])/g, "\\$1");}
keywords = decodeURIComponent(keywords[1]).replace(new RegExp('[' + preg_quote(specialChars) + ']', 'g'), ' ').split(/[\+ ]/);
for (i = 0; i < keywords.length; i++){
for (j = 0; j < ignoreList.length; j++) if (!keywords[i] || (keywords[i] == ignoreList[j])) {
keywords.splice(i--, 1);
break;
}
}
searchFld.value = keywords.join(' ');
}
function keywordMatch(keywords, text) {
var result = 0;
for (var i in keywords) {
if (text.match(new RegExp("(^| )" + keywords[i] + "( |$)", "i"))) {
result++;
};
}
return result;
}
function showTextContent() {
var i, matches = [];
var div, divcontent, divs = document.getElementById("ts-1").getElementsByTagName('div');
var keywords = document.getElementsByName('formcontent')[0].value.split(' ');
for (i = 0; i < divs.length; i++) {
div = divs[i];
divcontent = div.lastChild.nodeValue;
if (keywordMatch(keywords, divcontent)) {
matches.push(div);
}
}
if (matches[0]) {
document.getElementById('take1000').innerHTML = matches.length + " matches / Treffer";
for (i = 0; i < matches.length; i++) {
matches[i].onmouseover(toggle('take1000', 'visible'));
matches[i].onmouseout = null;
}
}
else {
document.getElementById("ts-1").innerHTML = "" ;
matches[i].onmouseover(toggle('notake1000', 'visible'));
}
}
window.onload = function(){
populateSearchField();
showTextContent();
}
</script>
</head>
<body>
<div id="container">
<div id="notake1000">Keine Ergebnisse / No Matches</div>
<div id="take1000"></div>
<div id="ulent">Search this site / Diese Seite durchsuchen :</div><form><input type="text" name="formcontent" value="one" onmouseover="toggle('notake1000', 'hidden');toggle('take1000', 'hidden');" onfocus="myFocus(this); showTextContent();" onblur="myBlur(this); showTextContent();" style="font-family:Arial;color:#ffff40;text-align:center;font-size:12px;font-weight:bold;float:right;margin-left : auto;margin-right : 2px;border: 2px double #AFAFAF;background-color: #5F5F5F;padding:1px;height:18px;width:293px;" /></form>
<div id="ts-1" style="visibility:hidden;">
<div onmouseover="toggle('fo-test1', 'visible');" onmouseout="this.className='ts-1-1';toggle('fo-test1', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-1"><object id="fo-test1" style="visibility:hidden;" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />one</div>
<div onmouseover="toggle('fo-test2', 'visible');" onmouseout="this.className='ts-1-2';toggle('fo-test2', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-2"><object id="fo-test2" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />two</div>
<div onmouseover="toggle('fo-test3', 'visible');" onmouseout="this.className='ts-1-3';toggle('fo-test3', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-3"><object id="fo-test3" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />three</div>
<div onmouseover="toggle('fo-test4', 'visible');" onmouseout="this.className='ts-1-4';toggle('fo-test4', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-4"><object id="fo-test4" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />four</div>
</div>
</div>
</body>
</html>
Realizing that form input placeholders aren't universally recognized among browsers, I began changing all of mine using onblur and onfocus handlers instead. As an example, I used the following code, which works in most cases: Code: <input type="text" name="example" maxlength="5" value="Example" onblur="if(this.value=='') this.value='Example';" onfocus="if(this.value=='Example') this.value='';"/> At first, I coded all of the inputs without a value attribute. But, when the page initially loaded, the fields would load empty, and the value/placeholder wouldn't appear until the field had been "focused" and then "blurred" again. Adding the value attribute seemed to correct that problem, again, for the most part. I have some text fields that appear only after I select a particular radio button or select option. Problem is, when the radio is clicked, the field appears, but even with the value attribute in place, the field appears void. I'm not sure what is different, or what I'm doing wrong. Here's the javascript code with the radio button (note:everything works except that the "placeholder" doesn't show when the field first appears): Code: function showfield() {
document.forms[0].otherRelation.value = "";
document.getElementById("newBox").style.display = "none";
var r = document.forms[0].relation;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[i].checked && r[i].value == "Otherrelation" ) {
document.getElementById("newBox").style.display = "inline";
}
}
}
<input type="radio" name="relation" value="Otherrelation" onclick="showfield()"/>Other
<span id = "newBox" style="display:none">:
<input type = "text" name="otherRelation" size="35" value="Your Relationship" onblur="if(this.value=='') this.value='Your Relationship';" onfocus="if(this.value=='Your Relationship') this.value='';"/>
</span>
Thanks for any help. Sorry so long. I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me. Code: <script type='text/javascript'>
function resizeIt()
{
document.getElementById('comment').style.height = 50px;
};
</script>
<input type='text' id='comment' class='urlTextArea' name='url' value=''
size='75' onfocus='resizeIt()'>
Hey all, I'm trying to write what I thought to begin with would be a simple script. All it will do is go out and find every textarea, then change the onblur/onfocus functions to something that I created. Here's my problem, when I am going through each textarea object, I can't seem to find a way to reference the object from within the function. See down in that for loop? When I say tAreaSniffer(i), the i ends up being overwritten each time. This makes the value of i in each object to be 3(since there are 3 textareas). I have used javascript in the past, however now I am getting back into it and having trouble. Thanks guys, Here's my code: Code: <html>
<head>
</head>
<body>
<form>
<textarea name="t1" rows="4" cols="20"></textarea>
<textarea name="t2" rows="4" cols="20"></textarea>
<textarea name="t3" rows="4" cols="20"></textarea>
</form>
<script type="text/javascript">
var sniffer;
var textareas = document.getElementsByTagName('textarea');
var counter = 0;
function tAreaSniffer(tArea)//, oldCont)
{
alert(tArea);
//var curCont; = tArea.value;
counter++;
sniffer = setTimeout(function(){tAreaSniffer(tArea)}, 1000);
}
for(var i=0; i<textareas.length; i++)
{
textareas[i].onfocus = function(){tAreaSniffer(i);};//, textareas[i].value);};
textareas[i].onblur = function(){clearTimeout(sniffer);};
}
alert("HEYO");
</script>
</body>
</html>
Hi all, I am working on a site which is in a frameset. There is content area, a footer and a workqueue on the right. Now what I do is poll the workqueue every 30 seconds, check if there are any changes to any queues and if so, I make them go bold and red and play a beep. That's no problem, that works fine. The trouble is I am trying to make the title flash "New Item" if the window is out of focus (Minimised would be better but dont think that is possible to detect). The flashing bit is no problem, it's the triggering when the windows out of focus that is a problem. Applying events to the window object doesn't work. The closest I have come to making it work is this, but it doesn't work in firefox... Code: var debugwin = window.open("", "newwin", "width=300, height=300, scrollbars=1");
debugwin.document.open();
debugwin.document.write("<HTML><TITLE>Debug Window</TITLE><BODY>");
debugwin.document.write("</BODY></HTML>");
debugwin.document.close();
function addDebug(msg) {
debugwin.document.body.innerHTML = msg + "<BR/>" + debugwin.document.body.innerHTML;
}
<!--<frameset onblur="workitemAlerts.setItemAlerts(false);" onfocus="workitemAlerts.setItemAlerts(true);" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">-->
<frameset onblur="addDebug('Blur 1st frameset');" onfocus="addDebug('Focus 1st frameset');" id="titleframeset" rows="<%= HEADER_FRAME_RESTORED %>,*,<%= FOOTER_FRAME_HEIGHT %>" framespacing="0" border="0" frameborder="0">
<frame onblur="addDebug('Blur frame 1');" onfocus="addDebug('Focus frame 1');" noresize scrolling="no" framespacing="0" border="0" frameborder="0" id="titlebar" name="titlebar" src="<wfmt:headerpage />">
<frameset onblur="addDebug('Blur 2nd frameset');" onfocus="addDebug('Focus 2nd frameset');" id="mainframeset" cols="10,*,<%= MAIN_FRAME_RESTORED %>" framespacing="0" border="0" frameborder="0">
<frame onblur="addDebug('Blur frame 2');" onfocus="addDebug('Focus frame 2');" noresize framespacing="0" border="0" frameborder="0" name="leftpad" src="mainColourFill.jsp" scrolling="no">
<frame onblur="addDebug('Blur frame 3');" onfocus="addDebug('Focus frame 3');" noresize name="windmain" src="<wfmt:postloginpage />" scrolling="auto">
<frame onblur="addDebug('Blur frame 4');" onfocus="addDebug('Focus frame 4');" noresize framespacing="0" border="0" frameborder="0" name="queues" src="workqueues.jsp" scrolling="no" style="BORDER-RIGHT: gray 1pt solid;">
</frameset>
<frame noresize scrolling="no" framespacing="0" border="0" frameborder="0" name="footerbar" src="footer.jsp">
</frameset>
I have popped up a little window to help me view debug away from the window so I can focus and blur and still see the output to see what events are triggering. IE seems to trigger the events on the <frame> tags fine, which means I can achieve what I need to in IE, however FF isn't playing ball. Anybody know what I can do to detect if the window is out of focus. TIA, Dale Hi I've just found out that a piece of code is not working as expected in certain browsers - but the way in which it goes wrong is not consistent, so maybe it's something wrong with my code. Oddly enough, it works exactly as I was expecting when viewed in IE. Here's the code... any help would be much appreciated. Thanks Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function fillboxAddress() {
if (document.getElementById('tbAddress').innerHTML == '')
{
document.getElementById('tbAddress').innerHTML = 'Address';
}
}
function clearboxAddress() {
if (document.getElementById('tbAddress').innerHTML == 'Address')
{
document.getElementById('tbAddress').innerHTML = '';
}
}
</script>
</head>
<body>
<p><textarea name="tbAddress" rows="2" cols="20" id="tbAddress" onfocus="clearboxAddress()" onblur="fillboxAddress()">Address</textarea></p>
</body>
Can we have two onFocus javascriptscript events for single HTML Tag? Thank you..
Hi, I'm having some problems with some javascript events firing in the wrong order under certain workflows. Here's the gist of it: I have a form with many fields, mostly input type = text. Each field as an OnBlur and OnFocus event tied to javascript functions. IE's website (http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx) states that "The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus." and that is exactly what happens when tabbing through the fields. The tricky part is that it doesn't perform this way when CLICKING to another field. When clicking to another field it performs the new field's OnFocus first, and then the first field's OnBlur event after. This is bad because the OnFocus sets a global variable's value to whatever value is in that box at the time it gets focus and if the onblur validation fails, that value is inserted back into the box. So what's happening is the validation for field 1 fails and the value from field 2 is then written into field 1. This also seems to only happen when the page is opened as a modal window as opposed to just opening the page on it's own. It doesn't happen in FireFox, I've only been able to get it to happen on IE 8 + (haven't tried any other browsers.) Anyone else have this happen to them? Does it sound like an IE bug? Thanks Hi- I have a table with numerous textareas that I am able to clear once - the first time the textarea is clicked the default value is cleared and everything is OK. However, at a certain point the user might press a 'Clear' button linked to a function I wrote to reset the values back to the defaults. At this point clicking into the textarea does not clear it. Below is a typical textarea: Code: <textarea rows= "2" cols="15" class="Klabel" id="ta5" onfocus="this.value=''; this.onfocus=null; setbg_color('ta5','#EFA746')" onchange="setbg_color('ta5', '#EBF5FF')">
Type a label
</textarea>
Below are the relevant functions. The Clear function mentioned above just runs 'setbg_color' and 'set_value' for each textarea and sets them to the defaults. Code: function setbg_color(id, color){
document.getElementById(id).style.background=color;
}
function set_value(id, celltype){
document.getElementById(id).value=celltype;
}
Is there anyway to essentially reverse the effects of the this.onfocus=null; statement? I tried something like this.onfocus=true; but that didn't work. An update - I haven't answered the reversing null question but an acceptable solution is to reload the page from within javascript as per http://www.mediacollege.com/internet...ge/reload.html Thanks -Jim ps - As part of my research I came across this http://mvied.com/blog/unobtrusive-input-clear-focus/ which does a smoother job of clearing the textareas but does not solve my question. Hey guys, First shot at JS so please be gentle! I'm trying to get this script to clear the default value of my input elements on focus. It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered. Make sense? Here's the script (thanks in advance!!): Code: <script language="JavaScript">
function clickFocus(input){
input.className = 'focus';
if (input.value = input.defaultValue){
input.value = '';
}
}
function unFocus(input){
input.className = 'entered';
if (input.value == ''){
input.value = input.defaultValue;
input.className = 'normal'
}
}
</script>
<form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)">
<input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)" rows="5">Message</textarea>
<input class="submit" name="submit"type="submit" value="Send Message" />
</form>
I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help hi jus want to ask why is the else not working in the showmore and showless function i have two div which shld conduct the same way of working which is to show the rest of the text with the show more and min the text with the show less function anyone know what my mistake is? Code: function showmore() {
if (document.getElementById("mydiv1") ){
document.getElementById("mydiv1").innerHTML = "";
document.getElementById("mydiv1").innerHTML = txt1 + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt1;
}
else {
document.getElementById("mydiv").innerHTML = "";
document.getElementById("mydiv").innerHTML = txt + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt;
}
}
function showless() {
if (document.getElementById("mydiv1")){
document.getElementById("mydiv1").innerHTML = shorttxt1 + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
else {
document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
}
thanks Reply asap!!! Script::. Code: <script language="javascript">
function temp(form)
{
oops = "";
var sum = 0;
var fld = (form.level.value);
var val = fld.value.replace(/\s/g, "" );
if ( val != "")
{
var deg = parseFloat(fld.value);
if ( isNaN(deg) || deg < 0)
{
fld.value = "0";
oops += "\nInvalid Level";
} else if ( deg != 0 ) {
sum += Math.pow( deg, 3 );}
}
if ( oops != "" )
{
alert("You must correct these errors:\n" + oops);
return false;
}
form.totalexp.value = sum ;
}
</script>
Html::. Code: <form style="text-align:center"> <p>Level</p> <p><input size=30 maxlength=30 value=0 name="level" onfocus="this.value=''"/></p> <input type=button onclick=temp(this.form) value=Calculate /> <input type=reset name=clear id=clear value=Clear /></p> <blockquote><p>Total Exp <input name="totalexp" size=40 maxlength=40 readonly=""/></p></blockquote></form> Can someone help me. Whats wrong with my js code and i am noob to J.S. Your help is most appreciated. |
|||||||