I'm trying to show multiple slides at once using jQuery Cycle. In most others forums I've seen people get directed to this demo: [URL]
I am to achieve what's there, visually, but I want each slide to move individually; so in the example provided only one slide would move to the left at a time rather than all three.
I was hoping someone could lend a hand with a problem I've been having in the office for just over a day now. I'm using Jquery cycle plugin [URL].. to slide between about 10 slides worth of information.
The beauty of Jquery cycle allows me to make a slideshow of only the Divs I have specified as "cycle" class. My problem is that I would love to be able to print each one of the "cycle" class slides using only one print function click.
[Code]...
With jQuery cycle, is it possible to have more than one slide in the viewable area, and scroll one at a time? For example, assume that each letter below is a slide, and the viewable area is in [brackets] at load time:
[Code]...
I 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 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 Relatedadding my show and hide behavior across various classes, so the message shown will be unique to the class.
My J-Query looks like this;
<script type="text/javascript">
$(document).ready(function() {
$('#One').hide(); /
$('.col2').hover(
[Code]....
I have include a demo that should make it clearer, as to what I want to achieve. Ideally, each box will show a unique overlayed message as the user's mouse enters the box and hide once the mouse leaves.
I have a UL group with multiple LI items, and each LI has a DL with a DT and DD inside. What I am trying to do is show EACH LI's DT, but not the DD. The DD will only show once the DT has been clicked (except for the first, which should be visible on page load.here is the structure code ... I am struggling to make this work using jQuery show/hide functionailty.
<!-- LIST -->
<ul class="examples">
<!-- ITEM #1 -->
[code]....
I have a jquery function that will show or hide a div id="hide1" based on the result of a select id="ticket1"
$(document).ready(function(){
$('#hide1').hide();
$('#ticket1').change(function(){
if(this.value == 'adult'){$('#hide1').hide();}
[Code]....
It works well! But my script actually clones elements of the form so a user could be selecting adult or child for a number of tickets - ticket1,ticket2,ticket3....
How can I adapt that script so that it will show/hide for each ticket
I have a little issue with trying to hide / show multiple divs on my page. I am using a class name for the divs but the name is generated by a field have set in my database. So for example
<div class="General">Ttitle 1</div>
<div class="General">Ttitle 2</div>
<div class="General">Ttitle 3</div>
<!-- and my link is -->
<a href="#" class="toggle" title="General">Toggle 1</a>
And then say I have
<div class="Questions">Ttitle 1</div>
<div class="
Questions ">Ttitle 2</div>
<div class="
Questions ">Ttitle 3</div>
<!-- and my link is --><a href="#" class="toggle" title="
Questions ">Toggle 2</a>
What would be the easiest way or the best way to code out the jquery to hide / show all the divs with the same name as the links title i can do code jquery to toggle 1 div but not sure how to code it so that it will hide / show all the divs with the same class name.
Is there a way I can simplify my code below? I want to be able to have just one iteration of the code and have it automatically switch out the IDs without have to add a new bit of JavaScript with each new div that is added. Here's my Javascript:
$(document).ready(function() {
// toggles the personnel window on clicking the image/header
$('div.title'+'#one').click(function() {
[code]....
I am new to jquery and need some help with this I have the following simplified html
[Code]...
I am getting to know jquery a little, and I am trying hide and show a div when a link is clicked.I have a page setup that has a flash video in a div on the main page. Then when a link is clicked, a lightbox window opens and plays another video. I am trying to get the video on the main page to hide while the lightbox video is playing. Then when a user closes the lightbox window, the div with the main video on the page is shown and starts playing again.So far I can get this to work with one link. But I cannot get the main video div to hide when a second link is clicked.
View 1 Replies View RelatedI have a jquery script for showing and hiding the content inside, between two divs,controlled with radiobuttons. I like to use the same jquery script for another group of divs and radiobuttons so I'm trying to create a loop are so inside jQuery.
<!----------------- my script ---------------------->
showhide.js
jQuery(function() {
[code]....
I've got an issue with the attached file.
I have 3 buttons & 3 divs.
I would like to hide/show the relevant divs (into a container) based upon the button pressed. If no div was open, then it would simply open the relevant div, however if say div 2 was open and div 3 was pressed, div 2 would toggle closed then div 3 would toggle open.
I've got each individual div opening and closing, but I'm stuck at the next point (checking if a div is open/toggling etc).
I am having some jQuery troubles whereby I have some jQuery that toggles an 'Other' HTML input field and associated label when a user selects the value Other from a HTML select drop down. I have this working for one field but the application I am building has increased in scope whereby there may be multiple instances of members on one page so the Other option will be there multiple times. At the moment if a user selects Other from one drop down all Other input fields show. How do I make this exclusive without repeating the jQuery for the separate instances?
// Show/Hide 'Other'
$(document).ready(function() {
$('.jOther').hide();
$('.jTitle').change(function() {
var $index = $('.jTitle').index(this);
alert($index);
if($('.jTitle').val() != 'Other') {
$('.jOther').hide();
} else {
$('.jOther').show();
window.location.hash = 'Other' + $index;
}});
});
<td>
<select id="title" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="other" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="other" id="other" maxlength="6" />
</td>
I'm using the datepicker plug-in from Keith Wood [URL]
I'm displaying 6 or 12 months. As default the current month (e.g. march) is shown as the first. I wantJanuaryto be shown as the first. How can this be accomplished?
[code]My problem is simply that i have say 5 columns in the database placing the jquery script in that section allows that to be on each and every post. That works fine. the problem is though only the first one works the rest do not. It simply just doesn't have any action while the first one works fine.
View 1 Replies View RelatedI have this script here. Hope i can paste the code. Please click on the login tab on the right side. The issue is, the tab slides down as well as grows. Please help. It should only slide down, not grow.
View 3 Replies View RelatedIs it possible to use DIVs as slides instead of IMGs?
View 3 Replies View RelatedI know you can use random multi-effects, but is it possible to specifically choose the fx used for each specific slide/image?Maybe it could be done by getting the class of the 'current' slide somehow? eg.
<div id="slideshow>
<img class="fade" src="image01.jpg">
<img class="fade" src="image02.jpg">
[code]....
this is what i like to do. a menu which moves out of the bottom, when the mouse is over the menubar. the whole div-tag(menu) should slide 200px up. when the mouse is moving out of the menu area, it should slide don to starting position.
View 3 Replies View RelatedI have a set up that uses slideDown on a division that is housing a table, and it's height in no explicitly set. In Firefox, slideDown() will slide too far, then jump back to where it should be. In Chrome, this behavior does not happen. I do not want to set a static height, as the contents are dynamically set.
Is there a reason for this issue, and can it be fixed?
I'm tweaking this html form here's the code:[code]Everything works fine but how can I have it so when you click on the trigger (the button.png), the image of only that div slides down. The way it is now, when you click on the trigger, both the images in both divs slide down.
View 2 Replies View RelatedI have a page displaying a portfolio of logos, print pubs, websites, etc. When the page originally loads, all items are included in the slideshow. I would like only logo images displaying when the user places the mouse on the logos link.
Example here: [URL]
The jQuery call below works (i.e. the range of the images is limited to only those with class logos) if the menu link to "logos" gets a mouseenter event while the slideshow is showing one of the logo images (class="logos"). However, if the slideshow has progressed to one of the other sections (class="print", web, sign, etc) then the slideshow will not resume.
Below is the jQuery call when a user places their cursor on the logos menu link.
$("a.logos").mouseenter(
function () {
$('.slideshow').cycle('stop').cycle({ slideExpr: 'img.logos' });
$('.slideshow').cycle('resume');
[Code].....
I was looking at the docs and saw this one here: [url]
So I was trying to run the code posted on this doc locally which would be:
And it runs fine, but, my problem is if I save the these files locally:
It wont run anymore.
The modified code looks like this:
I know it it a bit of fighting against the idea of jquery cycle, but for the jquery cycle script I need to generate a wrap around every 4 dynamicly created (wordpress posts) div's of the same class, so every slide shows actually 4 dynamic slides at a time.
For example, If the following posts are generated:
It actually needs to generate this:
I've already managed to get this, of which I think i'm getting close:
What to fill in at the for loop to make it work?