|
JavaScript - Jquery Fade - Problem With Text
Hi,
This must be a 1st. It works ok in IE...But not in Firefox? I need to use white text over a dark bg color or if possible over an image. The problem is in FF the white text distorts on fade The black text works ok when adding the white bg. See my test code below. (It can be copied straight in to test) If anyone could please take a quick look and give some pointers. Code: <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0; position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}
p{font-size:30px;background-color:purple;color:#fff;}
h2{font-size:30px;background-color:#fff;color:#000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery;
var welcomeBannerTimer;
function nextSlide(){
var el = $j('#welcomebanner');
var slides = el.data('slides');
var c = el.data('slideIndex');
var n = ((c+1) >= slides.length)? 0 : c+1;
el.data('slideIndex', n);
$j(slides[c]).fadeOut(null, function(){
$j(slides[n]).fadeIn();
});
}
function over(){
clearInterval(welcomeBannerTimer);
}
function out(){
welcomeBannerTimer = setInterval(nextSlide, 3000);
}
$j(window).load(function() {
var el = $j('#welcomebanner');
var slides = $j('#welcomebanner>li');
if (slides.length < 2){
$j(slides[0]).show();
return;
}
el.data('slides', slides);
el.data('slideIndex', 0);
welcomeBannerTimer = setInterval(nextSlide, 3000);
el.bind('mouseenter', over).bind('mouseleave', out);
$j(slides[0]).show();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="welcomebanner">
<li>
<h2>testing the text fade</h2>
<p>testing the text fade</p>
</li>
<li>
<h2>Firefox and IE problems</h2>
<p>Firefox and IE problems</p>
</li>
</ul>
</div>
</body>
</html>
Similar TutorialsHi, I have a problem with a fade script using jquery, in firefox etc.. all is ok. But IE the fade does not fade it just comes in & out. If any one would be kind enough to have a quick look I would appreciate it. You can see the js in the main page, not an external file. The url is www.thecityspa.co.uk 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? 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! Hi, On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas? I was using the below code to fade text links in and out on hover. But the problem I'm having is that if you hover over the text a few times quickly the animation will play over and over. Can someone help me add a 'callback'(?) so while the animation is still playing it won't fade in/out again until its finished? Or point me in the direction of a better way of doing this effect. Thanks for reading and I looking forward to your help and responses! Heres the code: Code: $(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
Hello everybody, I'll quit new as it comes to programming, so please forgive this nono on forehand. I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout. Thanks for your help. Code: <html>
<head>
<script language='javascript'>
function blink(elementid){
colorarray = Array(
'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
'#9c1c0f');
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}
function changecolor(x) {
var x= document.getElementById(x);
if (x != null){
x.style.color = colorarray[i];
if (i==24){ i= 0;
colorarray = colorarray.reverse();
}
}
i++;
}
var text=new Array();
text[0] = "text 1";
text[1] = "text 2";
text[2] = "text 3";
</script>
</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>
</body>
</html>
Hi everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with: Code: <html>
<head>
<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>
</head>
<body>
<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>
<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />
</body>
</html>
I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time. Hi, I am using the Javascript Galleriffic in my website, the text fades and casuses the text to not be anti-aliased in IE8 Help please hi, I have a form with a tick at the end of each formfield: Code: <label>First Name<a href"#">click</a></label> <input class="text-input medium-input" type="text" id="medium-input" name="FirstName" /> <span class="input-notification success png_bg">Successful message</span> the style is currently set to display:none; I would like to use the FadeIn() method on the input-notification class when someone enters some text at the moment I am trying to test using a link to click on: Code: <script>
$("a").click(function () {
$("tab2").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
});
</script>
this doesn't work as I have 2 tabs and the link sends it back to tab1 Hi, I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located: Code: // create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")
Here is the code in the master page which finds the javascript: Code: <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>
Here is the function call in the masterpage to fade and cycle the images: Code: <body onload="FadeAndCycleImages()"> Here is the code in the masterpage which references the cycling images: Code: <span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>
Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated. Thank you, petela okay i have a problem...i get the content of my rows from my database... the problem is when there is 4 rows... and i try to click on the 1st row... instead of it being deleted the 3rd row is deleted.. when i click on the 2nd row... the 4th row is delete... the moveicon.gif is the image for deleting the row.. there is no problem when i remove the javascript...but when i applied it i noticed the poblem Code: <table width="759" border="0">
<tr>
<td colspan="5"><span class="style8">Confirmed Request</span> </td>
</tr>
<tr>
<td width="105" bgcolor="#408080"><span class="style5">Type</span></td>
<td width="463" bgcolor="#408080"><span class="style5">Topic</span></td>
<td width="108" bgcolor="#408080"><span class="style5">Date</span></td>
<td width="25" bgcolor="#408080"><div align="center"></div></td>
<td width="36" bgcolor="#408080"><div align="center"></div></td>
</tr>
<%@ page import="com.sun.rowset.CachedRowSetImpl;" %>
<%
int i = 0;
CachedRowSetImpl crset3 = new CachedRowSetImpl();
crset3 = view.home2();
while (crset3.next())
{
String day3 = crset3.getString("dep_date");
String[] monthcol2= day3.split("-");
year = Integer.parseInt(monthcol2[0]);
month = Integer.parseInt(monthcol2[1]);
day= Integer.parseInt(monthcol2[2]);
m="";
if(month==1)
{
m="Jan";
}
else if (month==2)
{
m="Feb";
}
else if (month==3)
{
m="March";
}
else if (month==4)
{
m="April";
}
else if (month==5)
{
m="May";
}
else if (month==6)
{
m="June";
}
else if (month==7)
{
m="July";
}
else if (month==8)
{
m="Aug";
}
else if (month==9)
{
m="Sept";
}
else if (month==10)
{
m="Oct";
}
else if (month==11)
{
m="Nov";
}
else if (month==12)
{
m="Dec";
}
if(i==0)
{
%>
<tr>
<script src="images/jquery-latest.js"></script>
<script type="text/javascript">
<!--
function confirmation1(){
var answer = confirm("Do you want to move this to archives?")
if (answer){
$("#movieIcon").parents("tr").fadeOut("slow");
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
}
else{
}
}
//-->
</script>
<td scope="row"><fade1><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %> </span> </div></fade1></td>
<td scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_name")%></a>
</span> </div></td>
<td > <span class="style7">
<% out.println(day);%>
<% out.println("-");%>
<% out.println(m);%>
<% out.println("-");%>
<% out.println(year);%>
</span></td>
<td ><div align="center"><a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=yes,scrollbars=yes,status=yes,width=640,height=500'); if (chw != null) chw.focus(); return false"><img src="../Chapters/images/reporticon.gif" border="0"></a></div></td>
<td ><div align="center"><img id="movieIcon" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation1()"/></div></td>
</tr>
<%
i=1;
}
else
{
%>
<tr>
<script type="text/javascript">
<!--
<!--
function confirmation(){
var answer = confirm("Do you want to move this to archives?")
if (answer){
$("#movieIcon1").parents("tr").fadeOut("slow");
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
}
else{
}
}
//-->
//-->
</script>
<td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %></span> </div></td>
<td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"><%= crset3.getString("dep_name")%>
</span> </div></td>
<td bgcolor="#CCCCCC"> <span class="style7">
<% out.println(day);%>
<% out.println("-");%>
<% out.println(m);%>
<% out.println("-");%>
<% out.println(year);%>
</span></td>
<td bgcolor="#CCCCCC"> <a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=no,scrollbars=yes,status=no,width=640,height=500'); if (chw != null) chw.focus(); return false"><div align="center"><img src="../Chapters/images/reporticon.gif" border="0"></div>
</a></td>
<td bgcolor="#CCCCCC" ><div align="center"><img id="movieIcon1" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation()"></div></td>
</tr>
<%
i=0;
}
}
%>
</table>
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! All, I have the following code: Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script>
$( "#drg" ).draggable({
revert: true
});
var drpOptions = {
drop: function(event, ui) {
$(this).append( ui.draggable.text() + "<br>" );
}
};
$( "#drplist" ).children().droppable( drpOptions );
$( "button" ).button().click(function() {
$( "<li>Dynamic droppable<hr></li>" ).droppable( drpOptions ).appendTo( "#drplist" );
});
</script>
<style type="text/css">
#drg { background: silver; width: 100px; padding: 0.5em; text-align: center; }
ul, ul li { list-style: none; margin:0 ; padding: 0; }
#drplist li { width: 200px; height: 100px; margin: 1em; padding: 0.5em; background: lightgreen; }
</style>
</head>
<body>
<div id="drg">
Drag me
</div>
<hr>
<button>Click to add a droppable</button>
<ul id="drplist">
<li>Drop here<hr></li>
</ul>
</body>
</html>
Basically what I would like to happen is that when I click on the button it generates the table like it did and then I want like two checkboxes next to it with some text and a break line in between the two. How can I update my jQuery to give me this result? Thanks in advance! if you visit my site: http://site-tonight.com/works you will notice if you click the image, the Colorbox comes up with a new image, BUT if you click the word Details below the image, the colorbox effect does not take place, even though it using the same link as the image. is there a way to make that text link be clicked and have an image pop up in the colorbox style? thanks much, kyle I have made myself an HTML Menu which is located on top of my current Flash object. I have a question whether it really is not possible to get the same effect as 'text' has on the original "Flash Menu" EX: www.moebelarkitekten.dk and get the same effect over at my new HTML menu (Coded with Jquery) EX: http://www.richyjassal.co.uk/moebelar/ Right now it is almost the same effect, but only: OnMouseOver align text to Right OnMouseOut text to align left A guide, or other? Hi, I'd like to use the jQuery validation plugin as seen on the following example: http://docs.jquery.com/Plugins/validation#Example But it doesn't work properly if I use inline/in-filed labels. Any help is appreciated! Rain Lover Please take a look at oceangamer.com Press the login/Sign up in the header of the page. It slides down fine in IE but in mine it refuses to slide up if i click close. Every other browser, it works??? Whats the problem? Hi, First of all, please excuse my ignorance of JQuery(and coding in general) - Although I hastily grab plugins and try to use them, I really do appreciate them, and also the help you may provide me with my problem! My problem is this - I was looking for a simple and effective slideshow to use in a website I was making. SimpleSli.de(http://www.simplesli.de/) was exactly what I was looking for. It works great when it works but sometimes when I load the page it kind of doesn't work. I don't know what is going on but only approximately 50 pixels of the slideshow is visible. This happens sporadically when you refresh the page multiple times, and seems to not work more often on Google Chrome. I've eliminated every possible wrong doing in my code and tried installing firebug to help me identify the problem but for now this is beyond my understanding. JS Lint also purged errors in the code but still the same intermittent problem. I tried to contact David Drew - the creator of SimpleSli.de but he has not responded to me. On top of this I was trying to Auto Play the slideshow on load but could not get this to work. The code for it is available on the SimpleSli.de website but I tried to implement it in every possible way but it did not work. This problem is secondary and not really a proper problem so no worries if you can't help me on this one. The website in question is http://www.argsecurityscotland.co.uk/ Thank you in advance for your time and expertise, I really appreciate it. I am aware that there are common problems with this and that the fix is probably this: Code: $(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
However I can't figure out how to make my menu get in front of my jquery banner in ie6 and 7!! Ive been literally trying all day. Then I found that site explaining that that code would fix it. however I cannot get it to work with my site! Here is the link to my page: http://bit.ly/5fwhPP I'm not sure if just plopping that javascript before my other scripts will do it but it sounded like it from the page I found the code on. I could really use some help here I am completely jammed up and cant focus on anything else until i fix this stupid issue! Any help is therefore greatly appreciated! I am trying to make a lightbox type plugin and I am running into a problem. I hope it is something simple that I am overlooking. Here is my code: jQuery.fn.overlay = function() { $(this).click(function() { $('body').append('<div id="over"></div>'); $('#over').fadeIn(); }); }; It (almost) does what it should. It draws the #over div to the screen just fine. The problem is when I try to access it. I try something like this and get no response: $(function() { $('#over').click(function() { alert('moo'); }); }); Its like the element is not getting the ID assigned to it. Does anyone have any ideas? Thanks in advance. |
|||||||