We Keep Coding

Trying to create an accordion which remains readable

I'm trying to create an accordion with a huge amount of text inside that remains readable.
I found this useful function, but it has a problem - if the user reloads the page it doesn't work anymore.
jQuery(document).ready(function($) {
$('.eael-accordion-header').click(function() {
var pane = $(this);
setTimeout(function() {
var $panel = pane.closest('.eael-accordion-list');
$('html,body').animate({
scrollTop: $panel.offset().top - 100
}, 500);
}, 300);
});
});
I have tried changing:
jQuery(document).ready(function($) { ... })
by
jQuery(window).on("load", function($) { ... })
But if I do that, the code doesn't works anymore and it says that $ is not a function.
I really hate jQuery, because I don't understand it at all. How can I translate this function into plain JavaScript, please?

JQuery Reload div data Only

I am new to JQuery and facing an issue while refreshing div using following script
< script >
$(document).ready(
function() {
setInterval(function() {
$("#dbq").load("dbqtest.php");
}, 10000); //Delay here = 10 sec
});
</script>
<?php
echo '<section class="col-lg-6" id="dbq">';
echo '<p>My Section </p>';
echo '</section>';
?>
The section i am trying to refresh is declared as below
The problem i am facing is that whenever the page loads for the first time, table from "dbqtest.php" is not visible for 1st 10 seconds. and My section stays there even after loading data from "dbqtest.php"

You need a wrapper for reloading section. Somthing like this must work:
<script>
$(document).ready(
function() {
setInterval(function() {
$("#dbq-wrapper").load("dbqtest.php");
}, 10000); //Delay here = 10 sec
});
</script>
And the HTML:
<div id="dbq-wrapper">
<section class="col-lg-6" id="dbq">
<p>My Section </p>
</section>
</div>
Hoever you can use div inside section and reload data to that and use section as parent, anyway you need wrapper.
As you want to the first time load without delay, the solution is somthing like this:
< script >
function dbqLoader {
$("#dbq").load("dbqtest.php");
}
$(document).ready(function() {
dbqLoader(); // for first time.
function() {
setInterval(function() {dbqLoader();}, 10000); // Loop with Delay
});
});
</script>

This has to be it:
<script>
$(document).ready(function() {
$("#dbq").load("dbqtest.php");
setInterval(function() {
$("#dbq").load("dbqtest.php");
}, 10000);
});
</script>
It's very similar to M.Abooali's answer but I've fixed some issues and minimised it.

Scroll to the bottom of the page, reload it then repeat

I have checked all the possible questions that could be related to this but I cant seem to find anything that suits my case, either the answers were not good or incomplete.
In my case I have a html page with some php, displaying competition results. As the competition is live the page with results should scroll to the bottom of the page and then the page should refresh (so the possible new scores come in) and then repeat again and again. What would be the best solution for my problem?
The page size/length would increase as more data will come in the tables which are on results page.
Image:
EDIT:
This code now scrolls to the bottom of the page and then jump back to top and repeat and its exactly what I want, but I would like a page to refresh every time I hit the bottom and after this go to the top.
$(function() {
var pageScan = {
speed : 10000,
loop : true,
delayRestart : 1000,
start : function(){
pageHeight = $('body').height() - window.innerHeight;
pageScan.proc(pageHeight);
},
proc : function(to){
$("body").animate(
{scrollTop: to},
pageScan.speed,
"linear",
function(){
if (pageScan.loop) {
setTimeout(function() {
window.scrollTo(0, 0);
pageScan.start();
}, pageScan.delayRestart);
}
});
}
};
pageScan.start();
});

You can add some JavaScript to your page:
<script>
window.scrollTo(0,document.body.scrollHeight);
setTimeout(function (){location.reload()},5000);
</script>

This might be what you are looking for:
// Test data, ignore
for(i = 1; i < 21; i++) {
$('#results').append('<p>Test Result No.' + i + '</p>');
}
// Check every second (for example) if there is new data
// In this example there is always data
window.setInterval(function(){
update_results();
}, 1000);
// Check for new results
function update_results() {
$.ajax({
type: 'POST',
// Test data, ignore
data: {
html: 'new result'
},
// your ajax.php file
url: '/echo/html/',
success: function(data) {
// Append new results to $('#results');
// You might want to give back an array and loop through it with $.each(data, function() {});
// you might also want to check for "false" if there are no new results
$('#results').append('<p>' + data + '</p>');
// Scroll to bottom smoothly
$('html, body').animate({ scrollTop: $(document).height() }, 'slow');
}
});
}
jsfiddle
In your ajax.php-File you can echo the new scores:
echo json_encode($scores);
Given that $scores is an array of your scores which you probably have from your database.

Click Function "this" not working

