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/
Related
So in my site, when a button is clicked,I dynamically generate a div, which contains a grid of images. It goes like this:
$('.prod-images').click(function(){
var prodImages = generateProdImagesGrid(this);
$('#prod-images-grid').html(prodImages).show();
});
This works fine. And I have another button which will close this div on click.
Now this div can be taller than the screen and require vertical scrolling. The problem is that because of all the CSS/styles in this page, this div always opens only at the scroll position where it was closed. So when I open it first time, it is scrolled to the top and everything is fine. Now, suppose I scroll this div halfway down and then close it. Next time when it is opened, it opens at that scroll position.
I tried doing:
$('#prod-images-grid').html(prodImages).scrollTop(0).show();
This does not work (at least in chrome) because the div is not fully rendered when the scrollTop() call is executed.
The only way I can make this work is to give a long delay between the div rendering and the scrollTop call like so:
$('#prod-images-grid').html(prodImages).show();
window.setTimeout(function(){
$('#prod-images-grid').scrollTop(0);
},10000); //call scrollTop after 10 seconds
As you can imagine, this is not at all a good solution. Does anyone have any suggestions on how I can render the div so that when its visible, it is scroll to its top position?
Doing:
$('#prod-images-grid').html(prodImages).scrollTop(0).show();
means that it's the <div id="prod-images-grid"> which gets scrolled; since this div has no content, it cannot be scrolled.
Rather do:
$(document).scrollTop(0);
$('#prod-images-grid').html(prodImages).show();
The 0 argument of scrollTop can of course be modified to point to the position of the document where you want your dynamically generated div to show.
You can handle a function after the contents is showing whith this propety of .show():
$( ".target" ).show(interval, handler);
Like this:
$('#prod-images-grid').html(prodImages).show(1, function() {
$('#prod-images-grid').scrollTop(0);
});
(you can change 1 for any other value)
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 am using mCustomScrollbar script for custom scroll bar effect now I want to scroll page on specific class element. Class position is not fixed, It can be top or bottom.
In my example I have one anchor link and I want to page scroll to active class. Page will scroll only when user click to anchor.
Here is my JS Code:
$( "#scroll" ).click(function() {
//scroll page to active class
});
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: true
}
});
Here is my JSFiddle: http://goo.gl/6dpT7l
Note: Scroll position is not fixed. It can be anywhere UP/Down.
Any Idea? How to do this?
Thanks.
In your fiddle, it seems to be as simple as scrolling to the paragraph in question's position().top attribute. Replace your alert with this:
$("#content_1").mCustomScrollbar('scrollTo', $('.active').position().top);
I have a Div in which there is a lot of other elements like (for ease of understanding using inline-styles)
<div id="MainItemList" style="width:300px; height:50px;">
<h4>This is a long content div</h4>
<ul> <-- A Long List of Li --> </ul>
<p>Click on an list item</p>
<other divs>...
</div>
And then there is a dynamic series of other divs and I want to make my MainItemList div to be positioned just below any div I click. Like
<div id="DynamicDivs">
<div id="Dyn1"></div>
<div id="Dyn2"></div>
<div id="Dyn3"></div>
<div id="Dyn4"></div> //And so one
</div>
So, now when I click on Dyn1 then my MainItemList div should be placed below Dyn1 div. I tried it with Jquery something like
var MainListDiv = '<div id="MinItemList"'>...A lot of Elements..</div>;
$(document).on('click','#DynamicDivs div', function()
{
$(this).append(MainListDiv);
});
$(document).on('onmouseout','#DynamicDivs div', function()
{
//Check and remove
$('#MainListDiv').remove();
});
but in this way everytime a user clicks on such a div, a long code is ran to append a lot of stuff into it and remove it when user moves out. On PCs it isn't a big issue but on mobile devices it gets to much slow and that is making everything worse and worse.
What can be the trick to do so? I have made my above code running for 1 month and now it is being a headache when user complains.
Actually there is a list of some kind of pictures and icons on which user clicks then that item is appended to dynamic div and MainListItem must has to be just below Dynamic div so user click and be removed when onmouseout from that.
In my JQuery code everytime div is created and removed. MainItemList div is created on page load and is permanent (created once on page load but hidden) so it just has to be become visible and moved under any div user click and hide when mouseout? And one more thing which is making matter even worse is that when page scrolls, moves Dynamic Divs that's important :(
As you know, unhiding #MainListItem and giving it a fixed position next to the hovered-over div should do the trick, paying care to provide a correct 'top' value. The complicated part is figuring what a correct 'top' value would be. Using your example alone, that would be: the dynamic-div's top + the dynamic-div's height + any margins/other-spacing above.
Here's the code to make it happen (I included a basic fade so it's a little more seamless):
var marginOffset = 0;
$(document).ready(function(){
marginOffset = $('#DynamicDivs').offset().top;
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'fixed', top: $(this).position().top + $(this).height() + marginOffset}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
I have NOT tested this across multiple mobile devices, so do your due testing please. However, this method should be significantly less taxing on mobile devices than the appending html method.
Furthermore, this only handles the pop-up with scrolling. If you wish to have the pop-up list be delayed before it disappears, or if you have some complex margins, you'll have to revise the code accordingly.
JS Fiddle example: http://jsfiddle.net/wXKfv/10/
EDIT:
After further discussion in the comments, here is the Javascript that solves the specific problem:
$(document).ready(function(){
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'absolute', top: $(this).position().top + $(this).height()}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
JS Fiddle example: http://jsfiddle.net/wXKfv/11/
Your approach is wrong. Put the MainItemList and DynamicDivs in to separate divs. Instead if appending to the existing div try replacing the MainListDiv. or put an .empty() before append()
-or-
Assuming you are loading the MainListDiv via ajax:
load the MainListDiv on to the body and hide it.
on click event for "DynamicDivs div" position the div with jquery and css under the DynamicDivs
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