I have a bunch of thumb nails that will be at full opacity when a user gets to the page. Users will be able to select their favorite. What I want to have happen is when a user selects their first favorite all of the there thumbnails will be lowered in opacity then when they select other favorites the opacity of that thumbnail will be brought to full. Each thumbnail is in a div. I am at a complete lose on how I can achieve this.
View 5 Repliesi want to change an images opacity dynamically in mozilla.
im doing it when clicking a button. yhe code used is as follows.
document.getElementById('id').style.-moz-opacity =.5;
but it is not working. i know the problem is with
style.-moz-opacity
assignment. can anyone tell me a best solution.
Code:
var foo = null; // object
function doMove() {
foo.style.opacity = foo.style.opacity+ 0.1;[code]...
I want to change the opacity of the node from 0 to 1... however it is only taking it to 0.1...
Is there a cross browser way to change the opacity of an image? I have found a way that works for IE and Firefox but would like it to work in Safari and Opera as well.
View 1 Replies View RelatedI've got this script which effectively should change the clicked link's opacity to full and its siblings' opacity to 0.6. The only part that works though is the changing the text color to black. Here's the script:
<script type="text/javascript">
$(document).ready(function(){ $(".menu a").live('click',function(){
$(this).siblings().css('color','red');
$(this).css('color','black');
$(this).css('opacity',1);
[Code]....
I am trying to check if a list item has a class of selected, then is so change the opacity to 0.5. Here is my code:
[Code]....
how to implement the same effect as the left hand side navigation bar on this site,
[URL]
I want the link to appear opaque when inactive but upon hover fade in darker.
I finally got IE to clear up its text after changing opacity with javascript, but it looks like Safari is suffering from the same issue.When I have javascript change the opacity of a div layer with text in it back to 100, It looks distorted in Safari only.My fix for IE was document.getElementById('mydiv').style. remove Attribute('filter')So thought there might be something like that for safari.
View 2 Replies View RelatedI know it would have usability issues but it would be a nice extra for a site I'm building. Circles placed around the page that could do any or all of the following:
1) fade in and out
2) grow and shrink
3) change colors
4) move around
And all without having to mouse-over. If not with CSS perhaps javascript?
I'm adding a sub menu to my portfolio page that will allow a user to filter the types of projects they want to see, but I'm not really sure how to approach this. I have a variety of web design and motion graphics projects all on the same page, and I want the user to be able to "uncheck" one category or the other, and when they do, all the divs for the unchecked category will fade out. This is the page: [URL] Does that make sense? What I'm thinking of doing is applying a unique ID to the different categories, then build a little JS that will change the opacity of those specific IDs somehow. I am not a JS ninja though, and I'm thinking there is probably a more efficient way.
View 1 Replies View RelatedI have a script that makes opacity of images change when it's called, but the problem is, in IE work perfectly, but not in mozilla. Here's the script :
Code:
function submitkeytest(){
showbanners = true;
multy = false;
x = 0;
while (x<2){
document.getElementById('b'+x).style.filter = "alpha(opacity=100)";
document.getElementById('b'+x).style.MozOpacity = 100;
document.getElementById('b'+x).style.opacity = 100;
if(document.getElementById('b'+x).name.indexOf(document.getElementById('keyfield').value)<=-1){
document.getElementById('b'+x).style.filter = "alpha(opacity=20)";
document.getElementById('b'+x).style.MozOpacity = 20;
document.getElementById('b'+x).style.opacity = 20;
}
x++;
}}
What exactly did I do wrong?
I am using the following function in order to change an image opacity on a mouseover and mouseout. This function works fine but does not handle a onClick. What I mean by this is...... How can I create/alter the function to handle an onclick? I want to be able to click on an image (one of many) and have that image opacity change to 50%. There are other similar images whose opacity would need to remain at 100%. If one of those are clicked, that images opacity would then change, and the previous would restore to original value of 100% I thought about passing the clicked images id to the function but I can't find a way to compare an image id VS a passed image id.
[Code]...
I am trying to change my cursor to a help cursor for a webapp I'm helping to develop. It partially works, except when an element has a CLASS attribute. For example:
HTML Code:
<div id="outer">
<input type="text" id="textouternoclass" />
<input type="text" id="textouterwithclass" class="foo" />
[Code]....
So now to my questions:
1) Is this okay? Is there a better way to do this?
2) With doing this, any divs/inputs that do have their cursor attribute set will lose it. What's the best way to store this info so it can be reset?
I'm building a website with a image menu like accordion, using jquery+easing+kwicks [URL]ith CSS, I can change the opacity of the element hovered (the opened kwick), but I'm looking to someway to change the opacity of the inactive kwicks (the images that close when you open a hovered image).I tried to do it with css, or hacking kwicks plugin, but I couldn't make it.
View 3 Replies View RelatedSo I have a few divs that I'm hiding and showing whenever a you click on a link. So I'm a newbie at JavaScript and this is the best way I know how to do this.
var divElement = '';
function show(divElement) {
if(divElement == 'add') {
document.getElementById('uploadImages').style.display='none';
document.getElementById('addTutorial').style.display='block';
document.getElementById('editTutorial').style.display='none';
document.getElementById('tutorialsImages').style.display='none';
document.getElementById('pendingTutorial').style.display='none';
document.getElementById('deletedTutorial').style.display='none';
} else if(divElement == 'edit') { .....
My challenge is, that I am currently styling a 'old fashion' webshop, where everything is placed in multiple tables. And on a tight deadline ;o( I need to change the table-build menu, into div-elements, so i can style/minipulate as the design requires
[Code]...
how compare the numeric value of this div's ($('#buytp1Div') and $('#buytp2Div')) and change the backgroung in a table ?
This work fine $("#tablesell1").css('background-image', 'url("images/green.gif")'); but the comparison don't work.
var objectVarName = "buytp2Div";
$('#buytp2Div').html(obj[objectVarName]);
var objectVarName = "buytp1Div";
$('#buytp1Div').html(obj[objectVarName]);
[Code]....
I'm attempting to change the display property of certain divs depending on the criteria of multiple select boxes.
I got it to work by GetElementsByTagName('div') but it then selects all divs rather then the select few i actually want it to work on. I tried changing the selection to GetElementsByName but this doesn't work, why i don't really know.
I've dumped the source code below:
Code:
I'd like to call a function to check if a div with id content has a <h1> tag and if so change the divs background colour.
View 7 Replies View RelatedI am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
[Code]...
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....
I'm looking for some javascript to work with wordpress (jQuery preferrably) that will show/hide multiple divs on one click.
I had one working but it was kinda janky because it was causing me to have two divs with the same ID on one page. No good.
Since I updated to wp2.8.3 prior to launch, it's not working. So I've decided to just try and do it right.
Here's a page: [URL]
So, what I want to happen: On page load, the first tab: "general" and it's corresponding div beneath should be showing. And the first image should be showing. The other content divs and images should be hidden. I've given the text content divs a dashed border to show their borders. When a visitor clicks "dine at home" the general div and image hide, the second content div shows, as does the second image (it's currently the identical image, but the client may change later.) Etc.
I'll be using this function on a few other pages as well.
how to adjust this javascript to work on two different IDs at once?
current code:
Code:
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');
[Code]....
I've been trying to get opacity reporting working in IE 5.5 but the
Microsoft documentation does seem to work as I interpret it even though
this documentation page seems have been written for IE 5.5
<URL: http://msdn.microsoft.com/workshop/author/filter/filters.asp>
In the html page listed below I see an error "Library not registered"
in IE 5.5. In IE 6 I see an alert that says "50" as expected.
Some of microsoft's demos on the above page also show the "Library not
registered" error in IE 5.5 but work in IE 6.
Has anyone else experienced these problems with filters? Any idea why
IE 5.5 doesn't work as advertised? Code:
In IE I have a routine that dynamically assigns objects' opacity. This works
fine for some elements but not for others.
It works for buttons and inputs but not for img, span and select.
This is the line that sets opacity from a loop through all elements:
document.forms[0].elements[i].style.filter =
"progid:DXImageTransform.Microsoft.Alpha(opacity=" + FadeOpacity + ")";
I would like to set opacity of some element to 0 through JavaScript, using GetElementById function. This is my short code inside body of HTML:
<script>
document.getElementById("element").style.opacity="0";
</script>
<div id="element">
noopacity
</div>
It doesn't seem to work, what am I doing wrong?
I want to amke something fade out, if and only if it is already set at 100% opacity.
I need to make a function that will allow me to do this.
Here is my current code:
//Time=millisecond Start and End = Amount of Opac to start with. Id = which div to affect
function opacity(id, Start, End, time) {
//frame speed here
var speed = Math.round(time / 100);
var timer = 0;
//
if(Start > End) {
for(i = Start; i >= End; i--) {
setTimeout("Opac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(Start < End) {
for(i = Start; i <= End; i++)
{
setTimeout("Opac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
function Opac(opacity, id) {
var obj = document.getElementById(id).style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";
}
How would I write a function that would allow me to fade out if opacity was already 100, otherwise it does nothing?