|
JavaScript - Change Onload File To Onclick File
Hello all, I am new here and have a question about a AP Div I am using as a dropin. It drops in when the page loads and I would like it to only drop in if a visitor clicks a link I designate as the dropin link. Can someone please tell me how to accomplish this? I am pasting in the js file and I will also need to know how to set up the "a href" link to call the dropin! Thanks is advance for any help you may give!
Code: // JavaScript Document
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
var bouncelimit=32 //(must be divisible by 8)
var direction="up"
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
window.onload=window.setTimeout(initbox,5000);
Similar TutorialsHi guys, On the back of my image preview issue (which is now fixed) I am having another problem. I am trying to get a file upload that will allow you to preview the html page in a popup on the click of a button. Can this be done? I have the preview button that creates the popup but at the moment it only shows the name of the file that's to be uploaded. Code below Code: <html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form method='post' action='upload.php' enctype="multipart/form-data" class="pure-form">
<input type="file" name="files[]" multiple="multiple" id="files">
<input type="button" value="Preview" onclick="displayHTML(this.form)">
<input type='submit' value='Submit' class="pure-button pure-button-primary"/>
</form>
</body>
</html>
<script>
function displayHTML(form) {
var inf = form.files.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no');
win.document.write("" + inf + "");
}
</script>
Reply With Quote 01-24-2015, 04:56 PM #2 jmrker View Profile View Forum Posts Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts Can you use the right-click button on your mouse and "View Source", or is this not what you are trying to do? Reply With Quote 01-24-2015, 06:58 PM #3 Foster View Profile View Forum Posts Regular Coder Join Date Nov 2011 Posts 268 Thanks 8 Thanked 4 Times in 4 Posts Not what I'm trying to do. I want to be able to click the button and the file that is waiting to be opened should pop up in a new window. Reply With Quote 01-24-2015, 09:51 PM #4 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 LOOK at your code! Code: <input type="file" name=" files[] " ...rest doesn't matter... > and var inf = form. files .value; Those are *NOT* the same name in JavaScript. Only in PHP would the be (sort of) the same (and not even quite so, there). Anyway, I don't see how you can expect an HTML file that is not yet uploaded to look the same this way as it will coming from the server. ONLY if it is restricted as follows could you get the : (a) only <img> tags that use COMPLETE URLs as their src= (that is, src="http://somesite.com/somepath/someimage.pn") (b) only href's (in any kind of tag) that use COMPLETE urls. (c) only <script> tags that use src= complete urls. (d) probably other things I didn't think of Any RELATIVE urls (e.g., <img src="/images/xxx.png"/>) will be relative TO THE CLIENT MACHINE, not to the server. And how that relative path works may vary from browser to browser. Offhand, I'd say this is not a good idea. I think you should allow the upload and then preview the uploaded file in a popup window, yes, and give the user the opportunity to delete the just-uploaded file from the server. Hi I have created a page using tables and found abit of javascript off the net where I could get a little soundbite to play when an image is clicked. It worked fine. However I have now converted the page into CSS and even with using the same code the sound no longer plays. Can anyone share any light on this please?? here is a snippet of my page code that shows the javascript. Code: <title>Joho-Designs-Home</title>
<link rel="stylesheet" type="text/css" href="johogallery.css" />
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<li><embed name="mySound" src="sounds/SQUEAK3.wav" loop=false autostart=false hidden= true><a href="#" onclick="playSound('sounds/SQUEAK3.wav');"><img src="menu/row3sq3_squeak_OP.png" border="0" alt="1"/></a></li>
Thanks and look forward to replies!! Hi, I'm working on a small bit of code that passes a logged in users email address and name to a live chat form (Zompim & WHMCS) http://api.zopim.com/#setName By striping the code from the above page, I've managed to get it to work when the link is clicked, but I needed to have the variables passed upon page load. If anyone can point me in the right direction that would be great, me and Javascript don't work too well together! Here is what I have so far http://myautodj.com/zomp_test.php (your request a chat, and click on the run script link - that passes the demo email and name) Here is the code Code: <pre><script>
$zopim.livechat.set({
language: 'en',
name: 'Visitor',
email: 'visitor@site.com',
onStatus: function(s) { alert(s) }
});
</script></pre>
<script>
(function() {
var pres = document.getElementsByTagName('pre'), i;
for (i=0; i<pres.length; i++) {
buildLiveExample(pres[i]);
}
function buildLiveExample(p) {
var code = p.innerHTML.replace(/>/g, '>').replace(/</g, '<');
var div = document.createElement('div');
if (code.search('<script>') == 0) {
var a = document.createElement('a');
a.innerHTML = 'run script';
a.href = '#';
a.onclick = function() {
eval(code.replace(/<\/?script>/g, ''));
return false;
};
div.appendChild(a);
}
else {
div.innerHTML = code.replace(/<script>[\s\S]*?<\/script>/g, '')
var code_blocks = code.match(/<script>[\s\S]*?<\/script>/g);
if (code_blocks) {
for (var i=0; i<code_blocks.length; i++)
eval(code_blocks[i].replace(/<\/?script>/g, ''));
}
}
p.parentNode.insertBefore(div, p);
}
})()
</script>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + document.location.protocol + "//zopim.com/?4vXfkefMFbxeWAVPjvRvWnBodfrGzctq' charset='utf-8' type='text/javascript'%3E%3C/script%3E"));
</script>
Hi Guys, I want to call the below when the page opens as opposed to clicking a link How do I alter it and do i need a function? THANKS <a href="#" onclick="new Lightbox.base('box3', { closeOnOverlayClick : true })">LINK Hi, I am kinda new to java scripting and here is what i am trying to do. I have a folder "A" with 10 files, all with .txt extensions in it. I want a java script to open all the 10 files in the folder "A" and change the extensions to .js and save it in a folder "B". Can some one help. Thanks a lot in advance. 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/" hi all im trying to hide a div on page load, ive used this. Code: <script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";
}
hideDiv()
</script>
and this in the body tag Code: <body onload="javascript:hideDiv()"> it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show. can this be done? please help if you can this work has to be in soon I'm try to set up a webpge that will play a live flash video on the left-hand side(got that part working) and display one slide of a presentation(jpg) to the right of the video. I would like to be able to control when the slide image changes by having some js check a text file on my server. The text file could contain something as simple as "Slide1.jpg". I will manipulate the text file with some code I've already written. Is there some simple js code I can put in my page that will cause it to check the text file every 5 seconds, and if the content of the file has changed, to refresh the image on the page with the new image? I'm try to get away from the "clicking" sound that is caused by doing a simple refresh of an Iframe. I'm a complete novice at js, so any help would be appreciated. I'm also open to other solutions that would accomplish the same thing. Thanks, Mike Hello all, This is a follow up with a new question from a post I did last week. http://www.codingforums.com/showthre...098#post956098 I have an experimental website where I have music recordings. url removed When you open the site, each page uses a piano keyboard graphic to navigate between pages. If you click on a key that says "Jukebox" it will open a small window and continuously play tunes. The way the jukebox works basically is, when you click the jukebox key it calls an html file which contains the information needed to play the first song. When that song is finished it calls another html file with the information to play the second song and so on. Each html file contains an embedded Windows Media Player in it. I would like to give visitors the option to use the QuickTime player. So I can have one key in the keyboard graphic that say “Jukebox – for Windows Media Players” and then another key in the graphic that would say “Jukebox – for QuickTime players”. I would like to use both keys to call the same html file. So, in the file I would like to: 1. Determine which key was pressed in the graphic. (how to send a parameter from the keyboard graphic file indicating which key was pressed) 2. With that parameter I would then like to invoke the appropriate player. (how to receive that parameter) After the help I received last week I have my html in the keyboard graphic file set up as follows to call the first html file with the first song: Code: <AREA SHAPE="rect" HREF="#" onclick="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');return false;"onMouseover="document.roll.src=F1
_Down.src"onMouseout="document.roll.src=KeysUp.src"COORDS="
233,344,335,384" NAME="roll"ALT="F1">
I think we would be talking about the use of forms but not sure how to incorporate along with an onclick event.... The reason for this post is just to get some high level discussion ideas so that I can take that and go research how to do it. I could ask specifics later. Thanks! Dan I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Hello can please help convert this real simple slide show so that is plays immediately on page load. Thank you PHP Code: var ImgNum = 0; var ImgLength = NewImg.length - 1; //Time delay between Slides in milliseconds var delay = 7000; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.slideshow.src = NewImg[ImgNum]; } } function auto() { if (lock == true) { lock = false; window.clearInterval(run); } else if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } I have a simple html document that is dynamically created. It comes to me like this: <body> 432 (Locked) (Disabled) <br /> 545 (Unlocked) (Enabled) <br /> 756 (Unlocked) (Disabled) <br /> </body> The actual list is much longer and varies in length. What I am attempting to do is when a user opens the page, if a line contains Locked or Disabled, change the color of those words (or the whole line that contains them) to red. Thanks I can get this code to take two separate sections of a file which are not beside each other and write them into another file. It always comes up as a single full line of the code instead of the sections I want. The code includes the student number first name last name and three results of assignments. I want the code to write the student number and three results of all the students into a file and then work out the average of the student results. Can you help? Code: try{
while (in.hasNextLine())
{
String line = in.nextLine();
out.println( line);
int i=0;
if(!Character.isDigit(line.charAt(i))) { i++; }
studentStringNumber = line.substring(0, i);
String stringResult = line.substring(i);
studentStringNumber = studentStringNumber.trim();
stringResults = stringResults.trim();
double stringResultsValue = Double.parseDouble(stringResults.trim());
stringResults = in.nextLine();
studentStringNumber = in.nextLine();
studentNumber = Integer.parseInt(studentStringNumber);
if(in.hasNextInt())
{
int value = in.nextInt();
}
results = Double.parseDouble(stringResults);
if(in.hasNextDouble())
{
double value = in.nextDouble();
}
Scanner lineScanner = new Scanner(line);
studentStringNumber = lineScanner.next();
while(!lineScanner.hasNextDouble())
{
studentStringNumber = studentStringNumber+ " " +lineScanner.next();
}
stringResultsValue = lineScanner.nextDouble();
}
}
Hi, Can someone tell me what I am doing wrong. Script works on the first attachment but not the other two? Code: <script type="text/javascript" language="JavaScript"><!--
function ExtensionsOkay() {
var extension = new Array();
var fieldvalue = new Array();
fieldvalue[0] = document.customApp.attachment_1.value;
fieldvalue[1] = document.customApp.attachment_2.value;
fieldvalue[2] = document.customApp.attachment_3.value;
extension[0] = ".doc";
extension[1] = ".docx";
extension[2] = ".txt";
extension[3] = ".pdf";
// No other customization needed.
for(var f = 0; f < fieldvalue.length; f++) {
var thisext = fieldvalue[f].substr(fieldvalue[f].lastIndexOf('.'));
for(var i = 0; i < extension.length; i++) {
if(thisext == extension[i]) { return true; }
}
alert("Your upload field " + f + " contains an unapproved file name.");
return false;
}
}
//--></script>
Does anyone know how to accomplish this? I got the html file to show but none of the text in the file will show.
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); }); }); } All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero How do I change the Button's value onClick? I want it to initially be "Read More" and then change to "Show Less" Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >
I have managed to get my program running perfectly for outputting alert boxes, however instead of alert boxes I would like my image to change with an IF statement. My main image is a pic with text saying Please enter Temperature. if the user enters a temperature it will display an alert saying HOT, MODERATE or COLD. I have made other images that basically say the same thing and I would like the appropriate image to replace the original image depending on the IF statement I have commented out my alertboxes (which work) and replaced new code above that I can't seem to get working. On lines 21, 27 and 33. Any help would be greatly appreciated. Code: <html>
<head>
<title>TempReader™</title>
<script type="text/javascript">
//This is where we decare our function to validate the HTML form
function validateform()
{
// Setting our variable name and it's value by calling it from the HTML form textbox
var temp = document.forms["inputform"]["temperature"].value
// If the input is not a number or an empty field, alert the user and stop the program
if (isNaN(temp) || temp == "")
{
alert("Please enter a number");
return false;
}
//If the input is valid we compare the input value and display the appropriate output
if (temp > 35)
{
document.getElementById("temp_img").src ="temp_hot.png";
//alert("Wow, it's really hot!");
}
else if (temp <= 35 && parseFloat(temp) >= 18)
{
document.getElementById("temp_img").src ="temp_mid.png";
//alert("It's a comfortable temperature right now");
}
else if (temp < 18)
{
document.getElementById("temp_img").src ="temp_cold.png";
//alert("Brrr, it's a little bit cold for my liking");
}
}
</script>
</head>
<body>
<div style="margin-top:0px; text-align:center">
<img id="temp_img" src="what_temp.png" alt="Temperature" />
</div>
<form name="inputform" method="post" action="">
<table>
<tr><td><input type="text" name="temperature" value="Enter Temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td><input type="submit" value="Submit" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>
BTW, My images are stored in the same directory as the HTML file and the img names are correct Hi im trying to do this: I have an app multilanguage english & spanish at the start of page it appears english flag but webpage on spanish like this pictu and when i click english flag then it turns english webpage and flag change to spanish like this image: im trying to make a loop cause when i click again spanish flag it turns to english flag but when i click again english flag it doesnt appears anything i dont get any javascript error here is my code of flags: Code: <div id="lang_panel">
<div id="ZA_lang" onclick="setLang('PA'); toggle2();"></div>
<div id="PA_lang" onclick="setLang('ZA'); toggle();"></div>
</div>
the Code: setLang('PA')
is for set webpage language. and Code: toggle(); & toggle2(): i made if for changes the flag here is full toogle & toggle2 functions: Code: function toggle() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "block";
$("PA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
function toggle2() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "none";
$("ZA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
Code: l_ZA_on.png is USA flag Code: l_PA_on.png is Panama flag |
|||||||