|
JavaScript - Opening Up A Webpage Within A Div Tag
Hello all,
I'm trying to open up an internal link from my leftnav div into my content div. I used the following JS code from my book but im not quite sure how to make it all work. Any thoughts appreciated. Thank you Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--header script starts here -->
<script type="text/javascript">
window.onload = initlinks;
function initlinks() {
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = setContent;
}
}
function setContent() {
document.getElementById("content").contentWindow.document.location.href = this.href;
return false;
}
</script>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#header
{
height: 60px;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#leftnav
{
float: left;
width: 160px;
height: 380px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
height: 380px;
}
</style>
<title>JavaScript</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>JavaScript</h1>
</div>
<div id="leftnav">
<p>
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
</p>
</div>
<!--Div to load content into-->
<div id="content">
<h2>Subheading</h2>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel erat volutpat.
</p>
</div>
</div>
</body>
</html>
Similar TutorialsI am trying to write a javascript to open multiple websites in the same window for Internet Explorer. However I keep getting the website opening in a new window. Here is my code. Code: var url = [
"http://www.google.com",
"http://www.yahoo.com",
"http://www.msn.com"
];
var interval = 3000;
var startTime = 0;
for (i = 0; i < url.length; i++) {
startTime = startTime + interval;
setTimeout("openWindow("+i+")", startTime);
}
function openWindow(num) {
window.open(url[num],'mywindow','width=800,height=600,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes');
}
So currently, this code behaves like this. Every 3 seconds, it opens up a new website. However this code I wrote opens google.com in a new window, then yahoo.com in a new window and so on. I want it to open all the websites in the same window. How do I achieve this? You can see the website here with all the code to make it easier for you to diagnose what is happening: Code: http://www.fdfdaa.com/desktop/desktop.html When you go to the start menu and select anything on the left side, you will see that windows open 100% of the screen by default. I did that by adding maximized:true but that doesn't appear to be working for the icons on the desktop itself. If you click on one of those 4 icons on the desktop though, it isn't opening at 100% for some reason. You can see my classes file here as well: Code: http://www.fdfdaa.com/desktop/classes.js Any help will be greatly appreciated. Thank you for your time! Hi, I need to open a PDF file via a web page. Basically, I want to have a textbox where I type in a filename and then click submit and it will open that document. For example, I need to open a PDF document... I need to have a text box where I can input "test1" for example, click "GO" and it will add the "C:/test/" + textbox value + ".pdf" and open it in the browser. I could do it in PHP but this is going to run on a local machine with no serverside so I assume JS will be the way forward. Any ideas? Many Thanks MJFCAD Ok, newbie here. Like, REAL new. Anyway, used some script for an animated drop down menu from clarklab.net. I want users to click on menu to expand to sub's, but I can't figure out how to fix it from expanding every single one. I also want users to be able to close back up. Help? I am ready to jump. Thanks Here is the site, vertical navigation on left side: Here's ma' code Code: <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});
$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});
$('ul.menu_body li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>
Code: <div class="container">
<div class="menu_head_nodrop"><p><a href="administrativeservices.html">Administrative Services</a></p>
</div>
<div class="menu_head_nodrop">
<p><a href="birthdeathcertificates.html">Birth & Death Records</a></p>
</div><div class="menu_head">
<p>Construction Programs</p>
</div>
<ul class="menu_body">
<li><a href="manufacturedhomes.html">Manufactured Homes Installation</a></li>
<li><a href="plumbingprogram.html">Plumbing Inspections</a></li>
<li><a href="healthyhomes.html">Healthy Homes</a></li>
</ul><div class="menu_head">
<p>Environmental Health</p>
</div><ul class="menu_body">
<li><a href="environmentalhealth.html">Beach Monitoring</a></li>
<li><a href="rabies.html">Rabies Control</a></li>
<li><a href="foodprotection.html">Food Service</a></li>
<li><a href="householdsewage.html">Sewage Treatment Systems</a></li>
<li><a href="Radon.html">Radon</a></li>
<li><a href="leadsafety.html">Lead Safety</a></li>
<li><a href="manufacturedhome.html">Manufactured Home Parks</a></li>
<li><a href="marinas.html">Marinas</a></li>
<li><a href="http://0052c90.netsolhost.com/nuisance.html">Nuisance Complaints</a></li>
<li><a href="privatewater.html">Private Water Systems</a></li>
<li><a href="poolandspa.html">Public Swimming Pools & Spas</a></li>
<li><a href="realestatesurveys.html">Real Estate Surveys</a></li>
<li><a href="rvparks.html">RV Parks & Campgrounds</a></li>
<li><a href="http://www.odh.ohio.gov/odhPrograms/eh/schooleh/sehmain.aspx" target="_blank">Schools</a></li>
<li><a href="tattooandbody.html">Tattoo & Body Piercing</a></li>
</ul><div class="menu_head">
<p>Health Education & Outreach</p>
</div><ul class="menu_body">
<li><a href="communityhealth.html">Community Health</a></li>
<li><a href="http://www.scrubclub.org/home.aspx" target="_blank">Handwashing</a></li>
<li><a href="healthyhomes.html">Healthy Homes</a></li>
<li><a href="leadsafety.html">Lead Safety</a></li>
<li><a href="lifeskills.html">LifeSkills</a>
<li><a href="schoolwellness.html">School Wellness</a>
<li><a href="smokefreeworkplace.html">Smoke Free Workplace</a></li>
<li><a href="teenpregnancy.html">Teen Pregnancy Prevention</a></li>
</ul><div class="menu_head">
<p>Nursing & Clinic Services</p>
</div><ul class="menu_body">
<li><a href="familypractice.html">Family Practice Services</a></li>
<li><a href="bccpinfo.html">Breast & Cervical Cancer Program</a></li>
<li><a href="childrenshealth.html">Sports & Work Physicals</a></li>
<li><a href="specialneedschildren.html">Children with Special Needs</a></li>
<li><a href="communicabledisease.html">Communicable Disease</a></li>
<li><a href="familyplanningclinic.html">Family Planning</a></li>
<li><a href="helpmegrow.html">Help Me Grow</a></li>
<li><a href="HIVAIDS.html">HIV/AIDS Testing</a></li>
<li><a href="homehealthcare.html">Home Health Care</a></li>
<li><a href="immunizationfaqs.html">Immunization/Shots</a></li>
<li><a href="leadscreeningandtesting.html">Lead Screening & Testing</a></li>
<li><a href="prenatalclinic.html">Pregnancy Testing & Assistance</a></li>
<li><a href="schoolnursing.html">School Nursing</a></li>
<li><a href="seniorclinic.html">Senior Clinic</a></li>
<li><a href="specialtyclinics.html">Outreach Clinics</a></li>
<li><a href="HIVAIDS.html">STD Clinic</a></li>
<li><a href="tbtesting.html">TB Testing</a></li>
</ul><div class="menu_head">
<p>Public Health Preparedness</p>
</div><ul class="menu_body">
<li><a href="publichealth.html">General Information</a></li>
<li><a href="medicalreservecorps.html">Medical Reserve Corps</a></li>
</ul><div class="menu_head">
<p>WIC</p>
</div><ul class="menu_body">
<li><a href="wic.html">WIC Services</a></li>
<li><a href="http://www.odh.ohio.gov/odhPrograms/ns/wicn/wic1.aspx" target="_blank">Learn More About WIC</a></li>
</ul>
</div>
I want to open a new tab "http://www.example.com/" when the user presses a key. How can this be done?
is there a way in HTML or Javascript to open a new window and force it to be a new Window, not a new tab? and also avoid popup blockers??
I am facing problem in IE6.x.x. when opening pdf document for modaldialog. Some security warning appears and the PDF not getting open. Can you suggest how to solve this problem. This happens only in some machine. We checked all the browser settings in the PC.Any suggesstions please? Getting : Security Warning instead of opening PDF. In the warning pop up i can see file name : my URL[The PDF open URL formed in java side with the report name and pasing parameters] File type : Un known file type If i click "open", or "save" or "Cancel" the window is getting closed. I checked the browser setting also. Everything is fine. Please note : This happens only in some machine, not every time.The problem only occurs first time for the user and from next time he is not getting this problem again[Rare case]. All documents are getting opened successfully. Please post me if any body facing this problem and let me know the solutions if any. Thanks in advance. Hey Guys, I feel like a complete idiot posting this, but I clearly am missing something. I'm trying to open a window with the specs below but all it does is open a standard sized window. Any help would be greatly appreciated. Code: <SCRIPT LANGUAGE="javascript">
function open_window() {
window.open ('https://domain.com/document.php','newwindow',config='height=418,width=590,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,directories=no,status=no')
}
</SCRIPT>
<p><a onclick="open_window()"><img src="images/image.png" width="142" height="113" /></a></p>
Hello, I need your help, I have the following code below, and its giving me an error saying: "The system cannot find the file specified". Code: <html>
<script language="javascript" type="text/javascript">
function start_ccm(){
var wsh = new ActiveXObject('WScript.Shell');
wsh.exec("C:\Program Files\WorkDynamics Technologies\ccmApplications\ccmMercury.exe")
}
</script>
</head>
<body>
<input id="Button1" onclick="start_ccm()" type="button" value="START" />
</body>
</html>
There is nothing wrong with the location, but my best guess are the spaces in the file path. Any help with this is greatly appreciated. Cheers, J Hi, I am having some problems with this modified version of Lightbox. I had a programmer implement this into the site and then one day it just stopped working. I'm trying to fix it myself, with no success. To view the problem go to: http://www.uscgq.com/question/deck/2 and click the red flag icon. The lightbox opens, but only shows the "Loading" message. I have isolated the problem to somewhere in the Lightbox.js just don't know where or what it is. Any help is greatly appreciated! Code: /*
Created By: Chris Campbell
Website: http://particletree.com
Date: 2/1/2006
Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
*/
/*-------------------------------GLOBAL VARIABLES------------------------------------*/
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;
/*-----------------------------------------------------------------------------------------------*/
//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
function getBrowserInfo() {
if (checkIt('konqueror')) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible')) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";
if (!version) version = detect.charAt(place + thestring.length);
if (!OS) {
if (checkIt('linux')) OS = "Linux";
else if (checkIt('x11')) OS = "Unix";
else if (checkIt('mac')) OS = "Mac"
else if (checkIt('win')) OS = "Windows"
else OS = "an unknown operating system";
}
}
function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
/*-----------------------------------------------------------------------------------------------*/
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);
var lightbox = Class.create();
lightbox.prototype = {
yPos : 0,
xPos : 0,
initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
this.getScroll();
this.prepareIE('100%', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');
}
this.displayLightbox("block");
},
// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},
// In IE, select elements hover on top of the lightbox
hideSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},
// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},
setScroll: function(x, y){
window.scrollTo(x, y);
},
displayLightbox: function(display){
$('overlay').style.display = display;
$('lightbox').style.display = display;
if(display != 'none') this.loadInfo();
},
// Begin Ajax request based off of the href of the clicked linked
loadInfo: function() {
var myAjax = new Ajax.Request(
this.content,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Display Ajax response
processInfo: function(response){
console.log('calling process info');
if($('lbHeader'))
Element.remove($('lbHeader'));
info = "<div id=\"lbHeader\"><a href=\"javascript: closeLightboxes();\">close</a> or hit ESC</div><div id='lbContent'>" + response.responseText + "</div>";
new Insertion.Before($('lbLoadMessage'), info)
$('lightbox').className = "done";
this.actions();
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName('lbAction');
for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
},
// Example of creating your own functionality once lightbox is initiated
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));
var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Example of creating your own functionality once lightbox is initiated
deactivate: function(){
if($('lbHeader'))
Element.remove($('lbHeader'));
Element.remove($('lbContent'));
if (browser == "Internet Explorer"){
this.setScroll(0,this.yPos);
this.prepareIE("auto", "auto");
this.hideSelects("visible");
}
this.displayLightbox("none");
}
}
/*-----------------------------------------------------------------------------------------------*/
// Onload, make all links that need to trigger a lightbox active
function initialize(){
addLightboxMarkup();
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0];
overlay = document.createElement('div');
overlay.id = 'overlay';
lb = document.createElement('div');
lb.id = 'lightbox';
lb.className = 'loading';
lb.innerHTML = '<div id="lbLoadMessage">' +
'<p>Loading</p>' +
'</div>';
bod.appendChild(overlay);
bod.appendChild(lb);
}
// Send AJAX Call
function sendForm(url)
{
new Ajax.Updater('lbContent', url, { method: 'post', parameters: Form.serialize($('content_form'),true) });
}
// Function to destroy lightbox elements
function closeLightboxes()
{
if(lightbox.prototype)
lightbox.prototype.displayLightbox('none');
if($('lbHeader'))
Element.remove($('lbHeader'));
if($('lbContent'))
Element.remove($('lbContent'));
}
// Close the lightbox if ESC is pressed
document.onkeypress=function(e){
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if(KeyID == 27)
{
closeLightboxes();
}
}
Anyone familiar with Squeezebox (http://digitarald.de/project/squeezebox/), any ideas of the best way to open this via an onclick?
Guys, this is a script which runs on a Mac not a browser. I have created a script which transfers data from an Excel CSV file into an In-Design document and formats it, I am now just trying to take out some of the options for human error. I need the script to Open the Excel file which has been selected by dialog box and then save it to the desktop as a csv file. I thought this bit would be simple, but I cannot get the file to even open. Help please, Nick ok so here what i want to do (im a noob): i want a dropdown menu i want a button (go) i want ten different items in the dropdown menu if i choose the first item and click go i want a new page to open in the same window if i choose the second item and click go i want to a different page to open in the same window and so on all ten items lead to a different link when i click go....how do i do this?? thanks!! Hello, I am in the midst of designing an HTA application, such that I would be able to open a file via notepad in Javascript using the Shell.Application object. I have the following code, however, It does not work and can't seem to figure the rest out. Code: function test101() {
var oShell = new ActiveXObject("Shell.Application")
var commandtoRun = 'C:\\WINDOWS\\system32\\notepad.exe "F:\\WEB\\saved items\\A-2010-00455.txt"'
oShell.ShellExecute(commandtoRun,"","","open","1");
}
Any help with this is greatly appreciated. Thanks in advance. Cheers, Jay Hi there all, Trying to adapt a bit of Code, but failing wonderfully! I'm writing in Cold Fusion, but using a little java script to create the sliding effect. It's from a sliding open list function in another site, and I tried to just hack my current needs in there. Code: <script>
function DC_ShowHideMoreWebsites(id) {
if( document.getElementById( "contentsections2").style.display=="none" ) {
Effect.BlindDown( "contentsections2");
return false;
} else {
Effect.SlideUp( "contentsections2" ); return false;
}
}
</script>
is followed by Code: <p id="moreScreenshots"><a href="#" onclick="DC_ShowHideMoreWebsites"; return false;">More Website Examples</a></p> I've tested the script, div and the DB call by just calling it with Code: <p id="moreScreenshots"><a href="#" onclick="Effect.BlindDown('contentsections2'); return false;">More Website Examples</a></p>
And that works fine. I've never coded in Java, hence the problem! any help appreciated Doing a bit of window-opening: the idea is, when a link is clicked, it selects a random one from an array of urls, and then opens it with certain toolbars missing. Got a script for each part, but not sure how to combine them: ' location ' seems to be talking about different things in each script. the random script: Code: var single = new Array ("a.htm","b.htm","z.htm")
function choose(){
window. location =choose[Math.floor(Math.random()*single.length)] }
the opener script: Code: function open() {
window.open('myurl',' location =no,toolbar=1, directories=no,status=no,menubar=no,resizable=yes,scrollbars=yes') }
Any suggestions? (No comments plz about removing toolbars: still experimenting, and the viewer won't be left stranded). Hi all, I am somewhat new to JavaScript and am having a small problem. I am building an experimental website that contains music. It's called url removed. To navigate around the website there is a graphic of a piano keyboard and if you click on an individual key you can go to "Home", "Recordings", "Contact", or "Jukebox". My problem is with the key labeled "Jukebox". I have the graphic set up using an Area Map. When you click on the area that says "Jukebox", it is supposed to open a small pop up window with the jukebox of tunes. It works great but it navigates away from the website and the larger window behind the jukebox is just a plain white window and says [object] on it. Here is the area map code I am using containing the javascript: Code: <AREA SHAPE="rect" HREF="javascript:window.open('ShirleyLee.html','jukebox',
'toolbar=0, location=0, directories=0, status=0,menubar=0, scrollbars=1,
resizable=0, copyhistory=0, left=0,top=0, screenX=0, screenY=0, width=410, height=300')";
onMouseover="document.roll.src=F1_Down.src" onMouseout="document.roll.src=KeysUp.src" COORDS="233,344,335,384" NAME="roll" ALT="F1">
Would someone be able to show me how to open the pop up and stay on my site? Thanks! Dan hello everybody, I need help about, I need to change the result to opening a url page. This script results in a value and I need the result to be open a url page. Can anyone help me?? <SCRIPT language="Javascript"> nome = new Array(4); nome[0] = new Array(4); nome[1] = new Array(4); nome[2] = new Array(4); nome[3] = new Array(4); nome[0][0]="1500"; nome[0][1]="1250"; nome[0][2]="1300"; nome[1][0]="800"; nome[1][1]="850"; nome[1][2]="900"; nome[2][0]="500"; nome[2][1]="520"; nome[2][2]="540"; nome[3][0]="400"; nome[3][1]="356"; nome[3][2]="234"; function affi() { document.form.txt.value=nome[document.form.liste.selectedIndex][document.form.taille.selectedIndex]; } </SCRIPT> <form name="form" class="texto" > Choose the article : <select name="liste"> <option>Camisas <option>Polos <option>T-shirts <option>base corporal </select> <br> Choose the size: <select name="taille"> <option>T. Small <option>T. Médium <option>T. Large </select> <br> <input type="button" value="Obter preço" onClick="affi(this.form)" name="button"> <br> <br> <input type="TEXT" name="txt"> </form> Thank's in advance rui |
|||||||