Change background of the modal before the delay - javascript

I use this material modal pop-up ( http://codepen.io/ettrics/pen/Jdjdzp/ ) on my website, it works perfectly fine but I need one modification. As you can see in the snippet, once the button is clicked there is a delay of 400ms and after that modal content shows up. The background of the modal content also changes after the defined delay of 400ms. What I want is that background color should change immediately once the button is clicked and the modal content should load normally after 400ms.
&__bg class controls the background of the modal. It's set to transparent in the snippet. Kindly suppose it to be any solid color like black.
I don't have any experience in JAVA SCRIPT.
A LITTLE HELP WOULD BE APPRECIATED.

here is a modified pen of the changes you want.
The thing is you want to show the modal instantly but hide the content for a while
window.setTimeout(function(){
// reveal the modal content
content.classList.add('modal__content--active');
},contentDelay);
http://codepen.io/anon/pen/ZpYEvL

Related

Background color transition from one page to the next

I was wondering if anybody has a swell solution for the following:
I want the background color of my website to transition from one page to the next. Meaning:
mypage.com/index background is red. User clicks a link and gets to ...
mypage.com/greenpage background is initially red and fades to green after page load. User click a link and gets to ...
mypage.com/orangepage background is initially green and fades to orange ... and so on.
What I am doing now is:
Save the current background color in the session
$_SESSION['bg_old'] = $page->bg;
On the next page, I assign it to the body:
<body style="background-color:<?php echo $_SESSION['bg_old']; ?>">
And finally change it with js:
window.onload = function() {
var body = document.querySelector('body');
body.style.transition = 'all 3s ease-out';
body.style.background = bg_new;
}
(I left out some code, but the principle should be visible).
This works, but it feels pedestrian. Has anybody done this in a slicker way?
Can't have any one-page or jQuery solutions.
Thx all!!
With your approach, as #appleapple pointed out, when you open multiple tabs your colors would jump.
What you can do instead is to save bg_old on mouse move (Make AJAX request to some PHP file that saves color inside session. You can minimize the amount of request by sending one request after page loads, then another one after page unfocus and focuses back). And keep rest of the code the same. This way when you open second tab with different color and switch back to the first one transition still would be consistent.

Semantic-ui pop up z-index?

http://semantic-ui.com/modules/popup.html#/examples
I have used the pop up described above and it works well. The only thing I see that I have a blue coloured page header div (width 100%, height 200px, z-index:9998).
I have a series of images below that on the page. The pop up triggers when an image is clicked. However for some reason the pop up window is popping up under the page header div when an image near the top of the page is clicked.
How can I make the pop up appear over the top of that header div?
If I need to set the z-index of the div, where do I set it and on which element/class?
I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings
set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working.
Search for 1190 in semantic-UI.css. Override the value.

Colorbox is not showing content box correctly

I have a cbox that is not showing content as expected. It should show it as this image:
Instead, the inner box is not showing, but the scroll down is being done. The content is there, because I can see it in this image:
But it's not being shown inside the colorbox.
Any idea on why it's not working?
EDIT: As additional info, my colorbox.css is being loaded before the colorbox.js, and jquery is being loaded before colorbox.js.
After executing these lines:
$('#cboxOverlay').css('z-index', '99');
$('#cboxOverlay').show();
optionsContainer.show();
The white box is being created with no content. But for the second example, the white box is not being shown...
Where optionsContainer contains text at innerHTML and innerText.
It seems there are some custom z-index overriding colorbox z-index.

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..

After first click on delegate selector, it refreshes the page

I am having a serious problem using .delegate in jQuery 1.11
I have a sidebar called ".local-filters" which opens when I click #consult-filter.
After that, the hidden sidebar from the right appears (named .local-filter) (toggles a class called .active) and ".overlay" (100% height and width div) makes a black background with class ".active"
I used this to make that happen. Also, I want to click on .overlay (black background) and toggle the overlay class to make it visual disappear.
$(document).delegate('#consult-filter, .overlay, .cerrar filtros','click',function(){
$(".local-filters").toggleClass('active');
$("body").toggleClass('menu-active');
return false;
});
I read a lot of articles and read something about bubble spreading, but I don't know actually what is happening.
Everything is working correctly, but I don't know why in the second click I made to this element, it automatically refreshes the entire page.
Any ideas?

Categories