I'm using the Javascript technique found in the banner of [URL] on a project that I'm currently working on. Like the Bradford site, however, the results are a bit jumpy between pictures. Unfortunately I'm not strong enough in Java skills to resolve this. how to make the transition more smooth?
View 9 Replies
I would like to have a code on my page that causes two or more photos to change between each other. For example, photo 1 is shown for a little while, then it switches to photo 2, etc. I would also like to switch text that goes along with the photos. I would like my layout to look like this:Photo / Text about Photoand have both switch after a little while, to the next photo and text.
View 5 Replies View Relatedhow I can make simple fade transitions between a series of images using Javascript. I found a tutorial online that does this. However, it doesn't look right because instead of a straight fade from one image to the next, it fades out to white, and quickly fades the new image in from white. That would look ok in some instances, but for my site it would look quite annoying! I also understand that there is an easy way to do what I want in IE, but it is necessary that this works in ALL major browsers. I also do not want to use CSS3 because few browsers actually support that yet.
View 3 Replies View RelatedI want to add a nice transition that fades the old content out of my content div, retrieve the new content via Ajax, perform a resize animation on the div's height to fit the new content, and fade the new content in.
I can fade content in and out, and retrieve the data via Ajax. The content div will also resize itself to fit the new content. I'm stuck with animating the div's change in height though. More specifically, I can't figure out how to find the current height of a div in Javascript. I've tried the following:
get the height offset
var currentHeight = parseInt(getElementById("content_layer").offsetHeight);
get the actual height
var currentHeight = parseInt(getElementById("content_layer").style.height);
These do not work, however. "style.height" appears to come up as undefined. When I set "currentHeight" to this, and print the results to a textbox, value is displayed as "NaN". I do have div heights animating, but I can't find the destination height to animate to.
Between each of my image transitions is a blank period, in which no image is onscreen (verified by rightclicking blank spot).
View 15 Replies View RelatedI'm trying to work out some of the variables of a JQuery-based scripts I got here:URL...Specifically I'm trying to work out how to change the delay between slide transition, whether I can disable the auto-transitioning or not (and how), and how to change the sliding speed of the images. Which variables do they rely on?
View 1 Replies View RelatedI'm doing a javascript slideshow with image transitions. The way it's setup at the moment that slideshow and image transitions are two separate "modules" with different arrays.
First array for images looks like this:
NewImg = new Array (
"photos/1.JPG",
"photos/2.JPG"
);
Second it's a source for my thumbnails:
function photo() {
document.getElementById('div1').innerHTML = "<img src='photos/1.JPG' id='photo' class='photo'>";
}
function photo2() {
document.getElementById('div1').innerHTML = "<img src='photos/2.JPG' id='photo' class='photo'>";
}
etc..
Is it possible to include the second one, thumbnails into the first array?
I have an array similar to this:
0 -> 0
1 -> 5
2 -> 9
3 -> 2
4 -> 1
5 -> 6
6 -> 8
7 -> 7
...
There is no clear logic and that does not matter. I need to decrease the values of those by one where the value is higher than x. How would I do this?
For instance, if x = 5, then that array becomes
0 -> 0
1 -> 5
2 -> 8
3 -> 2
4 -> 1
5 -> 5
6 -> 7
7 -> 6
...
All values higher than 5 were decreased by one.
Can someone point me in the right direction to making custom javascript image slideshow transitions?
View 2 Replies View RelatedI'm trying to create a button that will increase and decrease the var speed variable
ex:
I wish to increase or decrease the size of a div by using + and - buttons. How would this be done?
View 12 Replies View RelatedTo javascript and ve got stuck,
function resizeText(multiplier) {
Here is my code it currently incresaes the font size and decreases it with use of 2 buttons on my page, but i want it to only increase in series of 2px at a time with a total of 4 clicks then it must revert to the original size.
i am getting the following error with my example code below. Message: Object doesn't support this property or method i am wanting the buttons to increase or decrease the DIV
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[Code]...
I've been working with the Cycle plugin for a while, but the only problem I'm having is that if I pass a string of transition names (comma separated), the next button goes through them in the right order but the prev button does not use the previous transition as one would expect. It uses the next transition in the list given as input. I've looked around but I could only find people fixing it for scrolling horizontally. I want it to maintain the order of transitions passed as input, not a reverse animation effect.
View 3 Replies View RelatedI am using the following code to allow the user to increase / decreasethe font size of the document. I have tested it in many browsers andin all of the following it comes back with a starting font size of16px.Firefox 3.0.8Google Chrome 1.0.1Safari Win 4 Public BetaIn IE 6/7 the font size is always coming back 1243px. Why is theresuch a difference and is there anyway to get around this besides hardcoding the starting size?
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var originalFontSize = getFontSize();
[code]....
Anyone know there is any control available in ajaxtoolkit to produce a SliderExtender control with increase/decrease button? or the other way round the NumericUpDownExtender control with a slider.
View 1 Replies View RelatedIm developing a site for my company that will contain relevant information on sites we serve (such as login details, passwords, addresses etc). It is available locally on our intranet due to the fact we have login details and such.
Anyway on the sidebar of my site (which is run on Wordpress), I have all the sections for the sites.
When a user clicks item #1, it expands and shows all the sites in that area.
The one problem is that when the sections are clicked on, they just expand in a very plain boring way.
I need it so that there is some sort of smooth transition between opening and closing the <div> sections.
Here is the current code I have now (I tried to edit as much of the comments as possible so it will make sense):
<script>
I found it on google, and modified it without having to change anything on the sidebar itself, just a simple paste to the head section.
This code also hides other currently open sections, so that only one may stay open at a time.
I am using the the jQuery Cycle Plugin and it's custom transitions to animate some <div>'s. For some reason only the first div will animate. Once it fades out the second div should fade in, but it doesn't. Once the cycle finished and returns to the first <div>, it animates properly and then continues to not fade the others.
Here is my animation code:
$('#featured-projects').cycle({
fx: 'custom',
pause: true,
cssFirst: {
left: 0,
opacity: 1
},
cssBefore: {
left: 75,
opacity: 0
},
animIn: {
left: 0,
opacity: 1
},
animOut: {
left: -50,
opacity: 0
},
cssAfter: {
left: 0,
opacity: 0
}});
I am using the Cycle plugin with the turnLeft fx. After loading, the very first slide that transitions, doesn't actually "turn".It shrinks along the z-axis up to the upper left hand corner of the div. After that the transition "turns" correctly. It doesn't matter which slide it is, I have tried using the pager to select different slides in the list...as long as it is the very first transition, I have this problem.I tested the other "turn" fx's and turnRight shrinks up to the right hand corner, turnDown shrinks to the lower left hand corner, turnUp works just fine and does not have this first slide issue.I have this problem in all major browsers. I did notice that the jQuery Cycle homepage examples for the browser effects does not have this problem. Could there be anything I'm doing wrong? The call to Cycle is burieda bit in some other code but the call is pretty straight forward...the "options.imageFx" passed in is "turnLeft":[code]
View 5 Replies View RelatedI allow my users to upload files to be imported into our database. These are usually csv or tab delimited files.I have a few customers that can't grasp the fact that the columns for the import need to be in a particular order, so for those customers, I have to manually import their files.I'd like to build a configuration screen for them to tell me what format their file is in so I can save the configuration and then import their files based on that configuration. That way, I won't have to manually import their files.I'd like something that would allow them to move columns in a table or grid to match their specific configuration.
My import process requires this configuration:Part Number,Alt P/N# or NSN P/N#,Condition Code,Quantity,Description.But several customers have files that are in this format:Part Number, Description, Quantity, NSN, Condition, Alt-Number, Manuf .I discard any unused columns, such as Manuf. (for this customer, we don't use NSN, we use Alt-Number for the Alt P/N# or NSN P/N#)I want to present them with a grid showing only the headers. Then each column should have a right and/or left arrow on them. When the arrow is clicked, that would increase/decrease the index of the column in the grid and it would move positions in the grid.Then I will take the column indexes and save them in a configuration for the customer's format to be remembered.
Any script which will allow users to increase or decrease the font-size of a site.. Free scripts that I can use...
View 1 Replies View RelatedI'm using this increase/decrease font size script:
Code:
/* Use with multiple IDs: <a href="javascript:increaseFontSize('myID','myID2','myID3');">A</a> */
var min=8;
[Code]....
It works well, but only if the text is wrapped in <p> tags. Can it be changed to just work without the paragraph or any other element - other than the element with the ID used in the script and containing the text?
i have one issue on Font resizing - To set proportional fonts(i.e Arial or verdana) to match window size. That is, if this setting is in effect, and the window is enlarged, then the font size should correspondingly increase.if you get the browser's width and height details on window resize,is it possible through javascript?
View 1 Replies View RelatedI have a webpage that is full of a grid of elements of the same height and width with float:left. I have buttons to filter elements in the grid, but after objects fade out, when the grid re-aligns itself floating left, the transition is jumpy.Is there anyway to animate this nicely, maybe have the boxes slide over to the new position? Or cache the position,calculate the new position, and then transition it nicely?I also have a movable ajax box that positions itself above the grid item that is clicked, and am avoiding something like Masonry because I am having issues with DOM seeing the size of ajax elements.
View 1 Replies View RelatedI am looking for placing small up and down arrows next to my textbox. They would work with by increasing/decreasing number of products. The text box would be active so a client could put the number of a product himself/herself or simply by clicking the up/down arrows next to the text box.
I am not sure how to look for it, I mean I thought something like that should exist by default, I search w3c and I can find only combo box etc.
Is the next jQuery code the best way to decrease an elements width?[code]I tried using the next code:[code]but that's not working, also not with '-20'.Maybe it's an idea to add this functionality? It's is already used in the .animate() function for changing the position of an element.
View 3 Replies View Related
