|
JavaScript - How Can I Have Text Onclick Change 2 Styles?
I would like to have a text link do 2 things:
1. Change #box1.style1 to class="style2" (from style1) 2. Change #box2.style2 to class="style1" (from style2) So the text link would not change its own style, but change the class of 2 different divs Your help on this is very much appreciated. Thank you Similar TutorialsI'm very inexperienced with Javascript, but want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this? Also is there a way of tracking how many clicks each person gets? I'd really appreciate any help you guys can give me on this I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Would this work? or do I got the wrong function commands? How would I alter this to make it work, been staring at the screen for 8 hours..... var myInDesign = app var myDocument = app.activeDocument var myDocName = myDocument.name app.findParagraphStyle.caseSensitive = false; app.findParagraphStyle.wholeWord = false; app.findCharacterStyle.wholeWord = false; app.findCharacterStyle.caseSensitive = false; app.findParagraphStyle.findWhat = "SN.outabout.DAY-Gray"; app.changeParagraphStyle.changeTo = "SN.Holiday-Day_of_the_week"; app.documents.item(0).changeParagraphStyle(); app.findParagraphStyle.findWhat = "SN.outabout.DATE"; app.changeParagraphStyle.changeTo = "SN.Holiday-Month_and_Day"; app.documents.item(0).changeParagraphStyle(); app.findParagraphStyle.findWhat = "SN.listingsLT"; app.changeParagraphStyle.changeTo = "SN.Holiday-Paragraph"; app.documents.item(0).changeParagraphStyle(); app.findCharacterStyle.findWhat = "SN.listingsBOLD"; app.changeCharacterStyle.changeTo = "SN.Holiday-Title_Paragraph"; app.documents.item(0).changeCharacterStyle(); //myInCopy = CreateObject("InCopy.Application.CS3") //Not sure if this would work, just crafting idea's. //var myDocument = myInCopy.ActiveDocument //var mySelection = myInCopy.Selection.Item(1) //var myStory = MySelection.ParentStory //var myText = myStory.Paragraphs.Item(1) //myStory.CheckOut //myText.ApplyParagraphStyle myDocument.ParagraphStyles.Item("zAPPROVED"), True //myStory.CheckIn Can I just do this with like a Nested If, then Statement? Hi, I'm a javascript idiot, and I need a script to change two styles in two different elements based on the status of 2 radio buttons. Basically, I have 2 forms...#formTest and #formTest2. When radio button "search" value "1" is selected I need the display style for #formTest to be "block" and the display style for #formTest2 to be "none". When radio buton "search" value "2" is selected, I need the opposite to occur. (#formTest display style ="none" and #formTest2 display style="block") I have very buggy code which produces similar changes, but does other bad things, so won't work. Basically, the first selection change displays both forms, which after the first selection change works fine, unless you click anywhere else, in which case both forms are not displayed. I know I should use a function in the head and call it with an onselect or onclick event. I just don't know how. I appreciate any help anyone can offer me! My ugly (nonfunctional code is below) Search by Make: <input name="search" type="radio" value="1" onclick="document.getElementById('testForm').style.display='block';" onchange="document.getElementById('testForm').style.display='none';" checked="checked" /> <br /> Search by Category: <input name="search" type="radio" value="2" onclick="document.getElementById('testForm2').style.display='block';" onchange="document.getElementById('testForm2').style.display='none';" /> Thanks Again I have a form where I want certain fields to be visible only if the user clicks a checkbox on the form. Specifically, when Presented_to_Goverment_EntityCheckbox0 is checked, these fields should appear. Code: DropDownList ID="GovEntity" Officials_Last_NameTextBox0 Officials_First_NameTextBox0 Officials_TitleTextBox0 I created two different styles, show below; one makes the fields visible and one hides them Code: <style type="text/css">
.hideit {
visibility: hidden;
overflow: hidden;
position: absolute;
}
.showit {
visibility: visible;
overflow: visible;
position: static;
}
</style>
Then I surrounded the fields with a div ID'ed as wdiv Code: <div class="hideit" id="wdiv">
Type Government Entity:
<asp:TextBox ID="Type_Government_EntityTextBox"
runat="server"
Text='<%# Bind("Type_Government_Entity") %>' />
<br />
Officials Last Name:
<asp:TextBox ID="Officials_Last_NameTextBox"
runat="server" style="display:none"
Text='<%# Bind("Officials_Last_Name") %>' />
<br />
Officials_First_Name:
<asp:TextBox ID="Officials_First_NameTextBox"
runat="server"
Text='<%# Bind("Officials_First_Name") %>' />
<br />
Officials_Title:
<asp:TextBox ID="Officials_TitleTextBox"
runat="server"
Text='<%# Bind("Officials_Title") %>' />
<br />
</div>
I am using the following javascript to change the styles in response to an onclick event. Code: <script language="javascript" type="text/javascript">
function changeDiv(wdiv) { thediv = document.getElementById(wdiv);
if(thediv.className == 'hideit'){
thediv.className = 'showit'; } else if (thediv.className == 'showit'){
thediv.className = 'showit'; }}
</script>
I call the Javascript in this line Code: <asp:CheckBox ID="Presented_to_Goverment_EntityCheckBox" onClick="ChangeDiv(wdiv)"
runat="server" />
<br />
However nothing happens when I click the checkbox and if I look in Firefox's error console it says ChangeDiv is not defined. Thanks. I have the concept down to change the CSS for a label when I click it. <label class="text" onClick="this.className='big_text" style="margin:5px;">Text</label> I was wondering, the goal is that it works, it changes from small text to big text when selected, but how can I change to back to small text from big text and vice versa using java for only the CSS? Much appreciated! C8 hi all, I am using ajaxcontent javascript to load content into certain parts of the website and all my links work that way.. the problem with that is that I can't use classical approach for building menus.. like when you assign "current " class to your link and then it changes color or whatever when you follow link to another html or whichever website. So I have menu like this .. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');"><b>Five</b></a></li>
I'm sorry for my English is so bad.. but I will try to explain what I'd like to achieve.. I'd like to put in some kind of onclick script which will change class of that <li> to current but at the same time I want to change <li class="current"> to <li class=""> or <li class="whatever">... so here I go again.. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');" onclick="this.className='current'"><b>Five</b></a></li>
Now this changes the <li> class to current and I only want to have 1 current. In this case link "Five" should have current class others should have no class or class="whatever" its same Thank you for any answers in advance Hi Guys, How could I change Code: <a onclick="processForm();">Continue</a> to Code: <input type="checkbox" name="agree" value="1" onclick="if(this.checked).processForm();" /><label for="agree">Continue</label> or to Code: <input type="checkbox" name="agree" value="1" checked="checked" onchange="if(this.checked).processForm();" /><label for="agree">Continue</label> Code: <script type="text/javascript">
function processForm() {
$.ajax( {
type: 'POST',
url: '<?php echo $submit); ?>',
data: '<?php $data); ?>',
success: function(data) {
$('#message').html(data);
}
} );
}
</script>
when i Using <a onclick="processForm();">Continue</a> then work fine, but i needed the checkbox. Anyone could help me? Hi, I have a row of buttons that are made by innerhtml using this code: Code: sidebar_html += '<div id="button"><input type="button" onclick="toggleRun('+poly_num+')" value="Start Bus" id="runBtn'+poly_num+'" style="width:120px; height:24px; text-align:center"></div><br />';
to fire this function: Code: function toggleRun(poly_num){
var btn = document.getElementById('runBtn'+poly_num);
if (document.getElementById('runBtn'+poly_num).onclick) {
if (run){
run=false;
document.getElementById('runBtn'+poly_num).value="Reload Page";
startAnimation(poly_num);
} else {
run=true;
document.getElementById('runBtn'+poly_num).value="Reload Page";
window.location.reload();
}
}
}
the function can only run once, so the idea is that the button either runs it the first time or reloads the page. at the moment, the way it's working is that the button that's clicked changes its value to "Reload Page" but the others keep their original value, even though it reloads if you click them. So I'd like a way to change the value of the rest of the buttons when one is clicked. Is that possible? Here's the page if I didn't explain myself well enough. I have managed to get my program running perfectly for outputting alert boxes, however instead of alert boxes I would like my image to change with an IF statement. My main image is a pic with text saying Please enter Temperature. if the user enters a temperature it will display an alert saying HOT, MODERATE or COLD. I have made other images that basically say the same thing and I would like the appropriate image to replace the original image depending on the IF statement I have commented out my alertboxes (which work) and replaced new code above that I can't seem to get working. On lines 21, 27 and 33. Any help would be greatly appreciated. Code: <html>
<head>
<title>TempReader™</title>
<script type="text/javascript">
//This is where we decare our function to validate the HTML form
function validateform()
{
// Setting our variable name and it's value by calling it from the HTML form textbox
var temp = document.forms["inputform"]["temperature"].value
// If the input is not a number or an empty field, alert the user and stop the program
if (isNaN(temp) || temp == "")
{
alert("Please enter a number");
return false;
}
//If the input is valid we compare the input value and display the appropriate output
if (temp > 35)
{
document.getElementById("temp_img").src ="temp_hot.png";
//alert("Wow, it's really hot!");
}
else if (temp <= 35 && parseFloat(temp) >= 18)
{
document.getElementById("temp_img").src ="temp_mid.png";
//alert("It's a comfortable temperature right now");
}
else if (temp < 18)
{
document.getElementById("temp_img").src ="temp_cold.png";
//alert("Brrr, it's a little bit cold for my liking");
}
}
</script>
</head>
<body>
<div style="margin-top:0px; text-align:center">
<img id="temp_img" src="what_temp.png" alt="Temperature" />
</div>
<form name="inputform" method="post" action="">
<table>
<tr><td><input type="text" name="temperature" value="Enter Temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td><input type="submit" value="Submit" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>
BTW, My images are stored in the same directory as the HTML file and the img names are correct How do I change the Button's value onClick? I want it to initially be "Read More" and then change to "Show Less" Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >
Hi im trying to do this: I have an app multilanguage english & spanish at the start of page it appears english flag but webpage on spanish like this pictu and when i click english flag then it turns english webpage and flag change to spanish like this image: im trying to make a loop cause when i click again spanish flag it turns to english flag but when i click again english flag it doesnt appears anything i dont get any javascript error here is my code of flags: Code: <div id="lang_panel">
<div id="ZA_lang" onclick="setLang('PA'); toggle2();"></div>
<div id="PA_lang" onclick="setLang('ZA'); toggle();"></div>
</div>
the Code: setLang('PA')
is for set webpage language. and Code: toggle(); & toggle2(): i made if for changes the flag here is full toogle & toggle2 functions: Code: function toggle() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "block";
$("PA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
function toggle2() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "none";
$("ZA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
Code: l_ZA_on.png is USA flag Code: l_PA_on.png is Panama flag Here is my code for two tab images. Code: <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
<a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>
I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ? Its basically to show which tab is active, one image is lighter then the other. Can anyone help ? I'm fairly new to JS so sorry in advance if this is a stupid question! I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page. My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic. I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself." I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?) So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself? heres the JS I'm using to update the div: Code: <label for="editor1">Background Story</label>
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="story"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval('updateDiv()',100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#story').html(editorText);
}</script>
Code: <img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle"> <img id="chosen" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image" onclick="chosen()"> <img id="ambassador" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image"onclick="ambassador()"> Code: function chosen()
{
document.getElementById("who").src="chosen_for_christ.jpg";
}
function ambassador()
{
document.getElementById("who").src="ambassador.jpg";
}
Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything. I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one. This is my PHP code that outputs the bases: Code: $gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$baseCount = 0;
while ($row = mysqli_fetch_assoc($result))
{
$baseimage = $row['image'];
$basesOutput .= "<input type=\"image\" id=\"".$baseCount."\" src=\"http://www.elvonica.com/".$baseimage."\" onclick=\"baseBorder(".$baseCount.");return false;\" value=\"".$baseimage."\" name=\"base\">";
$baseCount++;
}
I have a baseCount so each image ID is unique. The baseBorder() is the function that will change the border. Here is the baseBorder() function: Code: var prevId;
function baseBorder(count)
{
if (prevId)
{
$("#prevId").style.border="none";
}
else
{
$("#count").style.border="2px solid #E8272C";
prevId = count;
}
}
Can anyone help me out since it's not working? Hi, is it possible to change the class of an element onClick with a fade? This is the code I have so far which works great for changing the class but I have no idea how to include a fade in this. I am changing the class in order to change the background-image of a div. Code: <a href="#none" onclick="document.getElementById('tool').className ='tool1'">
Many thanks, M Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them, i need 2 things that they'll make: 1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3 what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3. 2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg thanks! Hello again today I am trying to figure out how to change or maybe even assign the arguments passed in a link. Code: function link(x)
{
alert("The word you are thinking is" +x);
}
<a href="#" onclick="link('cow')"> LINK</a>
As you can see from the code above clicking on the LINK would produce an alert box saying "The word you are thinking is cow" I need to find a way to use JS to change the passed argument 'cow' to something else like 'cat' I need this to be a funtion and not an input box. I will be running this through a loop and the passed parameter will be changing so if I can just figure out how to adjust the argument from a function then I think I can figure out the next stem of my project Thanks |
|||||||