|
JavaScript - Javascript To Change Css
Hello. I am trying to create a javascript function which when declaring a new object, would give it properties. I'll try and show what I am doing with some code, then explain it.
Code:
<script type="text/javascript">
var Draggable = {
Create: function(e, options) {
newStyle(e, options);
}
};
function newStyle(destination, options) {
for (x in options) {
document.getElementById(destination).style.x = options[x];
}
}
new Draggable.Create('text', options = {border: "1px solid red"});
</script>
<div id="text">Text</div>
With this code, I am trying to create a new instance. I am then trying to change the border of the div with the id of "text". I know doing .style.x is what is breaking, but I'm not sure how to make it so the x will, work or to return that back to the Create function and work with it there? Any help would be appreciated. Thanks. Similar TutorialsHi can you change this javascript for me please -------------------------------------------------------------------------- -------------------------------------------------------------------------- Code: <script type = "text/javascript">
function LogIn(){
loggedin=false;
username="";
password="";
username=prompt("Username:","");
username=username.toLowerCase();
password=prompt("Password:","");
password=password.toLowerCase();
if (username=="guest" && password=="login") {
loggedin=true;
window.location="home-page.html";
}
if (username=="guest2" && password=="login2") {
loggedin=true;
window.location="home-page2.html";
}
if (loggedin==false) {
alert("Invalid login!");
}
}
</SCRIPT>
---------------------------------------------------------------------------------------------------------------------------------------------------- Can someone change this script to instead of prompts i would like two text boxes and a button to login p.s There is also a different bit but thats for the button if you need this part then please ask Hi, When is a java script change in Production server,do we need to force the web users to clear their cache... Or is there any better way of doing it apart from using no cache header in HTML I have several checkboxes with labels, all laid out in a table. All of the checkboxes have a class of "hide" and through CSS I have them hidden. Then with javascript it's set up so that when a user clicks on the label for the checkbox the background of the TD that contains it changes colors to indicate that that item is selected. Works great except for those browsers that have javascript disabled. Then the form is useless. I'm thinking now it would be better to use javascript to apply the "hide" class to the checkboxes. That way if it's disabled then the checkboxes will still be visible and the form useable. I'm just not sure how to go about doing that (not much of a javascript ninja). Can anyone advise me on how to do that? I'd really appreciate the help! Thanks! Hi, On my website I use CSS Fixed Positioning, but unfortunately on many mobile devices in particular this doesn't work I'd like to be able to turn these into static (e.g. Go to bottom of page) on some devices, but I'm a bit stuck (The Div btw is called apDiv2) So far I've got Code: if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'BlackBerry')
{
$("#apDiv2").css("position", "static");
};
but no dice. Does anybody know what I'm doing wrong? The full css file is at http://atomicbuilds.com/general.css Thanks, Ed P.S. Eventually I'd also like to change the actual positioning so -142px goes to 0px, so if anybody knows that that'd be great, but I'm more worried about this first Can anyone point out why this might not be working??? In my style sheet I have the span #downarrow display:none; Code: <script type="text/javascript">
function arrow(boxName){
document.getElementById(boxName).style.display = 'block';
}
arrow('downarrow');
</script>
<span id="downarrow"><img src="http://www.mysite.com/images/downarrow.png" /></span>
Thanks!! Here's the code that I'm working with: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type ="text/javascript">
function HouseSel(){
document.getElementById("HouseSelect").value = '3'
alert (document.getElementById("HouseSelect").value);
}
</script>
</head>
<body>
<form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">
<select name="item_name" id="HouseSelect">
<option value="0" selected="selected">--Please Select a House--</option>
<option value="1">Nags Head</option>
<option value="Rent Deposite: Calib ">Calibre</option>
</select>
<input name="calculate3" type="button" id="calculate3" tabindex="2"
onclick="HouseSel(); " value="Calculate"/>
</form>
</body>
</html>
But it's still returning the initial value. How do I get it to 3? I need a JavaScript image changer like this: When you mouse over photo1.jpg, it will change to photo2.jpg. When you mouse over photo2.jpg it will change to photo 3.jpg and so on untill photo5.jpg. Please keep this in JavaScript form :) In my JSP page i have start date and End date fields are there. The format for these two fields has Date and Time . But my requirement is if i change the date in start date field it should change the same date in End Date field also automatically. Here is my code Code: <div id=apptTimeEditOD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
<%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() ) %>
<select name="startHour" id=startHour class="selInputSmall" onChange="odRefreshApptEndTime();">
<%= OptionMenu.render( _ahsPage, "CAL_TIME_HOUR", appt.getStartTime().substring(0,2), false, true ) %>
</select>
<select name="startMin" id=startMin class="selInputSmall" onChange="odRefreshApptEndTime();">
<%=OptionMenu.render( _ahsPage, "CAL_TIME_MINUTE", appt.getStartTime().substring(3,5), false )%>
</select>
</div>
<div class="formPrompt" style="position: absolute; width: 90; height: 22; left: 20; top: 2; text-align: left;"><%=_pCal.get("end_time")%>:</div>
<div id=apptTimeEditEnD style="display:<%=appt.allday()?"none":"block" %>; padding: 4px 4px 4px 4px; position: absolute; width: 90; height: 22; left: 85; top: 2; text-align: left;">
<%=_r.drawDatePicker( _ahsPage, "startDate", appt.getApptDate() )%> <div id=apptODEndTime style="position: absolute; width: 90; height: 22; left: 140; top: 2; text-align: left;" > </div>
</div>
Please give me an idea on this one ? How do i change the End Date automatically when i change the start date. Hey guys, so i have a comment section. And what i want to do is if the height of the comment box is larger then lets say 100px. I want to set the height of the comment box to 50px and then display a "read more" button. And this read more button would toggle and allow the height to be "auto" and not set to 50px. so my html would look like this Code: <div class="comment-section"> <div class="comment"><p>This is where text would go. </p></div> <div class="read-more">Read More</div> </div> I have the class "read-more" set to "display:none" How would i do this? This is what i have / was trying and have been unsuccessful Code: <script type="text/javascript">
$(function(if ($".comment".style.height > 100px;){
{
$".comment".style.height = 50px;
$".read-more".style.display = block;
}
});
</script>
I currently have a web site in which I am using some Javascript to change the Background of a DIV. The DIV is defined as follows : <div id="outerscreen"> <div id="mainscreen"> </div> </div> and the Javascript I am using is as follows : var docEl = document.getElementById('outerscreen'); docEl.style.backgroundImage = "url('pics/intro.gif')"; My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari. Can anyone shed any light on what the problem is and how I might be able to resovle this. Thanks in advance Chris I have a javascript that randomly displays a different quote on my website. I have the quote programmed in, and they show up, but the text is tiny. I need help making the text bigger. I am a beginner at this, so i would appreciate help. This is the code: Code: <script language='JavaScript'>
function random_content(){
var mycontent=new Array()
mycontent[1]='Repent! The end is coming! Were out of chips!'
mycontent[2]='I WANT, TO EAT, A DINOSAUR.'
mycontent[3]='Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.'
mycontent[4]='IT\'S A TRAP!'
mycontent[5]='tardo power,activate!'
mycontent[6]='LMS if ur gay'
mycontent[7]='1,2,...5!'
mycontent[8]='Box O Digletts'
mycontent[9]='Justice is best served cold, with a side of ranch dressing'
mycontent[10]='umm...I got nothing...awkward'
mycontent[11]='Once you visit you can never leave'
mycontent[12]='50% CaCow'
mycontent[13]='almost racist free!'
mycontent[14]='The last thing I want to do is hurt you. But it\'s still on the list'
mycontent[15]='BOOM! Left turn!'
mycontent[16]='Redrum'
mycontent[17]='If 4 out of 5 people SUFFER from diarrhea... does that mean that one enjoys it?'
mycontent[18]='Never, under any circumstances, take a sleeping pill and a laxative on the same night'
mycontent[19]='the beginning of the end'
mycontent[20]='Flaming fireballs Batman!'
mycontent[21]='gotta catch em\' all'
mycontent[22]='for the african children!'
mycontent[23]='One sexy thang'
mycontent[24]='It\'s Tardolicious!'
mycontent[25]='That\'s no moon!'
mycontent[26]='Caboose is god?'
mycontent[27]='MLIT'
var ry=Math.floor(Math.random()*mycontent.length)
if (ry==0)
ry=1
document.write(mycontent[ry])
}
random_content()
//-->
</script>
Hi I am using the css image gallery I got from: http://www.dynamicdrive.com/style/cs...image-gallery/ I want to change the behaviour, currently an image is enlarged when a user hovers over the link/thumbail. I would like to change it so that the main image is instead shown onclick of the thumbnail, and remains enlarged until another click. Is this possible using some javascript? can you explain someone step by this code?i didn't get it. <script language="Javascript"> <!-- function backcolor(form){ temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } } function randombackground(){ document.bgColor = getColor() } function getColor(){ currentdate = new Date() backgroundcolor = currentdate.getSeconds() if (backgroundcolor > 44) backgroundcolor = backgroundcolor - 45 else if (backgroundcolor > 29) backgroundcolor = backgroundcolor - 30 else if (backgroundcolor > 15) backgroundcolor = backgroundcolor - 16 if (backgroundcolor == 0 ) return "olive"; else if (backgroundcolor == 1 ) return "teal"; else if (backgroundcolor == 2 ) return "red"; else if (backgroundcolor == 3 ) return "blue"; else if (backgroundcolor == 4 ) return "maroon"; else if (backgroundcolor == 5 ) return "navy"; else if (backgroundcolor == 6 ) return "lime"; else if (backgroundcolor == 7 ) return "fuschia"; else if (backgroundcolor == 8 ) return "green"; else if (backgroundcolor == 9 ) return "purple"; else if (backgroundcolor == 10 ) return "gray"; else if (backgroundcolor == 11 ) return "yellow"; else if (backgroundcolor == 12 ) return "aqua"; else if (backgroundcolor == 13 ) return "black"; else if (backgroundcolor == 14 ) return "white"; else if (backgroundcolor == 15 ) return "silver"; } // --> </script> Hi, what I want to do is create a menu with rollover buttons but each button also changes the background image of a div. I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong. I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference). Code: <body onload="addHandlers()">
<script type="text/javascript" language="javascript">
function addHandlers(){
var allMenus = document.getElementById("services_menu").getElementsByTagName("li");
for(var k = 0; k < allMenus.length; k++)
{
allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
allMenus[k].setAttribute('onmouseout', 'Reset()');
}
}
</script>
<script type="text/javascript">
function ChangeContentBg(i)
{
var Num = parseInt(i);
var ContentDiv = document.getElementById("content");
switch(Num)
{
case 0:
ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';
break;
case 1:
ContentDiv.style.backgroundColor = 'red';
break ;
case 2:
ContentDiv.style.backgroundColor = 'purple';
break ;
case 3:
ContentDiv.style.backgroundColor = 'green';
break ;
case 4:
ContentDiv.style.backgroundColor = 'yellow';
break ;
/*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/
}
}
function Reset()
{
document.getElementById("content").style.backgroundColor = '';
}
</script>
Hi All, I have a snippet of Javascript that changes date format from yyyy/mm/dd to dd/mm/yyyy: Code: <script type="text/javascript">
var myString = "[[date]]";
var mySplitResult = myString.split("-");document.write(mySplitResult[2] + "/" + mySplitResult[1] + "/" + mySplitResult[0] );
</script>
However, I want it to return the format as dd/mm/yy (the last two number of the year rather than the full four). Is this possible to do? Thanks, Neil I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! $_SESSION['order']['paymentmethod'] equals "Cheque". With the code bellow, I was expecting JavaScript to change the SELECT drop down menu to "Cheque", but it doesn't... However, when I remove the OPTION attribute value="cheque/", it works. This appears to be because there is a conflict with the OPTION attribute value and the SELECT content value "Cheque". Does anyone know how I can get around this issue? Code: <FORM action="" method="post" name="form"> <DIV> <SELECT class="verdana" name="paymentmethod" onchange="this.form.action = this.value;"> <OPTION></OPTION> <OPTION value="cheque/">Cheque</OPTION> <OPTION value="visa/">Visa</OPTION> </SELECT> <BR> <BR> <INPUT type="submit" value="PROCEED"> </DIV> </FORM> <SCRIPT type="text/javascript"> document.forms["form"]["paymentmethod"].value = "<?php echo $_SESSION['order']['paymentmethod']; ?>"; </SCRIPT> here is my problem i need to set the color of a text here is what i need to change Code: <div style="position:absolute; left:10px; top:100px; width:250px; text-align:center;"> <font color="lightgreen" size="6"><b>* Mileage *</b></font><b> <font color="black" size="6"><div id="bullet4">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Gearbox *</b></font><b> <font color="black" size="6"><div id="bullet5">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Engine size *</b></font><b> <font color="black" size="6"><div id="bullet6">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Body style *</b></font><b> <font color="black" size="6"><div id="bullet7">Not Specified</div></font><br></b> </div> now i need to set the color from a text file server side so far i can set the contents of the div serverside but the customer needs to be able to change the color of the innerhtml . now i would like to store the color in a text file color.txt i can make the code to change the txt file myself inside the color.txt would be "lightgreen" or other color how would i go about this. so in basic terms i need to set the color of the text from a color.txt file sat next to the index.html Ok so I know basic html and css, no problem but i just started learning javascript and this class is kicking my but! I have this assignment due tonight and I'm taking this class online so there not much help beyond google. I know it's "simple' but I cannot figure this out for the life of me!!! It driving me bonkers, and I really don't want to fail. So any help would be more that appreciated! K here is the html: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Change Calculator</title> <link rel="stylesheet" type="text/css" href="default.css" /> <script type="text/javascript" src="calculate_coins.js"></script> </head> <body> <div id="content"> <h1>Change Calculator</h1> <label>Enter number of cents (0-99):</label> <input type="text" id="cents" /> <input type="button" value="Calculate" name="calculate" id="calculate" /><br /> <p> </p> <label>Quarters:</label> <input type="text" id="quarters" class="disabled" disabled="disabled" /><br /> <label>Dimes:</label> <input type="text" id="dimes" class="disabled" disabled="disabled" /><br /> <label>Nickels:</label> <input type="text" id="nickels" class="disabled" disabled="disabled" /><br /> <label>Pennies:</label> <input type="text" id="pennies" class="disabled" disabled="disabled" /><br /> <p> </p> </div> </body> </html> i need to get it to function properly. Please HELLP ME!!! |
|||||||