|
JavaScript - Disabled Tool Bar Icons
A general question really, but does anyone have a good technique or source for creating disabled versions of tool bar buttons?
Many thanks for any assistance, S Similar TutorialsI found this perfect javascript for creating dynamic connected drop down boxes. This script works fine but there is just one thing I want to add but unfortunately I'm not familiar with javascript enough... I want to display small images when an item is selected from the second drop down. An image should be assigned somehow to each selection from the right hand drop down menu in the code and when someone selects something from the list, an image should be displayed next to it automatically. Can anyone please amend this script for me if this isn't too difficult? Code: <!-- ONE STEP TO INSTALL CONNECTED COMBOXES:
1. Copy the coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the BODY of your HTML document -->
<BODY>
<!-- Original: Mikayel Muradyan (mikam@freenet.am) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// Initialize class for Type and Style
function Type(id, type){
this.id = id;
this.type = type;
}
function Style(id, id_type, style){
this.id = id;
this.id_type = id_type;
this.style = style;
}
// Initialize Array's Data for Type and Style
TypeArray = new Array(
new Type(1, "Apparel"),
new Type(2, "Shoes"),
new Type(5, "Accessories")
);
StyleArray = new Array(
new Style(4, 1, "Apparel_1"),
new Style(7, 1, "Apparel_2"),
new Style(41, 2, "Shoes_3"),
new Style(21, 2, "Shoes_4"),
new Style(17, 2, "Shoes_2"),
new Style(30, 5, "Accessories_3"),
new Style(27, 5, "Accessories_4"),
new Style(31, 5, "Accessories_3")
);
function init(sel_type, sel_style){
document.product.id_type.options[0] = new Option("[ Type ]");
document.product.id_style.options[0] = new Option("[ Style ]");
for(i = 1; i <= TypeArray.length; i++){
document.product.id_type.options[i] = new Option(TypeArray[i-1].type, TypeArray[i-1].id);
if(TypeArray[i-1].id == sel_type)
document.product.id_type.options[i].selected = true;
}
OnChange(sel_style);
}
function OnChange(sel_style){
sel_type_index = document.product.id_type.selectedIndex;
sel_type_value = parseInt(document.product.id_type[sel_type_index].value);
for(i = document.product.id_style.length - 1; i > 0; i--)
document.product.id_style.options[i] = null;
j=1;
for(i = 1; i <= StyleArray.length; i++){
if(StyleArray[i-1].id_type == sel_type_value){
document.product.id_style.options[j] = new Option(StyleArray[i-1].style, StyleArray[i-1].id);
if(StyleArray[i-1].id == sel_style) document.product.id_style.options[j].selected = true;
j++;
}
}
}
//-->
</SCRIPT>
<form name="product">
<select name="id_type" size="1" style="width: 150px;" onChange="OnChange()">
</select>
<select name="id_style" size="1" style="width: 150px;">
</select>
</form>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// init(5, 31); // Initialize comboboxes by selected sel_type and sel_style
init(); // Default initialize comboboxes for Type and Style
//-->
</SCRIPT>
Thanks in advance! Hi all I'm messing around with this video theme over at Hive45 ... the episodes change dynamically, but as you can see the social icons don't pickup the URL change. I found a guy who had a fix, but it was using the sexybookmarks wordpress plugin and I couldn't workout how to change the icons and control the display (my icons are manually coded). E.g... Code: <a rel="nofollow" id="linker" target="_blank" href="http://reddit.com/submit?url=http://hive45.com/shows/episode-2/&title=Episode 1" title="Reddit"><img src="http://hive45.com/wp-content/themes/hive45/images/reddit_32.png" title="Reddit" alt="Reddit" class="social"></a> Here's the fix: The main bit of work for the bookmarks was in the java.js and episode.php file. Firstly episode.php I added, after line 17: Code: // <---------- MS Starts Here --------->
if ( function_exists('get_sexy') )
$sexy_str = get_sexy();
endwhile;
endif;
echo 'sexy:' . $sexy_str ;
// <---------- MS End Here --------->
Then in java.js in the ScreenWrite function, after around document.getElementById('linker').setAttribute("href",plinker); line 114 I added: Code: // <---------- MS Start Here --------->
// Find the sexy: tag, grab the text until the end, update the sexy-marks span then drop the text
from=strep.indexOf('sexy:');
sexy=strep.slice(from+5);
strep=strep.slice(0,from);
document.getElementById('sexy-marks').innerHTML = sexy ;
// <---------- MS End Here --------->
Again in java.js in the selectEpisode function right at the beginning: Code: // <---------- MS Starts Here --------->
// Get a reference to the sexy bookmarks part
sexyObj=document.getElementById('sexy-marks');
//sexyObj.innerHTML="";
delete sexyObj;
// <---------- MS Ends Here --------->
Finally in the index.php where you want the SexyBookmarks to be: Code: <span id="sexy-marks">
<?php
$temp = $wp_query;
query_posts("p=".$theid);
if(function_exists('selfserv_sexy')) { selfserv_sexy(); }
$wp_query = $temp;
?>
</span>
I'm a complete noob with javascript sadly. Any idea how to change the above code to work with manually coded bookmarks? cheers Hey, I was wondering what this tool is called: http://jsgame.mycdn.in/images/screen.png I assume it's some kind of text editor, I've seen it running in Windows and Linux. Thanks for your help hi, my problem is that .disabled only work in Firefox. How do i make it work in other browses? Below is the code i attached Code: if (output=="Available")
document.register.submitBtn.disabled=false;
else
document.register.submitBtn.disabled=true;
Hello webmasters , Iam looking for "fonts picker" tool just like "color picker" ...please help me to find one.... i hope JQUERY has solution for this but not able to fix this.... guyzz plz help me find fonts picker to use it in user input forms...Any response appreciated... Thank you... I am using tooltip plug in on a site and when I use it on a blank template, it works then when I transfer it to the page I want to use it on it does not work. The site is Here is they javascript code: Code: this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='../"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
Here is the HTML code. Code: <ul> <li><a href="mailto:rragon@cumberland.k12.il.us">Mr. Russell Ragon</a> <a href="../../Images/staffbios/rragon.gif" class="preview"><img src="1s.jpg" alt="BIO" /></a></li> </ul> Here is the CSS code: Code: #preview{
position:absolute;
border:1px solid #ccc;
padding:5px;
display:none;
color:#fff;
background-color: #333;
}
This is my first post on this forum so I hope the code is clear you can check out the site up above just hover over one of the names. I am only getting image preview instead of the image I want. Ont thing I did do was I took out the image so I could get the Alternate code. My objective here is to have a name and when you hover over it an image pops up and on the image will be a biography of the teacher. Thanks for any help. I've used js only for simple form validations thus far. I've been working on a coldfusion/ajax dynamic select list for a few days and just about have it functioning the way I want it. My question is this. Whats the best way, if any, to handle users who turn js off. What I mean is, I have so far three separate queries for my three select lists, and are populated with ajax calls. Is there a way to get the same functionality with standard queries and page refreshes in case a visitor does have js disabled? Thanks for any tips and advice. Hello, I'd like to use the following code on my website: <script type="text/javascript"> if(screen.width==1024) { document.write("<link rel='stylesheet' type='text/css' href='style1024.css' />"); } else { document.write("<link rel='stylesheet' type='text/css' href='style.css' />"); } </script> This inserts a different css file when the screen width is 1024, as you can see, BUT the problem is, that this way if someone has js disabled, he sees the page with no css, which would be very bad. So my question would be: Is there a way to set that my website checks if javascript is enabled or not and if not, it sets the normal css somehow? Thanks for your help. i have an assignment to solve in which i have given two checkboxes one is enabled and another one is disabled n m required that if we select enable checkbox the disabled checkbox may also be selected automatically can any one help out for its coding please Thanks Hi, I am working on a project and in that I have to create: Image-map tooltip (Mouseover) + Model window (On Click) Can anyone share the tutorials or any suggestions to start with. Thanks Vikrant Hi, I'm Jon. First of all excuse me if I posted this thread in the wrong forum, I really have no clue where to put this but I've had some minor experience with js so I hope it can be solved this way. I check websites and/or keywords in googles Keyword Tool External as a free service for some of my clients. The thing is that more and more clients like this service and it's becoming very time-consuming for me to do this for all of them. Is there a way to let my clients fill in the keywords or url they like researched in a form on my website, then let those words be researched and return a specified number of results in a pdf or something? My biggest concern is the captcha code. If I can't find a way to partially or fully automate this process, I'll be forced to either charge for or completely give up this service. Can anyone help me with some kind of solution? Thanks in advance. Jon I just found this web scraping tool at http://www.heliumscraper.com and I was wonderin if anyone have used it. They say on the web page you can automate it with JavaScript.
Hi! I have two input fields from who one of them i to upload image and other text field to upload image from url .I want to disable one of this fileds and to stay only one .For js code is helping me one friend but him help was enough and the code have some bugs,like fist fileds as active and them when check one has disable and opposite.I want this nly one field to be disable when the page is load but when checkbox is clicked .Sorry for my english .I hope you understand me. Code: <script type="text/javascript">
window.onload = function(){
var check = document.getElementById('check1');
var file = document.getElementById('file');
var text = document.getElementById('text');
check . onchange = function(){
if( check.checked ){
text.setAttribute('disabled', 'disabled');
file.removeAttribute('disabled');
}
else{
text.removeAttribute('disabled');
file.setAttribute('disabled', 'disabled');
}
};
};
</script>
<input id="check1" type="checkbox" name="check" /> From link!!!<br/>
Poster:<input id="file" type="file" name="poster" />
Poster from link:<input id="text" type="text" name="postlink" /><br/>
Hi all! code without "return false": <a onclick="javascript: this.disabled = 1;" href="www.abc.com"> IE6/7 : both disabled and link works IE8 : disabled works, link fails (stay on same page instead of going to www.abc.com) FF : disabled fails, link works code with "return false": <a onclick="javascript: this.disabled = 1;return false;" href="www.abc.com"> IE6/7 : same as above IE8 : same as above FF : disabled fails, link fails Please help! Thanks, Ken. Hi I need to change the font color of the disabled textboxes of our application. These disabled textboxes exist at thousands of places both at pageload or disabled conditionally clientside. I am aware that in IE8 there is no other way to change the fontcolor except use readonly. So i thought that maybe if I changed the .disabled property to something like - Code: Object.disabled {
function set() {
this.readOnly = value;
}
function get() {
return this.readOnly;
}
}
then it would make my task much easier. I searched and found out that Object.defineProperty ,may do the trick. However i am getting the mull reference error. Is there any other way? I know it's expected behavior for disabled form elements not to post, because they cannot be successful. Fine. But even after I set disabled to false through a javascript function, the form elements will not get posted. Why is that? Does anyone know a workaround? Pseudo code he Code: <input type=text name=blah disabled=disabled />
function blah {
all_blah = document.getElementsByName("blah");
for (i=0; i<all_blah.length; i++)
all_blah[i].disabled = false;
}
The intended form elements change their looks in browser, meaning they're enabled, I got javascript to acknowlegde they're enabled, but they still won't post. Thanks for any insights. Hi, I am currently detecting for Shockwave within IE by doing the following: Code: var isInstalled = false;
if (window.ActiveXObject) {
var control = null;
try {
control = new ActiveXObject('SWCtl.SWCtl');
} catch (e) {
return;
}
if (control) {
isInstalled = true;
}
}
This works as expected and if it fails to detect Shockwave I tell the user to install Shockwave. The problem comes when AcitveX is disabled as it still returns the same message that it's not installed. I would prefer to be able to include an extra step to detect if ActiveX is disabled, in which case I can tell the user to enable it rather than giving them false advice. My only idea would be to detect for an ActiveX Object that every IE user should have installed. Any ideas on what that ActiveX Object could be or any ideas on how I could tackle this problem are greatly appreciated. Thanks Hello everyone, for starters, I'm NOT working with arrays...with that being said, I need your help...I created a webform in PHP that retrieves values from a mysql table and displays them with its own mysqli_fetch_array command, in that loop it generates a textbox for each record...so far so good. The created textbox (input element) is so that the user can type in the sequential number of how to reorder the records...example Original Order of Records 1 Alpha 2 Bravo 3 Charlie 4 Delta 5 Echo and user needs it to be in this order User input sequential 2 Alpha 5 Bravo 1 Charlie 4 Delta 3 Echo the new order of the records will be saved on a temporary table in the database before insertion on the main table, kinnda like a preview for the new order, something like this: New Order of Records 1 Charlie 2 Alpha 3 Echo 4 Delta 5 Bravo Now what I need is a function that helps me display a message if the user duplicates a sequential unique, if they type in number 1 in 2 or more records, when I hit the button for the preview I need it to loop through all the input boxes and check their values, compare it with the other inputs and determine if there are duplicates or not....if there're no duplicates, continue with PHP code.....if there are duplicates, display an error so the user seeks for the duplicate and change it (inputs left in blank will not be considered for the insertion in the preview table) I already have this: Code: function checkall() {
const t='texto';
var contar=<?php echo $contar; ?>;
var text = ""
var conta = 1;
var contas= conta+1;
text = t+conta;
texto = t+contas;
//var curElement = document.activeElement.value;
var cv=document.forms['OrderPreview'][text].value;
//var cv=document.forms['OrderPreview'][curElement].value;
do {
//var cv=document.forms['OrderPreview'][text].value;
if (document.forms['OrderPreview'][texto].value=="")
{
return;
}
if (cv==document.forms['OrderPreview'][texto].value)
{
alert("Something Bad");
}
conta++;
contas++;
text = t+conta;
texto = t+contas;
}
while (conta<=contar)
}
Btw, the document.activeElement part of the code displays me "undefined" in the alert message, I still don't have a clue why, could you guide me with this please? I can't do but compare the 1st input with the rest of the fields, OR compare one field to the inmediate next field....it's driving me nuts Any help will be truly appreciated, thanks in advance I write code using ext js,openlayers and GeoExt for measuring length and area ,it is working inside inside of india in the world map but this measure tool is not working outside of india in the world map. My code for Measure length: To Load map: var projWGS84 = new OpenLayers.Projection("EPSG:4326"); var projSphericalMercator = new OpenLayers.Projection("EPSG:900913"); var bounds = new OpenLayers.Bounds(68.137, 6.783, 97.336, 37.086); bounds.transform(projWGS84, projSphericalMercator); map.maxExtent = bounds; var gphy = new OpenLayers.Layer.Google("Google Street", { 'sphericalMercator':true //maxExtent: new OpenLayers.Bounds(-20037508, -20037508,20037508, 20037508) } ); var osmLayer = new OpenLayers.Layer.OSM(); // Add the background images via WMS // Add the background images via WMS //map.addLayer(bglayer); // map.addControl(new OpenLayers.Control.MousePosition()); map.addLayers([gphy, osmLayer]); Measure Length: Measure = new Ext.SplitButton({ text:"Measure", iconCls:"icon-measure-length", toggleGroup:"navigate", group: "navigate", enableToggle:true, allowDepress:false, handler: function(button, event) { // allowDepress should deal with this first condition if(!button.pressed) { button.toggle(); } else { button.menu.items.itemAt(activeIndex).setChecked(t rue); } }, listeners: { toggle: function(button, pressed) { // toggleGroup should handle this if(!pressed) { button.menu.items.each(function(i) { i.setChecked(false); }); } }, render: function(button) { // toggleGroup should handle this Ext.ButtonToggleMgr.register(button); } }, menu: new Ext.menu.Menu({ items: [ new Ext.menu.CheckItem( new GeoExt.Action({ text: "Length", toggleGroup:"navigate", iconCls:"icon-measure-length", group: "navigate", enableToggle:true, allowDepress:false, map: map, control: new OpenLayers.Control.Measure(OpenLayers.Handler.Path , { eventListeners: { measu function(evt) { Ext.MessageBox.show({ title: 'Line length :', buttons: Ext.MessageBox.OK, width:200, msg:"Line Length: " + evt.measure.toFixed(2) + " " + evt.units }); } } }) }) ) } }) }) ) ] }) }) Hi Folks, I'm developing a software tool that can create the basic software outline (classes, modules, functions) from natural language. (The problem definition document for example) The benefits of a initial software structure are an enhanced software performance, and a greater adaptability later on. I was wondering for what purposes this tool would be interesting? And if an integrating this with a programming language would be interesting, so a pre-programmed code divided over several classes emerges. Best regards, viaBox -=-=-=-=-=-=-=-=-=-=-=-=-=-=- http://budurl.com/ViaBox =-=-=-=-=-=-=-=-=-=-=-=-=-=-= |
|||||||