I'm using the jQuery Masonry plugin on my page. I've set it up so that when a box is clicked, a popup dialog is displayed with the contents of the box.
I've created a demo here.
before the popup is shown, there's a scrollbar on the page because all the boxes don't fit there. When one of the boxes is clicked, I append the content into the popup and show it. I hide all the other boxes but the scrollbar doesn't update to reflect the popup i.e. the content in the popup is less than the viewing area but the scrollbar still stays for boxes.
If you've understood what I meant, could you help me out?
Thanks.
Masonry is applying a fixed height to the containing #grid element, which is why the scroll height stays the same even when all the contents are hidden. If you move the popup element outside of the containing #grid element, and show / hide the grid on click, the scroll height will update correctly.
Updated fiddle
The important bits:
<div class="reader">
<!-- content -->
</div>
<div id="grid">
<!-- content -->
</div>
<script>
$('.box').click(function() {
$('.reader').show();
$('#grid').hide();
});
$('.reader #close').click(function() {
$('.reader').hide();
$('#grid').show();
});
</script>
Related
I have a JQuery dialog on an page which opens to depending upon the size of the window. Unfortunately, I have been able to achieve in the containing div that is shown by the dialog a horizontal scrollbar when the minWidth of the containing div is reached in order that a user can scroll to the rest of the content. My relevant code snippet is as follows:
$('#containingDiv').dialog({modal:true,
autoOpen:false,
height:heightOfWindow,
width:widthOfWindow,
resizable:true});
$('#containingDiv').dialog('open');
/*css Code for containing Div element*/
#containingDiv{
min-height:900px;
min-width:900px;
overflow-x:auto;
overflow-y:hidden;
}
So, how can I achieve a position where if the dialog goes beyond the min-width of the containing div that the dialog window can then scroll to the content of the div?
Can anyone help me, please?
Solved by creating another inner div with min-width and the outer div with width along with overflow-x. This will provide the scrollbar to the dialog.
Some content is collapsed by default with display: none;, and I have a JS function that changes its state to display the content. I'd like to load an accordion inside this collapsed content, but when I do, the height of the accordion gets messed up - it gets minimum height, only like 20px or so per tab.
I understand that I probably must have the accordion height reset when the JS function is triggered that expands the content. How can do achieve this? What is the function called? Thank you!
Jquery accordion height is properly calculated only when its displayed.
Thus, using jQuery UI 1.10.0 and above call
$('.myAccordian').accordion("refresh");
right after displaying accordion content.
Let's take the following div for example. The div is this small because I intend to add a scrollbar to it.
<div id='main' style='height:300px; overflow-y: auto;'>
<!-- Content that is long enough to require a scrollbar... -->
</div>
Let's say I initialize a custom scrollbar on this div (malihu or jscrollpane) for example, with the following command:
jQuery("#main").jScrollPane(); // for jscrollpane
jQuery("#main").mCustomScrollbar(); // for malihu
This works just fine for the moment being, but when I add data to the div dynamically, it doesn't appear in the div, and the scrollbar is not adjusted:
jQuery("#main").append("Add this data to the div...");
What could be the problem?
Found out the solution. When creating any of the above scrollbars, they add two containers to the div which is attached to. You must append the content to these containers, and not to the basic div.
For example, to add content to jscrollpane scrollbar, you use:
jQuery("#main").find(".jspPane").html("Data to be added...");
For malihu you would use:
jQuery("#main").find(".mCSB_container").html("Data to be added...");
I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.
May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.
http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold
In my website, I have the main div (where I have all my contents) and a hidden div (used to show detail about some content when the user select once).
The problem is that I can't have that : "When the user clic on one content or item, modal div is showed (in front end using z-index :) ) and the slidebar in the right of screen can be used to scroll in this modal (not to scroll the back end content). And when modal div is closed, this scrollbar will be used to scroll the main page contents".
This is what I exactly want to get : http://pinterest.com/rasagy/font-picker/
you can use this http://jqueryui.com/dialog/ read how to implement jquery ui, there is the dialogbox, and you set a high and all, scrollbars, panels, content, etc.
To call it you just do something like $( "#dialog" ).dialog();
where dialog its the ID of the div that you want to show up in the modal box.
What you would want is to make the "modal div" the full size of the page
div.modal{
...
height: 100%;
width:100%;
overflow:auto;
}
and then make the overflow of body hidden on click. this would give the illusion that the scroll bar hasnt changed when in reality it has.
body.hidescroll{
overflow:hidden;
}
Then when you close the modal div just remove the class from body.
all the javascript for this is pretty trivial so I haven't included it.
you can operate the window scrollTop only