|
JavaScript - Javascript And Css Inline
I have following HTML code:
Quote: <br/> <div style="display:none">.....</div> <div style="display:none">.....</div> How can I modify display to block in style attribute with Javascript? Similar TutorialsI wrote the code below to practice getting divs to appear and disappear. It has 2 divs. The first div contains two links. One link is to hide the second div, the other link is to make it reappear. I have styles in the head, and 1 inline for each div. Javascript is supposed to change the inline style display value from block to none on the click. The problem is, when I change the value in blue from block to none manually on the server, the change happens successfully and stays in place until I change it back manually. But when I click on the Hide Schedule link, that means I'm telling javascript to change the inline value block to none (highlighted in red in the javascript function), to make the second div disappear. onClick, it disappears for a fraction of a second, then reappears just as it was before the I clicked the link. I haven't clicked the other link, because the div that is supposed to vanish does so for only a split second. It looks like javascript isn't working right. I use firefox. Does anyone know what is going on? Thanks Code: <!DOCTYPE html>
<xhtml>
<head>
<title>Practice Calendar</title>
<style type="text/css">
.practicecalendar
{
float: left
margin: 0;
width: 18em;
background: #eee;
text-align: center;
}
.practiceschedule
{
float: right;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}
</style>
<script type="text/javascript">
<!--
function showSchedule(){
document.getElementById("practiceschedule").style.display = 'block';
}
function hideSchedule(){
document.getElementById("practiceschedule").style.display = ' none ';
}
//-->
</script>
</head>
<body>
<div id='practicecalendar' class='practicecalendar' style='
display: block;
'>
<p><a href='' onClick='showSchedule()'>Show Schedule</a></p>
<p><a href='' onClick='hideSchedule()'>Hide Schedule</a></p>
</div>
<div id='practiceschedule' class='practiceschedule' style='
display: block ;
'>
<p><a href='' onClick='showCalendar()'>Schedule</a></p>
</div>
</body>
</xhtml>
Hi, The following code works: Code: <html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
But the problem is you have to repeat the inline JavaScript for all <img> tags. I tried to put the script in the head to no avail: Code: <html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("img");
x.style.opacity=1; x.filters.alpha.opacity=100;
}
</script>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
Everything seems right to me, but it doesn't work. Many thanks for any help! Mike URL: https://medicard1.com/services.html Site also employs CodeIgniter from original developer. Code below sets up a table with a form and script in separate cells of the same row. Looks good and click on check box works ok, but script seems to only run when the page is initially loaded. Does not change variable 'c' and display the change. Am in a bind for this one. My developer is away for the holiday and CEO wants it done ASAP. Anyone have an idea? <!-- Setup a table to hold the elements where I want them without conflicting with CodeIgniter - K.I.S.S.--> <table style="border:0px;"> <tr> <td style="width:600px; text-align:left;"> <!-- Un-submitted form with legend and checkbox input to acknowledge terms and display discount code --> <form name="acknowledge" action="" method=""> <legend>I acknowledge that I have read and understand the content of this page <!-- onClick should execute display_code() script --> <input style="border:0px; width:40px;" type="checkbox" name="investor" onClick="display_code()"/> </legend> </form> </td> <td style="width:200px; text-align:right;"> <!-- Script should check checked state of checkbox investor and set c to appropriate value --> <script type="text/javascript"> <!-- set c="" after get this working --> var c="NOT SET"; function display_code() { if (document.acknowledge.investor.checked) { var c="INVESTOR"; } else { <!-- set c="" after get this working --> var c="NO CODE"; } } document.write('Your code is: ' + c); </script> </td> </tr> </table> How does one get inline styles placed by javascript to work in Google Chrome? Works in Firefox and Opera, I know that Chrome is receiving the correct data by using alerts, but it is not putting the style object in the HTML.
Hi i have some inline code that i would prefer to transfer into javascript functions and place in a .js file in the head or foot of my webpage. I have tried to convert into funtions myself but could not get to work. Would appreciate any help to give me the correct working code. thanks. Here is the portion of code from inside a working form: <button id="decbtn" onclick="updbtn.style.background='url(images/wuc.gif)';qty.style.background='';decrement(this.parentNode.getElementsByTagName('input')[0]);return false;">-1</button> <input id="qtyinp" name="qty" onkeyup="updbtn.style.background='url(images/wuc.gif)';qty.style.background='url(images/packindic.png) no-repeat bottom right #ffffff';this.value=this.value.replace(/[^\d]/,'');return false;" maxlength="3" value="0" type="text"> <button id="incbtn" onclick="updbtn.style.background='url(images/wuc.gif)';qty.style.background='';increment(this.parentNode.getElementsByTagName('input')[0]);return false;">+1</button> <input name="pid" value="A0517A" type="hidden"> <button id="updbtn" type="submit" onclick="this.style.background='';qty.style.background='url(images/upd.png) no-repeat right top #ffffff';">Update</button> i have some really annoying issues with a widget which is known inline modal you can see that widget after you click the play button in the given link below, please help me out, the issue is that use google chrome and then go to this place, the link is: http://www.bloghuts.com/2010/09/star-island.html and in this page click on play, then you yourself will see the error, please tell me what to do with this error. And another problem is that again open the above link in internet explorer and click the play button you will see a different kind of annoying problem, except these two explorers it works fine, PLEASE HELP ME I WOULD REALLY BE THANKFUL TO YOU. Hello, I'm sure someone on this site is familiar with Lightforms AJAX contact forms. I've downloaded one and am attempting to integrate with my current Contact page. Lightform comes with 3 external .js sheets one of which is formcheck.js. While Lightform has sufficiently functioning and nicely styled JS which checks for valid inputs in the text fields, I would also like to add watermark text in a few of the text fields. I pretty much had what I wanted on my own form until I tired to mix it as inline code with with Lightform Contact form. Here is the mixtu Code: <input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" value="Mr., Ms., Pastor..."onBlur="if(document.getElementById('name').value=='') {document.getElementById('name').value='Mr., Ms., Pastor...'};" onfocus="document.getElementById('name').value=''"; />
Perhaps someone can tell me why my watermark effect won't happen anymore. thanks for your time. Alright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar. I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected. How can I do this in JavaScript? Hi all, i have created one simple login form with 5 fields namely username,email id,password,retype password and phone no.and i have created one alert message for each function so that it displays alert message when there is an error. now i want to replace alert message with INLINE VALIDATION(displays beside text only).... kindly tell me how to do.... below is the code i have written using alert message....... Code: <html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var sRealname = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealname);
if (!isCorrectFormat)
{
alert("Incorrect format.");
textbox.select();
textbox.focus();
return false;
}
else
{
alert("Correct format");
return true;
}
if (sRealName == '')
{
alert('Error: Username cannot be blank!');
form.realname.focus();
return false;
}
else if (sRealName.length < 4)
{
alert("UserName should be atleast 4 characters long");
return false;
}
return true;
}
function checkEmail(form) /* for email validation */
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
{
return true;
}
alert('Invalid E-mail Address! Please re-enter.');
return false;
}
function validatePwd(form) /* password & retype-password verification */
{
var invalid = ' ';
minLength = 6;
var pw1 = form.password.value;
var pw2 = form.password2.value;
if (pw1 == '' || pw2 == '')
{
alert('Please enter your password twice.');
return false;
}
if (form.password.value.length < minLength)
{
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}
if (document.form.password.value.indexOf(invalid) > -1)
{
alert('Sorry, spaces are not allowed.');
return false;
}
else
{
if (pw1 != pw2)
{
alert('You did not enter the same new password twice. Please re-enter your password.');
return false;
}
else
{
alert('Passwords Match.');
return false;
}
return false;
}
}
function validPhone(form) /* phone no validation */
{
var valid = '0123456789';
phone = form.phoneno.value;
if (phone == '')
{
alert('This field is required. Please enter phone number');
return false;
}
if (!phone.length > 1 || phone.length < 10)
{
alert('Invalid phone number length! Please try again.');
return false;
}
for (var i = 0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);
if (valid.indexOf(temp) == -1)
{
alert('Invalid characters in your phone. Please try again.');
return false;
}
}
return true;
}
function validate()
{
var form = document.forms['form'];
if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
{
return false;
}
return true;
}
</script>
</head>
<body>
<form action="" method="post" name="form" onsubmit="return validate()">
User Name : <input type="text" name="realname" size="19">
<br>
E-Mail : <input type="text" name="email" size="25">
<br>
Password : <input type="password" name="password" maxlength="12" size="25">
<br>
Retype password: <input type="password" name="password2" maxlength="12" size="25">
<br>
PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Uhm, hi. So, sorry if this is the wrong place, but I hope someone can help. I'm 13 years old, and I'm slowly learning how to code. I made this website for my teacher from scratch using basic HTML tables, with a few PHP include lines I copied from somewhere. Not bad, right? Well, here's the tricky part. When she was using her previous website, she kept messing up her various widgets when she added site content (because Wikispaces sucks ) So, my hope was to create an inline editor (AJAX??) for her to only be able to edit a certain part of the page. A) ONLY SHE SHOULD BE ABLE TO EDIT IT, so I need some kind of a login system. I have access to phpMyAdmin to run MySQL queries and such. B) I was hoping for a top corner login button like Twitter, or the example shown here. C) I know I can give her access to my FTP and make a separate file, and use an include script, but she wouldn't know how to use an FTP. D) I'd prefer if the editor DID NOT use HTML. Reason being, I wouldn't want to have to make her use <br> every time she wants a line break. E) It should be like this. If her username is detected as logged in, a button should be displayed above the editable area that says "Edit". Then, when she clicks that, a text box shows up, she edits her text, and clicks "Submit". I'm sure this would be mighty difficult to do, but I'd much appreciate the help. I know I used phrases such as "MySQL queries" and "PHP include script", but please talk to me as if I were 4 years old. I have extremely limited coding knowledge. Also, please don't get annoyed if I ask a lot of stupid questions. Be sure to let me know if you need any more information! THANK YOU SO MUCH! ~Kyle$calise I am trying to re-write a script that I found on w3schools. The script should check whether ALT key was pressed or not. My objective is not to use any inline scripts and to refer to the event within a function. My script is not working. Could someone please have a look at it and help me? Thank you very much <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> <title> Event Object</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function general() { document.getElementsByTagName("body")[0].onmousedown=function() { if(document.getElementsByTagName("body")[0].onmousedown.altKey==1) { alert("You pressed Alt key"); } else { alert("ALT key was not pressed"); } } } window.onload=general; </script> </head> <body> <p> Click somewhere in the document, we will tell you whether or not you pressed ALT key </p> </body> </html> </code> Hi, I'm looking to add the functionality of 'inline editing' with AJAX. I have found a good piece of code from a website (http://www.yvoschaap.com/weblog/ajax...pdate_text_20/) which does it well but I want to improve it slightly. I have a span tag with text in it which turns into an input box when a user clicks on the text. The user edits the input box and then click away from the input box in order to save the change and the input box turns back into regular text. How do i make it so when the person clicks on the text the input box appears but also an 'Update' and 'Cancel' link appears to the side of it so that the user can only update or cancel that field by clicking on the links. The code that does this is as follows: HTML CODE: Code: <span id="userName" class="editText">John Doe</span> JAVASCRIPT - controls when text is clicked for input to appear: Code: //edit field created
function editBox(actual) {
//alert(actual.nodeName+' '+changing);
if(!changing){
width = widthEl(actual.id) + 20;
height =heightEl(actual.id) + 2;
if(height < 40){
if(width < 100) width = 150;
actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
}else{
if(width < 70) width = 90;
if(height < 50) height = 50;
actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
}
changing = true;
}
actual.firstChild.focus();
}
JAVASCRIPT - Initiated the update of the field. Code: function fieldBlur(campo,idfld) {
if (campo.value!="") {
elem = document.getElementById( idfld );
remotos = new datosServidor;
nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
elem.innerHTML = nt;
changing = false;
return false;
}
}
I tried playing around to do it myself by adding an <a> link with an onclick event handler in the editBox() function ie. Code: onlick="noLight(this); return fieldBlur(this,'" + actual.id + "');" But i realise that the two values passed to the function need to be changed as i cannot use (this) if it's not within the input box? If anyone could help me with this query it would be greatly appreciated. I hope Ive given enough info and have expressed my problem clearly. If you have any questions let me know and I'll answer them ASAP. If you would like to see the whole source please go to the original website where i got it from - http://www.yvoschaap.com/weblog/ajax...pdate_text_20/ Thanks in advance Hi, well i used soh tanaka inline modal window which is a popup window like lightbox. But it failed to work with IE9 RELEASED CANDIDATE VERSION. Can anyone tell me that why is it having issue with a better version of explorer. I have made a video to show the error, as to make it more easy to explain what i am saying. here is the link to it http://www.youtube.com/watch?v=pHi9ZlGyWc0 i would look forward to the replies. thank you. Trying to return the DOM 0 element index from within the html Example: Code: <input type="text" onfocus="alert(this.element)" /> I do not want to use IDs any way to do this? Hi, I have what is probably a stupid issue. I have a select box that is being filled by an an ajax request to a SQL DB and returns the results in a select box. That part works fine. The second part of the request is that i also want my inline html to change results if i change my selection. that part is not working. I tried to put my onchange event into the option in php, but that doesn't return anything either. $display_string .= "<option onchange=\"getSoftwareUpdate();\"> $row[Software] </option>"; clear as mud? Any help would be much appreciated! //this section gets the results from the php script and returns back the values in the db. <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function getSoftwareFunction() { var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Please contact Trinity Help Desk at ext. 88817"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var SoftwareName = document.getElementById('results').value; var ManufacturerName = document.getElementById('results').value; var VersionName = document.getElementById('results').value; var InstallLocationName = document.getElementById('results').value; var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true); ajaxRequest.send(null); } </script> //this next part i want to return the results based on an onchange event in the select option <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function getSoftwareUpdate() { var ajaxRequest1; // added try{ // Opera 8.0+, Firefox, Safari ajaxRequest1 = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest1 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest1 = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Please contact Trinity Help Desk at ext. 88817"); return false; } } } //added // Create a function that will receive data sent from the server ajaxRequest1.onreadystatechange = function(){ if(ajaxRequest1.readyState == 4){ var ajaxDisplay1 = document.getElementById('ajaxDiv1'); ajaxDisplay1.innerHTML = ajaxRequest1.responseText; } } //end add var Software = document.getElementById('results').value; var SoftwareName = document.getElementById('results').value; ajaxRequest1.open("POST", "getSoftwareName1.php" + SoftwareName, true); ajaxRequest1.send(null); } </script> <html> <div id='ajaxDiv1'></div> <div id='ajaxDiv'> <select id='results' onchange="getSoftwareUpdate();" name="Software"> </select> </div> </html> </td> There are some VERY similar questions and answers, but I have been unable to get them to work for me. The simple situation is calculate days since a date with JS, and output it as part of a text line: create variable xxx with subtraction, or datediff() <body> <p>XYZ has been in effect for (xxx) days.</p> </body> Nothing more, & thanks. Reply With Quote 01-17-2015, 03:40 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts When I have a question about javascript I go to w3schools JavaScript Tutorial or MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript. FYI datediff() is not an official JS function. What I normally do is get the date as a UTC number (millsecs after an old date) do the math and then convert back. Code: <!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title></title>
</head>
<body>
<div id="her" style="clear:both;"></div>
<script type="text/javascript">
var d1 = new Date("january 01, 2015");
var d2 = new Date();
var work = d2.getTime() - d1.getTime();
var xxx = Math.round(work/86400000);
document.getElementById("her").innerHTML = 'XYZ has been in effect for '+xxx+' days.';
</script>
</body>
</html>
The number 86400000 comes from 1000*60*60*24 to convert millisecs to days I moved this to a more appropriate place... http://www.codingforums.com/showthread.php?t=184432 Hey all, so im working on a piece of jquery/JS which executes (drops down a new div) when you click a link. I have the links setup as <a href="#" id="d0">Execute 1</a> <a href="#" id="d1">Execute 2</a> <a href="#" id="d2">Execute 3</a> And the jscript detects when d0, d1 or d2 is clicked and executes my script. It all works perfectly, however when you click on a link it will jump to the top of the page as a side effect of the a href="#" I assume? Is there anyway to have my same effect work inline (without jumping the page to the top) ? Thank you very much! Hello, everyone... I have this problem that is really bugging me. I am trying to implement this script found in Javascriptkit: http://www.javascriptkit.com/script/...ltooltip.shtml It has a very unique feature of grabbing arbitrary HTML tags and attaching tooltips to them. Priceless to my site. But the problem is, the script only works with jQuery up to 1.2.6... after that version, it stops working entirely. Quite an issue, as you can imagine. It also has some issues with browsers other than Firefox that I hope updating the code might fix. I don't have any lead on this... could anybody look into the code and tell me what's wrong? Thank you, hi guys, I need to implement an inline calendar showing multiple months(suppose 6 months) starting from current month in my web application. It should be possible to move to the previous months and next months. Also it should be possible to retrieve the date when a user clicks (onclick event) on a particular date. Is there any javascript source code available? could anyone please help me? thanks in advance |
|||||||