I am combining two scripts together: a scroller and a content fader. When I swap the content (fading), div's with a lot of content make the scrolling div super long. I was reading on the plugin demo for content scrolling (http://manos.malihu.gr/jquery-custom-content-scroller) that you can use $(selector).mCustomScrollbar("update"); when loading different content to make the div adjust accordingly.
I know that code needs to go in my fading script somewhere, but where? Here is the fading script, where would it go?
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('.clickme').bind('click', function(e) {
e.preventDefault();
$( "#mediaswap div" ).fadeOut();
$( "#mediaswap div" + $(this).attr('name') ).fadeIn();
})
});
}
})(jQuery);
$(function() {
$('#mediaswap').Fader();
});
});//]]>
</script>
I've answered your comment on the post but I'm writing it here too.
Since you fade in/out divs, you have to call the update method as a callback to the .fadeIn() function, so it updates the scrollbar after the animation is completed:
$( "#mediaswap div" + $(this).attr('name') ).fadeIn(function(){
$(this).mCustomScrollbar("update");
});
Additionally, there's an extra option parameter you can use when you initially call the plugin, that checks content size and updates the scrollbar automatically if it changes:
$("#mediaswap div").mCustomScrollbar({
advanced:{ updateOnContentResize:true }
});
Using the updateOnContentResize option, depends on the rest of your code (where you call the plugin), so I recommend using the first method.
I recommend checking the div to see if it's animated using something like this:
var wait = setInterval(function() {
if( !$("#mediaswap div").is(":animated"))
{
clearInterval(wait);
//put the code in here because it checks
for whether the DIV is currently animated.
}
}, 200);
You can change the interval if it takes the animation longer to complete the animation.
Related
I am currently trying to create a script that makes fading transition from page to page when clicking a anchorlink. I have already made the script, but it does not seem to work.
My code look like this:
$("body").load(function() {
$(this).fadeIn(200);
});
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
window.location.replace($link);
});
It does not seem to make the fadeIn and fadeOut transitions. It is still the normal pageload.
First hide the body of the page on page load then
you need to place the redirecting line in the complete function of fadeOut
Try this code:
$(document).ready(function() {
$('body').hide().fadeIn(200);
$("a").click(function(e) {
e.preventDefault();
$link = $(this).attr("href");
$("body").fadeOut(200,function(){
window.location = $link;
});
});
});
You need to hide the element initially, either with .hide() or with CSS display:none;.
$(document).ready(function() {
$('body').hide().fadeIn(200);
});
You have to use setTimeout to time the window.location.replace() to execute after the current body has faded like :
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
setTimeout(function(){
window.location.replace($link);
},200);
return false;
});
Remember to return false at then end of the function else the default action of the link click i.e. redirection precedes any other action associated with the anchor.
But, sincerely, this will give you a smooth fading effect from the current page but not a smooth effect on the redirected page unless it's implemented by you.
This is four years later, but just in case someone needs it. I agree with Roko about the flickering, so I initially hid the body with CSS instead of putting .hide() before the fade in effect:
body {
display: none;
}
Also some have mentioned using .fadeOut(), but it doesn't work on Chrome. I switched to .show() and .hide() which seems to work great. It also animates all of the elements as it fades, which produces a need transition without a hefty jQuery plugin.
$(document).ready(function() {
$('body').show(500);
$("a").click(function() {
$link = $(this).attr("href");
setTimeout(function(){
window.location.replace($link);
},1000);
$("body").hide(500);
return false;
});
});
Lastly, I'm using this on a page that contains click-to-scroll navigation like most one-pagers, as well as opening new tabs with target="_blank", so I changed $("a") to $(".transition-link") and added class="transition-link" to the links I want to navigate from.
I'd like to load the flexslider gallery with jQuery when an anchor element is been clicked.
The gallery shall be loaded in div#slider-loader
The problem is that the HTML is loaded properly, but the Javascript seems not to affect the injected elements even though I read that in this cases I shall use .on().
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href);
return false;
});
Thank you in advance!
--
use a call back function to preform action whaen the load is completed like so
Sweet! it worked! although with such solution the .on() event become useless.
Now I came up with this and it works:
$('.cliccami').click(function() {
var href = $(this).attr('href');
var gallery_height = $('.flexslider').css('height');
$('#slider-loader').hide().fadeIn('slow', 'swing').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
})
return false;
});
The only problem is the injection of the code is very scattering.
I would like to make the div container '#slider-loader' adjust its height according to the '.flexslider' height with a smooth animation.
What I've tried to do is:
$(document).ready(function(){
$('#slider-loader').hide();
});
$(document).on( 'click', '.cliccami', function() {
var href = $(this).attr('href');
var gallery_height = $('.flex-viewport').css('height');
$('#slider-loader').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
$('#slider-loader').css('height' , gallery_height);
$('#slider-loader').slideDown(10000);
});
return false;
});
The problem is that once i click the anchor element the #slider-container start to slideDown showing its content but it dosen't do it for the whole .flexslider height which I've set as variable and gave to him with the .css() method. It slideDown for few pixel and then it suddenly became of the entire .flexslider height.
use a call back function to preform action whaen the load is completed like so
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href , function(){
// some thing to happen when loading is done
});
return false;
});
I understand there has been a lot of discussion on this but I have yet to find a solution to fix my needs. Basically I need to autogrow a text area not when you type but on load. I am pulling in content from a database and dependant on the user's settings an overlay is produced over the text area, but upon doing this the text areas are not scrollable therefore I need to autosize these to show all the text.
I have tried scrollHeight but this is not working great as there are multiple text boxes on the screen
Thanks
Try this
$("textarea").height( $("textarea")[0].scrollHeight );
DEMO
UPDATE
As a hack to make it work in older IE-s just add a really short delay before executing it
window.setTimeout( function() {
$("textarea").height( $("textarea")[0].scrollHeight );
}, 1);
DEMO
UPDATE FOR MULTIPLE TEXTAREAS
$("textarea").each(function(textarea) {
$(this).height( $(this)[0].scrollHeight );
});
This worked for me; it loops through all "textarea" elements on page Ready, and set their height.
$(function () {
$("textarea").each(function () {
this.style.height = (this.scrollHeight+10)+'px';
});
});
You can also combine it with an auto-expand function, to make it fully dynamic while writing as well:
function autoresize(textarea) {
textarea.style.height = '0px'; //Reset height, so that it not only grows but also shrinks
textarea.style.height = (textarea.scrollHeight+10) + 'px'; //Set new height
}
and call that from an "keyup" event or through jQuery:
$('.autosize').keyup(function () {
autoresize(this);
});
Note how I am adding 10px to the scroll height: here you can adjust the amount of space you would like the bottom of the text area to give the user.
Hope that helps someone. :)
Edit: Changed answer according to #Mariannes comment.
you can use this. It works for me.
$('#content').on('change keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
}).find('textarea').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<textarea>How about it</textarea><br />
<textarea>111111
222222
333333
444444
555555
666666</textarea>
</div>
You mentioned there are multiple textboxes. This code will set the height of each textarea according to its own contents.
$(document).ready( function( ) {
$("textarea").each( function( i, el ) {
$(el).height( el.scrollHeight );
});
});
Fiddle here
Alternatively, you could use an editable div in HTML 5.
Reference : http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable
This is an workaround.. and maybe an alternative solution:
$('textarea').each(function(){
var height = $('<div style="display:none; white-space:pre" id="my-hidden-div"></div>')
.html($(this).val())
.appendTo('body')
.height();
$(this).css('height',height + 'px');
$('#my-hidden-div').remove();
});
You can see a demo here http://jsfiddle.net/gZ2cC/
The solution of Tormod Haugene worked for me.
But my textareas where in an accordion and apparently it only worked if the textarea was visible on page load. The accordion items are triggered by clicking on elements with the class "title".
So I adapted the code Tormod Haugene to work inside accordion contents, that are set to display: none on page load.
Maybe this is useful for someone else in this situation:
jQuery(document).on('click', '.title', function () {
jQuery("textarea").each(function () {
this.style.height = (this.scrollHeight+10)+'px';
});
});
I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.
One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.
I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
}, function () {
var dummyImg = $(this).attr("src");
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
});
});
Thank-you!
You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->
$(document).ready(function () {
$(".thumb").hover(function () {
var dummyImg = $(this).attr("alt");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("alt", $(this).attr("src"));
$(this).attr("src", dummyImg);
$(this).fadeIn('slow');
});
}, function () {
var dummyImg = $(this).attr("src");
$(this).fadeOut('slow', function(){
//this is now the callback.
$(this).attr("src", $(this).attr("alt"));
$(this).attr("alt", dummyImg);
$(this).fadeIn('slow');
});
});
});
Maven,
Have you thought of using css webkit? This SO article goes into detail for crossfading images - at different rates. CSS Webkit Transition - Fade out slowly than Fade in
You can also make use of a basic event to fade-in/fade-out the image. This JQuery/JSFiddle SO article makes use of the this reference object: Jquery fadeOut on hover
The basic fade-in / fade-out structure from the JSFiddle.net documention is as follows:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
~JOL
Personaly, I'd layer the two images (css) so the non-hover version is normally on top. Then
in the hover function, add a $(this).fadeOut('fast') so that the underlying image is displayed.
http://jsfiddle.net/Xm2Be/13/ There is an example how you could do that. Ofcourse, you can set lenght of fade effect by placing some number inside brackets. For examle .fadeToggle(5000) will have timing of 5 seconds.
How can I get one script of jQuery to start after another one has finished (or time it when you want it to start)? I have a content area that fades in on page load:
$(document).ready(function() {
$("#content").hide();
$(window).load(function() {
$("#content").fadeIn(3000);
});
});
Than, once that fades in I want the nav bar above the content area to slide toggle down. I'm trying to make the scripts act in accordance with the timing of one another. OK, thank you.
Use .fadeIn()'s callback:
$("#content").fadeIn(
3000,
function() {
//do stuff here
}
);
$(document).ready(function() {
$("#content").hide();
$(window).load(function() {
$("#content").fadeIn(3000, function() {
$('#navBar').slideDown('slow')
});
});
});
.fadeIn() allows you to specify a function to be called once its complete. is the $(window).load() necessary here with $(document).ready()?