|
JavaScript - Problem In Changing Page Source
Dear all,
I am trying to set up a web site for an art gallery. That is for new talents so I have no budget. I am not a web designer and I am facing some barriers. Maybe some of you could help me. My problem is, I guess, about going around with the DOM node tree. My page looks like this: FRAME 1 - Header FRAME 2 - Navigation bar FRAME 3 - Has arrows for scrolling iframe 3.1 ---- iframe 3.1 - has thumbnails FRAME 4 - First for query and after shows the enlarged pictures of thumbnails FRAME 5 - Has arrows for scrolling iframe 5.1 ---iframe 5.1 Has text explaining pictures in frame 4 How it works: In first place, after page has been loaded, I am using frame 4 to run a HTML form. After submit, iframe 3.1 is populated with thumbnails according to the query. When a thumbnail is clicked, I succeeded in bringing the corresponding text, talking about the artwork, on iframe 5.1 to do so, I change the html source in iframe 5.1 I am using for that: top.frames['frame5_id'].document.getElementById('iframe 5.1_id').src=new_source.html; The idea was about doing the same with the frame 4 that is for a larger picture of the artwork. But first I need to get rid of the form once it was submitted (bring a new HTML with a dummy transparent gif to be swapped with the desired picture). But how can I bring a new html in frame 4? After the form is submitted the 'action' moves to iframe 3.1 I tried changing the html source using getElementById but I could not find a way to get to the right object. So my questions a Two src attibutes must be changed with code written in iframe 3.1. (where the thumbnails are clicked). But... How can I address and change the HTML src code in FRAME 4 ? How can I address and change the src image in the new code loaded in FRAME 4 ? I have both attributes in variables but don't know how to get to the target elements Thanks for any help. regards, wagner Similar TutorialsOk, from the beginning. I have written a HTML5 player with controls and stuff. But I have one problem. After using switch-to-HD option the controls (like full screen) stops working. And in Firebug I see strange behaviour when switching back from HD (press HD, let it load and press HD again) - it seem like every event is triggered two times, and then more and more. What can I do with all of it? And it seems that there is a 'ghost' of the player that was before, cause it still plays when I switch to HD. The player is he http://secondgate.pl/temporary/nttp/ I also tried differend method for switching the source, using .load(). But it seems that Firefox can't load the movie after that and Chrome sets the volume to 100%, so it didn't work either. The player from this method is he http://secondgate.pl/temporary/tpp_004/ I would be mostly grateful for help. I know it's a lot of code, but it's all commented. I have no idea what am I doing wrong and I'm sitting like a week in front of it. I am looking for an input text that links to a iframe. . ? To begin, we need some simple HTML elements: A basic form; An Input text that will contain the URLs we want to use; An iFrame that will display the page we select from the input text. Thanks in advance Stickers Ok, 'nother head-banger for the hardcore! I have a "contact us" <a> with the id 'contact' on the main page, which is supposed to change the source file of an iframe to the contact page. Except when I click on "contact us" nothing happens. I've tried to get this to work several different ways, and suspect that the problem is purely syntax, but I just haven't been able to figure it out. Here's the code: The snippet on the main page (index.html): Code:
<div id="linkListContact" class="LinkList">
<img id="linkListContactBg" class="SideBarBgImg" src="Assets/Backgrounds/SideBar/ContactBg.png"></img>
<span>
<ul>
<li>
<div><a id="contact">Contact Us</a>
</div>
</li>
</ul>
</span>
</div>
... and the relevant Javascript: Code:
function setIFrame(frameSource)
{
document.getElementById('mainWindow').src = frameSource;
}
function setContactLink()
{
var contactURL = "http://katabasis.spreadshirt.com/shop/imprint"
document.getElementById('contact').onclick = new Function ( "setIFrame( 'contactURL' )" );
}
The setIFrame function is used to call the content initially when the page loads, and is working beautifully in that context. You can see the problem in action at the actual site: www.katabasis-apparel.com. Thanks. Hi, i am very new to this place..so if i make nay mistakes, am sorry. and i am rookie at coding..so i may sound dumb... I wanted to know, if there is any method by which i can get the source code of a webpage in a program by using the URL. what i want to do is that am developing a javascript webpage which requires some info to be taken out of a certain webpage, and in the url of that webpage i can enter the query, so i wanted to know if there was any method to get the source of the webpage and store it in a varabile so i can scan it for the required info. Thanks. I am fairly new to JavaScript and I have been searching and searching and I cannot get a clear cut answer to my question. Here is what I am trying to accomplish: I want to gather the html source code from a particular sports score site and then store specifics of that resulting html (ie: the actual game scores) as strings, which I will then call in a windows sidebar gadget. Aside from actually getting the source code stored as a string, I would need to know how to then find a part of that string (ie: the text between "Last:" and "</") and store it as a separate variable. From what I have seen online I need to be using XMLHttpRequest... but I am completely lost when it comes to this. Can someone please give me a hand. Thanks in advanced. Please be as specific as possible. I know that when you "display: none" with CSS it will not show the div content in the browser, but will still show the div and content in page source. Is there a way (via javascript or anything else) to also remove the content from page source at the same time? Thanks. This is my first post on this website. It has a very clean design to it. I think I am going to enjoy myself here :P I am taking a class. And I am very sorry if this post does not belong here. It is a JavaScript class so, my guess was here. My professor has giving us three page sources from random sites. I can not figure this out though. This question has a page source from some random math test website. What we are to do with this page source is to figure out the ten correct answers to the question in the page source. No, not by doing the math, but figuring out where in the page source it is hiding. I can not find them for the life of me. I got the other two problems, but of course this is the hardest one Thank you for your help I put the page source in a notepad attach to this post. (My professor has removed parts of codes that included the name of the website he had gotten it off of. He also said the page source may need to be decoded.) I think I found what I am looking for. If you look where question one starts. Itll have <input type="hidden" name="corAns" value="27478035"> But, the answers are A, B, C, and D which would be 1, 2, 3, and 4 for D. So is <input type="hidden" name="numAns" value="4"> The correct line? I think that is to easier. He said this assignment was the hardest out of the three, and well, that was to easy? I have created and opened a new window using Javascript and written to it with the document.write Command. When I click "View" and then "Page Source" (Firefox) to view the source of it, however, it displays a blank page. How can I get the source of a window I created? Thank You Charles Im very new to java scripting so any help would be truly appreciated. I have a single web page that loads several iframes. One of the iframe pages has to be logged in first. I have that taken care of but once the page is loaded I need to change the source to a link with in the page. My guess is I need something to execute the code like a onload or something. This is what Ive been trying to get to work but like I said a newb! The iframe in question is named "cad" the initial source once loaded is 'https://urlname.com/mainmenu.asp' the source I need to change to is 'https://urlname.com/UnitStatusF.asp?agency_id=28' [CODE] function ChangesSrc() { var iframeid = document.getElementById(cad); var unitstatus = 'https://urlname.com/UnitStatusF.asp?agency_id=28' if (iframeid.src = 'https://urlname.com/mainmenu.asp') iframeid.src = unitstaus; return false; } [[CODE] recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source." this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before? Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end. In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content. Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code: (function() {
var as,ae;
as = document.getElementsByTagName("img");
for (var i = 0; i < as.length; i++) {
ae = as[i];
ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail");
}
})();
Hi, Im not sure if im going about this the right way but what I'm trying to achieve is to have my webpage seperated into two main div's. The first div contains a media player so it cant be refreshed or the media stops. The second div is used to view content. I've used innerHTML to change the content of the second div from links in the first. The problem is the URL displayed doesn't reflect the change in content of the second div. I want to be able to load content into the second div using innerHTML while changing the URL so people can link directly to that content. Any help or alternative ideas are greatly apprectiated. Thanks. How are you guys? Is there a possible thing? I've got 16 pages, one for each of 16 days. Then I've got index page. Where will be mine usual stuff but I want to add 16 visible buttons and under each button will be its content, let say for example a picture with some text. I need automatically when user open mine index for example 3rd to show 3rd picture with some text. Is that possible? To be more specific. I need some content to be automatically changed from 1st of January 2010 to 17th of January 2010. hi, have a series of 2 pages. The first is a drop down select box that gathers the state name. Onclick we are using a window.open to open a page with a list of cities for that state. Again using a drop down select box to select the city and then, onclick, we send the user off to the appropriate page based on state/city selection while at the same time updating the 1st (parent) page with a new location.href. Problem is that instead of updating the parent page, it updates the page with the list of cities (the child page). On the first page script we generate the following warning: Warning: XUL box for _moz_generated_content_after element contained an inline #text child, forcing all its children to be wrapped in a block. Source File: chrome://browser/content/browser.xul Line: 0 First page is not generated via javascript but standard html. This happens both locally and when pages are moved to the server (Apache). First page script is as follows Code: <HTML>
<HEAD>
<TITLE>J1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function StateSelect (form) {
Item = form.state.selectedIndex;
Result = form.state.options[Item].value;
window.open('j2.htm?value='+ Result,'myWindow','resizeable=no,resizeable=0,scrollbars=no,scrollbars=0,location=no,location=0,toolbar=no,toolbar=0,directories=no,directories=0,menubar=no,menubar=0,status=no,status=0,copyhistory=no,copyhistory=0,width=300,height=100,left=300,top=300,screenX=300,screenY=300')
}
</SCRIPT>
</HEAD>
2nd page (where user selects city) code is as follows: Code: <SCRIPT LANGUAGE="JavaScript">
function CitySelect (form) {
Item = form.city.selectedIndex;
city = form.city.options[Item].value;
state = document.myform.state.value;
window.open('j3.htm','mywindow3')
setTimeout("Func1()",3000);
}
function Func1()
{
parent.location.href='j4.htm?st='+ state + '&city=' + city,'mywinow2';
}
</SCRIPT>
Ideas on why and what the error (actually a warning) is trying to tell us? Thank you all! Jim Hello all, I want to set dynamically a div's background image when the page loads, so I have my code like so: javascript code: window.onload = init; function init(){ $(document).ready(function(){ $('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)'); $('#pg1').css('color', 'black'); $('#pg1').css('font-weight', 'normal'); }); } My CSS stylesheet is like so: #buttonsWrapper { position:relative; margin 50px 0px 0px 0px; } .buttons { text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:17px; font-weight:bold; color:#FFF; } #button1 { margin: 31px 0px 0px 0px; } #button2 { margin: -43px 0px 0px 195px; } #button3 { margin: -43px 0px 0px 390px; } #button4 { margin: -43px 0px 0px 585px; } #button5 { margin: -43px 0px 0px 780px; } #button1, #button2, #button3, #button4, #button5 { width:172px; height:33px; /* 33px */ padding-top:10px; text-align:center; } #button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover { background-image:url(../imagenes/buttonNormal.jpg); background-repeat:no-repeat; background-position:top; } My HTML sourcecode is like so: <div id="buttonsWrapper"> <div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div> <div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div> <div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div> <div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div> <div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div> </div> The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong? Thank you so much in advance... I have problem ,the code cannot operate. I would like your opinion.The user must select in dropdown list having one display of image every time.Thanks js code Code: var sel = document.getElementById("sw");
function f1(){
var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi'];
var im = document.getElementById("pic");
im.src = imgs[this.selectedIndex];
}
html code Code: <img id="pic" src="chart1.cgi" /> <select name="sw" id="sw" onchange = "f1()" > <option value="s1">what</option> <option value="s2">whatever 2</option> <option value="s3">whatever 3</option> <option value="s4">whatever 4</option> </select> Here is my script -- Applied in <head> Code: <script language="JavaScript">
var bgImage = new Array(); // don't change this
bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";
function changeBG(bgImage)
{
document.body.background = backImage[bgImage];
}
</script>
And here is the code im using that is not working within <body> Code: <body>
<div id="map"></div>
<div id="bf_container" class="bf_container">
<div id="bf_background" class="bf_background">
<img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>
<div class="bf_overlay"></div>
<div id="bf_page_menu" class="bf_menu" >
<h1 class="title">Fujiyama<span>Japanese</span></h1>
<ul>
<li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
<li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>
this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1. Any help would be greatly appreciated. Thanks, Cross Watch the answer to this problem be simple... but when I tried searching for similar problems, I can't find anything that helps. On a website of mine, I have a picture that acts as the navigation. When the user hovers over it, it changes pictures to show one section lighting up and the text to show where that one links to under it. Later, I changed it to show, when the mouse isn't hovering over the picture, the pictures automatically scrolling on a timer to show all the options. While this works most of the time, I recently discovered the reason behind a 'glitch' my friend noticed... but I'm unsure of how to fix it. The problem is, when the mouse is already on the picture as the page loads, it starts the timer even though the mouse is there. This causes it to keep trying to switch the picture on its own even when hovering over the picture. And when the mouse is off the picture, it changes it twice at an odd interval. In other words, it's starting the timer up twice and only cuts one of them off when you hover over the image. Here's a link to the site so you can see for yourself: http://nebula-andra.com/ (And if links aren't allowed, just let me know and I'll remove it--it's simply easier to see) Here's the code I have for the image timer... In the header, in a Javascript tag: Code: var currPic = 0;
var totPics = 12;
var keepTime;
var picName;
function setupPicChange(){
keepTime=setTimeout("changePic()", 2000);
}
function changePic(){
currPic++;
if(currPic > totPics) currPic = 1;
document.getElementById("logos").src="../images/logo/NA Logo - " + currPic + ".png";
setupPicChange();
}
function stopTimer(){
clearTimeout(keepTime);
}
function startTimer(){
keepTime=setTimeout("changePic()", 2000);
}
In the body: Code: <body onload="setupPicChange();"> <div id="logo_setup"> <p align="center" onmouseover="stopTimer();" onmouseout="startTimer();"><img src="../images/logo/NA_Logo.png" id="logos" name="logos" border=0 usemap="#logo"> I want the timer to start without the user having to do anything and complete stop when the user hovers over the picture. If there's anything else you need to see to help with this problem, please let me know. And thank you for taking the time to read this; I look forward to any suggestions you can give me. Note: This is being tested in Chrome, but the problem has appeared in both Firefox and IE as well. Hi, I would like to ask if there is anyway to get a variable from any webpage source using javascript. Something like javascript: document.getelement? I am currently trying to write a javascript function which checks whether the source of an image is one thing, if so do this, if not do something else. Any help is much appreciated. Below is the code I have tried... Code: if(document.getElementById("field").src == "images/tick.png"){
alert("this is the tick image");
}
|
|||||||