I am working on a project. I have to put up a tab panel of four option. And in each tab i have to put an image slider. I have used many plugins for this. Tried different plugin for different tab. Few times have problem with tab panel and few time compatibility with all browsers have been issue.
View 1 RepliesI am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work.
However, when adding in another slider, I have only confused the situation.
Below is the html and css. Let me know where I've gone wrong here.
Will I need another set of css classes for each slider?
How do I call a second slider?
The html/javascript:
When it comes to JavaScript, I am implementing a couple of Coda sliders onto a site, and as far as I am aware, you can have two sliders on one page, but for me this isn't working.
The effect is using jQuery, and the page can be found here: [url]
The first slider works well, but the second doesn't load properly.
I'm trying to set up a page that has one big image slider that displays a set of images by default. Then underneath this there are links for more galleries, and when you click on them they load right there in the big image slider. I don't want these links to go to a new page. What I'm after is demonstrated at this URL: First Comes Love **|** Wedding Photography by Alison Bank
How do I set this up? I'm thinking I need some kind of preload images code?
I am considering using Nivo Slider, but open to suggestions. Also, I'm building my site in Wordpress if that has any impact.
I 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.
does anyone know a good online resource that shows you how to do image sliders on a web page? For example, I have a image and a arrow (image) above this and the position of the arrow is dependent on a value (which I have).
View 5 Replies View RelatedI have two sliders on the same page. They are both essentially the same pictures, just different sizes of each other. Demo site [url]
How can I make it so that when you click on one image on the bottom, the top slider changes to the picture that was clicked?
I wonder if it's possible to implement a menu like the one ofcbs.com?Basically, when mouse over some of the menu items, a menu panel shows up with a few columns of links. The many panel disappears when the mouse moves out. I think it's quite neat and I'm hoping to be able to do something like that with jQuery.
View 2 Replies View RelatedI'm loving this: Sliding Login Panel with jQuery 1.3.2 However, I'd like it to work so the 'Close Panel' link actually appears in the #panel itself and doesn't swap/toggle with the 'Login | Register' part.
View 5 Replies View RelatedI am implementing the following example into a project I'm working on...Simple Slide PanelWhen clicking Slide Panel, the panel pushes everything down. How do you modify it so that instead of pushing everything down, it just slides down over the top of everything else?
View 4 Replies View RelatedI am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>
I'm looking to implement 2 different sliders on a page. the test page is [code] the main picture besides the passion leadership is jquery and does not move on this page however on every other page where that is the only slider it works.Now on this index2.php page you can see i put a slider in for a scrolling banner underneath the main banner and it works fine.Is there a way that I can have the 2 work hand in hand.
View 2 Replies View RelatedI am trying to calculate a value based on two sliders.
This is the code that I am using:
var value1;
var value2;
$(function() {
[Code]....
Really struggling trying to get 2 seperate sliders to work on my web page.
take a look at;
[URL]
not a spam its test site so nothing to gain from my end.
the slider at the top works fine, but the 3 boxes with the arrows underneath should scroll/slide back and forward when clicked. If I remove the js links for the top slider the bottom then works;
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
[Code]....
which isprobablyeasy to tell, but I was hoping someone would be able to answer my question regarding the jquery accordion content sliders or point me in the direction of one that fits my needs.I am wondering if there is an accordion plug in out there that will reveal content based on whether or not you've moused over an image or clicked on it. I've seen a few, but what I have yet to see is one where the button is in a separate div than the content holder.For example, you could have a rotating image you roll over with your mouse and 200 pixels to the right text suddenly appears to define the word image you just rolled over.
View 2 Replies View RelatedTo have multiple linked sliders that all share a maximum value, for example, I would have 10 sliders, each set to 50, with a pool of 10 additional points to spend. If I assign all 10 points to 1 slider, the other 9 are locked out, or I could spend 1 point on each slider.
View 1 Replies View RelatedI have 3 sliders on my home page and I would like to make them start one after the other, so 1st would start immediately, then after a short delay the second one, and later the 3rd, so they don't make the transition at the same time. The slider I am using is Avia Slider [url]
Trying this code but they are still running synchronously:
Code:
How can I achieve what I need?
Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from [url]
The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference.
The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken.
Here is the testing url.[url]
I have been using Flash to create a slide show that starts with a single image. Then the image caption slides up from the bottom followed by a longer description coming in from the right side of the image (which includes links in the text). The description and caption then slide away, and a new image is transitioned into the old image's place. Is it possible to create something like this with jQuery? The s3slider jQuery plugin is very similar to what I'm looking for, but I can't seem to get two captions to appear over the same image.
View 1 Replies View RelatedI was trying to apply 2 javascript effects on one image. First, I use this Jquery effect on the image. It works like it should until I put in the light box effect (this is the one I am using. The lightbox also works, it just depends on which order I put them in the code on which one will come through.I am relatively new to javascript and I am learning as I go along. Below I inserted part of my code geared towards these two effects. I know I have everything else in the code correct (the body) because they work individually, just not put together (or maybe I have to put a line of code in the body to enable it to work?).Essentially, I want the image to be dulled out when the visitor opens the page, get brighter when they roll over it, then trigger the lightbox when they click on it.The easy option would be to use an image swap for the dull/bright mouseOver effect; however, I like the way it is done by tutorialhero.CODE
<script type="text/javascript" src="javascript/lightbox/prototype.js"></script>
<script type="text/javascript" src="javascript/lightbox/scriptaculous.js?load=effects,builder"></script>
[code].....
I'm newbie on jquery and I hope to help me. i'vea problem to showmultiple stack image. For example, I've a jpeg image map on background and I would like to show multiple pin with multiple coordinates.
View 1 Replies View RelatedIs it possible to add button in tab panel?
View 1 Replies View RelatedI look for something in jquery ( a sliding panel div that can also be collapsed and shows the correct image, hard to explain please see below link, its used on this [code]Anything such exist for jquery with the same features?
View 1 Replies View RelatedI want to be able to animate the panel sliding it in from left to right.
This is what I have:
$("#tabs").tabs({
selected: null,
fx: { width: 'toggle', opacity: 'hide', duration: 'slow', height: '600px'}
}).addClass('ui-tabs-vertical ui-helper-clearfix');
It doesn't do what I want it to. It takes the width and slides from right to left and it isn't exactly what I consider sliding.
I am trying to create a panel that can be resized, its all working however if I resize the panel then try to resize the browser the panel doesn't resize to the browser width: [url]
View 2 Replies View RelatedI have a tab panel which loads external content dependent on the chosen tab.
Due to space issues i would like the content to be expandable via show/hide functionality, however I can't seem to figure out a way to target the #expandpanel id within the tab panel when the tab panel content is loaded as an external page.