We Keep Coding

jQuery image click hide/show

i have googled much about this problem but sadly havent found a working solution and i dont have any expertise in javascript sadly.
I want to achieve the following:
Having a sticky bar at the bottom of the website (done) which automatically closes after 5 seconds after opening the page (not done)
After 5 seconds the sticky bar should automatically slide down and only an orange arrow (which is an image) should be visible
I managed to implement a jquery script which already achieves the content "closing" when i click on the button.
But i cant manage to link the image to do the same functionality as the button and i dont know what to do.
Plus the automatic 5 seconds closing after opening the page is also not implemented yet.
The jquery script:
jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#content').toggle('show');
});
});
Here is the working button at the top which hides "Hello World" and at the bottom there is the orange image with the white arrow which sould have the same functionality as the button above to hide the content directly under it.
Code from the "Hello World" and Button
Code from the orange image with the white arrow
Code from the content with orange background under the image with the arrow

Use setTimeout() method, you can learn more about it here
So you could do this:
jQuery(document).ready(function(){
setTimeout(function(){
jQuery('#content').addClass('hide'); // or toggle using 'show' class
}, 5000);
jQuery('#hideshow').on('click', function(event) {
jQuery('#content').toggle('show');
});
});
In code with arrow button use tag, like:
<div class="bar">
<img src="arrow.png" alt="Arrow button">
</div>
Then you could use jQuery to listen on click event on that button:
jQuery('#closeButton').on('click', function(event) {
event.preventDefault();
$('#content').toggle('show');
});

set timer to slidedown and the button change after slideup

What should I put as after I surf the website and in 3 seconds later the ads will slide down from the top of the webpage, and the button name on that div will change to 'hide'. And after we click hide button, the ads will slide up and the button name back again to 'show'.
It's working for sliding down and sliding up and also the button HIDE and SHOW change successfully. But after the button changed back to 'SHOW' again. I clicked 'SHOW' button but it wont change back to 'HIDE'. and also i didn't set timer to slide down. because I don't know what to put as I can't find any answer on other questions.
This is my script for JavaScript and jQuery
$(document).ready(function () {
$(".showAds").click(function () {
$("#ads").slideToggle("slow");
$('a#showLink').text('SHOW');
});
});
This is what I want to show and hide
<div id="top">
<div id="adsBox">
<div id="ads"> <img src="assets/images/ads.jpg" alt="ads"> </div>
<p> HIDE </p>
</div>
</div>
And this is my CSS
#adsBox { display:none };
and also i tried something like this. And it's still not working too.
$(".showAds").click(function () {
$("#ads").slideUp("slow");
$('a#showLink').text('SHOW');
$("#ads").slideDown("slow");
$('a#showLink').text('HIDE');
});
I know my coding is quite messy. Please guide me to the right direction. And sorry for my bad english. Thanks.

The button label isn't changing back because, in short, you haven't told it to. Your call to slideToggle() switches the visibility of the element back and forth, but your call to .text("SHOW") only does one thing...sets the text to 'SHOW', every time.
Try something like this:
$(".showAds").click(function () {
$("#ads").slideToggle("slow");
$('a#showLink').text(text == "SHOW" ? "HIDE" : "SHOW");
});
Which is to say - 'if the text is SHOW, set it to HIDE. If not, set it to SHOW'.
For your timer, use setTimeout():
setTimeout(function(){ $("ads").slideToggle("slow");}, 3000);

Jquery: image Loader position and hiding mess up

I've got a modal dialog that pop up then load and show the loader image then after a seconds it will hide and preview the "modalLogin" page.
At first loading the main page and clicking the button for modal dialog to pop up it is fine, but when I close the modal dialog and click the button for modal again, the loading is mess up! So can anyone explain to me what is wrong?
$(href).fadeIn(100, function(){
$('#loadingImage').show(1,function(){
setTimeout( function(){
$('#loadingImage').hide(1,
function(){
if(thisId == 'loginModal' ){
$('#previewOutput').load('modalLogin.php');
//alert("Login");
}
}
);
},500);
});
});
Here the link : http://jsfiddle.net/UZ6JN/1/

Its because when you put text with .html() it stays there, if you want to see correctly then add one line in this:
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#previewOutput').html(''); //<--------add this one here
$('#mask').hide();
$('.window').hide();
});
check this out in fiddle here

Hide twitter bootstrap popover

Following is my jquery code which i am using to display popover . What i wanna do is when a user click anywhere on the screen or on any <span id="close" class="pover"></span> then it hides the current opened popover and show a new popover on which the user clicks on.
As You can see below span which contains class="pover" are being poped up by the following jquery kindly let me know how can i hide the opened popup and display a new one accordingly
Currently, all the popover are getting displayed on click event.
$(document).ready(function() {
$('.pover').each(function() {
//$('#close').popover( "hide" );
$(this).popover({
title: $(this).attr('abc'),
content: $(this).attr('data-content'),
delay: "show",
trigger: "click"
});
});
});​

Found this great solution:
Exactly what I am seeking to do.
https://github.com/lecar-red/bootstrapx-clickover
http://www.leecarmichael.com/bootstrapx-clickover/examples.html

Open clue tip on page load javascript

I have used cluetip taken from this location http://plugins.learningjquery.com/cluetip/. I need to open the clue tip when page loads and close the cluetip on clicking the close button.
The html code:
load
<div id="loadme">test content
close
</div>
Now the clue tip opens only on mouse over. I need to open the clue tip when page loads and close the cluetip on clicking the close button.

Yes, your cluetips opens only mouse over, lets call this event!
$(document).ready(function() {
$('.load-local').trigger('mouseover');
});

You can use this following html and jquery
<div class="open">
<p>This the content show on after the page loaded.</p>
<button>close</button>
</div>
$(document).ready(function() {
$("button").click(function () {
$(".open").css("display", "none");
});
});
Here the Demo