set timer to slidedown and the button change after slideup - javascript

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);

Related

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');
});

How to open colorbox inside div

Actually i want to do open color box without popup and it need to be only show hide inside a div. can we target a div to open colorbox content.
<a href='#myGallery' class='group'>click here</a>
<div class=''><!--this must be container of colorbox, and disable popup-->
<div id="myGallery"><--some content with photo--></div>
</div>
function _teamPopup(){
$(".group").colorbox({
inline:true,
rel:'group',
href:$(this).attr('href'),
scrolling: false,
opacity:1,
width:100+"%",
});
}
on my web page , there is lot of thumbnails, when i click on it content must display without popup.and it can be next ,prev , close like colorbox group function.
please check below image and you can get some idea.
Use toggle function of jQuery to hide and show content inside an element
Why you want to change colorbox if its purpose is exactly to have a gallery popping up?
If you look around there are widgets more specific for the kind of problem you're having.
Check http://galleria.io/themes/classic/.
If you still don't like what you can find around why don't you just code the big div to change its image when clicking on a thumbnail?

Slide Toggle will not stay up once clicked?

I am making a menu and have ran in to some jQuery issues.
I want my toggles to stay up once they have been clicked but instead they are sliding up but then straight back down again.
I have managed so far to have one close and another open simultaneously. Any thoughts?
Here is the current JS :
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function(){
jQuery(".menu-container, .full-menu-container").siblings().find('.food-content').slideUp();
jQuery(this).find('.food-content').slideDown();
});
I have made a JS Fiddle:
https://jsfiddle.net/marmaaduke/uyb4Lzuy/
Just exclude the current item clicked from the slideUp (with not) and use slideToggle for the current item.
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function () {
jQuery(".menu-container, .full-menu-container").siblings().not(this).find('.food-content').slideUp();
jQuery(this).find('.food-content').slideToggle();
});
https://jsfiddle.net/TrueBlueAussie/uyb4Lzuy/1/

How to clear content div and reappear with javascript

I am using jQuery CustomBox modal. I have it all working fine but I want the div behind it (BUT NOT THE BACKGROUND IMAGE) to disappear when modal is clicked. I have managed that, but not too sure on the code to make it reappear again after the modal is closed. At the moment I have to refresh the page in order for it to come back.
Here is the code I am using so far: http://codepen.io/doolz77/pen/esoHB/
I have not included the modal due to the amount of extra code, however, here is a link to the actual page
to make the modal appear just click on the 'joey' link.
Thanks!
EDIT: At the moment it is controlled by jQuery. The call which is placed in the footer is:
<script>
$(function () {
$('#fadein').on('click', function () {
$.fn.custombox( this {
effect: 'fadein'
});
return false;
});
});
</script>
This fades the modal in and out. Would I just need to place some code here for the #wholePageContainer div to re-appear??
You need to store the html before deleting it to retrieve later. Or you can use show/hide To reduce the pain and achieve desired functionality:
function clearBox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "none";
}
function showbox(wholePageContainer)
{
document.getElementById(wholePageContainer).style.display = "block";
}
Demo
Is this what you were looking for:
http://codepen.io/anon/pen/giFEL
Edited:
Explanation to the above link:
In the above link i have made the html and body tag as 100% and the div element who's content is been removed to some percentage i.e 50%, This will keep the div occupy space event if it is empty.
Next i am storing the html content to a hidden div element and restoring it back to the div when required.

jQuery delay and javascript settimeout won't work with facebook button

I'm using socialite.js to put social buttoms on my page, social buttons are inside div id="social". Div is initially hidden (display: none;).
I'm calling Socialite.load($('#social'));
and nextly want to show this div after some delay,
I tried:
$('#social').delay(4000).fadeIn(400);
and:
timeoutID = setTimeout(function(){ $('#social').fadeIn(400)}, 3000);
It doesn't matter which method I would like to use, IE and FF shows only g+ and twitter buttons, but FB button is missing, Chrome shows all three buttons.
Except without timeout:
$('#social').fadeIn(400);
this works great in every browser.
Any idea, please?
Facebook button won't load if the container div is hidden.
Try this:
Set opacity to 0.0 and after fb button is loaded, change it to 1.0 and then hide div.
Now You can show or hide it whenever you want.
timeoutID = setTimeout(function(){
$('#social').css("display", "none");
$('#social').css("opacity", "1.0");
$('#social').fadeIn(500)
}, 3000);
Is the Facebook button loaded onto the page but just not visible? Like, maybe it's overflowing out of the div?
Have you checked the developer console in IE and FF to see if there are any errors occurring that aren't occurring in Chrome? If the button's not loading on the page at all, that could mean that the JavaScript is stopping before it reaches the point in the code where the FB button is rendered.

Categories