I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>
Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/
You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})
Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>
Related
I've been trying to implement a feature that removes the transparency of the dropdown menu on my website so that it is actually readable for visitors.
The code I am currently using, which removes transparency on scroll but not on drop down is:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
});
});
I tried changing it to this (and variations of this) but can't seem to get it to work:
$(document).ready(function(){
var stoptransparency = 100; // when to stop the transparent menu
var lastScrollTop = 0, delta = 5;
$(this).scrollTop(0);
$(window).on('scroll load resize', function() {
var position = $(this).scrollTop();
if(position > stoptransparency) {
$('#transmenu').removeClass('transparency');
} else {
$('#transmenu').addClass('transparency');
}
lastScrollTop = position;
});
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
$('#transmenu').removeClass('transparency');
});
$('#transmenu .dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
$('#transmenu').addClass('transparency');
});
});
Any help would be greatly appreciated!
Thanks!
Without the html that this is hooking into it's a bit difficult to answer your question.
But given the fact that scrolling gets the job done, the only element I can see that could be preventing the functionality you want is that your selector to add show event handler is either selecting nothing in particular or an element in the DOM that is not the bootstrap dropdown element that triggers 'show.bs.dropdown', which is my reasoning for the first statement.
You can try the following debug code to verify:
// Should log to console with 'selected' if selector works alternatively 'not selected'
console.log($('#transmenu .dropdown').length > 0 ? 'selected' : 'not selected');
// Log to console when show event triggered
$('#transmenu .dropdown').on('show.bs.dropdown', function() {
console.log('triggered');
});
Hope that helps you find a solution. Happy coding!
see the documentation at http://api.jquery.com/on/ and it should become obvious why your fancy named events are never being triggered (without defining any event namespace in the first place).
$('#transmenu .dropdown')
.on('show', function() {})
.on('hide', function() {});
the DOM selector also might be #transmenu.dropdown instead of #transmenu .dropdown (depending if id and class attributes are present on the DOM node to select - or if one selects the parent node by id and there is/are nested node/s with a class attribute present).
When you click 'Darrien Tu' the text on the far right disappears but it doesn't come back when you reclick the name.
https://jsfiddle.net/gkrh0ok0/1/
$("#nav_list").click(function () {
$(".sidebar-right").toggle();
});
I have check the fiddle. There is one issue in .sidebar-right
You have given margin-left:80% instead of give right:20px
This might help to solve your issue.
I have update your script code :
<script>
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open').after($(".sidebar-right").toggle('slow'));
});
});
</script>
Add comment to this code
<script>
/*$("#nav_list").click(function() {
// assumes element with id='button'
$(".sidebar-right").toggle();
});*/
</script>
This should be easy but I checked on google and did not find any info on this.
I am doing:
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
However it is not sliding down. It is getting displayed without any animation. No error either.
.slideUp() is working properly.
What am I doing wrong here?
jsFiddle
Change
$notification.slideDown(1000, function () {
$('#notifications').append($notification);
});
to
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
The reason why slideDown doesn't work is because the element is visible when you are appending it
DEMO
Also note that when you slideUp the notification you should remove it because otherwise you'll have multiple notifications just taking up place
$closeButton.click(function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
});
You had two minor issues, first your .notification element needs to be hidden to be able to slideDown().
.notification{
display: none;
}
Secondly, you were trying to animate in an element that doesn't exist until the animation is complete :)
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
Updated script below. PS: Don't forget to add the CSS snipplet.
$(document).ready(function(){
CKEDITOR.replace( 'description' );
$('#title').focus();
$('form').submit(function(event){
event.preventDefault();
var html=CKEDITOR.instances.description.getSnapshot();
var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').html(html);
var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
$('#notifications').append($notification);
$notification.slideDown(1000);
$closeButton.click(function(){
$(this).parent().slideUp();
});
});
});
slideDown documentation says:
$notification.slideDown(1000, function(){});
here function executes on sliding complete. So you need to append hidden element then slidDown to show.
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
Here is demo
I'm trying to do this in javascript but more optimized and with toggle function working !
My js code :
$(document).ready(function() {
$('a.details').click(function(e){
var id= '';
$('a.details').each(function() {
id = $(this).attr('href');
$('#'+id).hide();
});
$(this).addClass('active');
id = $(this).attr('href');
$('#'+id).toggle();
e.preventDefault();
});
});
Here is my take on this WITHOUT changing the html except for adding a t to the ID of the rows
http://jsfiddle.net/mplungjan/Rfn8z/
Comments welcome (especially if voting down)
$(document).ready(function() {
$('a.details').each(function() {
var tr = $("#t"+parseInt($(this).html()));
var link = this;
$(this).toggle(
function(e){tr.show(); $(this).addClass('active'); e.preventDefault();},
function(e){tr.hide(); $(this).removeClass('active');e.preventDefault();}
);
});
});
Terrible way of doing things. Instead take a look at this:
http://jsfiddle.net/xzpkq/
Maybe you will be inspired to produce better code
I setup a jquery dropdown menu that works perfect. It drops down when a user rolls over a link. The problem is that when the user rolls over the content area of the drop down menu, it slides back up. I need to set up the code so that the slidedown box remains in the down position while the user's cursor is still over it.
Here is my HTML:
<ul id="tabnav">
<li class="tab2">My Leases</li>
</ul>
<div id="leases">
<!-- slide down content here -->
</div>
JS Trigger:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").hover(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
return false;
});
});
</script>
Any ideas?
EDIT: Here is a link to page in question: http://designvillain.com/testbed/600/601.html
I'm not sure if this is what you want, but I'll just drop it here. It waits 500ms before sliding up #leases, and only when appropriate
var isMousedOver;
var hideDropdown = function(a) {
setTimeout( function() {
if (isMousedOver) return;
$("#leases").slideUp("medium");
$(a).removeClass("active");
}, 500);
}
$(".btn-slide").hover(
function(){
$("#leases").stop(true,true).slideDown("medium");
isMousedOver = true;
$(".btn-slide").removeClass("active");
$(this).addClass("active");
var that = this;
$("#leases").data("mouseoutfn", function() { hideDropdown(that) });
},
function(){
isMousedOver = false;
hideDropdown(this);
}
);
$("#leases").hover(
function() {
isMousedOver = true;
},
function() {
isMousedOver = false;
$(this).data("mouseoutfn")();
}
);
Here's a demo: http://jsfiddle.net/mMRZc/
The .hover() binds two events, mouseenter and mouseleave.
I would instead go granular and use the mouseenter() on the .btn-slide and the mouseleave() on the .leases
$(function()
{
$(".btn-slide").mouseenter(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
});
$("#leases").mouseleave(function(){
$(".btn-slide").toggleClass("active");
$(this).slideToggle("medium");
});
});
EDIT: Note, if the mouse never enters the #leases div, it will not get the mouseleave, and you may need to consider that.
EDIT2: fix my bad finger typing of funciton to function
I assume the div is hidden on page load and you want it to show when you hover over the link? Change toggle to down...
$(document).ready(function(){
$("#leases").hide();
$(".btn-slide").hover(function(){
$("#leases").slideDown("medium");
$(this).toggleClass("active");
return false;
});
});
Does it need to slide back up sometime?