<div id="usu" ></div>
Then I have script that is supposed to add content to that:
<script>
var haelisaanro = 10
function haelisaa() {
$.getJSON("/json/index_oikea.aspx?usu=1", function (data) {
var items = [];
items.push("<div id='rivit" + haelisaanro + "' >");
$.each(data, function (key, val) {
items.push("<div class=\"col-md-12 column nlnyR \"><table><tr><td><div class=\"ot\"><span class=\"glyphicon glyphicon-play\"><\/span><\/div><\/td><td><a href='" + key + "'>" + val + "</a><\/td><\/tr><\/table><\/div>");
});
items.push("</div>");
$("#usu").append(items.join(""));
$('#rivit' + haelisaanro).hide();
$('#rivit' + +haelisaanro).slideDown("slow", function () {
// Animation complete.
});
});
haelisaanro += 10;
}
</script>
I have this on pageload too:
<script>
$(document).ready(function() {
$( "#oikear" ).load( "/index_oikea.aspx", function() {
$( "#oikear2" ).load( "/index_oikea2.aspx", function() {
//alert('lahataanTop of thing hit top of viewport.');
});
});
});
</script>
index_oikea.aspx is loaded to #oikear div. Loaded content has <div id="usu" ></div> in the middle of loded content index_oikea.aspx.
It does fill that are "usu" with data, but there is no slidedown animation on it.
I tryed to add height attribute css to id='rivit'. It seemed like it needs the height to work, but I could not manage to make it work with right height size.
I think the main reason this is not working is that browser can not calculate the height of dynamicly added content somehow...?
If I changethe code... Add this style:
<style>
.dplno{display: none;}
</style>
change to this:
items.push("<div class=\"col-md-12 column nlnyR dplno \"><table><tr><td><div class=\"ot\"><span class=\"glyphicon glyphicon-play\"><\/span><\/div><\/td><td><a href='" + key + "'>" + val + "</a><\/td><\/tr><\/table><\/div>");
and change this:
$( '.dplno' ).slideDown( "slow", function() {
Now every div line is sliding out, but every line is sliding one by one. I needed to slide all those lines at onece.
You are concatenating with + + sign, that may be problem
$('#rivit' + +haelisaanro).slideDown("slow", function () {
// Animation complete.
});
Thus it may be forming wrong id.
Change to this:
$('#rivit'+haelisaanro).slideDown("slow", function () {
// Animation complete.
});
You are hiding the div before applying slideDown. That might be causing your issue.
You should first define animation and then hide the div.
$('#rivit' + +haelisaanro).slideDown("slow", function () {
// Animation complete.
});
$('#rivit' + haelisaanro).hide();
Related
I'm trying to add a 'slide in to the left' animation to the class .bot-dialog. This class is dynamically generated and my setTimeout function does not seem to be doing justice.
One of the issues I noticed was that it doesn't work ONLY when the typing indicator is active. Here is my code:
Generate my bot dialog
$("#conversation").html(
"<div class='bot-log'>" +
"<span class='bot'>Chatbot: </span>" +
"<span class='current_msg bot-dialog dialog' style='left:-40px; position:relative;'>TEST" +
"</span> </div>"
)
var $to = $(".bot-dialog");
setTimeout(function() {
$to.css("left", 200 + "px");
}, 0);
$(".current_msg").hide();
//Add and remove typing indicator when firing typing function
$(".bot-log:last-child").append(
'<div class="typing-indicator"><span></span><span></span><span></span></div>'
);
$(".typing-indicator").delay(800).fadeOut(function() {
$(".typing-indicator").remove();
});
$(".current_msg").delay(1200).fadeIn(function() {
$(this).removeClass("current_msg");
if (typeof callback == "function") callback();
});
CSS for dialog/transition
.bot-dialog{
transition:5s all ease;
}
Here is a jsfiddle showing the issue.
Thanks for the help!
The thing is, you're hiding it, which sets it to display: none which affects the css transition. Just use opacity instead.
I've changed the transition from all to left so that the test appears instantly, if you want a smooth opacity, change it back to all
https://jsfiddle.net/Lpdx2a0x/4/
Just change the settimeout from 0 value greater than 0 like for example I have used 1 millisecond.
Change:
var $to = $(".bot-dialog");
setTimeout(function() {
$to.css("left", 200 + "px");
}, 0);
To:
var $to = $(".bot-dialog");
setTimeout(function() {
$to.css("left", 200 + "px");
}, 1);
And now it works fine.
EDIT : I am not sure exactly what animation you are looking for but when I remove $(".current_msg").hide(); and increase the delay it works as per you want.
FIDDLE
I have a search feature which uses an AJAX request to get data from my web-server.
I want to have a fade in animation which gets applied to each search result, with a slight delay so the last result fades in last (i.e. the first result loads, starts fading in, next one loads, starts fading in, etc.).
I have the code which loads the html into the search results area, but it seems like the results are displaying and running their "fade-in-animation" at the same time - although this could also be due to the fact that my computer is too slow.
Here's me code:
JS
$.ajax({
type: 'GET',
url: '/PersonSearch',
data: {
'search_value': search
},
dataType: 'json',
})
.done(function(json) {
$('#main').html('');
$.each(json, function(key, value) {
var search = $('<div />', {
id: 'search' + key,
'class': 'search-item off',
html:
'<div class="basic-info">' +
'<span class="first-name">' + value.First_name + '</span>' +
'<span> </span>' +
'<span class="last-name">' + value.Last_name + '</span>' +
'</div>' +
'<div class="dropdown">' +
'<span class="phone-number">' + 'PHONE: ' + value.Phone_number + '</span>' +
'<span class="email">' + 'EMAIL: ' + value.Email_address + '</span>' +
'<div class="box edit"><img src="../media/gear.svg"/></div>' +
'</div>'
}).appendTo('#main');
setTimeout(function() {
search.removeClass('off');
});
});
});
CSS
.search-item.off{
opacity: 0;
top: 8px;
}
.search-item{
overflow: hidden;
position: relative;
opacity: 1px;
top: 0;
transition: .75s;
}
HTML
<div id="main">
</div>
Basically what the code does (so you do not need to piece it together yourself) is it adds the search result which has the class of search-item off, and once the <div> is loaded (using setTimeout()) it removes the off class, which then uses the transition CSS attrib to make it fade in over time.
I tried using setTimeout() on the .appendTo('#main') but that did not work.
I need it so that there is a delay in posting each of the search results in the #main element so that there is a delay in running the fade in animation.
Your idea could work, but you need to add a little delay to your call to setTimeout. The delay must be increased for each new result. To be sure that it is working, use a long delay at first (1000, ie. 1 second) then adjust with lover values as desired.
setTimeout(function() { ... }, 1000 * index);
Below is a simple snippet that illustrate the use of setTimeout to delay the successive calls to append
$(function() {
var $container = $('#container');
$.each(['foo', 'bar', 'qux'], function(i, value) {
setTimeout(function() {
$container.append('<div>' + value + '</div>');
}, 1000 * i);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
try use
setTimeout(function() { ... }, 0);
It will wait that your content is fully loaded.
This happens because setTimeout works asynchronously which means these setTimeout functions will start at 5ms, 10ms, 13ms, etc. and fire off at similar times as well. What you can do is define a timeout variable above ajax call and increase timeout at each call before setTimeout and give this timeout variable as the timeout value to the setTimeout. Following is an example (I know too much timeout):
var timeout = 0;
$('div').each(function() {
var $this = $(this);
timeout += 1000;
setTimeout(function() {
$this.hide('slow');
}, timeout);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
Try using the timeout in the callback of the $.each() function.
$.each(json, setTimeout(function(key, value) {...},1000) )
I'm trying to fade out one image, then fade in another image in the same spot.
So far I've got this fiddle, but you can see it changes the image before the .fadeOut() function finishes, when changing image via clicking thumbs. I've read that jQuery doesn't run sequentially as standard (which my code is assuming it does), so I tried adding in the completed function, like so:
$('#image').fadeOut('fast', function() {
$('#image').html('<img src="' + image + '" class="image"/>');
$('#image').fadeIn('fast');
});
However my issue is still present. What should I do to fix this?
I wouldn't destroy and recreate the elements; I'd just update the attributes. I'd also include a .stop(true, true) to cancel any previous animation and jump straight to the end before starting the fadeout, in case someone clicks quickly.
var images = [
'http://i.stack.imgur.com/uClcV.jpg?s=328&g=1',
'https://www.gravatar.com/avatar/d050da3cf82fdf6cfa431358fee9a397?s=128&d=identicon&r=PG&f=1',
'https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=128&d=identicon&r=PG'
];
var current = 0;
updateImage(images[current], images[current]);
function updateImage(image, title) {
var img = $('#image');
img.stop(true, true).fadeOut('fast', function() {
img.find('a').attr('href', image).attr('title', title);
img.find('img').attr('src', image);
img.fadeIn('fast');
});
}
$("#next").click(function() {
current = (current + 1) % images.length;
updateImage(images[current], images[current]);
});
<input type="button" id="next" value="Next">
<div id="image">
<a>
<img style="height: 128px; width: 128px"><!-- Never do that, but for a demo, it's okay -->
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is expected result that #slider not fade to appearance of empty
background during image transitions ?
Fades to either white, ready for the new image to fade in, or a crossfade - either would be acceptable
Try setting #slider width , height to expected img width, height; setting background-color to #000
css
#slider {
width:500px;
height:505px;
background-color:#000;
}
js
//clicking thumbnails
$(".image").click(function () {
var image = $(this).attr("rel"); //getting the rel tag from the a tag
var title = $(this).attr("data-title"); //data title from a tag
$('#image').fadeOut('fast', function() { //fades out last image
$('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '">'
+ '<img src="' + image + '" class="image"/></a>')
.fadeIn('fast');
})
jsfiddle http://jsfiddle.net/bmu43fm7/13/
Using JQGrid 4.5.4
I have a requirement to have both vertical scrollbar on my JQGrid on both the left and right.
Sample mockup:
Is this possible? I have searched extensively and found an example of two horizontal scrollbars, but I was unable to find an example of two vertical scrollbars on both left and right sides of the JQGrid.
I solved it with a small function added on loadComplete event.
This function creates a new div for the left scrollbar and then it sycronices both scrollbars.
loadComplete: function(){
var jqgridHeader = $(".ui-state-default.ui-jqgrid-hdiv");
// Add a new div with another div inside for the left scrollbar
jqgridHeader.after(
'<div id="leftScroll" style="z-index:1000; position:absolute; height:150px; overflow:scroll; width:17px;">'+
'<div id="leftScrollContent" style=" width:17px;"></div>' +
'</div>'
);
// Set to the new new div the sice of the jqgrid body
$("#leftScrollContent").css("height",($("#sortrows").height()));
var jqgridBody = $(".ui-jqgrid-bdiv");
// Syncronice both scrollbars
jqgridBody.scroll(function () {
$("#leftScroll").scrollTop(jqgridBody.scrollTop());
});
$("#leftScroll").scroll(function () {
jqgridBody.scrollTop($("#leftScroll").scrollTop());
});
}
*The left scrollbar overlaps the first grid column
I made some modifications based on hect0r90's answer. This function is called whenever the grid is initialized, in case content changes. There WILL be a problem with this solution if a horizontal scrollbar is present. I did not fix it because this is not an issue for me.
function FormatLeftVerticalScrollbar() {
var leftScrollID = 'leftScroll';
var leftScrollContainerID = 'leftScrollContainer';
//Get the body and header
var jqgridBody = $(".ui-jqgrid-bdiv");
var jqgridHeader = $(".ui-state-default.ui-jqgrid-hdiv");
//See if the scrollbar and container already exist
var leftScroll = $("#" + leftScrollID);
var leftScrollContainer = $("#" + leftScrollContainerID);
//Add a new div with another div inside for the left scrollbar
if(leftScroll == null ||
leftScroll.length == 0)
{
jqgridHeader.after(
'<div id="' + leftScrollID + '" style="z-index:1000; position:absolute; height:' + jqgridBody.height() + 'px; overflow:scroll; width:17px;">' +
'<div id="' + leftScrollContainerID + '" style=" width:30px;"></div>' +
'</div>');
leftScroll = $("#" + leftScrollID);
leftScrollContainer = $("#" + leftScrollContainerID);
}
//Set scroll content height to the height of the content
var contentHeight = jqgridBody[0].scrollHeight;
$("#" + leftScrollContainerID).height(contentHeight);
//Syncronize both scrollbars
jqgridBody.scroll(function () {
$("#" + leftScrollID).scrollTop(jqgridBody.scrollTop());
});
$("#" + leftScrollID).scroll(function () {
jqgridBody.scrollTop($("#" + leftScrollID).scrollTop());
});
}
This is the best I could come up with until Oleg shows up with a better solution.
I am trying to do very simple thing, setting the height of div depends on what the height is.
So when the site load the height is 45px, after clicking in button height is 100px. After the next click I want my height back to 45px. I am using jQuery, the code is below:
http://codepen.io/zlyfenek/pen/pAcaw
Thanks for any help, as I am new to jQuery.
You can use .toggleClass() function of jQuery.
$(function(){
$('.yourButton').click(function(){
$('.yourDiv').toggleClass('big');
});
});
demo: http://jsfiddle.net/FYyU6/
Note:
Your big css class should come after your small class Order Matters.
change $("button").one to $("button").on
You should just have a class that sets the height to 100px, and then toggle it when you click on the button:
.opened { height: 100px; }
$("button").on("click", function() {
$(".con_b").toggleClass("opened");
})
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
// use .on instead of .one, .one will online listen for a click one time,
// so your second click will not be seen
$("button").on('click', function () {
if ($(".con_b").height() == 45)
{
$(".con_b").height(100);
}
else
{
// show height and change height should be two different actions
$('.con_b').height(45);
showHeight(".con_b",$(".con_b").height());
}
});
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("button").on('click', function () {
if ($(".con_b").height() == 45)
{
$(".con_b").height(100);
}
else
{
$(".con_b").height(45);
}
its $("button").on not $("button").one