Search the Community

I'm trying to create a section on a page where it displays a random image from a given folder on page load. I also want this image section to be somewhat transparent, so that the text in front of it is readable. Very sorry if I bungle the terminology, I'm relatively new at this: 1. What code should I use, or how do I write the code, to automatically load a random image from a folder as a <div> section "background-image" on page load? I know how to do this for one specific image, but I don't know how to point to folder full of images and then have it select one at random each time the page loads. 2. How do I make it so that the text on the page is centered within the boundaries of the image, and the image is somewhat transparent so that the dark grey background of the page causes the image to appear darker, in turn making the lighter text in front readable? Can all this be done using embedded CSS or will I need to learn some basic Javascript (at least for #1)? My website is set up so that the index.html page is in the root folder, and the images I want to randomly load are in a folder within that one called "img/". If you post any examples, I'd really appreciate it if they are either annotated so that an idiot like me could figure out how to apply them, or already formatted to suit my folder structure. Please be aware that it's also already running Bootstrap and Swipebox externally, so I'm trying to be mindful of overlapping labels that might cause this whole thing not to work. Thanks for reading!

I'm trying to load an xml file into an html file using jquery... i'm using jquery bc the site is built in Adobe's Business Catalyst and doesnt allow for any server-side scripting languages. The XML fIle is broken down into five sections - Corporation Builder Subdivision Plan and Spec- with child nodes within themThe following node names are in the following format (Parent Child). The data that I am trying to display are the: "Builder BrandName", "Spec SpecStreet1", "Spec SpecPrice", "Subdivision SubParentName", "Plan Description", "Spec SpecElevationImage", "Spec SpecBedrooms", "Spec SpecBaths", "Spec SpecSqft", "Spec SpecGarage"So far I've managed to .find and .append all the information in the correct format within its appropriate div with one exception - The data is being repeated around 78 times. Where there should only be one version of each address. So my question is:What can i do to continue displaying the data on my page (http://www.fallsatimperialoaks.com/home-inventory/index_copy.html) without having the data repeated?The XML File is located at http://www.fallsatimperialoaks.com/I8959.xml <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type:"GET", url:"/I8959.xml", dataType:"xml", success: function(data){ $('#load').fadeOut(); $(data).find("Builder").each(function(){ var Brandname = $(this).find("BrandName").text(); var Subdivision = $(this).find("Subdivision SubParentName").text(); $(data).find("Plan").each(function(){ var Description = $(this).find("Description").text(); $(data).find("Spec").each(function(){ var Address = $(this).find("Spec SpecStreet1").text(); var Price = $(this).find("Spec SpecPrice").text(); var Image = $(this).find("Spec SpecElevationImage").text() + '" width="220" height="124" alt="' + $(this).find("Spec SpecStreet1").text(); var Beds = $(this).find("Spec SpecBedrooms").text(); var Baths = $(this).find("Spec SpecBaths").text(); var Sqft = $(this).find("Spec SpecSqft").text(); var Garage = $(this).find("Spec SpecGarage").text();//Append to homecontainer $("#homecontainer").append(' <div class="address"> ' + Address + ' <br><span>Section: ' + Subdivision + '</span>' + '</div>' + ' <div class="price"> $' + Price + ' <br><span> ' + Brandname + ' </span>' + '</div>' + '<div class="clearboth"></div>' + ' <div class="home-image"><img src="' + Image + '"/>' +'</div>' + ' <div class="home-description"> ' + Description + '</div>' + '<div class="clearboth"></div>'); $("#homecontainer").append(' <div class="stats"><div class="beds"><img alt="" src="/images/ico-beds.png" style="border: 0px; width:22px;" /> ' + Beds + ' Bedroom(s)</div><div class="baths"><img alt="" src="/images/ico-baths.png" style="border: 0px; width:22px;" /> ' + Baths + ' Bath(s)</div><div class="sqft"><img alt="" src="/images/ico-sqft.png" style="border: 0px; width:22px;" /> ' + Sqft + ' Sq. Ft.</div><div class="garage"><img alt="" src="/images/ico-garage.png" style="border: 0px; width:22px;" /> ' + Garage + ' Car Garage</div></div>'); }); //End Data Function "Spec" }); //End Data Function "Plan" }); //End Data Function "Builder" }, error:function(){ $("#homecontainer").text('Failed to get feed'); } });}); </script> Any help is appreciated! 

I know i can use display:none, but the page has a lot of pics. The mobile page has less content and few pics. To load quicker and waste less bandwith i want to pics not to load on a mobile phone.How can I do that?

I have been working on this problem for a while now and don’t seem to be able to find a solution and was wondering if someone could help. I have a form which is submitted and passes two form object values and saves them to a text file held on the server, this works ok. After the submit button is pushed the file is saved with the function <?--#exec cmd_argument='SaveToFile("settings.cfg","#",Overwrite)'--> I read back the contents of the file and try to set the "selectedindex" on my speedUnits and rateUnits option list, however the option lists "selectindex" does not seem to update. I use an "input" "hidden" text field to hold the contents of the text file which is read in with the function <?--#exec cmd_argument='IncludeFile("settings.cfg")'--> My main HTML and Javascript are shown below and I was hoping something could give me some pointers. The "settings.cfg" contains designUnits#3 speedUnits#0 save#Submit Query settingsFile# <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR...tml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen"> <title>Siemens BW500</title> <script type="text/javascript" src="js/convert.js"></script> </head> <body> <div id="outer_wrapper"> <div id = "wrapper"> <div id = "banner"> <h1>BW500</h1> </div> <div id ="logo"> <img src="images/logo_siemens.jpg"> </div> <div id ="topnav"> <ul> <li><a id="onlink" href='index.html'>Process</a></li> <li><a href='status.html'>status</a></li> <li><a href='control.html'>Control</a></li> <li><a href='PID.html'>PID</a></li> <li><a href='spa.html'>Parameters</a></li> <li><a href='Manuals.html'>Manuals</a></li> <li><a href='network.html'>Network</a></li> </ul> </div> <div id ="data"> <form action="settings.html" method="get" id="unitsSetup" name="unitsSetup"> <table> <tr> <td>Design Units</td> <td><select name="designUnits"id="designUnits"> <option value="0">T/h(tons / hour)</option> <option value="1">t/h (tonnes / hour)</option> <option value="2">LT/h(long tons) / hour</option> <option value="3">kg/h (kilograms / hour)</option> <option value="4">lb/h(pounds / hour)</option> <option value="5">kg/min (kilograms / minute)</option> <option value="6"> lb/min (pounds / minute)</option> </td> </tr> <tr> <td>Design Speed Units</td> <td><select name="speedUnits" id="speedUnits"> <option value="0">Feet/min</option> <option value="1">Metres/s</option> </td> </tr> <tr> <td><input type="submit" name="save"></input></td> </tr> </table> <input type="hidden" name="settingsFile" id="settingsFile"value="<?--#exec cmd_argument='IncludeFile("settings.cfg")'-->"></input> <script language="javascript" type="text/javascript">readFileSettings()</script> </form> <?--#exec cmd_argument='SaveToFile("settings.cfg","#",Overwrite)'--> </div> <div id ="copywrite"> <p>Copywrite</p> </div> </div> </div> </body> </html> The Javascript function "readFileSettings() is shown below. function readFileSettings() { var readFile,designUnits,speedUnits; readFile =document.getElementById('settingsFile').value; designUnits = readFile.charAt(12); speedUnits = readFile.charAt(25); document.getElementById('speedUnits').selectedIndex = speedUnits; document.getElementById('designUnits').selectedIndex = designUnits; }

hey everyone :)I want make a tab use funtion java script , so every menu tap have form for input datamy problemo , when I doing input data the tab go to proses file inputI want when do input , stay at menu tab and dont move to file proces how for do it thjs befroe