JQuery :: Get A True Cross-fade, Not The Sorta Cross Fade Used By Default?
May 27, 2011
Simple question really. The cross fade option used by default with cycle is not a linear one...it looks like it uses some kind of S curve because during the crossfade animation the background (meaning the area behind the images being cross-faded) becomes visible. Example screenshot taken mid-transition. The pink should never be visible behind the grey, but it is:
[Code]...
at the moment, which is leading to background visibility. Is there another fx option I should be using?
I'm working on a simple mouseover function to swap div/image fade IN and OUT and I'm getting this white flicker in between. It seems like the fadeIn waits for the fadeOut to start, hence the flicker. I've searched and found solutions, but can't implement them correctly as I am more of a beginner with JS and jQuery.
Simple question: Is there a linear crossfade for cycle?
Here's the problem: the "fade" transition isn't linear: fades out the first image faster than it fades in the second. This leads to the problem where the background is slightly visible behind the images being faded during a transition.
Put another way: if the cycle plugin is set up to fade two white images over a black background, the slideshow should always be 100% white; but it's not...during the transition the black is visible through the white, making the transition pulse from white to grey.
Setting the BG colour is not the solution I'm after. I'd like to have cycle do a linear fade.
Is there any way to resize an iframe dynamically to the height of its content that works cross browser and works when the iframe content is on another domain than the main page (I have access to both pages, so code can be put in either) Also, it must resize when links in the iframe are clicked (ie when a new page within the iframe is loaded)
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: [URL] My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language
This is the link to my site so far: [URL] 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).
I have a gallery style page with rectangular images on laid out like a grid of nine. When the user looks at the page there is just the images and no information, but when they hover over the image I would like some text and a bar underneath to show up over the top so the user can read some information.my images sit in "a" tags. There is also a div tag in there which has it's z-index and position (absolute) set up so that it sits over the top of the image element in the "a" tag. stripped down e.g.
<a href="#"><img.... /><div>the info</div></a>
I need the div tag withinin the "a" tag to be set to 0 opacity. When the user hovers over the image the div tag slowly fades in to 100% opacity. Once the user moves the mouse away from the image the div tag slowly disappears again.I need each one to work independently so that it only changes the one currently being hovered over.
I'm having problems with my text appearing aliased and turning blue when it fades in and out. I've tried using the Newsticker plugin and the Easyticker plugin, and I'm getting the same result in IE7 and Firefox 3.6. I'm using jQuery 1.2.6-min Specifying a background color doesn't fix it. The examples on the plugin websites look fine, but when I try and implement the effect myself, my orange text becomes aliased and fades to a light blue color before dipping to white. Same thing happens on the fade in. attached is a screenshot of what I'm seeing.
This is probably a basic question as I am a beginner with Javascript/JQuery. Here is my code for the head and body elements, what am I doing wrong as nothing is happening. Is it my element id? I just want the whole dive to fade when the page opens and to fade in over mouse over. Here is the code:
I found this script for a navigation fade-in/fade-out and I want to modify it so it'll only trigger the fade-in/fade-out functions of the span class is NOT set to active. Here is the javascript:
Code: $(function() { $("#nav ul#menu li span.active").css("opacity","1"); $("#nav ul#menu li span.active").hover("opacity","1");[code].....
It's the part of the code beneath the comment CONDITIONALS BELOW that I want to be able to only trigger it if span is not set to class .active.
have this Multiple Image Viewer very similar, -in fact almost identical- to the one in the main page of economist.com It uses the following code and its woriking nice,
Code: function switch_product_img(divname, divnumber, divtotal) {for (var i=1; i<=divtotal; i++) { var showDivName = divname + '_' + i;
I am php developer,[URL]... a fade in fade out effect (image + text) which is working very nice but Can i do this like with text on top(not on an image)and image below it like header : text below that an image
example <table> <tr><td> header for image</td></tr> <tr><td> image here</td></tr> </table>
Can you pls suggest any other script to display an html page or pages like this just the way i had defined above in fade in fade out ....
I would like to implement a fade in fade out effect on hover in the 'Our News' section, so when I hover over a news item the grey background of that box fades in slowly, how can I do this?
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?
Images are displayed one after the other with fade in and fade out .There are 20 images in slide show ....I want to show "Locading ...." message till all the images are loaded ...or display some GIF which will indicate the images are being loaded...
Now do try to do the same in IE (6.0). The images don't fade into each other. Instead, they hesitate, which is annoying, and then jump from one image to the other, suddenly, with no fade.
Can anyone tell me why that is? Does IE not recognize opacity?
i want to use jquery to make a fade in/ fade out menu / sub menu structure. the structure works, the only this is that when i hover from the topic to the corrisponding submenu the submenu fades out and back in.how can i stop that? the function .stop() doesn't work, it will give me other problems, like if you hover from menu to sub menu over and over the opacity of the sub menu will get to 0 and then i need to reload the page.
here is my code:
jquery: $(document).ready(function(){ var config = { sensitivity: 8, // number = sensitivity threshold (must be 1 or higher) interval: 300, // number = milliseconds for onMouseOver polling interval
I'm fairly new to javascript and JQuery so please bear with me. I've written a simple app using JQuery whose purpose is to select the fastest mirror site. To this end I use several $.ajax calls - one to each mirror site -and I don't do anything with the data I get from these, I only use the order in which they respond to sort the sites from fastest to slowest. I'd share the code, but really the only thing it does is call the $.ajax function and append a line in a table using the success: callback. This works perfectly fine for most browsers, except IE which throws the 'access is denied' error. I know about cross domain restrictions and understand the reasoning behind - my plan was to put my script in the 'trusted' zone and enable the required options to bypass the problem as this will be used in a controlled environment, but no matter what I try my code won't run in IE. Some of my mirror sites are indeed in a different domain. What I have trouble understanding is why all other browsers (FF, Chrome etc), with their default configuration, allow my code to run flawlessly? If the reasoning behind IE blocking this is correct, then why do others allow it? Also obviously for my purpose using a server-side proxy makes no sense as I want to test the sites from the client side, not from the server. I've also read about other work arounds such as JSONP but unfortunately the sites that I'm testing cannot support this. But once again, what I'm really wondering about is why my code works flawlessly in other browsers..
I'm new to this group, and after doing a lot (and I mean a LOT) ofsearching, I can't find an answer for my problem:I'm basically trying to do a simple $.getJSON, and the setup issimple:Firefox 3.5 MacOSX, latest jQuery (1.3.2)the json file named "myjson.json" (I've reduced its contents to itsminimum for testing purposes and it validates in JSONLint):
{"result": "true"} The javascript: $.getJSON('http://site1:8888/myjson.json', {}, function(data) { alert
I'm building a web app that provides music information (i.e. info on artists, albums, songs, etc.) and for the info source I'm using the MusicBrainz API.
Now, I'm trying to load the data from an API call and process it, with jQuery.
This is the code I'm using:
With 'queryString' being the URL string for the request, and then I'd proceed to read the data out of the 'xml' object. Fairly simple.
However, this is where problems arise. The code works flawlessly when running locally on my computer, but does not work at all when I upload everything to my web server and try to run it there. I did some reading and have discovered that AJAX calls can't be made across different domains, due to security issues.
So I've read through numerous solutions, but almost all require either something with PHP (which I have absolutely NO knowledge of) or grabbing the data in JSON format (which apparently isn't subject to the same security restrictions). However, my main problem is that the MusicBrainz API does not return data in JSON format (in fact the only format it returns is XML).
The following topic had driven me nuts for a few hours. I have been reading article after article trying to get this to work, with no luck. Lets start with what im trying to do.I am making a JS file that people can link on their webpage, and will create tooltips on links (from data from my database). Ok np. I have a php file for testing.
Code: $item = $_GET['item']; if ($item == "test") {
I'm having a problem with the jQuery UI Datepicker, specifically getting it to show free days based on a ajax query and json response. The first thing I learned was that $.getJSON could in some cases execute after the $(document).ready function had completed, therefore the data would not be available before the datepicker was rendered. So instead I binded the datepicker within the ajax success callback, and whilst the day highlighting works in Chrome browser, it doesn't work in IE or FF at all (the datepicker works but the highlighting doesn't).
I'm using the Dialog of jQuery UI. The problem I'm facing is with some inline added content. Basically inside that dialog I have a button, upon clicking it a list appears after getting its dynamic content through a PHP file, so the list can have 1 item or 100. The problem is that when the length of this list exceeds the height of the dialog box (overflows the dialog), the exceeding becomes hidden instead of appearing outside it... How to overcome this?
I have two websites. One is my mediaWiki, and one is my production site.I would like to use the mediaWiki APIand $.post() to login to the wiki and retrieve pages from the Wiki.
