jQuery image click hide/show - javascript

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

Related

Close GLightbox gallery by clicking outside content area

I'm using the GLightbox JS library for a portfolio gallery and want to be able to close the gallery when clicking outside the inner element.
I found other questions of a similar nature, but I'm avoiding jQuery and haven't been able to find a solution that works for this specific use case. Plus it looks like the functionality I want is built in. I'm just trying to access it.
The documentation lists a number of options, and includes what appears to be a function for closing the gallery with something other than the default button.
Their documentation is here: http://glightbox.mcstudios.com.mx/
The markup for the gallery is generated on the fly, and follows this structure:
<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
<div id="lightbox-slider">
<div class="gslide">
<div class="gslide-inner-content"><!-- image/text content -->
<img src="img/image.jpg" alt="">
</div>
</div>
</div>
</div>
Based on their documentation there is a method to trigger closing the gallery listed toward the bottom of the page:
// Close the lightbox
myLightbox.close();
I want to be able to click outside of .gslide-inner-content to close the gallery, and this is the basic idea I've come up with so far:
var closeTheGallery = document.getElementsByClassName('.gslide');
closeTheGallery.onclick = function() {
myLightbox.close();
e.stopPropagation();
};
I've tried several iterations of the above code targeting various parent and child elements to see if there's anything I can hook into. So far no luck - any insights would be appreciated - thanks in advance.
The myLightbox.close(); feature didn't seem to do anything regardless of what event or <div> I used, but Doug provided some helpful guidance.
As a workaround, I added an event listener for a click on the .current slide container and set it to trigger another click on the default .gclose button.
// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'current')) {
document.querySelector('.gclose').click();
}
}, false);
It may not be the most elegant solution, but it gets the job done and doesn't interfere with the existing functionality of the gallery.
Posting the code here in case other folks using the GLightbox gallery run into the same thing.

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?

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.

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 click detection outside of specified area problem

Hey guys, ok, so, I have a jPlayer jQuery plugin playlist hidden on my home page (http://www.marioplanet.com).
Now, it is hidden by default and is only supposed to be activated upon clicking the image labeled "Music" in the upper-right-hand-corner of my header <div>.
This works great, and once an end-user clicks the image, a nice, slick slideToggle action occurs on the <div id="player"> element and it is revealed.
Now, everything holds.
Until, the end-user clicks anywhere except the Music image again, the <div id="player"> element will slideToggle yet again, vanishing.
The only problem, is when the end-user clicks upon the Music image again, because, as far as I know, it slideToggles twice!
That is definitely not what we want.
So, here is the code which was adapted by Magnar's helpful post:
$('#text_music').click(function() {
$('#jplayer').slideToggle(500, function() {
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#jplayer").slideToggle(500);
$("body").unbind("click");
}
});
});
});
#text_music is my image reading "Music"
#jplayer is my <div> containing my jPlayer plugin
So, what I want to try and do is declare a variable, just like how var outside is declared in the above code, which handles with the clicking of the #text_music image once the #jplayer <div> is already visible.
However, I need a little assistance in understanding the meaning of this variable.
Anyone want to offer any words of wisdom?
:) Thanks!
Have a look at jQuery outside events plugin to detect events outside of the specific element.

Categories