We Keep Coding

Change div to visible after initial load?

I have an issue where a div is loaded before the javascript, which displays the text, and after the javascript is loaded it will display it differently (autoscrolling). To prevent this I tried adding visibility: hidden; to the div #vs, and then add the following code to the jQuery document.getElementById("vs").style.visibility= "visible";
This solves the problem, but after 3 seconds it will disappear, and after 3 seconds it will reappear, and it keeps going like this. How do I prevent this?
jQuery(document).ready(function($) {
function autoRefresh() {
$.ajax({
success: function(data) {
// Find div id #vs
var result = $('<div />').append(data).find('div#vs').html();
$('div#vs').html(result);
document.getElementById("vs").style.visibility= "visible";
// If div id #vs takes up more than 85% of inner height, add class .vscroll
if (document.getElementById('vs').clientHeight > window.innerHeight * 0.85)
$('div#vs').addClass('vscroll');
// If div id #vs takes up less than 85% of inner height, remove class .vscroll
if (document.getElementById('vs').clientHeight < window.innerHeight * 0.85)
$('div#vs').removeClass('vscroll');
}
});
}
autoRefresh();
// Refresh at page load and every 3000 milliseconds / 3 seconds
var auto_refresh = setInterval(autoRefresh, 3000);
})

I am not a JQuery expert, but I think it's because you are using getElementById() instead of a JQuery selector.
I think you need to do this:
$('div#vs').attr('style','visibility: visible');
Forgive me if the JQuery code isn't perfect, I haven't tried to run it

jQuery script not being refreshed

