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
Related
Here's the deal. I have a small div who is position: absolute;. I'm using stickyfloat plugin to make it scroll ONLY within the <section class="software-content"></section>, like the demo they show on the github page. However this absolutely positioned div, where the menu is, instead of scrolling with the browser, it instead scrolls ALL the way to the top. I have no idea why it is having this behaviour. Here's a fiddle demonstrating it:
http://jsfiddle.net/yisera/19amn27z/1/
Note: Summary the above fiddle for some reason, does not emulate the behaviour. The div.store-menu element should scroll within the section.softwate-content element and stop as the user scrolls down into the div.prefooter element.
Can anyone figure out what the problem is?
Try that way:
$(document).ready(function(){
t = function(){$('.scroll-store-menu').stickyfloat({duration: 400, lockBottom: true});}
setTimeout(t, 50);
});
http://jsfiddle.net/19amn27z/2/
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
I have a div (within #slideup there is a div with a div with PHOTOS) that I want "PHOTOS" to be positioned at the bottom, but when you hover over it it expands up and the header then goes to the top of the div. When your cursor then leaves the div, I would like "PHOTOS" to return back to the bottom.
Here is my feeble attempt. I can't seem to offset the header to where it is viewable. Any help would be greatly appreciated.
http://jsfiddle.net/JcBAd/2315/
$("#other-guy").hover(function () {
$("#slideup").slideToggle("fast");
});
Here is an example (kind of), http://www.barackobama.com/. In the right column, when you hover over "Immigration Reform" and you'll kind of see what I'm looking for. Only difference is I want the header to stick to the top.
You can use jQuery .animate() for example. Check this FIDDLE.
JS Code here:
$("#other-guy").hover(function () {
$("#slideup").stop().animate({'bottom' : 0}, 'fast'); /* open */
},
function(){
$("#slideup").stop().animate({'bottom' : -180}, 'fast'); /* close */
}
);
You are using Hover effect thats the reason your div is shown only when you place mouse over it
To use your code without that hover effect remove the javascript code and change your HTML to
<div id="other-guy">
<div style="background: #333; color: #FFF;">PHOTOS</div>
it will work.
and yup what is hover effect? just for your interest have a look
I've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.
i'm trying to slide a div element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!
How can I achieve this without the scrollbars appearing?
Any help appreciated very muchly, thanks :)
Briefly, using overflow-x:
function moveStuff() {
$('body').css('overflow-x', 'hidden');
$('#iteminmotion').show().animate(..., function() {
$('body').css('overflow-x', 'auto');
});
}
move the element off the page to the left, moving it off to the right increases the width of the page
You could temporarily turn off side scrolling by applying this css to the body:
body {overflow-x:hidden;}
http://jsfiddle.net/pxfunc/YYUZJ/
Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.