|
JavaScript - Javascript Issue In Mozilla (collapsing Table)
Hello! I am trying to collapse a table via JS, and the following code works in IE, yet not in Mozilla. I have read lots of other posts (on the world wide web) in regards to possibly tackling this with div, or span: however, in my case, I cannot modify the already existing HTML of the code.
Could you please assist me - why is it that the following code works in IE, yet not in Mozilla? More INFO: Please note that although I am using the variable id below, I have also tried this via the defined element el. However -- using el doesn't work in either browsers. Please also note that the function is being called like so: HTP.p( '<table BORDER=0 BORDERCOLOR="#d1dce9" CELLPADDING="0" WIDTH=100% style="border-collapse:collapse;"> <tr> <td onClick="ftoggle(this);" width="100%" style="cursorointer;"><font face="Calibri" color ="#3A5894" size=2><B>[+] Click here to Show/Hide the Table</B></font></td> </tr><tr> <td colspan="1" style="display:none;color:#ff0000;">'); <head> <script language="JavaScript"> function ftoggle(id){ var el = document.getElementById(id); if(id.parentNode.nextSibling.childNodes.item(0).style.display=="") { id.parentNode.nextSibling.childNodes.item(0).style.display="none"; } else { id.parentNode.nextSibling.childNodes.item(0).style.display=""; } } </script> </head>'); Similar Tutorialshow do i make this table's initial state to be collapsed rather than expanded Code: <html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script type="text/javascript">
function poorman_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
function poorman_changeimage(id, sMinus, sPlus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand)
img.src = sPlus;
else
img.src = sMinus;
}
}
function Toggle_trGrpHeader2()
{
poorman_changeimage('trGrpHeader2_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif');
poorman_toggle('row1');
poorman_toggle('row2');
poorman_toggle('row3');
}
function Toggle_trGrpHeader1()
{
poorman_changeimage('trGrpHeader1_Img', 'http://www.saintjoe.edu/info_systems/help/email/minus_sign.gif', 'http://www.mumstudents.org/~gwang/Safari_Books/PHP%20Advanced%20for%20the%20World%20Wide%20Web/1.3_files/sign_plus.gif');
poorman_toggle('trRow1');
}
function IMG1_onclick() {
}
function IMG2_onclick() {
}
function IMG8_onclick() {
}
function IMG10_onclick() {
}
function IMG12_onclick() {
}
function IMG13_onclick() {
}
</script>
</head>
<body style="font-size: 12pt">
<div>
<table border="0" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; cursor: crosshair; padding-top: 0px; background-color: transparent; border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid;" cellpadding="1" cellspacing="0" align="center">
<tr>
<td colspan="12" style="border-bottom: gray thin solid; text-align: center; height: 25px;" class="titlebg">
<span class="titlebg" style="color: gray">Our Affiliates</span></td>
</tr>
<tr id="trGrpHeader2">
<td class="number" colspan="4" rowspan="4" style="border-right: gray thin dashed;">
<span onclick="javascript:Toggle_trGrpHeader2();">
<img id="IMG12" src="http://img48.imageshack.us/img48/3168/viewallcopyjo5.png" language="javascript" onclick="return IMG12_onclick()" /></span></td>
<td colspan="1" style="width: 71px; height: 11px;"><img id="Img5" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
<td colspan="1" style="width: 63px; height: 11px;"><img src="http://sz-ex.com/affiliates/ff1.gif" /></td>
<td colspan="1" style="width: 76px; height: 11px;"><img id="Img6" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td>
<td colspan="1" style="width: 51px; height: 11px;"><img id="Img7" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
<td colspan="1" style="width: 40px; height: 11px">
<img id="IMG8" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td>
<td colspan="1" style="width: 55px; height: 11px">
<img id="IMG10" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td>
<td class="number" rowspan="4">
</td>
<td class="number" rowspan="4" style="width: 80px; text-align: center; border-left: gray thin dashed;">
<img id="IMG13" src="http://img61.imageshack.us/img61/613/minibanneruf1.gif" language="javascript" onclick="return IMG13_onclick()" start="" /><br />
<span style="font-size: 8pt; color: dimgray"></span></td>
</tr>
<tr id="row1">
<td class="number" rowspan="3" style="width: 71px; height: 22px">
<img src="http://sz-ex.com/affiliates/ff1.gif" /></td>
<td class="number" rowspan="3" style="width: 63px; height: 22px">
<img id="IMG2" src="http://sz-ex.com/affiliates/socal1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
<td class="number" rowspan="3" style="width: 76px; height: 22px">
<img id="Img11" src="http://i114.photobucket.com/albums/n267/f2a/FTAV1.jpg" language="javascript" onclick="return IMG10_onclick()" /></td>
<td class="number" rowspan="3" style="width: 51px; height: 22px">
<img id="Img9" src="http://sz-ex.com/mini_v2-1.gif" language="javascript" onclick="return IMG8_onclick()" /></td>
<td class="number" rowspan="3" style="width: 40px; height: 22px">
<img id="Img4" src="http://zcoarea.ckc.com.ru/image3.gif" language="javascript" onclick="return IMG1_onclick()" /></td>
<td class="number" rowspan="3" style="width: 55px; height: 22px">
<img id="Img3" src="http://sz-ex.com/affiliates/ssd1.gif" language="javascript" onclick="return IMG2_onclick()" /></td>
</tr>
<tr id="row2">
</tr>
<tr id="row3">
</tr>
</table>
</div>
</body>
</html>
Hi guys, I'm relatively new to coding, so apologies if this is something really trivial or even uneccessarily long. I'm currently running a mootools and a jquery script on the same page (http://tamwardsings.squarespace.com/media). Jquery = Jplayer audio player mootools = video light box Initially the jquery script wasn't working but I resolved that with var $j = jQuery.noConflict(); Now, while both scripts run in Chrome and Safari Browsers, firefox will not initiate either script. Clicking an image with a link to the video lightbox instead sends you directly to the anchored link, and the audio player, fails to play. Videobox script: Code: var Videobox = {
init: function (options) {
// init default options
this.options = Object.extend({
resizeDuration: 400, // Duration of height and width resizing (ms)
initialWidth: 250, // Initial width of the box (px)
initialHeight: 250, // Initial height of the box (px)
defaultWidth: 425, // Default width of the box (px)
defaultHeight: 350, // Default height of the box (px)
animateCaption: true, // Enable/Disable caption animation
flvplayer: 'storage/js/flvplayer.swf'
}, options || {});
this.anchors = [];
$A($$('a')).each(function(el){
if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
el.addEvent('click', function (e) {
e = new Event(e);
e.stop();
this.click(el);
}.bind(this));
this.anchors.push(el);
}
}, this);
this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
bottom: this.bottom.effect('margin-top', {duration: 400})
};
},
click: function(link) {
return this.open (link.href, link.title, link.rel);
},
open: function(sLinkHref, sLinkTitle, sLinkRel) {
this.href = sLinkHref;
this.title = sLinkTitle;
this.rel = sLinkRel;
this.position();
this.setup();
this.video(this.href);
this.top = Window.getScrollTop() + (Window.getHeight() / 15);
this.center.setStyles({top: this.top+'px', display: ''});
this.fx.overlay.start(0.8);
this.step = 1;
this.center.setStyle('background','#fff url("/storage/loading.gif) no-repeat center');
this.caption.innerHTML = this.title;
this.fx.center.start({'height': [this.options.contentsHeight]});
},
setup: function(){
var aDim = this.rel.match(/[0-9]+/g);
this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;
},
position: function(){
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
},
video: function(sLinkHref){
if (sLinkHref.match(/youtube\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('/');
this.videoID = videoId[4];
this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/google\.com\/videoplay/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/ifilm\.com\/video/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('video/');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
this.so.addVariable("flvbaseclip", this.videoID+"&");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/\.mov/i)) {
this.flash = false;
if (navigator.plugins && navigator.plugins.length) {
this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
} else {
this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
}
}
else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) {
this.flash = false;
this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>'
}
else if (sLinkHref.match(/\.flv/i)) {
this.flash = true;
this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
}
else {
this.flash = true;
this.videoID = sLinkHref;
this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
}
},
nextEffect: function(){
switch (this.step++){
case 1:
this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
break;
this.step++;
case 2:
this.center.setStyle('background','#fff');
this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
if (this.options.animateCaption){
this.fx.bottom.set(-this.bottom.offsetHeight);
this.bottomContainer.style.height = '';
this.fx.bottom.start(0);
break;
}
this.bottomContainer.style.height = '';
this.step++;
}
},
close: function(){
this.fx.overlay.start(0);
this.center.style.display = this.bottomContainer.style.display = 'none';
this.center.innerHTML = '';
return false;
}
};
window.addEvent('domready', Videobox.init.bind(Videobox));
HTML for videobox: Code: <script src="/storage/js/mootools.js"></script> <script src="/storage/js/swfobject.js"></script> <script src="/storage/js/videobox.js"></script> <link href="/storage/js/videobox.css" media="screen" rel="stylesheet" type="text/css" /> <div id="vid1"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid1.jpg" alt="" /></a></div> <div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid2.jpg" alt="" /></a></div> <div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid3.jpg" alt="" /></a></div> Jplayer javascript: Code: //<![CDATA[
var $j = jQuery.noConflict();
$j(document).ready(function(){
var Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
$j.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
$j(this.cssSelector.jPlayer).jPlayer(this.options);
$j(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
$j(this).blur();
return false;
});
$j(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
$j(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
$j(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
$j.each(this.playlist[i], function(property,value) {
if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
$j(this.cssSelector.playlist + " ul").append(listItem);
$j(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = $j(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
$j(self.cssSelector.jPlayer).jPlayer("play");
}
$j(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
$j.each(this.playlist[i], function(property,value) {
if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
$j(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $j(this).data("index");
$j(self.cssSelector.playlist + "_item_" + index).click();
$j(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
$j(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
$j(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
$j(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
$j(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
}
};
var audioPlaylist = new Playlist("1", [
{
name:"Tempered Song",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
},
{
name:"Hidden",
mp3:"http://tamtam123.squarespace.com/storage/images/avenged_unholyc.mp3"
}
], {
ready: function() {
audioPlaylist.displayPlaylist();
audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
},
ended: function() {
audioPlaylist.playlistNext();
},
play: function() {
$j(this).jPlayer("pauseOthers");
},
swfPath: "storage/js",
supplied: "mp3"
});
$j("#jplayer_inspector_1").jPlayerInspector({jPlayer:$j("#jquery_jplayer_1")});
$j("#jplayer_inspector_2").jPlayerInspector({jPlayer:$j("#jquery_jplayer_2")});
});
//]]>
Any help on this matter would be greatly appreciated, Josh Hi, Can anyone tell me why the following js code fails in Mozilla? I call the function from: <tr><td><a href=\"javascript:;\" onClick=\"javascript:ChangeFrame('{$link}')\" ><img src='{$thumbs_fr}' border=0></a></td></tr> Code: var ie45,ns6,ns4,dom;
if (navigator.appName=="Microsoft Internet Explorer") ie45=parseInt(navigator.appVersion)>=4;
else if (navigator.appName=="Netscape"){ ns6=parseInt(navigator.appVersion)>=5; ns4=parseInt(navigator.appVersion)<5;}
dom=ie45 || ns6;
var http=createRequestObject();
var objectId = '';
var loadok = 0;
function createRequestObject(htmlObjectId){
var obj;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
obj = new XMLHttpRequest();
}
return obj;
}
function sendReq(serverFileName, variableNames, variableValues,objId) {
var paramString = '';
objectId = objId;
variableNames = variableNames.split(',');
variableValues = variableValues.split(',');
for(i=0; i<variableNames.length; i++) {
paramString += variableNames[i]+'='+variableValues[i]+'&';
}
paramString = paramString.substring(0, (paramString.length-1));
if (paramString.length == 0) {
http.open('get', serverFileName);
}
else {
http.open('get', serverFileName+'?'+paramString);
}
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if (http.readyState == 4) {
responseText = http.responseText;
getobj(objectId).innerHTML = responseText;
} else {
getobj(objectId).innerHTML = "<br><div align=center><img src='images/loading.gif' border=0><br>Loading content ...</div>";
}
}
function change_icon(imgDocID,url) {
document.images[imgDocID].src = url;
}
function showhide(id) {
el = document.all ? document.all[id] : dom ? document.getElementById(id) : document.layers[id];
els = dom ? el.style : el;
if (dom){
if (els.display == "none") {
els.display = "";
} else {
els.display = "none";
}
}
else if (ns4){
if (els.display == "show") {
els.display = "hide";
} else {
els.display = "show";
}
}
}
function getobj(id) {
el = document.all ? document.all[id] : dom ? document.getElementById(id) : document.layers[id];
return el;
}
function showobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
if (dom){
els.display = "";
} else if (ns4){
els.display = "show";
}
}
function hideobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
if (dom){
els.display = "none";
} else if (ns4){
els.display = "hide";
}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function openPopUp(url, windowName, w, h, scrollbar) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scrollbar ;
win = window.open(url, windowName, winprops);
if (parseInt(navigator.appVersion) >= 4) {
win.window.focus();
}
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
function sendToFlash () {
var txt = document.getElementById("inputField").value;
var txtBold = document.getElementById("txtBold").value;
var txtItalic = document.getElementById("txtItalic").value;
var txtColor = document.getElementById("txtColor").value;
var txtFont = document.getElementById("ls_font").value;
var txtSize = document.getElementById("ls_size").value;
getobj('NDKPhoto').sendText(txt,txtFont,txtColor,txtSize,txtBold,txtItalic);
return false;
}
function ChangeFrame (url) {
getobj('NDKPhoto').sendFrame(url);
}
function ChangeClipart (url) {
getobj('NDKPhoto').sendClipart(url);
}
function updateFile(outFile) {
furl = 'act:savecam|url:'+outFile;
sendReq('index.php', 'cmd', furl,'cam_result');
showobj('cam_result');
}
function Show_Select_Color() {
var newcolor = showModalDialog("select_color.html", "000000", "resizable: no; help: no; status: no; scroll: no; unadorned: no; dialogLeft:400; dialogTop:500;");
if (newcolor != null) {
document.getElementById("txtColor").value = newcolor;
document.getElementById("cl_pick").src = "pick_color.php?c="+newcolor;
sendToFlash();
}
}
function Dao_Gia_Tri(obj) {
var num = document.getElementById(obj).value;
if (num!=1) document.getElementById(obj).value = 1;
else document.getElementById(obj).value = 0;
sendToFlash();
}
function gotopage(p,cat){
change_frame_page(p,cat);
}
function change_frame_page(p,cat) {
furl = 'act:jsload|sub:frame|p:'+p+'|cat:'+cat;
sendReq('index.php', 'cmd', furl,'displayFrame');
}
function gotopage_clip(p,cat){
change_clip_page(p,cat);
}
function change_clip_page(p,cat) {
furl = 'act:jsload|sub:clip|p:'+p+'|cat:'+cat;
sendReq('index.php', 'cmd', furl,'displayClipart');
}
hello Guys , Well, i've a BIG Problem With a HUGE JS application , i'm modifying its javaScript code to work on both IE/Mozilla , currently it works fine on IE but not on Mozilla. My main Point now is events. lets try with a little module, consider this function : Code: function HiliteLectures(Group,Alternatives,ForeColor){
var i,Lecture,EventLecturesGroup,EventLecturesAlternatives,LecSrcElement
//validate event source
if (event.srcElement.id=='Animate'){LecSrcElement=event.srcElement.parentElement}else{LecSrcElement=event.srcElement}
EventLecturesGroup = Group.split(",")
EventLecturesAlternatives = Alternatives.split(",")
//hilite Lecture Group with Red as sections
for(i=0;i<EventLecturesGroup.length;i++){//if item is not selected
Lecture=document.getElementById(EventLecturesGroup[i])
if ((EventLecturesGroup[i]!='') & (Lecture!= null)){
Lecture.style.borderColor='red';
Lecture.style.borderWidth=2
if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
}
}
//hilite Lecture Alternatives with blue as Lectures
for(i=0;i<EventLecturesAlternatives.length;i++){//if item is not selected
Lecture=document.getElementById(EventLecturesAlternatives[i])
if ((EventLecturesAlternatives[i]!='') & (Lecture != null)){
if (EventLecturesAlternatives[i]!=''){
Lecture.style.borderColor='blue';
Lecture.style.borderWidth=2
if (Lecture.style.zIndex != 1000){Lecture.style.zIndex=120} //skip obligatory zIndexes
}
}
}
//Put the current lecture forecolor to ForeColor
LecSrcElement.style.backgroundColor=ForeColor;
}
and it is attached in this place like : Code: temp.onmouseover=new Function("HiliteLectures('"+Lecture.Group+"','"+Lecture.Alternatives+"','"+Day.HiliteColor+"');")
this works fine in IE , i want to modify it to work on Mozilla , Any Help ?? Hi, I'm having a problem with a website I'm creating for christmas, in my family we always write santa claus letters but with a tricky side to it. So I decided to make questions on a website, the problem is that when the correct answer is given the javascript alert that is supposed to tell the user something appears and disappears without interaction from the user. I need the user to have to click OK. By the way, this only happens when using Mozilla. Hey Guys! I'm new to the site but, I am building a site that has a small area of scrollable text on the page. Basically, my scrollbar is created using layers and styles and it runs an external .js file. It has been working great up until about 6 months ago where it was incompatible in all browsers. I have no idea why. I'm literally pulling out my hair thinking about it. Any help would be nice. The external .js file is below <code> // variables var mouseover = false; var scrolldirection; var scrollratio; var theheartbeat, scrolling; var menuOffsetTop = menuOffsetLeft = menuMaxHeight = 0; var currentX = currentY = 0; var whichIt = null; // events document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; // switch direction scroller will move while pressing a button function switchit(obj, cmd) { if (cmd == 'in') { mouseover = true; if (obj.getAttribute('id') == "scrollup") { scrolldirection = -1; } else { scrolldirection = 1; } } else { mouseover = false; } } function scroll() { if (((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight))) { scrollbox.style.pixelTop += scrolldirection; } } function heartBeat() { data.style.pixelTop = -1 * scrollratio * (scrollbox.style.pixelTop + menuOffsetTop - menuOffsetTop); } function grabIt(e) { if (event.button == 1) { if (mouseover) scrolling = window.setInterval("scroll();",1); else { whichIt = event.srcElement; while (whichIt.id.indexOf("scrollbox") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } // whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } theheartbeat = window.setInterval("heartBeat()",1); } } function moveIt(e) { if (whichIt == null) { return false; } newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; if (((scrollbox.style.pixelTop + menuOffsetTop + distanceY) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + distanceY) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight))) { scrollbox.style.pixelTop += distanceY; } event.returnValue = false; return false; } function dropIt() { clearInterval(scrolling); clearInterval(theheartbeat); whichIt = null; } function init() { menuOffsetTop = floater.style.pixelTop; menuMaxHeight = floater.style.pixelHeight; getscrollinc(); } function getscrollinc() { var contentinc; var scrollerinc; var contentHeight = data.offsetHeight; var scrollerHeight = content.style.pixelHeight; if (scrollerHeight < contentHeight) { contentinc = content.style.pixelHeight / contentHeight; scrollerinc = floater.style.pixelHeight*contentinc; scrollratio = contentHeight / floater.style.pixelHeight; } else { scrollerinc = floater.style.pixelHeight; contentinc = 1; } scrollbox.style.height = scrollerinc; } </code> An example of a page I was trying to use it on is (http://desifraternity.org/history.html) Thanks you in advance! Hi All, This is my first post in this forum. I am relatively new to javascript. Hope I get some guidance here. Also I would like to contribute here when I get little expertise on javascript. I have developed following snippet of code, which is working very well with firefox 6.0. But when it comes to IE 8.0, it just does not work. Quote: <SCRIPT LANGUAGE="JavaScript"> function refreshFrame() { frames['top'].window.location.href = "report.php?parent_id=<? echo $parent_id; ?>"; } </script> </head> <? include('style.php'); include('PHP_functions.php'); print(" <FRAMESET rows='96,100' onLoad=refreshFrame() BORDERCOLOR=blue BORDER=0> <FRAME SRC=blank.html SCROLLING=NO NORESIZE NAME=top> <FRAME SRC=manage.php?view=show_all&parent_id=$parent_id NAME=bottom> </FRAMESET> "); ?> </HTML> In the above script, I am trying to load the frame top after loading frame bottom, as the latter takes more time to load due to some processing involved. Till frame bottom is under processing stage, I display a message "Processing Please wait" which is coming from blank.html. Working under Firefox: It loads blank.html first and displays the message as "processing please wait". Once frame bottom has completed the processing it displays its contents at second half of the webpage. Then finally frame top gets loaded on first half of the web page. This is the expected result. Here URL does not change as the URL remains same as before "http://xyz.com/index.html" Not Working under IE It loads blank.html first and displays the message as "processing please wait". Once frame bottom has completed the processing it displays its contents at second half of the webpage. Then finally frame top gets loaded on whole page instead of first half of the page. Here URL changes to complete new URL as "http://xyz.com/report.php?parent_id" Can anyone please suggest what could be reason for this. Thanks, Vinay Hi, I am trying to do a FAQ section on a site. New to this stuff. What I would like to do is: 1.Question 2.Answer (Question and part of an answer are visible) 3. A button for expanding/collapsing. I am trying to do a button that changes on hover,and when text is expanded image changes, then on hover it changes again and if I press I collapse it to the original image). What I got so far is this: Code: <head>
<style type="text/css">
.divVisible {display:block;}
.divHidden {display:none;}
#test {background-color: red;}
</style>
<script language="javascript" type="text/javascript">
var divID = "MyDiv";
function CollapseExpand() {
var divObject = document.getElementById(divID);
var currentCssClass = divObject.className;
if (divObject.className == "divVisible")
divObject.className = "divHidden";
else
divObject.className = "divVisible";
}
function changeImage()
{
document.images["Button1"].src= "less.png";
return true;
}
function changeImageBack()
{
document.images["Button1"].src = "more.png";
return true;
}
</script>
</head>
<body>
<div id="test">
<div>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
<div id="MyDiv" class="divHidden">
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
- TEST TEST TEST TEST
</div>
</div>
<A href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" input id="Button1" type="button" onClick="return CollapseExpand()" ><img
name="Button1" src="less.png" width="81" height="42" border="0"
alt="javascript button"></A>
</body>
</html>
I tried different stuff but couldn't connect 4 images. (more.png, morehover.png, less.png, lesshover.png). Thnx in advance G. I would like to create collapsing boxes. I would like for them to have different colors. Box1 Box 3 Link 1 Link 1 Link 2 link 2 Link 3 Link 3 Box2 Box 4 Link 1 Link 1 Link 2 link 2 Link 3 Link 3 I got the code to do the first column (box 1 and 2). But I don't know how to add a second column (box 3 and 4). Any help would be appreciated. Thanks Hi all, I'm using the scripts from Dynamic Drive http://www.dynamicdrive.com/dynamici...edcollapse.htm to create a sliding collapsing/expanding div. I need to modify it slightly so instead of an image for the toggle, it has text hyperlink - changing from "Show More" to "Show Fewer". Can anyone help? Thanks http://www.mainstudio.com/ Can anyone recommend a code to create an expandable panel similar the one in this link, but one which expands and collapses horizontally as opposed to vertically? Also, to include the functionality of having content inside each panel load only after its clicked. My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. Hey, I'm having trouble with this site http://bit.ly/hL0u0w... If you go to the services section you will see a sub navigation on the left of the box. The idea of this is to have sub sections within the main headings that expand/collapse when selected. Insted when any one link is clicked the whole menu expands and not just the related sub sections. This is the javascript Quote: <script type="text/javascript"> $(document).ready (function() { $('#link1').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); $(document).ready (function() { $('#link2').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); $(document).ready (function() { $('#link3').click(function() { $('.slide').slideToggle('fast'); }); $('.close').click(function() { $('.slide').slideUp('fast'); }); }); }); </script> and here is the html Quote: <div id="subnav4"> <ul class="navigation4 pagination"> <li class="tab4"><a rel="1" id="link1" href="#">heading 1</a></li> <li style="display: none;" class="dome slide"><a href="#">corporate id</a></li> <li style="display: none;" class="dome slide"><a href="#">branding</a></li> <li style="display: none;" class="dome slide"><a href="#">brochures</a></li> <li style="display: none;" class="dome slide"><a href="#">direct mail</a></li> <li class="tab4"><a id="link2" href="#">heading 2</a></li> <li style="display: none;" class="dome slide"><a href="#">email marketing</a></li> <li style="display: none;" class="dome slide"><a href="#">websites</a></li> <li class="tab4"><a id="link3" href="#">heading 3</a></li> <li style="display: none;" class="dome slide"><a href="#">advertising</a></li> <li style="display: none;" class="dome slide"><a href="#">audiovisual</a></li> <li class="tab4"><a id="heading 3" href="#">exhibitions</a></li> </ul> </div> Hope someone can help with this! Many thanks! Hey All, I've got the following few lines of code that set some radio button values within a table: Code: document.getElementById('Price' + lineNumber).value = price;
document.getElementById('Term' + lineNumber).value=term;
document.getElementById('Type' + lineNumber).value=Type;
I also have a table with id="example" that these input fields sit within. In Firefox, this works without an issue, but in IE, I get a 'document.getElementById(...) is null or not an object' error. How can I fix the above code to work with a table ID? I need to keep the table ID present for some other JS code that works off of it. Any help would be greatly appreciated. Thanks. I need some help making a button function do what I want it to do. I have a index page that shows all my projects in a table with tabs you can click on that shows certain parts of all projects (ie tab for finance, project title). For now, every single project is shown on the website when you bring up the index page. Also the top part of the page, where I have the issue, there is a drop down list of all the projects with a "GO" button next to it. I want a user to be able to scroll down that list and click the button and the page would only show that particular project, ie choosing the tabs to go back and forth dealing with the one project only. The tabs are each its own .php file with the exact coding in all of them. Here is what I have on my index page that I need help on in order to make this button work. Any help will be appreciated. My main issue is this coding Code: <input type="button" value="GO" name="proj_list" /> But here is the whole index page Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2009 Events</title>
<link rel="stylesheet" type="text/css" href="../css/dddropdownpanel.css" />
<link rel="stylesheet" type="text/css" href="../css/sortable.css" />
<link rel="stylesheet" type="text/css" href="../css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="../css/ajaxtabs.css" />
<script type="text/javascript" src="../includes/datepicker.js"></script>
<script language="javascript" src="../includes/tablesort.js"></script>
<script language="javascript" src="../includes/tableActions.js"></script>
<script language="javascript" src="../includes/chrome.js"></script>
<script language="javascript" src="../includes/ajaxtabs.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<?php include("../header.php"); ?>
</div>
<div id="navbar2">
<?php include("../menu.php"); ?>
</div>
<div id="content">
<div id="breadcrumb">
<script language="javascript" src="../includes/breadcrumbs.js"></script>
</div>
<?php
// If the user wants to add a project
if (isset($addproject)):
else:
$dbcnx = @mysql_connect("xxxxx", "xxxxxx", "xxxxxxxx");
if (!$dbcnx) {
echo( "<P>Unable to connect to the xxxxxxxxx" .
"database server at this time.</P>" );
exit();
}
mysql_select_db("techweb", $dbcnx);
if (! @mysql_select_db("techweb") ) {
echo( "<P>Unable to connect to the xxxxxxx" .
"database at this time.</P>" );
exit();
}
// If a project has been submitted,
// add it to the database.
if ("SUBMIT" == $proj_submit) {
$sql = "INSERT INTO projects SET " .
"proj_priority='$priority', " .
"proj_title='$title', " .
"proj_bdlead='$bdlead', " .
"proj_englead='$englead', " .
"proj_objective='$objective', " .
"proj_capability='$capability', " .
"proj_approach='$approach', " .
"proj_venue='$venue', " .
"proj_tradeshow='$tradeshow', " .
"proj_funding='$funding', " .
"proj_src-ds='$src-ds', " .
"proj_src-cap='$src-cap', " .
"proj_src-irad='$src-irad', " .
"proj_status='$status', " ;
if (mysql_query($sql)) {
echo("<P>Your project has been added.</P>");
} else {
echo("<P>Error adding submitted project: " .
mysql_error() . "</P>");
}
}
echo("<h1 style='text-align:left'> 2009 Projects </h1>");
// Request the text of all the projects
$result = mysql_query(
"SELECT * FROM projects");
if (!$result) {
echo("<P>Error performing query: " .
mysql_error() . "</P>");
exit();
}
?>
<form id="projects" method="post" action="project.php">
<select id="project_list" name="proj_list">
<optgroup label="projects">
<?php
// Display the details of each event in a table
while ( $option = mysql_fetch_array($result) ) {
echo("<option label=" . $option["proj_title"] .
"value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>");
}
?>
</optgroup>
</select>
<input type="button" value="GO" name="proj_list" />
<?
endif;
?>
<div id="tabcontainer">
<ul id='tabs' class='shadetabs'>
<?php
// Populate tabs with data related to the selected project
echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>");
echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>");
echo ("<li><a href='approach.php' rel='container'>Approach</a></li>");
echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>");
echo ("<li><a href='financials.php' rel='container'>Financials</a></li>");
?>
</ul>
<!--
<ul id='tabs' class='shadetabs'>
<li><a href='project.php' rel='container' class='selected'>Project</a></li>
<li><a href='capability.php' rel='container'>Demo Capability</a></li>
<li><a href='approach.php' rel='container'>Approach</a></li>
<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>
<li><a href='financials.php' rel='container'>Financials</a></li>
</ul>
-->
<div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px">
<p>Please select a project using the drop-down menu above. Use the tabs to view information about the selected project.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "divcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</div>
Hey everyone, I've got this slight problem with my code in javascript and I cant solve it to save my life and I don't really want to mess more things around incase it makes it worse. For some reason, when I click "get age" it just doesnt run, but the if statements seem to be running, any help would be appreciated Code:
<script type = "text/javascript">
function dIM(Y, M) {
with (new Date(Y, M, 1, 12)) {
setDate(0);
return getDate();
}
}
function dateDifference(birthdate1, birthdate2)
{
var year1 = birthdate1.getFullYear(), month1 = birthdate1.getMonth(), day1 = birthdate1.getDate(),
year2 = birthdate2.getFullYear(), month2 = birthdate2.getMonth(), day2 = birthdate2.getDate();
if (day1 < day2){
month1--;
day1 += dIM (year2, month2);day
};
if (month1 < month2) {
year1--;
month1 += 12;
}
return [year1 - year2, month1 - month2, day1 - day2];
}
function ageCalculator() {
var day = document.age.inputdate.value;
var month = (document.age.inputmonth.value - 1);
var year = document.age.inputyear.value;
var now = new Date();
thisday = now.getDate();
thismonth = now.getMonth();
thisyear = now.getFullYear();
var first = new Date(thisyear, thismonth - 1, thisday);
var second = new Date(year, month - 1, day);
var yourage;
var datediff;
if (day == "" || month == "" || year == "")
{
alert ("Please fill in all of the boxes before getting your age");
}
else if ((day != parseInt(day)) || (month != parseInt(month)) || (year != parseInt(year)))
{
alert ("Please only enter digits in the day, month or year boxes"); return false;
}
datediff = dateDifference(first,second);
if ((thismonth < month) || (thismonth == month & thisday<=day)) {thisyear--;}
yourage = thisyear-year;
var next = parseInt(year)+datediff[0]+1;
var difference = Date.UTC(next, month, day, 0, 0, 0) - Date.UTC(thisyear, thismonth, thisday, 0, 0, 0);
var daysleft = difference/1000/60/60/24;
document.age.daysremaining.value = daysleft+" days left for your next birthday";
document.age.ageoutput.value = yourage;
}
function clear(form){
form.Result.value = "";
}
</script>
<center>
<p>
<form name = age>
<p>Day of birth
<input type="text" id="inputdate" size="2"><br/>
Month of birth
<input type="text" id="inputmonth" size="2"><br/>
Year of birth
<input type="text" id="inputyear" size="4" ><br/>
<input name="button" type="button" id="button2" onClick="ageCalculator()" value = "Get Age"/>
<input type="reset" name="Reset" id="button" value="Reset" />
</p>
<p> You are
<input type = "text" name = "ageoutput" size = "4" value = "0"> years old
<input type = "text" name = "daysremaining" value = "0" />
</p>
</form>
I am very new to coding, I am currently working on this design as my very first: http://img822.imageshack.us/img822/6533/unled1pd.jpg. I am currently working on the Image slider which is on the left side next to the login bar and headlines. I don't know where to start with this. If someone could walk me through or help me in anyway i would greatly appreciate it. Here is my current project LIVE: http://visionarycreativegrp.com/Demos/ForSale%20RED/# Hi All, I am using a script that hides / shows a cell row depending on whether a form checkbox has been ticked. The HTML, CSS and JS code is below: CSS & HTML (simplified and normally in head / body tags etc.): Code: #lastRow { display: none;}
<table>
<tr>
<td>Events Xtra:</td>
<td><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"></em></td>
</tr>
<tr id="lastRow">
<td>Xtra Description:</td>
<td><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td>
</tr>
</table>
JS: Code: function showHideRow(obj){
oLastRow.style.display = (obj.checked)? 'block' : 'none';
}
window.onload=function(){
var oChkBox = document.getElementById('upcoming');
oLastRow = document.getElementById('lastRow');
oChkBox.onclick=function(){showHideRow(this);}
showHideRow(oChkBox);
}
Now, the above works absolutely perfectly in Internet Explorer - when the checkbox is ticked, it displays the bottom row exactly as I want it to - i.e. as the next row in the table. However, in Chrome, Safari and Firefox it seems to display the whole row as a cell on it's own so distorting the entire table structure. I suspect it is something to do with the use of the id="lastRow", but I am not sure. The strange thing is that the HTML source is of course the same for both. Can anyone shed any light here? For convenience I have uploaded two images: IE (working fine): Firefox (distorting across page) Regards, Neil hi, i am trying to get some javascript working on a website i am making. the javascript changes the background image behind a photo. this simulates a user selecting a different frame from the drop down list http://jimpicot.com/shop/index.php?m...&products_id=3 below is the link to another forum it have been using to get most of the website working. http://www.zen-cart.com/forum/showthread.php?t=173765 |
|||||||