I have a script that I found at http://www.red-team-design.com/cool-notification-messages-with-css3-jquery, but I'm having a problem with my code
I'm wanting to get it to 1) hide on click, and 2) hide after 15 seconds
HTML:
<div class="warning message">It is currently past 4pm. Any orders placed between now and midnight will not be placed until 4pm tomorrow.</div>
Javascript:
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++){
messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(function(){
$('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
hideAllMessages();
},15000);
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
});
This is getting executed by php, which I'm just inserting the following line into my code using php:
<script type='text/javascript'>
$(document).ready(function(){
showMessage(warning)
});
</script>​
Now for some reason the div doesn't hide when I click it, and it won't hide after the 15 seconds as specified.
I've created a JSFiddle at http://jsfiddle.net/dpdesignz/yTaRa/1/ if anyone would mind looking to see what may be going wrong? I have a feeling it's related to the part executed by the PHP echo, so does anyone know of another way to maybe do this?

You have a few errors in your code.
First warning is not defined
Which refers to the following:
$(document).ready(function(){
showMessage(warning)
});
warning is not a set variable. Perhaps you mean this to be 'warning'.
Secondly showMessage is not defined
showMessage('warning');
This is called before the showMessage() function is defined. You can fix this by moving this call into the other $(document).ready()
http://jsfiddle.net/yTaRa/5/
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
var messagesHeights = new Array(); // this array will store height for each
for (i=0; i<myMessages.length; i++){
messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
}
}
function showMessage(type){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(function(){
$('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
hideAllMessages();
},15000);
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
showMessage('warning');
});
​

$(document).ready(function(){
$('.info, .warning, .error, .success').hide();
$('.info, .warning, .error, .success').slideDown(500);
$('.info, .warning, .error, .success').delay(15000).slideUp(500);
$('.info, .warning, .error, .success').on('click', function() {
$(this).hide();
});
});
Let jQuery do all the work =)
http://jsfiddle.net/yTaRa/8/
If every message type will also be classed as message we can reduce this code down even further...
$(document).ready(function(){
$('.message').hide();
$('.message').slideDown(500);
$('.message').delay(15000).slideUp(500);
$('.message').on('click', function() {
$(this).hide();
});
});
http://jsfiddle.net/yTaRa/9/
$(document).ready(function(){
setTimeout(function() { //sets a 15 second timer on each message to collapse up over .5 seconds
$('.message').slideUp(500);
}, 15000);
$('.message').hide(); //hides all elements with the class message.
$('.message').slideDown(500); //animates messages to expand down over .5 seconds
$('.message').on('click', function() { //wires up click event to hide message on click
$(this).slideUp(500);
});
});
http://jsfiddle.net/yTaRa/10/
I had to use setTimeout for the 15 seconds call of slideUp as the click slideUp would not fire with:
$('.message').delay(15000).slideUp(500);
I assume that this is because only one slideUp() call can be scheduled on the same element at one time.

Scrolling works in Chrome but not in Firefox or IE

I'm using the following code to scroll the window when a user clicks on a few different links:
$(document).ready(function(){
$("#footerlink").click(function(){
$("#slide1").slideto({});
});
$("#logo").click(function(){
$("#slide1").slideto({});
});
$("#home").click(function(){
$("#slide1").slideto({});
})
$("#others").click(function(){
$("#slide2").slideto({});
})
$("#me").click(function(){
$("#slide3").slideto({});
});
$("#laughs").click(function(){
$("#slide4").slideto({});
});
})
The slide functionality is coming from this script:
(function(b) {
b.fn.slideto = function(a) {
a = b.extend({
slide_duration: 1000,
highlight_duration: 3E3,
highlight: false,
highlight_color: "#FFFF99"
}, a);
return this.each(function() {
obj = b(this);
b("body").animate({
scrollTop: obj.offset().top
}, a.slide_duration, function() {
a.highlight && b.ui.version && obj.effect("highlight", {
color: a.highlight_color
}, a.highlight_duration)
})
})
}
})(jQuery);
My problem is the scrolling only works in Chrome and not Firefox or IE. FF and IE degrade nicely so the links still work, but I really like the scrolling animation.
FYI: I am calling Jquery with these two lines:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
Here is a Fiddle of my code: http://jsfiddle.net/LwXR3/
Can you help me track down my issue?

Okay this is too long to be in a comment. You should really avoid the copy paste mess in that code above. The code is almost exactly the same minus the ids. Use the href to get the location instead of hard coding it.
HTML
<a class="slideLinks" href="#foo">go to foo</a>
JavaScript
$(".slideLinks").on("click", function(e){
e.preventDefault(); //p[revent the click
$(this.hash).slideto({}); //call your slide to function with the hash value for the id
});