|
JavaScript - Problem With Content Being Dispayed
Hello,
I am having some issues with some of my content being displayed on my website in my 'works' section. In particular the images, which i have double checked to make sure the names match, and the iframe video does not load at all. I have an incline this may be related to a javascript problem. Here is the code: Edit fiddle - JSFiddle Any help would be much appreciated, thank you. Reply With Quote 02-03-2015, 10:29 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts You are using jQuery but you aren't including your choice of the version of jQuery you want to use in that jsFiddle. But we can't easily debug in jsFiddle. Can't you show us the page live, on your site? And in any case, you have no images nor video on that fiddle, so why are you asking us about them? Here's how I mucked with your fiddle: Edit fiddle - JSFiddle Similar TutorialsHello 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 I have created this page http://kylehouston.com/new/ were I have added a content slider in the main banner then another in the footer, these work fine in ff but ie7 doesnt seem to agree instead giving me an error, how do i get around this? Thanks in advance! Kyle Resolved
Ok, i have a javascript that creates a table then appends it to an empty div. This works fine in FF, however it fails to work in IE8. [edit] I have decided to post the entire code since I wasn't having any luck getting any suggestions. Maybe now someone can help me out. Code: function createTable() {
var machine = document.Catalog.machine.value;
var dSearch = document.Catalog.dSearch.value;
var section = document.Catalog.section.value;
var x = xmlDoc.getElementsByTagName('record');
var y = xmlDoc.getElementsByTagName('data');
var newEl = document.createElement('TABLE');
newEl.className = 'resultsTab';
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR');
var n = 1;
var headings = new Array("Col1", "Col2", "Col3", "Col4", "Col5");
var dcount = 0;
//for (t=0;t<10;t++) {
for (t=0;t<y[0].childNodes.length;t++) {
if (y[0].childNodes[t].tagName == "record") { // it is required for FF to work properly
dcount++;
}
}
if (document.Catalog.thumbImg[0].checked) {
var container = document.createElement('TH');
var theData = document.createTextNode("Pic");
container.className = "topline1";
container.appendChild(theData);
row.appendChild(container);
}
for (h=0;h<headings.length;h++) {
var container = document.createElement('TH');
var theData = document.createTextNode(headings[h]);
container.className = 'topline' + n;
container.appendChild(theData);
row.appendChild(container);
n++;
}
tmp.appendChild(row);
switch (searchtype) {
case 1:
var objRegex = new RegExp(machine);
break;
case 2:
var objRegex = new RegExp(section, "i");
break;
case 3:
var objRegex = new RegExp(dSearch, "i");
break;
default:
document.getElementById("replaceTxt").innerHTML = "<p>There was an error processing your request.</p>";
}
var rowColor = 1;
var noResult = "false";
for (i=0;i<dcount;i++) {
var row = document.createElement('TR');
var searcharr = new Array();
for (j=0;j<x[i].childNodes.length;j++) {
if (x[i].childNodes[j].nodeType != 1) continue;
searcharr.push(x[i].childNodes[j].firstChild.nodeValue);
}
var searchstrg = searcharr.toString();
if (searchstrg.match(objRegex)) {
var t;
var m=1;
if (document.Catalog.thumbImg[0].checked) {
var pn = "images/"+searcharr[2]+".jpg";
var container = document.createElement('TD');
var refLink = document.createElement("A");
refLink.setAttribute('href', "javascript:viewImg(\""+pn+"\")");
var imgHolder = document.createElement("IMG");
imgHolder.setAttribute("src", pn);
imgHolder.style.height = "75px";
refLink.appendChild(imgHolder);
container.appendChild(refLink);
container.className = "img"+rowColor;
row.appendChild(container);
}
for (t=0; t<searcharr.length; t++) {
container = document.createElement('TD');
var theData = document.createTextNode(searcharr[t]);
container.appendChild(theData);
container.className = 'line' + rowColor + '_' + m;
row.appendChild(container);
m++;
}
tmp.appendChild(row);
rowColor == 1 ? rowColor++ : rowColor--;
document.getElementById("replaceTxt").innerHTML = "";
document.getElementById("replaceTxt").appendChild(newEl);
noResult = "true";
}
}
if (noResult=="false") {
document.getElementById("replaceTxt").innerHTML = "<h3>Sorry, there was no match to your search. Please try again</h3>";
}
}
xmlDoc is the xml object from my import xml function. it is working correctly. IE does not give any JS errors, it just does nothing. If I put text in the Code: document.getElementById("replaceTxt").innerHTML
field, IE displays the text in the correct spot so I know the code is working. I also verified the data is being written correctly to "newEl" via IE 8 debugger. IE just does not want to append the newEl child to the <div> tag. This is where I assume the problem is. Hello, As the title states, I have a problem with a function that hides content contained in DIV tags. Here is the function: Code: <script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
Now, the function itself works perfectly. The problem that I have is that it doesn't work the way I need it to. I have 4 links that need to show the content of a corresponding DIV section. When a link is clicked I need it to check the state of the other 3 DIVs and hide any that are open, then display the content for the link that was clicked. I can tell from the function I am using that it already checks the state of any 1 given DIV then acts accordingly (shows if hidden, hides if shown). While this works, I am having a hard time figuring out how to modify it to suit my needs. I am completely new to JavaScript but I do know some VB so I am not a stranger to programming in general. What I would like is some direction on how to modify the above function to handle the logic I need. I would prefer instruction on how I should go about it so I can get some experience, but any help is appreciated. Thanks! PS, I am setting the display property of all 4 DIVs to NONE by default via embedded CSS. I am using this code... simplified for example Code: [
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"
<div id="content"></div>
Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks Hi guys, The code in question is www.spectral.og.uk/test5/work2.htm I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first. So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think. I have tried so hard to research into this but it just doesn't work. Is the problem to do with that :- 1) You can't ID something within <script>, ie BIGCHANGE in this instance. 2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this! Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this! Dom Hi all, this is the code I'm using in order to display the contents of an xml file into a page. It's working fine with IE but with Firefox. I have searched over intrenet and have applied all suggestions I've found about this issue. Unfortunately it's still not working. Can you please help me??? Code: function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("news.xml");
}
function createTable()
{
var x = xmlDoc.getElementsByTagName('event');
var newEl = document.createElement('table');
newEl.style.width = '100%';
newEl.setAttribute('cellPadding',0);
newEl.setAttribute('cellspacing',0);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
if (x[i].childNodes[0].nodeType != 1) continue;
var container = document.createElement('<TD style="padding-left:3px; font-weight:bold;">');
var theData = document.createTextNode(x[i].childNodes[0].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
row = document.createElement('TR');
if (x[i].childNodes[1].nodeType != 1) continue;
var container = document.createElement('<TD class="box_2">');
var theData = document.createTextNode(x[i].childNodes[1].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
}
document.getElementById('writeroot').appendChild(newEl);
}
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! 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 there, I'm an IT student that recently started to learn JavaScript. I'm trying to write a code that starts with a prompt inputs a number like n. Then the code will ask another n prompts for data input. For example I will input 5 for first prompt, code will ask for 5 more prompts for input. Can't figure out how to do it
What wrong in this code? Code: <script type="text/javascript" src="jquery.js"></script>
<script>
$(function (){
function manda(){
var text = $('#frame').contents().find('p[class=no_boder]').html();
$('div').html(text);
}
});
</script>
i've already tried using this -> $('#frame').contents().html(); How can i get the content? Hello, I have been using interstitial boxes for quite a while and have never had a problem. I was required to create an interstitial box this week. When the home page is display in Firefox and Safari, the interstitial box displays right away as it is supposed to do; however, it will not display in Internet Explorer 7 unless you refresh the screen. Is this a known problem? Is there a way of correcting this? [URL] http://jpl.coj.net [URL] Thank you for your help, Elbee Hi all, I was asked by a friend if I could help with a school kids website. The general website stuff I am fine with however they are looking for some interactive content. Stuff they seem interested in are e.g.quizes, like 10 questions and after you finish you see how many you got right and the correct answers perhaps. Are there Javascripts available that will do this? Any ideas on recommendations or any other scripts/content that could be good on a kids site is of interest. Thanks I am hoping someone can help with this script I found on Javascriptkit.com. Content Viewer: http://www.javascriptkit.com/script/...ntviewer.shtml Basically, the first hidden div to be shown automatically, nor do I want that div to be preselected. As their demo shows: "Page 1" is auto highlighted and the fist div class named "fadecontent" is shown. How can I get around this and have something shown (as a holder, until something else is clicked and shown)??? And also not have anything preselected/highlighted??? Any and ALL Suggestions are very much appreciated. Oh, I kinda figured out how to have something else shown; acting as a cover up. Simply by changing the z-index in the contentfader.js file, and creating an additional div with a higher z-index. However, and of course, the "fadecontent" class remained highlighted automatically, and too, there was is no way to make that layer visible without first clicking on something else. Hope all that made some sort of sense to someone Thanks! Tracy Hi, Well this plugin stops working after completely loading the flash content or game. I did a few changes to it but still, it won't show the game after completely loading the flash. Can someone tell me what's wrong? Here is the link to live working example http://files.cryoffalcon.com/Piecema...s/testing.html Hello. I'm creating a simple auto updating script based on PHP and using jQuery to set the interval to 1000 miliseconds. It works in FireFox, as the only one I've tested so far, but in Internet Explorer (Version 7 right now, didn't test others) it just freezes and doesn't auto update. Doesn't auto update either if I refresh the page, so something's messed up here. I'm using the same way of auto updating on other things, such as a chat-page - works on those in all browsers, so I'm kinda on a lost track here. Here's the JavaScript/jQuery: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function loadContent() {
$('#count').load('counter.php', function() {
setTimeout("loadContent()", 1000);
});
return false;
}
$(loadContent);
And this is what I put on the body of the page: Code: <div id="count"></div> Can anyone see what my problem is? And any workarounds for this? Hi, I wish to get the content inside a td-tag and use with JS operators. This is my source. Code: <style>
#a {
display : none;
}
</style>
<table>
<tr id="field_id-6">
<td valign="top" width="50%" style="text-align:right;">
<span style="color:#333333;">Number</span>:
</td>
<td valign="top" width="50%" style="text-align:left; overflow:hidden;">
<div class="field_uneditable">120</div>
</td>
</tr>
</table>
<img src="../image.png" id="a">
<script>
var x= ;
if(x>49) {
document.getElementById("a").style.display = "block";
}
</script>
So I need to indicate x as the number 120. But I can't just write 120 beside x, because 120 will change to a new number. |
|||||||