|
JavaScript - Simple Javascript Class/fade Help
I have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class
Code: <div id="menu"> <ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li> <li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li> <li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li> </ul> </div> and here is the javascript.. (JQuery) Code: $(document).ready(function(){
$("#menu a").fadeTo("slow", 0.6); // This sets the opacity of the menu to fade down to 60% when the page loads
$("#menu a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 40% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 100% on mouseout
});
});
What do I add so any "<li>" that has the class "<li class="active"> isnt effected by the javascript so it just displays at 1.0 instead of 0.6? Similar TutorialsHi, 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 If the value is negative it should be in red, otherwise it should be in green. It looks like JavaScript completely ignores the css class. Help please. Code: <html>
<head>
<title>Prva</title>
<style type="text/css">
span.Pozitivno
{
color:green;
font-weight:bold;
}
span.Negativno
{
color:red;
font-weight:bold;
}
</style>
<script type="text/javascript">
function vpisi_stevila()
{
var a;
var b;
//Vnos spremenljivk
a=prompt("Vnesi stevilo a:")
b=prompt("Vnesi stevilo b:")
a=a*1 //S tem spremenimo string v int
b=b*1
//Izpis stevil
if(a<0)
{
document.write("A:<span class='Negativno'> " + a + " </span> <br />");
}
else
{
document.write("A:<span class='Pozitivno'> " + a + " </span> <br />");
}
if(b<0)
{
document.write("A:<span class='Negativno'> " + a + " </span> <br />");
}
else
{
document.write("A:<span class='Pozitivno'> " + a + " </span> <br />");
}
document.write("Vsota:", a+b, "<br />");
document.write("Razlika:", a-b, "<br />");
document.write("Mnozenje:", a*b, "<br />");
document.write("Deljenje:", a/b, "<br />");
document.write("Ostanek:", a%b, "<br />");
if(a>b) //Ce je A vecje od B
{
document.writeln("A je <b>večje </b> od b")
}
if(a<b) //Ce je B vecje od A
{
document.writeln("A je <b>manjse </b> od b")
}
if(a==b) //Ce sta enaka
{
document.writeln("A je <b>enako </b> b")
}
}
</script>
</head>
<body onload="vpisi_stevila()">
</body>
</html>
Hi all. I'm learning JS from pretty much scratch and the first thing I'm trying to do is simply make an image fade function. I just can't seem to make it work though, the image starts off at the right opacity (im this case 0.5) but after that the page goes white and the script never stops. It does seem to be counting up normally "opacity: 0.6 opacity: 0.7" etc. though. Code: <img src="1.jpg" id="pic1">
<script type="text/javascript">
var amount = 0.5;
var target = document.getElementById('pic1');
function fade() {
if (target.style.opacity < 1.0) {
target.style.opacity = amount;
amount = amount + 0.1;
document.write("<br>opacity: " + target.style.opacity);
setTimeout("fade()", 1000)
//fade();
}
}
fade();
</script>
edit I rewrote it to make it simpler but still having basically the same problem D:! Hi, I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it. The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery"> I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this? Thanks J This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules {
margin:0px -20px 20px;
background-color:#9999CC;
min-height:100%;
width:100%;
}
.single_module {
border:solid 1px #000000;
background-color:#000000;
height:160px;
padding:0;
margin:-1px 0px 0px -1px;
width:240px;
float:left;
}
.toggleopacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;
}
And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});
Hey, I have modified a script that used to fade in a image (and it worked fine) to fade in a table with that image inside it. The table doesn't fade in The HTML that is produced is exactly this, but the hashes are urls: Code: <table style="float:left; opacity:0; "> <tr <td> <a href="#" rel="lightbox[group]"> <img src="#" width="97" height="97" /> </a> </td> </tr> <tr> <th> </th> </tr> </table> These are my two functions Code: function addImage(src) {
var table = document.createElement("table");
table.style.float = "left";
var tr_1 = document.createElement("tr");
var td_1 = document.createElement("td");
var a_1 = document.createElement("a");
a_1.src = src;
a_1.rel = "lightbox[group]";
var img_1 = document.createElement("img");
img_1.src = src;
img_1.width = 97;
img_1.height = 97;
a_1.appendChild(img_1);
td_1.appendChild(a_1);
tr_1.appendChild(td_1);
var tr_2 = document.createElement("tr");
var th_2 = document.createElement("th");
tr_2.appendChild(th_2);
table.appendChild(tr_1);
table.appendChild(tr_2);
document.getElementById("thumbnails").appendChild(table);
if (table.filters) {
try {
table.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
table.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
table.style.opacity = 0;
}
table.onload = function () {
fadeIn(table, 0);
};
}
function fadeIn(element, opacity) {
var reduceOpacityBy = 5;
var rate = 30; // 15 fps
if (opacity < 100) {
opacity += reduceOpacityBy;
if (opacity > 100) {
opacity = 100;
}
if (element.filters) {
try {
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}
} else {
element.style.opacity = opacity / 100;
}
}
if (opacity < 100) {
setTimeout(function () {
fadeIn(element, opacity);
}, rate);
}
}
this is the previous addImage function: Code: function addImage(src) {
var newImg = document.createElement("img");
newImg.style.margin = "5px";
document.getElementById("thumbnails").appendChild(newImg);
if (newImg.filters) {
try {
newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
newImg.style.opacity = 0;
}
newImg.onload = function () {
fadeIn(newImg, 0);
};
newImg.src = src;
}
The opacity of the table stays at 0, and never appears (but I can still click on the link) Can anyone help me make the table fade in like it was supposed to? Hi! I'm wondering if somebody here could help me please. I'm trying to develope the image slideshow using PHP and JavaScript. The idea is that the PHP file gets random images from the folder, i'm using session to prevent repeating the same image and then JavaScript generates the fade slideshow using that PHP file. I've come up with the solution to use two img tags in the HTML page, so JavaScript then swap them around and play with opacity, but unfortunately couldn't make it work. Everything I have tried in JavaScript didn't work properly. I'd be grateful for any help and advice guys. Thank you. My PHP code: PHP Code: <?php class images { var $images = Array(); var $imgDir = 'images/'; function getImages() { $images = Array(); if ($dir = opendir($this->imgDir)) { while(($file = readdir($dir)) !== false) { if(preg_match('#(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)#i', $file)) $images[] = $file; } closedir($dir); } return $images; } function getNextImage() { if (($images = $this->getImages()) !== false) { session_start(); if (!isset($_SESSION['image'], $images[$_SESSION['image']])) { $index = mt_rand(0, count($images)-1); } else { $index = $_SESSION['image'] == count($images)-1 ? 0 : $_SESSION['image']+1; } $_SESSION['image'] = $index; return $images[$index]; } return false; } function outputImage() { if (($file = $this->getNextImage()) !== false) { header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1 header('Expires: Wed, 9 Dec 1981 07:00:00 GMT'); // Date in the past header('Content-type: image/jpg'); readfile($this->imgDir.$file); exit(); } } } $img = new images(); $img->outputImage(); ?> My HTML page: Code: <html> <head> <title>Images</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script> </head> <body onload="startSlideShow();"> <h1>Images</h1> <div id="imageWrap"> <div id="images"> <img id="sampleImgFade" src="images.php" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" /> <img id="sampleImg" src="images.php" width="800" height="600" alt="images" onload="mainLoaded();" /> </div> </div> </body> </html> CSS code: Code: #imageWrap {
clear: both;
}
#images {
position: relative;
clear: both;
}
#sampleImgFade {
position: absolute;
top: 0px;
left: 0px;
}
JavaScript code which doesn't work properly(just to show in which direction I'm going): Code: var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
img = new image();
img.src = "images.php";
}
function coverLoaded(obj) {
loaded['cover'] = true;
setOpacity(obj, 100);
window.setTimeout("startFade", 5000);
}
function mainLoaded() {
loaded['main'] = true;
if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
loaded['start'] = false;
loaded['main'] = false;
loaded['cover'] = false;
fade = window.setInterval("fadeIn()", 50);
}
function fadeIn() {
var obj = document.getElementById("sampleImgFade");
var opacity = getOpacity(obj);
if (opacity > 0) {
setOpacity(obj, opacity-5);
} else {
window.clearInterval(fade);
document.getElementById("sampleImg").src = "images.php?u="+i++;
}
}
function getOpacity(obj) {
if (obj.filters) {
return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
} else if (obj.style.MozOpacity) { // mozilla
return obj.style.MozOpacity*100;
} else if (obj.style.KhtmlOpacity) { // konquerer
return obj.style.KhtmlOpacity;
} else { // not supported
return 0;
}
}
function setOpacity(obj, opacity) {
if (obj.filters) {
obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
} else if (obj.style.MozOpacity) { // mozilla
obj.style.MozOpacity = opacity/100;
} else if (obj.style.KhtmlOpacity) { // konquerer
obj.style.KhtmlOpacity = opacity;
}
}
Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! PHP 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"> <!-- var image1=new Image() image1.src="images/slideshow/image001.jpg" var image2=new Image() image2.src="images/slideshow/image002.jpg" var image3=new Image() image3.src="images/slideshow/image003.jpg" var image4=new Image() image4.src="images/slideshow/image004.jpg" var image5=new Image() image5.src="images/slideshow/image005.jpg" var image6=new Image() image6.src="images/slideshow/image006.jpg" var image7=new Image() image7.src="images/slideshow/image007.jpg" var image8=new Image() image8.src="images/slideshow/image008.jpg" var image9=new Image() image9.src="images/slideshow/image009.jpg" var image10=new Image() image10.src="images/slideshow/image010.jpg" var image11=new Image() image11.src="images/slideshow/image011.jpg" var image12=new Image() image12.src="images/slideshow/image012.jpg" var image13=new Image() image13.src="images/slideshow/image013.jpg" var image14=new Image() image14.src="images/slideshow/image014.jpg" var image15=new Image() image15.src="images/slideshow/image015.jpg" var image16=new Image() image16.src="images/slideshow/image016.jpg" var image17=new Image() image17.src="images/slideshow/image017.jpg" var image18=new Image() image18.src="images/slideshow/image018.jpg" var image19=new Image() image19.src="images/slideshow/image019.jpg" var image20=new Image() image20.src="images/slideshow/image020.jpg" //--> </script> </head> <body> <img src="images/slideshow/image001.jpg" name="slide"> <script type="text/javascript"> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src" ) if (step<20) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Hi We've been trying to work out the solution to this problem all day now, and no luck. So I'm hoping someone here maybe able to help. We're using a fade image slideshow from : http://www.javascriptkit.com/script/...tionshow.shtml On our webpage: http://lovelyhotels.co.uk/lvm/contact.htm It works perfectly in Firefox, Chrome and Safari. However in I.E. ( were using v.9) it shows no images at all, just a blank space The code is exactly the same as the page on javascriptkit yet his images fade as they should in IE and ours do not show at all. Anyone got any ideas at all what maybe wrong Many thanks! http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? Hello everybody! This is my first post at CodingForums! I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin. The structu I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post. What I want to do is: when the user hovers over (OnMouseOver) "post" div: ".title" spans's background color fades from black to red. when the user hovers out (OnMouserOut) "post" div: ".title" spans's background color fades back to black. The Code Code: $j(document).ready(function(){
$j(".posts").hover(function(){
$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
},function(){
$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
});
});
The Problem The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state? Any help would be greatly appreciated, Cheers, Drew. I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero Hi I have been working at this for a while now but can't seem to figure out how to do it. What I want to do is have a class which i have done and lets say the class is called ABC so eventhing inside that would need to have ABC.test(); but what I want is to have something like ABC.test.create() where test is the sub class and I want the create function only work if the sub function is test, if that makes sence, so if the code was ABC.create() the it wont work because the subclass 'test' hasnt been called. The codes I have done at the moment a Code: function ABC(){
this.test=function(){
this.create=function(){
// code \\
}
}
}
////////////////////////////////////////
function ABC(){
this.test=function(){
this.test.create=function(){
// code \\
}
}
}
////////////////////////////////////////
function ABC(){
var test;
this.test.create=function(){
// code \\
}
}
////////////////////////////////////////
function ABC(){
var test = this.test;
this.test.create=function(){
// code \\
}
}
But none of them have worked, if anyone knows how i can do this please help, thank you! I currently have a navigation bar with CSS. It sits by itself in a frame so it doesn't change with the other page turns. So I'm trying to figure out how to set each link class="active" since it always stays on the same page. I'm thinking javascript will be my friend. Is there an onclick function that can be defined? I'm not new to webpages but new to learning javascript, instead of borrow someone's code. I didn't know how to approach this code because I think I need it to say: If Onclick, then set to class="active", otherwise (then), set class="nothing" or anything to this regard. I was not sure how I could approach that code and how to fit into the UL/LI html code I currently have setup as well as the head code. Example code: (I have 3 frames called head, form, and body. Head is the nav bar where this code sits.) Code: <ul class="menu"> <li><a href="choose.htm" class="active"><span>Home</span></a></li> <li><a href="search.htm" target="form" onClick="top.body.location='http://www.google.com';"><Span> Google</span></a></li></ul> With my CSS code, the "menu" defines some colors/setup, as so does Span and class="active". As a bonus, if you could teach me instead of just help me, it would help me help others. I have a store that sells certain products. When you add a product to the cart and go to view your cart you can estimate shipping costs. It will list different shipping methods and the cost to ship them. However, there is one shipping method called "Request a Quote" that has a price value of 0.01. This can confuse customers because they sometimes think that the shipping is only $0.01 when it really isn't. So I want to just remove this value, but still list pricing for all the other shipping methods. I know I can just do this using CSS and setting the display to none. But am having trouble getting it to work. Here is the link to the shopping cart page: Folding Chairs and Tables.com - Shopping Cart If you add a product and run the 'estimate shipping and tax' you will see what I'm talking about. How can I remove this value? Any help would be really appreciated. Here is a picture of what the table looks like when you calculate the estimate shipping costs: Thank You No Jquery plz As you can see that I want to remove this advertisement area (denoted by 1) via some java code. Now one can observe that this advert is hosted in the 'main-content' id & wrapped in 'inner' class. One cannot remove/hide id but CAN remove/hide the class which also will remove/hide the advert area placed within this class. Okay. So here's what I'm trying to do. I have my landing page to my site and near the bottom I have 4 little 48x48 class divs (for social network link images if you were wondering ). Each Class div has a background style all to it's own. (so in this case 4 different divs with 4 different class names) . What I want to do with the javascript is to have a function(s) that when called on (depending on which div.class was/is clicked on) will open up a lightbox/new page containing the new page (pertaining to the appropriate social network, depending on which class has been clicked on). I don't want to put an <a></a> tag around the div.classes themselves seperately because the landing page itself has 8 different styles, plus the div.classes I would have to hunt down within the site itself. haha Basically in short I want the classes to have seperate links that when clicked upon it calls the function, opens the lightbox (or opens the new tab/page) and loads the appropriate page. Think yall can help me out here? |
|||||||