I have been wondering why the following jquery script is not beeing run every 5 seconds.
The correct height of the DIV ".leistung" (there are multiple ".leistung" div's with different lenght of text thats why every block has to have the same height) is beeing applied on load. But the function is not beeing run every five seconds for some reason.
Does anyone know why this is happening?
<section class="leistung">
<div class="leistung-image">
<img src="http://www.myfico.com/Images/sample_overlay.gif"/>
<div class="leistung-image-titel">
<span>Title</span>
</div>
</div>
<div class="leistung-teaser">
Some more text
</div>
</section>
<script>
var maxHeight = 0;
window.setInterval(function(){
$('.leistung').each(function(){
var thisH = $(this).height();
if (thisH > maxHeight) { maxHeight = thisH; }
});
$('.leistung').height(maxHeight);
}, 5000);
</script>

Since the OP is looping using each and since there are no any other elements with the class name leistung, I don't think he wants only to take the <section class="leistung"> element. So I assume that he want to select all the elements with name starting leistung.
<script>
var maxHeight = 0;
window.setInterval(function(){
//added ^ selector here
$("[class^=leistung]").each(function(){
var thisH = $(this).height();
if (thisH > maxHeight) { maxHeight = thisH; }
console.log(maxHeight);
});
// and here
$("[class^=leistung]").height(maxHeight);
}, 1000);
</script>

I found my problem. I only run the fuction every 5 seconds. But when the height has been set once it will just fetch the set height again and set it again...
I will have to come up with something else to solve my problem

Letter by letter animation with delay in loading

I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option.
Here's my code example: codepen
$.fn.animation = function () {
//get the welcome msg element
var $message = $(this);
//get a list of letters from the welcome text
var $getList = $(this).text().split("");
//clear the welcome text msg
$(this).text("");
//loop through the letters in the list array
$.each($getList, function(idx, element) {
//create a span for the letter and set opacity to 0
var newElement = $("<span/>").text(element).css({
opacity: 0
});
//append it to the welcome message
newElement.appendTo($message);
//set the delay on the animation for this element
newElement.delay(idx * 90);
//animate the opacity back to full 1
newElement.animate({
opacity: 1
}, 1100);
});
};
$('.introduction').animation();
$('.secondary').animation();
First problem is that I can't do, so the second sentence with class "secondary" runs only after first one is finished. I've tried to use .delay and setTimeout, but that doesn't help.
Also I'm not sure, how to start animation on second slide, when it's loaded.
I know there's plugins for that stuff, but I'd like to do that in vanilla JavaScript, or jQuery, css3.
Would be glad for any help.
And yeah, here's an example how I would like it to look - http://bootstrapart.net/influence/v1.5.3/
Is it possible to make, so the animation starts every time, when slide is changed?
Thanks.

Edited
Click here to see the whole code working.
Changes I made in css: I set the opacity of html text tags (<h1>,<h3> and <h4>) to 0, so they are hidden. Then in the animation function they are made visible again.
Changes I made in script: To start the second text animation with delay I used setTimeout() function:
setTimeout(function(){
$('.secondary').animation();
},2000);
To detect the slide event of carousel, according to Bootstrap Documentation you can use this method:
$('.carousel').on('slid.bs.carousel', function () {
// here is where you start the animation for the second slide
})
Re-Edit
To track on which slide we are I introduced a variable caled: var $wichSlide. Here is the working method to start the animation when slide is changed:
$('.carousel').bind('slid.bs.carousel', function (e) {
if($whichSlide == 1){
//set $whichSlide position for the next slide event
$whichSlide = 2
//start to animate the text
$('.introduction').animation();
setTimeout(function(){
$('.secondary').animation();
},2000);
/*set the text on the second slide to be invisible
* because we don't want it to appear before animation starts
*/
$('.slide2').css("opacity",0);
}else if($whichSlide == 2){
$whichSlide = 1;
$(".carousel").carousel("pause");
$(".slide2").animation();
setTimeout(function(){
$(".carousel").carousel();
},3000);
$('.introduction').css("opacity",0);
$('.secondary').css("opacity",0);
}
});
See the working code

Transition effect on page load with url

This code redirects to example-page.php:
setTimeout(function() {
window.location.href = "/example-page.php";
}, 5000);
I'm trying to add a transition effect, so when it redirects, it looks like it's scrolling left or right off the page to the other. Any help would be greatly appreciated! I've tried using Jquery but i'm still fairly new and struggling.

You could try something like this:
var elements = document.getElementsByTagName('body');
setTimeout(function(){
elements[0].style.opacity = 1;
(function fade(){
var opacloader = parseFloat(elements[0].style.opacity);
(elements[0].style.opacity = opacloader - .1)<0.1?window.location.href='example':setTimeout(fade,40)})();
},4800);
What basically happens here is:
After 4.8 seconds, the actual page's body is faded out. (You can add another effect if you want to.) When the body's oppacity of the actual page is 0, the redirect will happen.
On the next page, you could do a fadeIn effect, which might come close to what you expect
HERES A DEMO
To fade the body in on the next page, you can use this:
var elements = document.getElementsByTagName('body');
elements[0].style.opacity = 0;
(function fadeIn() {
var opacity = parseFloat(elements[0].style.opacity);
if (opacity == 1) return;
elements[0].style.opacity = opacity + 0.1;
setTimeout(fadeIn, 100); //<<<<<<<< here you set the speed!
})();
DEMO FADE IN

(function(){
document.body.classList.add("fadeout");
window.setTimeout(function(){
window.location.href = "http://www.newlocation.com";
},5000)
})()
body{
transition:opacity 5000ms;
opacity:1;
}
body.fadeout{
opacity:0;
}

You should put the transition effect in the landing page (example-page.php).
For example, you can hide the whole body with a css rule #wrapper{display:none}, and show it sliding with jquery
$(document).ready(function () {
$('#wrapper').slideToggle(1000);

This jQuery slide show doen't work in IE 8? Any ideas on how to fix it?

<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow, set 4 seconds for each images
slideShow(2000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
</script>
Note: this is not my script, it came from John Rausch's site.
Update:
Yikes, I didn't realize it was going to format like that! Let me repost just a link to his site. Don't want to give anybody eyestrain http://jonraasch.com/blog/a-simple-jquery-slideshow

It works for me in IE. Try it out with this jsFiddle.. Not sure it's the best slideshow.
I would put the object property name and values in quotes, just to avoid any possible variable name clashes. So I would wirte
current.animate({"opacity": "0.0"}, 1000).removeClass('show');
and not ...({opacity: 0.0}, 1000)...
Also, don't use eval for you setTimeouts, just use a function reference or an anonymous function. So I would write:
var timer = setInterval(gallery,speed);
and not ... setInterval('gallery()',speed);
Not sure what your CSS positioning looks like, but it seems like that'd be tricky with this slideshow.

ie is a pain. Why don't try with ie tags?
http://www.quirksmode.org/css/condcom.html
It worked for me on CSS, sure it can work with JS.