I created a jquery code which lets you click on a button to show or hide a div. However, when I toggle the div the container shifts a bit while it opens. I googled, and everywhere it says the expanding div is losing it's height. How do I fix it? I can't set a height to that div because inside the div I have more expanding content, like little paragraphs where you click "read more" and then more text appears, so the height of the expanding div is always changing.
This is my code:
<script type="text/javascript">
$(window).load(
function ()
{
$(".expandbutton").click(
function ()
{
$("#mainexpand").toggle("fast");
}
);
}
);
</script>
So how do I prevent the content from moving around when you click the .expandbutton div to toggle the #mainexpand div?
$(document).ready(function(){
$("#mainexpand").hide();
$( ".expandbutton" ).click(function() {
if($("#mainexpand").is(":visible")){
$("#mainexpand").hide();
}
else {
$("#mainexpand").show();
}
});
});
You need to set visibility instead of displaying or hinding it with display:
$(window).load(function(){
$( ".expandbutton" ).click(function() {
if($("#mainexpand").css("visibility") == "visible"){
$("#mainexpand").css("visibility","hidden");
} else {
$("#mainexpand").css("visibility","visible");
}
});
});
Related
I have a modal and is opened by clicking on button.
When this modal is opened then i am getting 2 scroll bars,
first for Modal
second for html/body
I tried removing scrollbar as below:
if ($(".dialog-popup-open").length > 0) {
$('html').css('overflow','hidden');
}
$(".closeButton").off("click").on("click", function () {
$('html').css('overflow','scroll');
//$('html').css('overflow','inherit');
}
Scroll bar is hiding perfectly but not restoring when modal is closed.
Any ideas please?
i tried both scroll and inherit
Can you please try this one:
$("#openModal").click(function(){
//code to open the overlay
//....
//....
//add modalActive class to html tag
$("html").addClass("modalActive");
});
$(".closeButton").off("click").on("click", function () {
//code to close the modal overlay
//...
//...
//remove modalActive class from html
$('html').removeClass("modalActive");
});
.modalActive{
overflow: hidden;
}
You need to give that to body:
$('body').css('overflow','auto');
I have a menu with a dropdown, where the LI element gets an activeclass on click. I have, after a lot if struggle, managed to set a script that sets an active class to an div that I have hidden, which shows on the click as an overlay of the site (under the dropdown). everything works as It should, except if I click outside the dropdown to close it instead of clicking the menubutton. This doesnt change my overlay div's class- how do I change my script to work on clicks outside the dropdown aswell, and what should I target here?
The hidden div:
<div id="site-overlay"></div>
script:
$.noConflict();
jQuery(document).ready(function(){
jQuery('li').on('click', function(){
if(jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
})
});
This will work:
$.noConflict();
jQuery(document).ready(function () {
jQuery('li').on('click', function () {
if (jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
});
jQuery("#site-overlay").click(function () {
jQuery(this).removeClass("active");
});
});
Notice the new event handler.
You can add a click event to the document body and then check the click location:
$(document).click(function(event) {
if(!$(event.target).closest('#site-overlay').length) {
if($('#site-overlay').is(":visible")) {
$('#site-overlay').hide()
}
}
})
jQuery('li').on('click', function(){
...
}
This executes only when you click on 'li' element.
But what about clicking outside 'li' element?
Try to add or replace:
jQuery('body').on('click', function(){
if(jQuery('.megamenu li').hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
}
I need help with div' showing up.
I know, that code:
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
will make my leftDiv dissappear (when I click Button), but what should I do to set my div default-hided(toggled down?) so that after I click Button, leftDiv should toggle up (appear)?
If you want the div hidden when the page loads, then .hide() it first:
$('#leftDiv').hide();
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
If you want the div to be hidden on load, you would do something like:
function load() {
document.getElementById("leftDiv").style.visibility="hidden";
}
<body onload="load"></body>
Would that not work?
var $leftDiv = $('#leftDiv');
var $button = $("#Button");
$leftDiv.hide();
$button.on('click', function() {
$leftDiv.toggle(2000);
});
How do i make that when i press a button instead of that the div like dropping under the div the the maybe 'home' div disappear when i fire the other show hidden div ?
Here's the Javascript:
jQuery(document).ready(function () {
jQuery('#hideshow2').live('click', function (event) {
jQuery('#content2').toggle('show');
});
});
pretty easy..... See this fiddle. http://jsfiddle.net/RCfVX/
jQuery(document).ready(function () {
jQuery('#homebtn').click(function (event) {
jQuery('#one').toggle();
jQuery('#two').toggle();
});
});
I have a div container which makes another div container appear on mouseover/disappear on mouseout:
$('#my-escada').hover(
function() {
$(".login-popdown").stop(true,true).slideDown(500) ;
},
function() {
$(".login-popdown").stop(true,true).slideUp(300) ;
}
);
Within that appearing div container (class="login-popdown") is a textfield. The problem is as follows:
When I double click on that textfield the autocomplete suggestions are shown, which is fine, but when I mouseover on one of the options, Jquery treats it as mouseout and the slidedowned div disappears.
Is there a solution to this problem?
thanks!
Try this:
$('#my-escada').mousenter(
function() {
$(".login-popdown").stop(true,true).slideDown(500) ;
}
);
$('#my-escada').mouseleave(
function() {
$(".login-popdown").stop(true,true).slideUp(300) ;
}
);