|
JavaScript - Help W/ Divs And Dynamic Content
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? Similar TutorialsI'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 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! Well i want to implement something very similar to this (youtube). My javascript knowledges are low. I think it has something to be with onload and onclick events with links. Do i have to write a function and include it on the html page? Where do i have to put the diferent contents? I would prefer to separate html content and javascript since i have some variable to display from my template engine like {$name}, {$uploaded_date}, etc. Thanks in advance 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 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? 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, 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 Hello I'm rather new to javascript and I'm trying to accomplish something that's a bit over my head, to say the least. Basic idea of page is to have three divs loaded with content. I want to be able to change the content of those three divs with one link. Below is the code I've managed to piece together so far. It works with one instance of the function, but when I try to duplicate it to multiple functions, it breaks. I'm sure there's a way to simplify it. JS: Code: <script type="text/javascript">
function show(diva) {
var a, i = 1;
while(a = document.getElementById('diva'+(i++))) {
a.style.display="none";
}
var al = document.getElementById(diva);
al.style.display ="block";
al.onclick = function() {this.style.display="none"}
}
function show(divb) {
var b, j = 1;
while(b = document.getElementById('divb'+(j++))) {
b.style.display="none";
}
var bl = document.getElementById(divb);
bl.style.display ="block";
bl.onclick = function() {this.style.display="none"}
}
function show(divc) {
var c, k = 1;
while(c = document.getElementById('divc'+(k++))) {
c.style.display="none";
}
var cl = document.getElementById(divc);
cl.style.display ="block";
cl.onclick = function() {this.style.display="none"}
}
</script>
html: Code: <style type="text/css">
.myclass {display:none;position:absolute;background:#fff;}
.header {position:absolute;height:100px width:600px;}
.overview {position:absolute;height:100px width:600px;top:100px;}
.professor {position:absolute;height:100px width:600px;top:200px;}
</style>
<a href="javascript:show('diva1'),show('divb1'),show('divc1')"> link 1 </a> |
<a href="javascript:show('diva2'),show('divb2'),show('divc2')"> link 2 </a> |
<a href="javascript:show('diva3'),show('divb3'),show('divc3')"> link 3 </a><br><br>
<div class="header">
<div class="myclass" id="diva1" style="display:block;">header1</div>
<div class="myclass" id="diva2" >header2</div>
<div class="myclass" id="diva3" >header3</div>
</div>
<div class="overview">
<div class="myclass" id="divb1" style="display:block;" >overview1</div>
<div class="myclass" id="divb2" >overview2</div>
<div class="myclass" id="divb3" >overview3</div>
</div>
<div class="professor">
<div class="myclass" id="divc1" style="display:block;" >professor1</div>
<div class="myclass" id="divc2" >professor2</div>
<div class="myclass" id="divc3" >professor3</div>
</div>
Any help would be greatly appreciated. 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 Hi! I'm no JavaScript expert so wonder if you could help? I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript? I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction? Any help will be really welcome! Thank you! Hello Guys, Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java. What i need to be able to do is.. When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs. #contentwindow #three I already have jquery running on the page and all css is embeded for now if that is helpful. http://www.bushcottages.co.uk/new.htm Thanks your help is supremely appreciated Peter 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! 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 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 ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx 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 Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
Hello all. I am currently viewing various reports based on a location chosen by a dropdown. When I select GO, the page sends the location to a popup, which then queries based on that location and displays the graph on the popup window. What I want to do is to eliminate the popup and send the location to a <div> on the same page and then have the query run and display the graph on the same page. Is this possible, or do Divs have to be static content? Thanks, Parallon |
|||||||