|
JavaScript - Writing Dynamic Content
Hi,
Here's what I've been trying a lot to find but to no avail: a simple text field and submit button that lets users insert an embedding (HTML/CSS/JavaScript codes) to display on the same frame. I'd like something like this: http://www.howtocreate.co.uk/tutoria...s/dywrite.html Unfortunately it doesn't run any code, e.g. Code: <html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Or the text marquee code on the following tutorial: http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm Your help is greatly appreciated! Regards Rain Lover Similar TutorialsHi, I have no clue on how to program the following using JavaScript: I want the user to be able to click a button or link in order to download the content of a <div id="query"> as a .sql file. I assume the variable for the writing to be document.getElementById('query').textContent (or perhaps .innerHTML) but I have absolutely no idea what the command for writing and downloading should be, nor have I been able to find any good tutorial/explenation on that using Google (yes I've tried myself first) Thanks in advance, Venidrad Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! Why does... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title></title>
<script language = "javascript">
function start() {document.writeln (testPara.innerHTML = "Object reassignment");}
</script></head>
<body onload="start()">
<p id="testPara">Paragraph</p>
</body></html>
... only produce the output "Object reassignment"? After the onload event fires to execute the document.writeln method, isn't <body> processed to output the "testPara" object, now redefined, a 2nd time? Why does it not? What am I missing? I need help with my divs and dynamic content. I would like my "menu" div (which includes a menu.html and menu.css file) to link to my "middle" div. Here is what I would like to accomplish: Screenshot And this is what I've got: My website I'm using this code to implement my pages into the "middle" div. Is there a way to target my "middle" div from an external menu.html page? Or is there a better way to do this? Hello Friend, I am using a javascript code installed with Dreamweaver for this page: http://www.alpinelakesair.com/newsite/charters.php When you open the page, (the script element is on the right), the first tab is already open. I would like none of the tabs to be open, so that you have to first click on a tab to open it. Also, when you start clicking on the tabs, a blue focus ring surrounds the active elements. I do not like the blue focus ring. Finally, you may notice that when you click on the tabs there is a slight jumping action that takes place among the tabs, a slight skip before the tab starts sliding up. So my questions a 1. how to not have any tabs open from the start. 2. how to get rid of the blue focus ring. (if you are seeing it) 3. not a big deal, but it would be nice to get rid of that skipping action so the sliding elements moved smoothly. My HTML is: Code: <div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">DHC-3 Turbo Otter Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">EADS Wilga 2000 Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Cessna 185 Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
</div>
My CSS is: Code: .Accordion {
overflow: hidden;
width: 250px;
height: 250px;
}
.AccordionPanel {
margin: 0px;
padding: 0px;
}
.AccordionPanelTab {
background-color: #000;
border: thin solid #363535;
margin: 0px;
margin-bottom: 5px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.9em;
text-transform: uppercase;
-moz-user-select: none;
-khtml-user-select: none;
}
.AccordionPanelContent {
overflow: auto;
margin: 0px;
margin-bottom: 5px;
padding: 5px 10px;
border: thin solid #363535;
}
.AccordionPanelOpen .AccordionPanelTab {
background-color: #7f0202;
margin-bottom: 0;
}
.AccordionPanelTabHover {
background-color: #7f0202;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelTab {
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
}
And my JS is: Code: var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
this.attachBehaviors();
};
Spry.Widget.Accordion.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
if (panel)
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
var panelA = this.currentPanel;
var panelB;
if (typeof elementOrIndex == "number")
panelB = this.getPanels()[elementOrIndex];
else
panelB = this.getElement(elementOrIndex);
if (!panelB || panelA == panelB)
return null;
var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);
if (!contentB)
return null;
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
if(contentA)
{
contentA.style.display = "none";
contentA.style.height = "0px";
}
contentB.style.display = "block";
contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
}
if(panelA)
{
this.removeClassName(panelA, this.openClass);
this.addClassName(panelA, this.closedClass);
}
this.removeClassName(panelB, this.closedClass);
this.addClassName(panelB, this.openClass);
this.currentPanel = panelB;
return panelB;
};
Spry.Widget.Accordion.prototype.closePanel = function()
{
// The accordion can only ever have one panel open at any
// give time, so this method only closes the current panel.
// If the accordion is in fixed panel heights mode, this
// method does nothing.
if (!this.useFixedPanelHeights && this.currentPanel)
{
var panel = this.currentPanel;
var content = this.getPanelContent(panel);
if (content)
{
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
content.style.display = "none";
content.style.height = "0px";
}
}
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
this.currentPanel = null;
}
};
Spry.Widget.Accordion.prototype.openNextPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() + 1);
};
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() - 1);
};
Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
return this.openPanel(0);
};
Spry.Widget.Accordion.prototype.openLastPanel = function()
{
var panels = this.getPanels();
return this.openPanel(panels[panels.length - 1]);
};
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
if (panel != this.currentPanel)
this.openPanel(panel);
else
this.closePanel();
if (this.enableKeyboardNavigation)
this.focus();
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.onFocus = function(e)
{
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.prototype.onBlur = function(e)
{
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return false;
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
while (nextPanel)
{
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
break;
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
}
if (nextPanel && currentPanel != nextPanel)
this.openPanel(nextPanel);
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
{
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
}
};
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
catch (e) {}
};
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
var content = this.getPanelContent(panel);
if (isDefault)
{
this.currentPanel = panel;
this.removeClassName(panel, this.closedClass);
this.addClassName(panel, this.openClass);
// Attempt to set up the height of the default panel. We don't want to
// do any dynamic panel height calculations here because our accordion
// or one of its parent containers may be display:none.
if (content)
{
if (this.useFixedPanelHeights)
{
// We are in fixed panel height mode and the user passed in
// a panel height for us to use.
if (this.fixedPanelHeight)
content.style.height = this.fixedPanelHeight + "px";
}
else
{
// We are in variable panel height mode, but since we can't
// calculate the panel height here, we just set the height to
// auto so that it expands to show all of its content.
content.style.height = "auto";
}
}
}
else
{
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
if (content)
{
content.style.height = "0px";
content.style.display = "none";
}
}
this.attachPanelHandlers(panel);
};
Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
var panels = this.getPanels();
for (var i = 0; i < panels.length; i++)
this.initPanel(panels[i], i == this.defaultPanel);
// Advanced keyboard navigation requires the tabindex attribute
// on the top-level element.
this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
if (this.enableKeyboardNavigation)
{
var self = this;
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
}
};
Spry.Widget.Accordion.prototype.getPanels = function()
{
return this.getElementChildren(this.element);
};
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
return this.currentPanel;
};
Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
var panels = this.getPanels();
for( var i = 0 ; i < panels.length; i++ )
{
if( panel == panels[i] )
return i;
}
return -1;
};
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
return this.getPanelIndex(this.currentPanel);
};
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[0];
};
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[1];
};
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
var children = [];
var child = element.firstChild;
while (child)
{
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
}
return children;
};
Spry.Widget.Accordion.prototype.focus = function()
{
if (this.element && this.element.focus)
this.element.focus();
};
Spry.Widget.Accordion.prototype.blur = function()
{
if (this.element && this.element.blur)
this.element.blur();
};
/////////////////////////////////////////////////////
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
this.timer = null;
this.interval = 0;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.panelToOpen = accordion.getElement(panel);
this.panelData = [];
this.useFixedPanelHeights = accordion.useFixedPanelHeights;
Spry.Widget.Accordion.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
// Set up the array of panels we want to animate.
var panels = accordion.getPanels();
for (var i = 0; i < panels.length; i++)
{
var p = panels[i];
var c = accordion.getPanelContent(p);
if (c)
{
var h = c.offsetHeight;
if (h == undefined)
h = 0;
if (p == panel && h == 0)
c.style.display = "block";
if (p == panel || h > 0)
{
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.distance = obj.toHeight - obj.fromHeight;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "px";
}
}
}
};
Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
var self = this;
this.startTime = (new Date).getTime();
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
if (this.timer)
{
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow
// properties on the panels we were animating!
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
obj.content.style.overflow = obj.overflow;
}
}
this.timer = null;
};
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
{
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
if (obj.panel != this.panel)
{
obj.content.style.display = "none";
obj.content.style.height = "0px";
}
obj.content.style.overflow = obj.overflow;
obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
}
if (this.onComplete)
this.onComplete();
return;
}
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
}
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Thank you very much to whomever can help. and by the way I have no knowledge in javascript. Alex Hello there, new to this forum and starting with a quick question. Normaly I can figure things out myself but I'm a bit stuck on this one. I have two scripts. one is for TinyMCE (WYZIWYG editor): Code: tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
function setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
}
first part loads tinymce when it's there on the page, second part loads it when a button is pushed. second script is for loading filecontent into a div: Code: function load_this(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("main").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
now the problem: I have this page with div 'main'. an url loads this script, but after loading the dynamic content into the div, the setup() script isn't working: Code: function load_editor(url) {
load_this(url);
setup();
}
where url=editor.php. The funny thing is: when I click the button to load the content into the div, the textarea (from editor.php) loads, but the javascript function to start tinymce isn't working! This is probably because right after loading the div with 'editor.php' the setup() script doens't recognise the freshly loaded content. However, when I place a link in 'editor.php' which calls javascript:setup(); and click it after loading the content, setup() does work. my question: How can I make it so, that, when I press a link or button to load the editor.php into a div, the setup() script recognises the fresh code and starts the WYSIWYG editor? Do I have to use state ready or something? And ifso, how do I do this? Or is there some other way I can do this? Kind regards and many thanks for your help! Kevin Hi all, I'm not sure if this is a Javascript question or PHP, so if it needs to be moved can an admin please do so... Anyway, basically I have the following code: Code: <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">View Availability</a>
This pops up a divs with a black alpha background, so that it appears the new content is displaying over the top of the current content. This all works fine, however the content I am displaying in the top level div is (or should be) dynamic. In order for the content to be useful I need to grab the id. Normally I would simply do this: Code: <a href = "url.php?uniqueidentifier=<?php echo $row['id'];?>" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">View Availability</a>
However what happens in this instance is that the page loads with the javascript and the id in the url but it then disappears... Has anyone got any ideas on how I might be able to get around this? Many thanks, Greens85 I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar. I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm Here is what I've got: Code: <img src="images/rule.png" id="rule" width="1" height="1" />
<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<img src="images/resume.png" width="195" height="101" alt="resume" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>
I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like: https://skitch.com/jillianadriana/r7...itled-document I can't get it to load with the custom CSS. Hi All, I'm working on a javascript-only application that queries an in-memory database, at times requests (all internal to the JS app) are lengthy, so I need to post a "Processing..." overlay atop the clicked UI tab to provide user feedback that something is actually happening. For the life of me I cannot figure out how to push the "Processing..." content to the screen while the DB lookup is underway. It appears that there's only one shot at updating the display, and that's when all JS processing has concluded (ie, the data has been looked up and is displayed). Any tips would be greatly appreciated, what I wish to do may not be possible? Thanks in advance for your assistance! JD Hi, all! I'm a "fresh" newbie, JS self-taught from the great resources provided in this forum. I want to better currently working page but lack enough knowledge atm. The situation is this: * Multimedia database - audio clips and corresponding video clips to some of the audio ones. * Dynamic content page showing the latest (by date) 5 or 10 clips with their info from db. * Links provided for each clip, both to listen in a new popup window and to download the clip. Accomplished so far: everything of the above *only* for the audio clips (and video ones but separately on a different page). Every record in the data base has an audio clip and some of them, not all, have a video clip. E.g. there are records only with audio clips and there are records both with audio and video clips. My question is is it possible wherever there's a video clip in the db in an already displayed db-record on the page to display 'watch' and 'download' icon for it together with already shown audio icons ('listen' and 'download')? Conditional displaying. I read about combination between JS and CSS in almost similar situation but don't know how to apply it in my situation due to my little knowledge base at this moment. So, any help will be highly appreciated and useful as it will push me forward in learning JS. I'm almost sure this is possible as it's not a complicated issue. I can post my so far working code, if requested. If not provided enough info on the issue, let me know. Thank you in advance! I'd like to place an AJAX call to load another SELECT menu in my form, and I'm having trouble finding a tutorial. Can someone point me to a good tute, or provide some guidance/examples here? For your Copying/Pasting pleasure , here's an example button for which I'd include the onclick(): Code: <button type="button" >Add</button> And here's an example SELECT menu: Code: <select id="idNumber" name="weekday_1['workPeriod_new'][] > <option value="1" >one</option> <option value="2" >2</option> </select> Thanks-a-bunch, ~ Mo NOTE: Overall, I'm pretty green in JS. Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Dear friends , I tried to write in html page from text file using " <html> <head> <script type="text/javascript" language="javascript"> function Read() { var Scr = new ActiveXObject("Scripting.FileSystemObject"); var CTF = Scr .OpenTextFile("C:\\123.txt", 1, true); data = CTF .ReadAll(); document.write(data); alert(data); CTF .Close(); } </script> </head> <body onLoad="Read()"> </body> </html> " But the contains of text file getting changed , like if there is "My name is Karimkhan I love India " Then it will write like "My name is Karimkhan i love India" It ignores multiple spaces and new line character , so what should I do to prevent this...IS THERE ANYTHING LIKE <PRE> TAG IN HTML "? I want to write an xml stream to the browser using javascript. What I am currently getting is the visual data and the page source is the xml stream. What I would like to get is a visual representation of the xml as well as the underlying page source. Further information. The visual presentation wanted is: <?xml version="1.0" encoding="UTF-8" ?> - <FSResult> <FoodStampAllotment>526</FoodStampAllotment> <GrossEligible>TRUE</GrossEligible> <NetEligible>TRUE</NetEligible> <AssetEligible>TRUE</AssetEligible> </FSResult> The page source for that is: <?xml version="1.0" encoding="UTF-8" ?><FSResult><FoodStampAllotment>526</FoodStampAllotment><GrossEligible>TRUE</GrossEligible><NetEligible>TRUE</NetEligible><AssetEligible>TRUE</AssetEligible></FSResult> The page url includes: FSCalcServlet.do The other visual presentation that we want to look like the above: 150TRUETRUETRUE The other page source is: <?xml version="1.0" encoding="UTF-8" ?><FSResult><FoodStampAllotment>150</FoodStampAllotment><GrossEligible>TRUE</GrossEligible><NetEligible>TRUE</NetEligible><AssetEligible>TRUE</AssetEligible></FSResult> The other page url includes: FSCalc.html This version is written from Flex via javascript and the original is a java servlet. Yes, I have read the sticky about homework.. and before you call me a lazy sack, I will have to blame it all on my teacher... He knows almost nothing about the Java, and yet, he is teaching a computer programming class... This assignment is due soon, and I have no idea how you even start this..Really appreciate it if some1 can do this for me.. Assignment: Create a new 'Array' Project and create a java file that does the following. -Print your arrays going across the screen(horizontally) -Creating the arrays should be done in main -All other tasks should be in separate methods -Your arrays should be passed as a parameters -All methods should have a void return type 1.a)Create an array of 100 integers called nums. (All 1000 grades will automatically be initialized to 0) b) Fill the array with 1000 random numbers between 10 and 99. c) Print the grades forwards d) Print the grades backwards. e) Find the average of the grades and print the average 2 a) Create an array of 6 Strings called names (all 6 names will automatically be initialized to null.) b) Fill your array with 6 names (you will have to do this individually). c) Print all names that start with a vowel. Thank to so much if someone really help me with this! Hello, I am a novice and am hoping I can get some help here. I am self taught at basic HTML and am now trying to add some "v v vroom!" to a site that I am developing. The problem I am faced with is I have a Javascript that I am using as an experiment to see how Javascript works (in the hope that I can use other more exiting Javascripts on my sight I am buliding). I have copied it onto NotePad from a self teaching book which when opened up in a browser does not work. The script in question is; <html> <head> <title>My First Javascript page</title> <script type="text/javascript"></script> <style type="text/css"> body {document.bgcolor="pink"} </style> <body> This is my first Javascript page !! So **** off! <form> <input type="button" onclick="document.bgcolor='blue'" name="change" value="blue"> <input type="button" onclick="document.bgcolor='red'" name="change" value="red"> <input type="button" onclick="document.bgcolor='yellow'" name="change" value="yellow"> <input type="button" onclick="document.bgcolor='white'" name="change" value="white"> <input type="button" onclick="document.bgcolor='fuchsia'" name="change" value="fuchsia"> </form> </body> </html> Can anyone shed any light on what I might be doing wrong, or what I can do to make it work? Thank you all in advance. David Hood. I need to reset the active content registry entries to the defaults when a page unloads: Code: <script>
// Window Onunload, last to execute, manage registry
function windowonunload(){
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU\\Software\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_LOCALMACHINE_LOCKDOWN\\iexplore.exe\\", 1, "REG_DWORD");
WshShell.RegWrite ("HKCU\\Software\\Microsoft\\Internet Explorer\\Main\\FeatureControl\\FEATURE_LOCALMACHINE_LOCKDOWN\\Settings\\LOCALMACHINE_CD_UNLOCK\\", 0, "REG_DWORD");
}
WScript.DisconnectObject(sh);
WScript.Quit();
//-->
</script>
...but it doesn't seem to work. What am I doing incorrectly? Thanks. So I need to know how I can write this more efficiently. I been told that a loop should work, but I can't figure a good way to do it. Im very new to javascript, so I was hoping someone may be able to help. Code:
document.getElementById('tabButton1').onclick=function(){
document.getElementById('tabDiv1').className = 'tabActive'
document.getElementById('tabDiv2').className = 'tabInactive'
document.getElementById('tabDiv3').className = 'tabInactive'
document.getElementById('tabDiv4').className = 'tabInactive'
document.getElementById('tabButton'+1).className = 'tabActive'
document.getElementById('tabButton2').className = 'tabInactive'
document.getElementById('tabButton3').className = 'tabInactive'
document.getElementById('tabButton4').className = 'tabInactive'
};
document.getElementById('tabButton2').onclick=function(){
document.getElementById('tabDiv1').className = 'tabInactive'
document.getElementById('tabDiv2').className = 'tabActive'
document.getElementById('tabDiv3').className = 'tabInactive'
document.getElementById('tabDiv4').className = 'tabInactive'
document.getElementById('tabButton1').className = 'tabInactive'
document.getElementById('tabButton2').className = 'tabActive'
document.getElementById('tabButton3').className = 'tabInactive'
document.getElementById('tabButton4').className = 'tabInactive'
};
document.getElementById('tabButton3').onclick=function(){
document.getElementById('tabDiv1').className = 'tabInactive'
document.getElementById('tabDiv2').className = 'tabInactive'
document.getElementById('tabDiv3').className = 'tabActive'
document.getElementById('tabDiv4').className = 'tabInactive'
document.getElementById('tabButton1').className = 'tabInactive'
document.getElementById('tabButton2').className = 'tabInactive'
document.getElementById('tabButton3').className = 'tabActive'
document.getElementById('tabButton4').className = 'tabInactive'
};
document.getElementById('tabButton4').onclick=function(){
document.getElementById('tabDiv1').className = 'tabInactive'
document.getElementById('tabDiv2').className = 'tabInactive'
document.getElementById('tabDiv3').className = 'tabInactive'
document.getElementById('tabDiv4').className = 'tabActive'
document.getElementById('tabButton1').className = 'tabInactive'
document.getElementById('tabButton2').className = 'tabInactive'
document.getElementById('tabButton3').className = 'tabInactive'
document.getElementById('tabButton4').className = 'tabActive'
};
All help is appreciated. Thanks |
|||||||