I can't seem to get the PNG background fix for IE6 to work for Nivo Slider. I'm using IE PNG Fix - TwinHelix and I've got iepngfix.htc and blank.gif in my CSS folder. iepngfix.htc points to blank.gif like this: IEPNGFix.blankImg = thisFolder + 'blank.gif';. In my nivo-slider.css I've got
[Code]...
Im using nivo slider and I want to have 5 images instead of the general 4 it uses.
However I have added my 5th image as the last on to be display. Once it has shown this image it doesn't loop back to the first image again. It loops to the 2nd one. Has anyone got any idea what I need to change so that it loops to the first slide again?
Ive tried adding HTML captions to see if this is what it uses to see how many slides there is, ive tried editing the total slides from 0 to 4 & 5. But still no luck :(
Heres the link to the slider : [url]
I've got a PNG set as a background image in my CSS and of course it doesn't look too hot in IE. I know there's a fix for pngs in IE but can't see anything to address the issue of background images in CSS that are pngs.
View 9 Replies View RelatedEverything was fine with my Nivo slider using jQuery 1.5.1.....as soon as I linked to 1.6......it added an inline element size of 1px in height and width to my slider and basically made the slider disappear. I have a width and height specified in the CSS, but it gets overwritten by the jQuery. As soon as I link back to 1.5.1, it works normal again.
View 2 Replies View RelatedI'm having issues with the Nivo Slider Script not showing images in IE7 it shows in all other browsers.
I'm using Wordpress as the backend.
Here is the website link,
[UrL]
I'm not sure if this is a Javascript or a CSS issue, but I'm running into trouble with the Nivo Slider, which uses the jQuery library: [URL]
This is the page I'm having trouble with: [URL]
If you click the right arrow, after about three clicks, it gets stuck and won't scroll to the right anymore. I widened the controlnav div but it doesn't do anything. what may be making it malfunction?
I'm messing a lot with the issue but it is driving me nuts Issue is, I'm applying Nivo Slider on 3 instances. It works fine on 2 but not 3rd. If I apply the Nivo Slider on 2 instances then it works fine for 1 but not for 2nd. So Strange.
View 1 Replies View RelatedI have a video-content website and use the jQuery on most all the pages. One page combines theAccordian widget with video:
[Code]...
I have used the Nivo Slider on my website: [URL]. It displays just fine on Firefox but not on IE9, it displays it as if all the images are stacked on top of one another going down the page, but the images don't actually display. Only when I turned on compatibility view on IE9 that the page works properly. I have tried placing the javascript:
Code:
<script src="[URL]" type="text/javascript"></script>
<script src="[URL]" type="text/javascript"></script>
<script src="[URL]" type="text/javascript"></script>
Between the <head> tags but then it doesn't load. It only loads if I add them into the page. Above my slider:
Code:
<div id="slider" style="width: 400px ! important; height: 300px ! important;"><img src="[URL]frontpage1.jpg" border="0" alt="frontpage1" /> <img src="[URL]frontpage2.JPG" border="0" alt="frontpage2" /> <img src="[URL]frontpage3.jpg" border="0" alt="frontpage3" /> <img src="[URL]frontpage4.jpg" border="0" alt="frontpage4" /> <img src="[URL]frontpage5.jpg" border="0" alt="frontpage5" /><img src="[URL]frontpage6.jpg" border="0" alt="frontpage6" /><img src="[URL]frontpage7.jpg" border="0" alt="frontpage7" /><img src="[URL]frontpage8.jpg" border="0" alt="frontpage8" /><img src="[URL]frontpage9.jpg" border="0" alt="frontpage9" /><img src="[URL]frontpage10.jpg" border="0" alt="frontpage10" /></div>
I am using Nivo Slider, a jquery image slider on my site Lykka.se. It works fine in all browsers except IE. In this browser an error alert appears stating 'Stack overflow at line: 881'. I am including the following scripts related to the slider in the page:
jquery-1.3.2.noConflict.min.js
jquery.nivo.slider.pack.js
The following script is included inside the <head>-section of the page:
Code:
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
And finally this is the html-code I am using:
HTML Code:
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="[URL]"><img src="[URL]" alt="" /></a><a href="[URL]"><img src="[URL]" alt="" /></a>
</div>
</div>
I'm using the jQuery Cycle plugin developed Here [URL].
In FF, IE8, etc it seems to show up just fine - no background on the animation. In IE7 its showing the color attributed to the body element - a dark blue color.
I've running in problem of getting png trans. to work with IE6 SP2 patch. Here a discussion on it. I'm wondering if anyone has update or any news on this issue?
View 2 Replies View RelatedItried the following code and it seemed like fadeIn() didn't work when the image has trasparency defined for it. i tested with IE8. Is this intended?
<html>
<head>
<style>
[code]....
I am having a problem with JQuery powered animations in the lower part, they are sort of blacked out, see the site and you will understand [URL] How can I fix it? Works fine on Chrome and Firefox
View 4 Replies View RelatedI have a Nivo slider on each page of a site. The first page I put it on works fine, any other slider will not work the area that should be the slider simply appears as a block of colour.I initially thought that changing the id's would make no difference as each slider is on a separate page but decided to give it a go anyway as I had no other idea as to what it might be causing the problem.So, I have tried renaming the id's of the subsequent sliders (i.e #slider2 etc) and changing the call to the function at the bottom of the page to match this for example;
$(window).load(function() {
$('#slider2').nivoSlider();
});
and also adding these id's to the CSS to ensure the styles are applied to the new id's but nothing seems to work see here [URL] Ignore the rest of the pages I have not implemented the slider on these yet.
I am trying to do implementation of the Nivo Slideshow on my website. I've been at it for a couple of days now and I'm just about ready to give up:
Here's my markup:
<div id="slider">
<img src="/images/Slide1.png" alt="" title="Dead Kool"/>
<a href="[URL]"><img src="/images/Slide2.png" alt="" title="Alex Kidd" /></a>
<img src="/images/Slide3.png" alt="" title="Asteroids" />
</div>
My CSS:
#slider {
position:relative;
width:620px;
height:350px;
background-image:url(../images/title.gif);
background-position:-10px 30px;
background-repeat:no-repeat;
background-attachment:fixed;
} .....
Slider CSS:
/*
* jQuery Nivo Slider v2.3
* [URL]
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* [URL]
*
* March 2010
*/ .....
The test site is here [URL]. For some reason I just can't get it to work.
I have a form with two slider on it so the user can select an amount. The slider works fine and passes the values to email ok etc. but when the page is loaded there is "[object Object]" in box of the second slider. I can't find the problem with the code as it is the same for the first slider.
Here is a link to the form: [url]
<script>
I got 2 sliders in a List:
<li data-role="fieldcontain">
<label for="slider_year"><big>Jahr auswählen</big></label>
<input type="range" name="slider_year" id="slider_year" value="2000" min="2000" max="2011" />
[Code]....
Both alerts wont get called...
I know this should be very easy, but i dont get it.
1.I found a Slider Toggle thats demonstrated here [URL] and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used .fader{opacity:0;display:none;} but I wanted the slider div to be visible if javascript was disabled so I added
jQuery(".fader").hide(); so its now
<script type="text/javascript">
$(document).ready(function() {
jQuery(".fader").hide();
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
[Code]...
i am using jquery slider.i need to display the values on mouseover of the slider handle
View 4 Replies View RelatedI have to change the slider color depending on its value, but I didn't manage to do it, I changed the attribute "background" of the class "ui-slider-range" this way : $("#slider.ui-slider-range").css("background","red"); Since I have three states (red, orange and green) I have to use three sliders, each one has one color, all hidden at the beginning then I show the appropriate slider when the value changes.
View 1 Replies View RelatedI've got the following problem: I have a Jquery slider and I want to disable the click on the slider. I only want to change the slider when I click and drag the pointer. Standard you can also click everywhere on the slider and the pointer will go to that point. That I don't want. .
Code HTML4Strict:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
[Code]....
I have a php code that creates a select combo box depending on some values stored in a database and I am trying to make it look nicer I found the jquery slider I found this but it does not work in the environment I am working (joomla) well, it does but it disappears as soon as I move the slider. so if I had
Code HTML4Strict:
<select id="someId" >
<option>1</option>
<option>1</option>
<option>1</option>
</select>
is there an easy way to transform that into a slider?
I am trying to change my sites background color. The color changes but it doesn't go back to the first image anymore. does anybody know what the problem could be?
jQuery Code:
HTML Code:
I'm putting together a portfolio site and I'd like to use high-res images that take up most of the screen to show different works. There
would be a menu bar with links to each work, where a click on that work's link would change the background by doing a standard "dissolve"
effect.I have seen many different plugins for "rotating" images and changing background colors at the click of a button. Is there a method
specifically for this purpose? As an alternative to altering the background-image of the body itself,I would be willing to use a properly sized div (or div's) to achieve this effect.
provide javascript to create something like the image below: Things I can't workout are:
1. top and bottom background colors as the above image
2. add two text
3. border color same as top background color
[Code]....