|
JavaScript - How To Apply Css Gradient Background For Ie
Hi,
I'm just trying to use a JavaScript form element handler to apply a CSS gradient background dynamically. It doesn't work in IE, but does in the other browsers I've tried. Thaks for any help with it! Jennifer Here's my function Code: function swapGradButton() {
g1 = document.getElementById('ButtonGrad1Color');
g2 = document.getElementById('ButtonGrad2Color');
txt = document.getElementById('ButtonTextColor');
document.getElementById('GradButton').style.color = txt.value;
if (document.getElementById('GradButton').filters && document.getElementById('GradButton').filters.length>0) {
document.getElementById('GradButton').filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr='"+g1.value+"', endColorstr='"+g2.value+"')";
} else {
document.getElementById('GradButton').style.background = "-webkit-gradient(linear, left top, left bottom, from("+g1.value+"), to("+g2.value+"))";
document.getElementById('GradButton').style.background = "-moz-linear-gradient(top, "+g1.value+", "+g2.value+")";
}
}
Similar TutorialsI'm trying to make a program to take a starting hex, ending hex, and string. It will make a gradient through the text, either outputting a html equivalent or in the actual colors and stuff. Almost exactly like this but graphics are obviously much more basic. I've done this program in Java and was trying to transfer to Javascript so that i wouldn't need an applet to run it, but so far it wont work. I just started out in Javascript so im not 100% sure what i can and cant do. Heres all the code I have so far, any suggestions or fixes would be really appreciated. Code: <HTML>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT type="text/javascript">
function testResults (form)
{
var HEX1 = form.hex1.value, HEX2 = form.hex2.value, startText = form.text.value;
var redStart = getRed(HEX1), redEnd = getRed(HEX2);
var greenStart = getGreen(HEX1), greenEnd = getGreen(HEX2);
var blueStart = getBlue(HEX1), blueEnd = getBlue(HEX2);
var redAdd = (redEnd-redStart)/length, greenAdd = (greenEnd - greenStart)/length, blueAdd = (blueEnd - blueStart)/length;
var hexCode;
var total = "";
for (i = 0; i < startText.length; i++)
{
hexCode = RGBtoHex(redStart + (int) Math.round(i*redAdd), greenStart + (int) Math.round(i*greenAdd), blueStart + (int) Math.round(i*blueAdd));
total += "<font color=\"" + hexCode + "\">" + string.substring(i, i+1) + "</font>"
}
document.getElementById('output').innerHTML = total;
}
function getRed(string)
{
return string.subString(1, 3);
}
function getGreen(string)
{
return string.subString(3, 5);
}
function getBlue(string)
{
return string.subString(5, 7);
}
function toHex(N)
{
if (N==0) return "00";
var list = "0123456789ABCDEF";
N=Math.max(0,N);
N=Math.min(N,255);
N=Math.round(N);
return list.charAt((N-N%16)/16) + list.substring(N%16, N%16+1);
}
function RGBtoHex(R, G, B)
{
return "#" + toHex(R)+toHex(G)+toHex(B);
}
function returnHexChar(Char)
{
Char = Char.toUpperCase();
if (Char == "A")
return 10;
else if (Char == "B")
return 11;
else if (Char == "C")
return 12;
else if (Char == "D")
return 13;
else if (Char == "E")
return 14;
else if (Char == "F")
return 15;
else return Char;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Starting HEX: <INPUT TYPE="text" NAME="hex1" VALUE=""><P>
Ending HEX: <INPUT TYPE="text" NAME="hex2" VALUE=""><P>
Text: <INPUT TYPE="text" NAME="text" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)" onMouseOver="testResults(this.form)">
</FORM>
<p id="output"></p>
</BODY>
</HTML>
Hello, I have looked through a tutorial that does text gradient without the use of images. I found this tutorial: http://www.thomasfrank.se/text_color_gradients.html However, only the first "SPAN CLASS" gets gradiented and the other spans don't. In the bottom of the page it says: Quote: If you call the gradientText.set() without any arguments it will go looking for all span tags with class names starting with gradient_ and apply gradients to them But I do not know what it means, I have tried learning a bit of Javascript and I think it could mean something like "if something is something, then". But I'm not sure. Please help, thanks. This might be a really stupid question. I'm new to javascript, and I'm wondering if it is possible to add a css class to a for Loop? Just so that I get this result without having to write every paragraph: <code> example { text-align:center; height:100cm; } </style> </head> <body> <p>0m</p> <p>1m</p> <p>2m</p> <p>3m</p> </body> </code> Hello, Using Javascript, How would I go about apply the following code below as a style class (Error) to a single textbox? Here's what I have so far: Code: document.getElementById('T1').style.backgroundColor = 'FEF6F4'
document.getElementById('T1').style.border = '1px solid #CD0A0A'
Thanks. J Hi guys i am newbie here. I would really appreciate some help. Here is the issue. I would like to implement jqtransform http://www.dfc-e.com/metiers/multime...e/jqtransform/ I cant seem to get it working. Here are my searchform files (searchform.tpl) and (searchform.php) SEARCHFORM.TPL Code: <style type="text/css">
<!--
#searchform .form-container form table tr td div table tr td .note span strong {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
.findbutton {
}
-->
</style>
<link href="../css.css" rel="stylesheet" type="text/css" />
<title>Oztradesman.com.au</title><div id="searchform">
<div class="form-container">
<form action="<?php echo BASE_URL; ?>/search_results.php" method="get">
<table width="946" height="290" align="center" cellspacing="5">
<tr>
<td width="932" height="278" valign="top" style="padding-bottom: 15px; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; font-weight: bold;"><div align="center">
<table width="694" height="262" align="left" cellspacing="2">
<tr>
<td width="10"> </td>
<td width="171"><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="22" /><img src="../../../Background.gif" alt="the bestTradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /></td>
<td width="40"><p align="left"><img src="../../../Background.gif" alt="Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder" width="1" height="1" /></p>
<p align="left"><img src="../../../Background.gif" alt="Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman" width="1" height="1" /></p></td>
<td width="20"></td>
</tr>
<tr>
<td> </td>
<td height="58"><img src="../../../Background.gif" alt="the bestTradesman in Australia" width="1" height="1" /></td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
<td width="92"> </td>
<td width="68"> </td>
<td width="71"> </td>
<td width="87"><p class="note"> </p>
<p class="note"> </p></td>
<td width="11"> </td>
</tr>
<tr>
<td valign="top" nowrap="nowrap" style="padding-bottom: 15px; font-size: 15px;"> </td>
<td height="47" valign="top" nowrap="nowrap" style="padding-bottom: 15px; font-size: 16px;"><p align="left" class="note"> </p>
<p align="left" class="note"> </p>
<p align="left" class="note"> </p>
<p align="left" class="note"><strong>Select Trade</strong></p>
<p align="left" class="note"><strong><strong><?php echo $form->getFieldHTML('category'); ?></strong></strong></p>
<p align="left" class="note"> </p></td>
<th valign="top" style="padding-bottom: 15px"><p align="left" class="note"><span style="padding-bottom: 15px; cursor: text;">
<p align="left" class="note">
<p align="left" class="note">
<p align="left" class="note">
<!-- <?php echo $form->getFieldHTML('location_id'); ?> -->
<td valign="top" style="padding-bottom: 15px"><p align="left" class="note"> </p></td>
<td width="65" height="47" valign="top" style="padding-bottom: 15px; font-size: 16px;"><p align="left" class="note"> </p>
<p align="left" class="note"> </p>
<p align="left" class="note"> </p>
<p align="left" class="note"><strong>Location</strong></p><p align="left" class="note"><?php echo $form->getFieldHTML('zip'); ?></p>
<p align="left" class="note"> </p></td>
<td width="1" valign="top" nowrap="nowrap" style="padding-bottom: 15px; font-size: 15px;"> </td>
<td height="47"><p> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="right"><span class="note"><span style="padding-bottom: 15px;"><?php echo $form->getFieldHTML('zip_miles'); ?></span></span></p>
<p align="center"><strong>Surrounding Areas</strong></p>
<td valign="top" style="padding-bottom: 15px"><p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"><span style="padding-bottom: 15px;">
</span></p>
</p></td>
<td valign="top" style="padding-bottom: 15px"><p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"><span style="padding-bottom: 15px;">
<input name="input" type="image" class="button" title="Find Tradesman" value="Search" src="../../../The-Find-Search-button.png" alt="Find Tradesman builder plumber electrician painter" align="left" width="98" height="32" hspace="0" vspace="0" />
</span></p></td>
<td valign="top" style="padding-bottom: 15px"><p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p>
<p class="note"> </p></td>
<td> </td>
<td width="6"> </td>
</tr>
<tr>
<td valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td colspan="2" valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td valign="top" style="padding-bottom: 15px"> </td>
<td height="48" valign="top" style="padding-bottom: 15px"><div align="left"></div></td>
<td valign="top" style="padding-bottom: 15px; cursor: text;"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td colspan="2" valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td valign="top" style="padding-bottom: 15px"> </td>
<td> </td>
<td></td>
</tr>
</table>
</div></td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript"><!--
document.getElementById('keyword').focus();
//--></script>
SEARCHFORM.PHP Code: <?php
if(!defined('IN_PMD')) exit();
$searchform = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'blocks/search_form.tpl');
$search_form_object = $PMDR->getNew('Form');
$search_form_object->addField('keyword','text',array('label'=>$PMDR->getLanguage('public_general_search_find'),'fieldset'=>'search','value'=>$_GET['keyword'],'style'=>'width: 220px; height: 28px;','id'=>'searchfield'));
$search_form_object->addField('category','select',array('label'=>$PMDR->getLanguage('public_general_search_category'),'fieldset'=>'search','value'=>$_GET['category'],'style'=>'width: 220px; height: 28px;','first_option'=>'','options'=>$db->GetAssoc("SELECT id, title FROM ".T_CATEGORIES." WHERE hidden=0 AND level=1 ORDER BY left_"),'class'=>'input_small'));
$search_form_object->addField('location_id','select',array('label'=>$PMDR->getLanguage('public_general_search_location'),'fieldset'=>'search','value'=>$_GET['location_id'],'first_option'=>'','options'=>$db->GetAssoc("SELECT id, title FROM ".T_LOCATIONS." WHERE hidden=0 AND level=1 ORDER BY left_"),'class'=>'input_small'));
$search_form_object->addField('location','text',array('label'=>$PMDR->getLanguage('public_general_search_location'),'fieldset'=>'search','value'=>$_GET['location'],'style'=>'width: 215px; border:#000 1px solid;','id'=>'searchfield'));
$search_form_object->addField('zip','text',array('label'=>$PMDR->getLanguage('public_search_zip'),'fieldset'=>'search','style'=>'width: 215px; border:#000 1px solid;','id'=>'searchfield'));
$search_form_object->addField('zip_miles','radio',array('label'=>$PMDR->getLanguage('public_general_search_within'),'fieldset'=>'search','value'=>$_GET['zip_miles'],'style'=>'width: 2cm;','id'=>'radiosearchbutton','options'=>array('25'=>'')));
$search_form_object->addField('submit','submit',array('label'=>$PMDR->getLanguage('public_general_search_search'),'fieldset'=>'button'));
$searchform->set('form',$search_form_object);
unset($search_form_object);
?>
Now i load the JQUERY.JS and JQTRANSFORM.JS files through the HEADER.PHP file. This is how it looks; HEADER.PHP Code: <?php
$timing_start = explode(' ', microtime());
if($PMDR->get('header_file')) {
$header = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'/'.$PMDR->get('header_file'));
} else {
$header = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'/header.tpl');
}
// Check for maintenance option and show header message bar if necesarry
if($PMDR->getConfig('maintenance') AND in_array('admin_login',$_SESSION['admin_permissions'])) {
$header->set('maintenance',true);
}
if($PMDR->getConfig('usershare') == 'FacebookConnect') {
$header->set('facebook',true);
}
if($PMDR->get('meta_description')) {
$header->set('meta_description',strip_tags($PMDR->get('meta_description')));
} else {
$header->set('meta_description',$PMDR->getConfig('meta_description_default'));
}
if($PMDR->get('meta_keywords')) {
$header->set('meta_keywords',$PMDR->get('meta_keywords'));
} else {
$header->set('meta_keywords',$PMDR->getConfig('meta_keywords_default'));
}
if($PMDR->getConfig('search_display_all') OR on_page('index.php')) {
$header->set('searchform',$searchform);
$header->set('search_display_all',($PMDR->getConfig('search_display_all') OR on_page('index.php')));
}
$PMDR->loadJavascript($PMDR->getConfig('head_javascript'));
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.'/includes/javascript_global.js"></script>');
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'javascript.js"></script>');
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'jquery.js"></script>');
$PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'jquery.jqtransform.js"></script>');
//if(is_object($xajax)) $javascript .= $xajax->getJavascript(BASE_URL.'/includes/xajax/');
$PMDR->setAdd('javascript_onload','
var headID = document.getElementsByTagName("head")[0];
if(headID) {
var newScript = document.createElement(\'script\');
newScript.type = \'text/javascript\';
newScript.src = \''.BASE_URL.'/cron.php?type=javascript\';
headID.appendChild(newScript);
}
');
if($PMDR->get('javascript_onload')) {
$onLoad = '<script language="javascript" type="text/javascript" charset="'.CHARSET.'">';
$onLoad .= "function onLoad() {\n";
$onLoad .= implode("\n",$PMDR->get('javascript_onload'));
$onLoad .= "\n}";
$onLoad .= 'window.onload=onLoad;'."\n";
$onLoad .= '</script>'."\n";
$PMDR->loadJavascript($onLoad);
unset($onLoad);
}
$javascript .= implode("\n",(array) $PMDR->get('load_javascript'));
$header->set('load_javascript',$javascript);
$header->set('load_css',implode("\n",(array) $PMDR->get('load_css')));
$header->set('css_file_path',BASE_URL.TEMPLATE_PATH.'css.css');
// Add title from configuration to end of array and display, seperated by a dash -
//$PMDR->set('page_title',array_merge(array_reverse($PMDR->get('page_title')),array($PMDR->getConfig('title'))));
$header->set('page_title',implode(' - ',array_merge(array_reverse($PMDR->get('page_title')),array($PMDR->getConfig('title')))));
if($PMDR->get('breadcrumb')) {
$header->set('breadcrumb',$PMDR->get('breadcrumb'));
}
?>
This is all i have done other than the basic css which i didn't include so i don't make things more complicated. I would really appreciate some help on this. Regards, George Hi, I currently have a script that dynamically adds a css class called "on" to a menu item once it is selected, turning that link red to show that it's active. Here is the web page: www.talmagecooley.com/films.html As you can see, if you click on "Dimmer" or "Pol Pot's Birthday", or one of the three Patriotville scene links (1, 2, or 3), those links stay red. But what I need to happen is that when the user hovers over OR clicks on "1", "2", or "3", the word "Patriotville" also turns red along with those links. Here is the current code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='on'; Lst=obj; } /*]]>*/ </script> <li class="rss-popup" id="patriotville"><a id="three" href="#" onclick="" class="feed-link" style="color:#fff;">PATRIOTVILLE</a></li> <div id="clips"> <li class="rss-popup"><a id="four" href="#" onclick="changeIt('film3_1');CngClass(this);">1</a></li> <li class="rss-popup"><a id="five" href="#" onclick="changeIt('film3_2');CngClass(this);">2</a>|</li> <li class="rss-popup"><a id="six" href="#" onclick="changeIt('film3_3');CngClass(this);">3</a></li> </div> ********** Any help would be greatly appreciated! Thanks!! var myDoc = app.documents[0] var mySel = app.selection[0] var myStory = mySel.parentStory; // Now we are pointing to the entire story var myHolidayStyle1 = "Holiday-Day_of_the_week" // Header 'day of the week' var myHolidayStyle2 = "Holiday-Month_and_date" // Header 'month and day' var myHolidayStyle3 = "Lead Paragraph" // Lead Paragraph 'default paragraph style' myStory.paragraphs[0].appliedParagraphStyle = myHolidayStyle1; //Header 'day of the week' and Month and day. myStory.paragraphs[1].appliedParagraphStyle = myHolidayStyle2; // Header 'month of the day' myStory.paragraphs[2].appliedParagraphStyle = myHolidayStyle3; // Lead Paragraph 'default paragraph style' //.appliedParagraphStyle = myDoc.paragraphStyles.item (myHolidayStyle1); //mySel.paragraphs[-1].insertionPoints[-1].paragraphs[0]; //Loops to change all the paragraphs to Paragraph body to ever paragraph (only problem is its limited to the entire page.) for (loop=0; loop<myStory.paragraphs.length; loop++) myStory.paragraphs[loop].appliedParagraphStyle = myHolidayStyle3; // Something simple to check if text 'drops out' of a certain text frame. currTextFrame = app.selection[0].parentTextFrames[0]; currPar = currTextFrame.paragraphs[0]; while (currPar && currPar.parentTextFrames[0] == currTextFrame) { currPar.appliedParagraphStyle = someStyle; currPar = currTextFrame.paragraphs.nextItem(currPar); } // Script for starting Spell Check var WshShell = app.menus.item(0); var WshShell2 = WshShell.submenus.item(1); var WshShell3 = WshShell2.submenus.item(1); var WshShell4 = WshShell3.menuItems.item(0); WshShell4.associatedMenuAction.invoke(); Would this work, do I got a pretty generalized idea of how it should be written. I want this script to apply data that comes in from a export that is imported into Indesign. Basically Holidaystyle1 and 2 are already preset in data from a program called Linear. But the day, month, and date, will change. So I hoping there is a way from the script above to make 1 and 2 be at the top of the page, and style 3 be the paragraph style that leads in the text until the next articles are reach that start with like say 'Friday' and 'November 12', and the routine repeats itself again, until there is no-more data. (**edit** Is there a way to tell the script to put a line break or empty line between Style 0 and style 1?) I hope this make sense. I would love for the script to do all the data at once, and at the end, I put a spell check function that checks to make sure the spelling and grammar are correct, before the script finally ends. Hi coders, I have a form where customers can register thierselves by entering the relevant fields. There is a control() javascript which ckecks if everything on the form is ok before submitting it. Althugh IE applies the script for its every check, Firefox only applies the first check (first if statement) of the script. The rest is ignored. Here is the javascript code: Code: function control()
{
if (document.member.FirstName.value == ""){
document.member.FirstName.focus();
alert("Please fill the name field");
return false;
}
if (document.member.FirstName.value.length<2) {
alert("Name field cannot be shorter than 2 characters.");
document.member.FirstName.focus();
return false;
}
if (/[\d]/.test(document.getElementById("FirstName").value)) {
alert("Entered numbers into the Name field");
return false;
}
if (document.member.LastName.value == ""){
document.member.LastName.focus();
alert("Please fill the Lastname field");
return false;
}
if (document.member.LastName.value.length<2) {
alert("Lastname field cannot be shorter than 2 charcters. Please check again.");
document.member.LastName.focus();
return false;
}
if (/[\d]/.test(document.getElementById("LastName").value)) {
alert("Entered numbers into the Lastname field");
return false;
}
if (document.member.Address1.value.length<10) {
alert("Address field contains less than 2 characters.");
document.member.Address1.focus();
return false;
}
if (document.member.Username.value == ""){
document.member.Username.focus();
alert("Username field cannot be blank");
return false;
}
if (document.member.Address1.value == ""){
document.member.Address1.focus();
alert("Address field cannot be blank ");
return false;
}
if (document.member.City.value == ""){
document.member.City.focus();
alert("City field cannot be blank");
return false;
}
if (document.member.Email.value == ""){
document.member.Email.focus();
alert("E-Mail field cannot be blank.");
return false;
}
if (echeck(document.member.Email.value)==false){
document.member.Email.focus();
return false;
}
if (document.member.PhoneNumber.value == ""){
document.member.PhoneNumber.focus();
alert("Phone number field cannot be blank");
return false;
}
if (!/^\d*$/.test(document.getElementById("PhoneNumber").value)) {
alert("Entered characters into the Phone Number field");
return false;
}
if (document.member.Pass.value == ""){
document.member.Pass.focus();
alert("Password field cannot be blank.");
return false;
}
if (document.member.Pass2.value == ""){
document.member.Pass2.focus();
alert("Password confirmation field cannot be blank.");
return false;
}
if (document.forms[0].Pass.value.length<6) {
alert("Password field cannot contain less than 6 characters. Please check");
document.member.Pass.focus();
return false;
}
if (document.member.Pass.value != document.member.Pass2.value) {
alert("Password and password confirmation fields are not identical. Please check ");
document.member.Pass.focus();
return false;
}
if (!isTelNum(document.forms[0].PhoneNumber,'Telefon ')) return false;
if (!isNum(document.forms[0].InternalPhoneNumber,'Internal Phone number')) return false;
//if (!isValidEmail(document.forms[0].Email)) return false;
return true;
}
Well its interesting that only the first check is taken into consideration. if (document.member.FirstName.value == ""){ The rest is not even seen. Even if you do not fill the rest of the form, the submit button tries to submit the form regardless what more needs to be checked. Here is the submit button: Code: <input type="submit" name="member" value="Register Me" id="member" onclick="return control()";> Any observations and comments are appreciated. Hiya! I'm a total JS beginner, so any help is appreciated. I've created the simple select box below that will "onchange" when an item is selected. I'm trying to apply the "selected" or "selected="selected" attribute to items that are chosen from the menu. Example: The goal is to show " <option value="/1" selected="selected"> " when page "/1" is chosen and to show <option value="/1"> when /1 is not the current page. I've follow a few simple tutorials with no luck and even tried php conditionals to trigger the "selected" attribute with no luck. Any feedback is GREATLY appreciated, thank you! Code: <form name="guideform" method="get"> <select class="wptdb_jumpbar_select" name="mymenu" onChange="window.location=document.guideform.mymenu.options[document.guideform.mymenu.selectedIndex].value"> <option value="/1">Home Page #1</option> <option value="/2">Home Page #2</option> <option value="/3">Home Page #3</option> <option value="/4">Home Page #4</option> </select> </form> -------------------------------------------------------------------------------- Can some1 help me at this, i am very new to javsciprt and HTML things, so as the title says, a simple bold to the selected text in a div is what i need. below is the div area i have, so how do it?? Code: <TD colspan="25" width="525px" style="text-overflow: ellipsis; overflow: hidden;">
<input type="hidden" $acmForms.bindText("casecomments") />
<div #if (!$acmForms.getFormAttributes().isReadOnly())
CONTENTEDITABLE
#end
onKeyUp="dairy_limitTextArea(this, 4000)"
onKeyDown="dairy_limitTextArea(this, 4000)"
id="spell_casecomments" style="width:800px; height:220px; overflow: auto; border: 1px solid #bdcee5;">
</TD>
All, Say I have the following divs on my page: Code: <div class="fn-area" id="69" style="left: 133px; top: 81px; width:97px; height: 230px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="69" style="position:relative;"></div> <span class="fn-note-content">creep</span> </div> </div> <div class="fn-area" id="70" style="left: 386px; top: 143px; width:136px; height: 129px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="70" style="position:relative;"></div> <span class="fn-note-content">creep</span> </div> </div> <div class="fn-area" id="71" style="left: 43px; top: 344px; width:151px; height: 222px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="71" style="position:relative;"></div> For the class "fn-area" it's different sizes for each div on the page. Can I use Javascript to get these coordinates and when I onmouseover this div I'd like an image to be displayed with the same coordinates and same size as the div? I want to use the same image for each rollover so the image would have to get resized for each rollover. How can this be done? Thanks in advance. Hi, I have tried to figure this out but haven't had any luck.. I need a td (id="td1") to have a bgcolor of black when a variable is equal to 1. So: var x = equation that is equal to 1; if (x == 1) { Code to make td have a black bg; } else { Don't change anything.} I am stuck because all the resources that I could find are talking about td:hover CSS. - Waffles Hi, I have the following javascript codes. I have two textboxes with id "pano" and "pano2" My function creates numbers randomly and that if random number==1 let the background of textbox2 be pink and if random number==2 textbox1 be red. The code works fine for document.bgColor but it does not work for textboxes how can I modify the code so that I can change the background color of any textboxes ? thanks.. <script> aaa=setInterval("letsgo()",500); function letsgo() { rno=Math.floor(Math.random()*3)+1; document.getElementById("counter").value=rno; if(rno==3) { document.bgColor="green"; } if(rno==2) { var pano=document.getElementById("pano"); document.pano.bgColor="red"; } if(rno==1) { var pano2=document.getElementById("pano2"); document.pano2.bgColor="pink"; } } </script> <input type="text" id="counter" style="position:absolute;top:10px;left:50px;width:60px;height:20px;"> <input type="text" id="pano" style="position:absolute;top:100px;left:100px;width:200px;height:200px;"> <input type="text" id="pano2" style="position:absolute;top:100px;left:400px;width:200px;height:200px;"> I am assuming that this is an issue with the js on my index page: http://www.yourbusybee.com/fb/ The main menu on this page has a sub-menu under "About". I've tried changing the CSS for the menu in order to make that sub-menu background be 50% transparent, but nothing is fixing it. I see things about "fade" within the js code, but I just don't see how to set how far it fades in or out. Can anyone assist me with this? I'd be awfully appreciative! Thanks in advance. ~Laura Is it there way to set desktop background picture from web page? For example, i have wallpaper.php and there 6 wallpapers, is there javascript to install them directly pb click something on page? Like install button?
I am looking to have a panoramic image used as the background webpage scroll automatically while the page is open. I do not want the user to have to scroll the image or hover over a div. Is there a way to accomplish this in JS?
Hey guys! I have this website mmosaga.com and in need of some help to fix my BG. Im trying to get my BG to rescale to various of monitor sizes. My monitor width is 1440 and my BG images are Width: 1566 Height:768. I want that position to show up on all the other browsers including IE. Here the code I use PHP Code: <html> <head> <script language="javascript"> function randomBackground() { var myImages = Array(); myImages[0] = 'Florenga.jpg'; myImages[1] = 'pangar.jpg'; myImages[2] = 'GrandChaseBG.png'; myImages[3] = 'ADBG.png'; myImages[4] = 'AionBG.png'; myImages[5] = 'FiestaBG.jpg'; myImages[6] = 'GalaxyOnlineBG.jpg'; myImages[7] = 'GunzBG.png'; myImages[8] = 'IrisOnlineBG.png'; myImages[9] = 'MabinogiBG.png'; myImages[10] = 'APB.jpg'; myImages[11] = 'S4LeagueBG.jpg'; myImages[12] = 'APB.jpg'; myImages[13] = 'WorldOfTanksBG.jpg'; myImages[14] = 'Elsword.jpg'; myRandomNumber = Math.floor(Math.random()*myImages.length); document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')'; } </script> <style type="text/css"> body { background-attachment: fixed; background-repeat: no-repeat; } </style> </head> <body onload="randomBackground();"></body> A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded? window.onload = function() {var bodyTag = document.getElementsByTagName("body")[0]; bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)"; bodyTag.style.backgroundAttachment = "fixed"; bodyTag.style.backgroundPosition = "100% 100%"; bodyTag.style.backgroundRepeat = "no-repeat";} Grateful for clues Hi! all I have a js which change the background color onclick event. This is the code Code: function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert. Thanks for your help. Hey, been racking my brain for about an hour now, and cant seem to work this one out... I need to in javascript, get the HEX value (#FFFFFF) of a div's background color... Code: style.backgroundColor doesnt seem to work... But it seems to be different in every browser, and i cant seem to make it work... (it must work in IE, FF, Chrome, Safari) I have tried using a couple of examples, but nothing seems to work... Any ideas? Thanks |
|||||||