I've looked for a similar question to my issue, but it appears I'm unique.
So I have a list of divs that have a <a> tag within them which then toggles out an inline description which is within a hidden span tag inside the parent div.
I'm relying on the jQuery UI library to animate the sliding toggle. jQuery toggle and slideToggle by default is just not suitable for what I want - i only want to animate smoothly along x axis (width).
Here is an example of the HTML code:
<div class="links" id="qanzac100">
Q ANZAC 100 <a class="first">+</a>
<span class="hide"> brings our shared history to life and creates a renewed legacy for future generations.
</span>
</div>
I've made the jQuery/JS script loop as such:
// jQuery toggle for other sites buttons
$(document).ready(function() { //supposed to stop FOUC
$(".hide").hide();
$(".first").click(function() {
if ($(this).html() == '+') {
$(this).html('-')
} else if ($(this).html() == '-') {
$(this).html('+')
}
$(this).next('.hide').toggle("slide", "right", 500);
// Animation complete.
});
});
Everything works but when the slide action animates, it slides out on a new line (block) and then when animation is finished it 'flicks' back into the inline style I originally set for it.
For better illustrative purposes, here is the JS Fiddle for it http://jsfiddle.net/coolwebs/dx8fd51f/10/
I just want it to smoothly slide out and show all on the same line and if it needs to push out to the next line, it does that when it hits the max width.
Is that possible using the jQuery toggle library?
The problem lies in the jQuery UI library that you are using.
It actually replaces your span element with a div with a class of ui-effects-wrapper and of course a div's standard display type is block.
If you look at this js-fiddle you can see why it does that. It's to avoid the text that is sliding in from overlapping the text that is already there.
(In that fiddle I overrode the display style of ui-effects-wrapper.)
There are several ways you could fix this but the easiest would be to not rely on the UI library and just use class toggles to run the animation.
Related
I am trying to build a split layout gallery where the images will only be fully revealed when the user clicks on a button. I managed to split the screen in two and show the pictures at full size but I am struggling to find an effective way to actually reveal the other side of the image without resizing.
This is where I am at right now:
http://jsfiddle.net/Bb844/
I have already tried the jQuery slideToggle() method but it would not deliver the result I am looking for. The idea is not to overlap class="left" with class="right", but rather, to drag class="left" –and vice-versa– off the viewfinder with an animation effect similar to that of the slideToogle method.
The function should be activated through the class="square" element.
Is there any way to achieve this?
How does this look?
I changed your HTML a bit and made your CSS fit the new HTML setup. The only thing to note is the jQuery is set up to where you need to have the .side a .square is affecting directly after the .square. Then I used the following to do the sliding action you're looking for
$('.square').click(function() { // Fire when square is clicked
if(!$(this).hasClass("active")) { // If not fullscreen already
$(".active").removeClass("active"); // Remove other active class(es)
$(this).addClass("active"); // Make this have class active
$('.side').stop().animate({"width":"0%"}); // Shrink the other elements
// Make the nearest side full screen
$(this).nextAll(".side").stop().animate({ "width":"100%"});
} else { // If it's already open, put it back to the default
$(this).removeClass("active");
$(".side").stop().animate({"width":"50%"});
}
});
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
How to make two divs so that after clicked button old div is slade out and new div with new content is slide in?
My conception but not aligned inline:
jsfiddle
I found something similar to my conception but for my solution I need infinity loop with dynamically added content: example 1 or example 2
There were a few changes I made to the existing code and CSS, but this should do what you want. I also added a check to the reset button to ensure that the slideOut is not already hidden. Otherwise, the animation will unhide the element and hide it again.
It is better to put things into the jQuery $(document).ready() function to ensure that all of your elements have been loaded before trying to use them.
New Fiddle Link
I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.