|
JavaScript - Load Random Html File Into A Div
That's right, I want to load a random html file from a list into a another div. Does anyone knows any example, please? It would be very helpful.
Thanks Similar TutorialsHi. I am new here. I wanted help for a JavaScript code. You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code. What I want to do is to make an html page load a different background image every time it refreshes. I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this). I already know how to do an external file (.js) and link to it from my .html page. Now I want the code to put in the .js file, and the code to put in the <body> of my .html file. Please help me Thanks Hi people, I would like to make the following thing: Load a random file, from a xml list, into a div. I've made a scheme where I show what I was trying to make, but I don't know how to make it. I would like to load into a div a random HTML file, loaded from a XML. Does anyone knows an similar example or can tell me how's possible to do this, please? is it better to do with Javascript ? thanks for the attention guys Hello, I am using the following script on my site RCENO .com in a easyadsense plugin, it is working well, because it is adding the elements after the posts on the page, but instead of rotating (This causes a problem when a Video is playing, and it rotates out in the middle of it) I would like for it to be Random when the posts load or refreshed....This is a Wordpress CMS site that provides News and Event Information to the local area, I am using this to display Holiday Greetings from area merchants in the form of Videos....... Thank You For Your assistance on This <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">\n') document.write('.dyncontent{display: none; width: 340px; height: 230px;}\n') document.write('</style>') } var curcontentindex=0 var messages=new Array() function getElementByClass(classname){ var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) messages[inc++]=alltags[i] } } function rotatecontent(){ //get current message index (to show it): curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0 //get previous message index (to hide it): prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1 messages[prevcontentindex].style.display="none" //hide previous message messages[curcontentindex].style.display="block" //show current message } window.onload=function(){ if (document.all || document.getElementById){ getElementByClass("dyncontent") setInterval("rotatecontent()", 75000) } } </script> Season Greetings: <div class="dyncontent" style="display: block">[flv:/files/videos/HolidayGreetings/FamilyVideoGreetings.flv 340 230]</div> <div class="dyncontent">To Add Your Holiday Greetings, Contact Us at Roy@rceno.com or Call (336) 398-6003</div> <div class="dyncontent">Happy Holidays</div> Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript">
// JavaScript Document
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/newtopbar.jpg"
images[2] = "images/newtopbar2.jpg"
images[3] = "images/newtopbar3.jpg"
images[4] = "images/newtopbar4.jpg"
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
Hi guys. I've made a html file with three lists to populate different pages of my site. Then i've called the html with SSI. let me show the code the HTML with the list's Code: <div id="list_box"> <ul class="list"> <li><a href="#">item01</a></li> <li><a href="#">item02</a></li> <li><a href="#">item03</a></li> <li><a href="#">item04</a></li> <li><a href="#">item05</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item06</a></li> <li><a href="#">item07</a></li> <li><a href="#">item08</a></li> <li><a href="#">item09</a></li> <li><a href="#">item10</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item11</a></li> <li><a href="#">item12</a></li> <li><a href="#">item13</a></li> <li><a href="#">item14</a></li> <li><a href="#">item15</a></li> </ul> </div> the HTML with the list loaded Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#list_box {
height:100%;
width: 100%;
padding-top: 15px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
background-color: #cccccc;
overflow: hidden;
}
ul.list li {
list-style-type: none;
text-align: left;
text-decoration: none;
}
.list a:link,
.list a:visited {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
line-height: 15px;
color: #036;
text-decoration: none;
text-align: left;
font-weight: bold;
font-style: normal;
}
.list a:hover{
font-family: "Courier New", Courier, monospace;
font-size: 12px;
line-height: 15px;
color: #ffffff;
text-decoration: none;
text-align: left;
font-weight: bold;
font-style: normal;
}
-->
</style>
</head>
<body>
<div id="list_box">
<!--#include file="list.html" -->
</div>
</body>
</html>
the zip with the sample I've made load_external.zip I wanted to ask how can I make an item from the list's to have a different css in the html with the loaded list's. because in each page one of the items (that are all buttons) will be up or should I say active. can someone tell me how can I do this please. Maybe with javascript? thanks in advance There are other similar topics, but this one is different. I am making an external js file and I want to use prototype.js with it. I don't want it in the html file that is referencing the .js file, I actually want to use prototype in the .js file. I'd just rather not copy the 4,000 lines of prototype if there is an easier way to do it. Sorry if I'm not being clear, but thanks for the help in advance. Jazzo I have several js files to include in Hml so was thinking if there is any way that i can includes all the files in one file and then include that file in the main html file so that i don't need to chnage the main file again and again How can i do that just like we use import in css So I'm trying to make a free flash game site that is not completely annoying and never redirects you to another site. i'm hosting all my flash games on my server. when you select the game you would like to play, it loads the file name into a javascript variable that gets sent to my game.html where i would like the game to load. every game should load on this same page. I cannot for the life of me find how to read the variable in html. I've tried embed, object, documentwrite, basically everything i could find doing google searches for 10 hours. I'm no expert programmer, but I've never had to post a question to any forum EVER before because I always figure it out on my own. Not this time. i don't want to include any code i'm using because i would like the proper format. tell me what to do with it and i will do anything in my power to make you feel special. i'll devote a special page to you highlighting your genius on my site. this is a terrible example of what I'm trying to do, just imagine VARIABLEGOESHERE = mystinkingame.swf: [CODE] <object width="550" height="400"> <param name="movie" value="VARIABLEGOESHERE"> <embed src="VARIABLEGOESHERE" width="550" height="400"> </embed> </object> [CODE] it is also clear that i do not understand the [CODE] tag in your forum. Hi anyone knows a lightbox that can be called like this? Code: <img src="imgs/edit.png" border="0" onclick="lightbox.open( 'test.php' ,'test');" style="cursor : pointer;"> or modify slimbox to work with iframe? sorry for bad english Thanks So I was reading up on how to load and parse an XML file into an html page and I found through w3 a great tutorial with sample code: http://www.w3schools.com/xml/xml_dom.asp It appears to work fine on their website but when I try it from my desktop it doesn't work. So what I have is an html file with contents: Code: <html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
And then the xml file named "note.xml": Code: <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> I have no idea what I am missing or not seeing that is causing this not to work but if anyone knows I would appreciate the input. For the record I have tried this in chrome and ie. I have a question is it bad or what are the disadvantages of doing what I am going to explain. I want to put the same javascript file two time in the same page e-g Code: <script type="text/javascript" src="http://www.mydomain.com/javascript.js"></script> <script type="text/javascript" src="http://www.mydomain.com/javascript.js"></script> Now many people will ask why would I want to do that, well the reason is that I am using blogger and blogger doesn't let me see all code from which the page is made rather split it into two parts named as POSTS and EDIT HTML. So I am going to place this script in those both areas but at the end when the page loads it is actually going to two the same script two times which is not error. Another question would be why am I not using same script in one place rather than two places if at the end the page code is going to become one. Well the answer would be because that script is used by other scripts too so I CAN'T CHANGE THE LOCATION if I do so, then the script stops working. Hello to all ... I am very basic on this of javascript, so someone could help me how to resolve this issue. I have a javascript (HTML internal), which fetches and executes a file in another web address... but I do not want it to do that, i want this script to execute is function directly from my local disk (file location). Here is the script; Code: <html>
<head></head>
<body>
<div style="WIDTH: 984px; HEIGHT: 443px" >
<script type="text/javascript">
var previewConfigs = [{
type: 'flash',
preview_url: "http://myflashtest.com/files/9083/preview.swf",
base: "http://myflashtest/files/9083/"
}];
</script>
<span id="large_item_preview">
<object style="visibility: visible; Z-INDEX: 0; WIDTH: 590px; HEIGHT: 300px; TOP: -51px; LEFT: -27px; " id="large_item_preview_container" data="srcs-ff/preview.swf"></object> </span>
<script type="text/javascript" src="srcs-ff/jquery.js">
</script>
<script type="text/javascript" src="srcs-ff/preview.js">
</script>
<script type="text/javascript">
if (typeof(previewConfigs) !== 'undefined') {
for (var i = 0; i < previewConfigs.length; i += 1) {
var preview = new ItemPreview(previewConfigs[i]);
preview.display();
};
};
</script>
<script type="text/javascript">
$(document).ready(function() {
$("tr[data-accessor=source]").click();
});
</script>
</div>
</body>
</html>
<b>What I want is to change this part;</b>; preview_url: "http://myflashtest.com/files/9083/preview.swf", base: "http://myflashtest/files/9083/" Hello, I have a DFXP formatted XML file (used for closed captioning), and I have tried several times unsuccessfully to load and show its contents on screen using js. Here is what the XML looks like Code: <tt xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling" xmlns="http://www.w3.org/2006/04/ttaf1" xml:lang=""> <head> <styling> <style tts:fontSize="14" tts:textAlign="center" tts:wrapOption="wrap" id="1"/> </styling> </head> <body> <div xml:lang="en"> <p begin="00:00:01.45" style="1" end="00:00:03.55"> PROFESSOR: Welcome to your <br/> virtual classroom. </p> </div> </body> </tt> I have the URL of the file and all I want to do is print the text onto the screen (the "PROFESSOR: Welcome to your virtual classroom." portion). If anyone can help me out I would greatly appreciate it, I'm stuck! I have looked all over for an answer to this, but haven't found a definite way to do it yet. I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this. The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play. Any help would be greatly appreciated, Thanks! Hey everyone, I currently have a grid of thumnails which when clicked will load an image at the top of the page without reloading the page using the following JS: Code: <a href="JavaScript:;" onClick="JavaScript:document.all.Main.src='images/image01.png';"><img src='images/image01thumb.png'></a> This works wonderfully, However, what I need to do now is to produce the same thing but instead of loading an image, load an html file into the page without reloading. Is there a way I could use a similarly simple solution? Thanks Is there a way onclick to load external html into a DIV tag, but without iFrame usage?
Hi i am using javascript for the first time and i have a problem .I have 2 files html and javascript file in seperate but i donot know how to make them work .the code is down below .Thanks in advance for help. HTML <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <meta name="description" content="Instagram API - usage" /> <meta charset=utf-8 /> <title></title> </head> <body> <input id="lat_input" type="number" value="60.221374"/> <input id="lng_input" type="number" value="24.805391"/> <button id="search_location">Search</button><br/> <button id="get_popular">Get popular</button> <div id="images"></div> </body> </html> Javascript file // API DOCUMENTATION: // Instagram Developer Documentation var clientId = 'e7538f47e197479d8d32a63ae3ae4cd2'; $('#search_location').click(function () { getMediaByLocation($('#lat_input').val(), $('#lng_input').val()); }); $('#get_popular').click(function () { getPopularImages(); }); function getMediaByLocation(lat, lng) { var o = { lat: lat, lng: lng, client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/search?callback=?', o, function (response) { processImages(response.data); }); } function getPopularImages() { var o = { client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/popular?callback=?', o, function (response) { processImages(response.data); }); } function processImages(array) { $('#images').empty(); $.each(array, function (index, element) { var fs = $('<fieldset>').appendTo('#images'); $('<img>').attr('src', element.images.low_resolution.url).appendTo(fs); if (element.caption) { $('<pre>').text(element.caption.text).appendTo(fs); } $.each(element.comments.data, function (index, comment) { $('<pre>').text('Comment from ' + comment.from.full_name + ': ' + comment.text).appendTo(fs); }); }); } Does anyone know how to accomplish this? I got the html file to show but none of the text in the file will show.
|
|||||||