|
JavaScript - 2 Specific Actions In 1 Button
Hi there! I've been searching for threads to solve my problem but I don't have the knowledge necessary to figure it out (you know, graphic designers....) so your help will be very appreciated!!!
Here's the problem : I have a div named "cat" that I want to hide with a Javascript:animatedcollapse (slideup) action. The action is linked externally on another page. This is the line/link that hides it : <a href="javascript:animatedcollapse.hide('cat')">Hide the div<br/> It works fine. But, I want this action to happen at the same time that you press another link (that other link opens a page in an iframe). This is the iframe link : <p><a href="page.html" target="iframe">Open link in iframe</a></p> Both links work fine. But i want to merge the two together. How? Thanks in advance! Similar TutorialsI have a table with tabs on it that calls different php files once the tab is clicked and on top of the table I have a drop list and a button. the whole table has 5 tabs and in there are 15 unique id with information on each tab that the table show when you click on the tab. The drop down list is a selection that you choose from of each of the 15 unique IDs. Once you choose one then click the button you should then only see that specific information about that particular id. (It can be in the table where you click each tab or all of it on one page I dont care.) So I need to get this button to work. I am very unfamiliar with buttons (thats why I am posting this) and I hope someone can help me Code: <form id="projects" method="post" action="project.php">
<select id="project_list" name="proj_list">
<optgroup label="projects">
<?php
// Display the details of each event in a table
while ( $option = mysql_fetch_array($result) ) {
echo("<option label=" . $option["proj_title"] .
"value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>");
}
?>
</optgroup>
</select>
<input type="button" VALUE="GO"
onClick=location("****Do not know what to put here******) />
<?
endif;
?>
<div id="tabcontainer">
<ul id='tabs' class='shadetabs'>
<?php
// Populate tabs with data related to the selected project
echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>");
echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>");
echo ("<li><a href='approach.php' rel='container'>Approach</a></li>");
echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>");
echo ("<li><a href='financials.php' rel='container'>Financials</a></li>");
?>
</ul>
<!--
<ul id='tabs' class='shadetabs'>
<li><a href='project.php' rel='container' class='selected'>Project</a></li>
<li><a href='capability.php' rel='container'>Demo Capability</a></li>
<li><a href='approach.php' rel='container'>Approach</a></li>
<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>
<li><a href='financials.php' rel='container'>Financials</a></li>
</ul>
-->
<div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px">
<p>Please select a project using the drop-down menu above. Use the tabs to view information about the selected project.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "divcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</div>
Hey: I have several "submit" buttons on a form. I want users to be able to hit the "enter" key to submit the form. The page used to "post" the information checks for specifically what form button was pushed to submit the form before executing the appropriate code. I am automatically submitting the page when the enter key is hit, but it is defaulting to the first option of executed code in the post page. Example - I have an "update" button and a "delete" button on the form. On the post page, I first check to see if the delete button was hit. When I press enter on the form, it simply answers yes to the first question (did they click the delete button), and the code is executed. I really wanted to emulate that the update button was hit. So -- is there a way to hit the enter button, and in the js code, mandate that it was the "update" button that was clicked? Thanks. This is a general question on if it's possible and how I'd go about it... I'm working on a site hosted through a blog-managing company. Sometimes their programming doesn't seem to let me do things that would normally be possible, so I have to find creative work-arounds. This time, It doesn't seem I can use javascript to change an href destination that is generated by their system. I want the user to go to a different page, when they click on that link. I can have a script find a specific href, but it can't change it for some reason. So I'm wondering if there's a way I can just have the script redirect the user if they click on that link? I know it seems like a long way round, but I don't see any other way to do this under the circumstances. Just in case it helps, here's what I thought would work, but didn't: Code:
document.getElementById('elementName').href == 'http://www.newURL.com';
Another thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me. I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them. Is there a single method using JS that works for all browsers? Thre is probably a very simple answer and I am just missing it somehow. Hi all, Trying to something i guess is pretty basic but i cant seem to get it working. I have a page with an iframe name="grid" and on that page i am also running a mootools script which toggles a pannel. The javascript for the pannel is: Code: <script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
so this link opens the pannel Code: <a href="#" id="toggle">Show Panel</a> However, i want to make a it so that one link can both call a page in the iframe AND toggle the pannel. I tried: Code: <a href="page_to_call.htm" target="grid" id="toggle">Show panel and call page in iframe</a> but no joy. I want more than one link to be able to do this (calling different pages to the iframe and each one toggling the pannel) Can anyone help? Thanks loads in advance for any reply. I have a javascript code to let people subscribe to our newsletter. I would like to get a mail each time a person get subscribed to our newsletter. The code to let people subscribed to our newsletter is: [I] <!-- newsletter subscribe below here --> <script language="Javascript" type="text/javascript"> var fieldstocheck = new Array(); fieldnames = new Array(); function checkform() { for (i=0;i<fieldstocheck.length;i++) { if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value") == "") { alert("Please enter your "+fieldnames[i]); eval("document.subscribeform.elements['"+fieldstocheck+"'].focus()"); return false; } } return true; } function addFieldToCheck(value,name) { fieldstocheck[fieldstocheck.length] = value; fieldnames[fieldnames.length] = name; } </script> <form action="http://www.investinginmongolia.com/phplist/?p=subscribe&id=2" method="post" name="subscribeform"> <p class="linkleft12">Our Newsletter:</p> <p class="linkleft12">Email: <input name="email" style="width: 105px" type="text" value="" /> <script language="Javascript" type="text/javascript">addFieldToCheck("email","Email Address");</script> <input name="list[2]" type="hidden" value="signup" /></p> <p class="linkleft12"> <input name="subscribe" onclick="return checkform();" type="submit" value="Subscribe" /></p> </form> <!-- newsletter subscribe ends here --> I also would like that an e-mail is send automatically to info@yurt-ger-yourte.com through http://www.yurt-ger-yourte.com/cgi-sys/FormMail.cgi Thanks for your help. Bernard Hello: I am a newbie to learning Javascript. I have some problems with a file. The goal of the file is that when it loads in a browser, the 1st image is displayed in the top left (image 7441805.gif), along with the following three titles to the right of the image, as listed below: Java Demystified OOP Demystified Data Structures Demystified When you place the mouse over "Java Demystified," the 7441805.gif image should still appear (which it does)), and a new window should pop-up and stay on the screen displaying "10% Discount for Java Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "OOP Demystified," the 0072253630.jpg image should appear (which it does), and a new window should pop-up and stay on the screen displaying "20% Discount for OOP Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "Data Structures Demystified," the 7417436.gif image should appear (which it does), and a new window should pop-up and stay on the screen displaying "15% Discount for Data Structures Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. All of the files are loaded on my laptop, which is using Vista, is 32bit, has the IE9 browser installed, and pop-ups are disabled. When I try to use Mozilla (version 6.0), I am unable to disable the pop-ups, and therefore can not even get any new windows to open. I would appreciate your help. The html file is below: [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" lang="en" xml:lang="en"> <head> <title>Open Window</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="description" content="XYZ" /> <meta name="keywords" content="XYZ" /> <!-- the absolute pathname of this file is: --> <!-- C:\MISCSUP2_10_17_8\MISCSUP2\Javascript_Demystified_Download_Working\ --> <!-- Ch_12_Page241.html --> <!-- this file was created on Wednesday, 8/24/11: --> <!-- this file was updated on Wednesday, 8/24/11: --> <script language="Javascript" type="text/javascript"> <!-- function OpenNewWindow(book) { if (book== 1) { document.cover.src='7441805.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="400"') MyWindow.document.write('10% Discount for Java Demystified!') } if (book== 2) { document.cover.src='0072253630.jpg' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="500"') MyWindow.document.write('20% Discount for OOP Demystified!') } if (book== 3) { document.cover.src='7417436.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="600"') MyWindow.document.write("15% Discount for Data Structures Demystified!") } } --> </script> </head> <body> <table width="100%" border="0"> <tbody> <tr valign="top"> <td width="50"> <a> <img height="92" src="7441805.gif" width="70" border="0" name="cover"> </a> </td> <td> <img height="1" src="" width="10"> </td> <td> <a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()"> <b><u>Java Demystified </u></b> </a> <br> <a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()"> <b><u>OOP Demystified</u></b> </a> <br> <a onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()"> <b><u>Data Structures Demystified</u></b> </a> </td> </tr> </tbody> </table> </body> </html>[ICODE] Hey All, I have the following function - where I can get one of the conditions to work, but not both together. Here's the code: Code: function test_function() {
$('#form_field_name').focus();
window.location = window.location + "#form_field_name";
}
Basically when clicking an error link, I want to focus onto the form field, and then move to the anchor itself on the page. One of these will work at a time, but not both and I'm not sure why. Any suggestions would be appreciated. Thanks. Here's my object constuctor: Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
}
And the execution code: Code: var suggest = new suggest_object(result_id);
document.getElementById(result_id).onmouseover = function(){suggest.in_result_div = true;}
It works as is, but i'd really like to be able to set the onmouseover inside of the object. Something like Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
this.input_element.onmouseover = function()
{
this.in_result_div = true;
}
}
So how can I get the 'this' inside the onmouseover function to refer to the object? I am very new to javascript and cannot find any info anywhere regarding the following problem: On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration: The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action": <form action="http://www.changenamecart.com/" method="post"> <input type="hidden" name="userid" value="1234567"> <input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm"> <input type="image" src="http://www.changenamecart.com/images/pic.gif"> </form> My efforts to date a The change .js file: function change() { var myChange = form action; if(myChange == form action){ document.write("form xction"); } } The html file in the header: <script src="change.js" type="text/javascript"></script> I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem. Hello, I am using this code Code: <form style="display: none;" name="num1form" id="num1form" action=""> <input type="image" name="1" id="num1" value="1" src="imgl/img_first_01.png" onclick="document.forms[0].action='javascript:ChangeNum1();'"/> </form> What the above code does is change the action state, it allows me to have multiple image inputs which is great as I can define various inputs with different IDs. However, this is used for one section of the page I happen to have another <form> with basically the same code but it's using num2 values, I'm not sure why but I can only using one of these Code: onclick="document.forms[0].action='javascript:ChangeNum1();'" at a time, for one form only. Is there anyone able to help me divide this, or make these onClick actions unique so they can be used in more than 1 form? Thanks, Keenan Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? i got javascripts button : Code: <input type="button" value="select" onClick="document.getElementById('input').select()" />
how can i transform "button" to image button (gif) I am working on a Phonegap app that sends emails that consist of form data that is filled out within the app. I need my app to send the emails which I have sorted out. The second part of the app needs to store the email subject of all the mails that are sent in local storage and then in a separate function needs to output all the saved data and send it. I will post my full code below and comment the important bits. Code: function sendMail(imageURI, click){
var d = new Date();
var dat = d.getDate();
var mon = d.getMonth();
var year = d.getFullYear();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var todayDate = dat+'-'+mon+'-'+year+' | '+hours+':'+minutes+':'+seconds;
var agent = $('#agent').val();
var depot = $('#selection').val();
var date = $('#free').val();
var newURI = imageURI.replace("file:///storage/emulated/0/DCIM/Camera/","");
/* -----> the variable that needs to be stored */ var newFileName = 'N' + result + '_' + agent + '_' + todayDate + '_' + newURI + '_' + depot + '_' + date;
/* -----> storing the variable */ var temp = localStorage.getItem('newFileName');
var somearray=temp.split(',');
somearray_length=somearray.length;
somearray[somearray_length]=newFileName;
var somestring=somearray.join(',');
localStorage.setItem('newFileName',somestring); /* <----- storing the variable */
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
cordova.plugins.email.addAlias('gmail', 'com.google.android.gm');
cordova.plugins.email.open({
app: 'gmail',
to: 'blah@gmail.com',
subject: newFileName,
body: '<ul><li style="font-weight:bold;text-decoration: underline;"><b><u>File: </b></u></li><li>'+newURI+'</li><br><li style="font-weight:bold;text-decoration: underline;"><b><u>Agent Name: </b></u></li><li>'+agent+'</li><br><li style="font-weight:bold;text-decoration: underline;"><b><u>Next Scheduled Date: </b></u></li><li>'+date+'</li><br><li style="font-weight:bold;text-decoration: underline;"><b><u>Scanned: </b></u></li><li>'+todayDate+'</li><br><li style="text-decoration: underline;font-weight:bold;"><b><u>Depot: </b></u></li><li>'+depot+'</li></ul>',
attachments: [imageURI],
isHtml: true
});
};
/* -----> The second function */ function endOfDay(data){
var d = new Date();
var dat = d.getDate();
var mon = d.getMonth();
var year = d.getFullYear();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var todayDate = dat+'-'+mon+'-'+year+' | '+hours+':'+minutes+':'+seconds;
ending=localStorage.getItem('newFileName');
var salesman = $('#agent').val();
var newsFileName = 'End of Day Report for Agent: ' + salesman + '|' + todayDate;
cordova.plugins.email.addAlias('gmail', 'com.google.android.gm');
cordova.plugins.email.open({
app: 'gmail',
to: 'seth.v.staden@gmail.com',
subject: newsFileName,
body: 'end of day report: <br>' + ending,
isHtml: true
});
localStorage.setItem('newFileName','');
};
my problem is that instead of outputting all the sent subjects that have been stored like so: "subject 1, subject 2, subject 3, etc..." it is outputting it as the latest mail that was sent, i.e. "subject 3, subject 3". I have no clue why this is going wrong or how to fix it... any help would be greatly appreciated. Reply With Quote 01-15-2015, 11:13 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Instead of doing all this tortu Code: var temp = localStorage.getItem('newFileName');
var somearray=temp.split(',');
somearray_length=somearray.length;
somearray[somearray_length]=newFileName;
var somestring=somearray.join(',');
localStorage.setItem('newFileName',somestring);
Why not simply do Code: localStorage.setItem('newFileName', localStorage.getItem('newFileName') + "," + newFilename );
Though I admit I don't see why your code won't work. It just causes a bunch of unneeded overhead. ********** COMMENTARY: I think your dates will be unreadable by humans. var mon = d.getMonth(); That will get a ZERO for January, 1 for February, etc. For human readable, you should do var mon = d.getMonth() + 1; I am having a problem with my homework displaying an iframe using JavaScript. My homework states: Insert a script element that does the following: part a. Insert the following multiline comment: Display the daily schedule in an inline frame. Daily schedules are stored in the files sunday.html through saturday.htm. part b. Insert a command to write the HTML code <iframe src="weekday.htm'></iframe> to the Web page, where weekday is the text string returned by the weekDay() function. What I have so far: <script type= "text/javascript"> /* Display part a */ document.write("<iframe src='weekday.htm'></iframe">; </script> My Question: How do I display weekday.htm within my script on a specific day using the function weekDay() function. below is my weekDay() function: function weekDay(){ thisDate = new Date(); var thisWDay=thisDate.getDay(); var wdName = new Array("sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"); return wdName[thisWDay]; } Hey, I'm working on a large demo created with html/css. It has well over a hundred pages with a left column navigation of normal links. I am trying to make this demo product specific with a page asking what product they are using before they enter the demo. Based on the users selection I want to have some of the pages be more product specific with different content and hide some pages. To create this I could just duplicate my html files to have one for each product with its respective navigation (basically resulting in two seperate demos). That however would be a nightmare for future updates. Anyone know how to script this? Any help would be awesome! I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks |
|||||||