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
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.
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
I have a series of expandable content DIVs that are collapsed initially and expands upon clicking on another DIV with a heading text. See the code sample below.
<div id="post">
<div class="heading" onclick="opendiv()">...Heading...</div>
<div class="body">.....Lengthy content.....</div>
</div>
....
....
'body' class initially hides the 'body' DIV having a 'lengthy content'.
When clicked on the 'heading' DIV, 'body' DIV expands making the web page scrollable.
Remember that there are 5 or more such expandable DIV sets above and below this set.
When the 'body' section is clicked, the page must scroll back to its 'heading' DIV location.
Here is the js script I use to expand and collapse above DIVs. But this scrolling back to a given DIV does not work.
function opendiv() {
$('html,body').animate({scrollTop: $("div#post div.heading").offset().top});
if ($("div#post div.body").css("display") == "block") {
$("div#post div.body").hide();
} else {
$("div#post div.body").show();
}
}
You didn't add any event listeners to the .body div
<div class="body" onclick="gotoHead()">.....Lengthy content.....</div>
then your gotoHead() function might look like this
function gotoHead() {
document.body.scrollTop = $('#post .heading').offset().top;
}
Based on your description there are a few issues with the way you coded the script. One is that there is no click event for the .body div. The second is that you are coding your javascript click events directly in to the HTML. Typically unless it must be done this way it is better to declare your events in your JavaScript, which is generally easier to go back and edit for new functionality.
Here is a refresh of what you did:
$('.heading').click(function(e){
// hide or show the corresponding .body div
$(this).parent().children('div.body').toggle();
});
$('.body').click(function(e){
// scroll to the corresponding .heading div
$('html,body').animate({
scrollTop: $(this).parent().children('div.heading').offset().top
});
});
You can also see this in action here:
http://jsfiddle.net/joncox/pmeEs/
So in my portfolio which is at http://wrobbins.me/new if you click a portfolio piece the #headerwrap expands to the window height. A group of 'showcase' is then loaded into the #job-display. I want to disable the main page's scrolling, and have the showcase be scrollable so the information wont be cut off (as you can see is happening now). This is what I'm using to expand the #header-wrap on click.
var viewport = $(window).height();
$('#header-wrap').animate({height: viewport}, 700, function(){
$('#job-display').load("content.html#" + job, function(){
$('#job-display').fadeIn(700);
jcheck = 1;
});
});
In addition, when a portfolio piece is clicked on the site, the page jumps up to the top of the page and then expands the header-wrap. How would I go about stopping it from jumping?
To make the div scrollable you need to specify a height to #job-display. for example
$('#job-display').height(500);
To remove the page scroll ,You have specify overflow-y : scroll for html tag. You will need to make it as overflow-y : hidden
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>