I have been searching for a way to make a menu rise up from a menu bar underneath an image
I want it so when you click on an arrow the menu will open up and partly cover the image without affecting the position of other elements in the page.
I'm struggling to find a way to do this. The reason for posting in here is not for a complete solution but thought that maybe someone could point me in the right direction. For example does this have a name? Any jQuery plugins that might help?
I have tried to recreate this affect using slideUp() and slideDown() but i am unable to get it to do the desired affect. I also tried using accordion but was unable to get that to produce the desired affect.
Any help would be much appreciated.
If initially the menu with submit button need to be present at the bottom of the page:
try setting position: absolute; and bottom:0px; with defined height.
Then for the arrow mark, bind a click event.
In the click event callback function:
Use jQuery.animate function and change the height and top properties of css.
Even better if you don't want any animation, just toggle CSS class for the bottom bar.
Related
I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...
To view web:
Click Here
if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...
Thank You!
You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();
The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.
At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.
If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.
JS Fiddle Demo Here
Using scroll event with getBoundingClientRect may decrease performance
You can use intersection observer for checking an element enter in viewport
https://developers.google.com/web/updates/2016/04/intersectionobserver
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I have a few <div> elements and a menu which is supposed to "call" these different <div>s on click with a custom animation.
These are the menus:
Normal
Remote
Tools
Register
Log in
Donate
Contact
Terms of use
Now I need to control and show different divs based on which menu entry I click.
I need help in two occasions:
Creating the animation (see the jsfiddle below)
Handling the transitions between the divs efficiently without lots of code rewriting.
Occasion 1:
When I click on a menu (Remote for example) I want the other visible menu to move itself to its complete right side and disappear (I've used overflow: hidden on the main div for that) and then from the left side the proper div to come in (remote-page div).
So basically, I'm wanting to make the slideDown and slideUp horizontal.
This is what I've got so far: http://jsfiddle.net/Dugi/UtH4m/8/
This is a good example to show what I've got already for my website locally. I failed to make the proper div come in from the LEFT side when a menu button was clicked, I just could make it so I can HIDE the divs that are standing on the way.
Final question: So how do I use .animate() to make the proper div come in from the left side AFTER the other visible div went to the right?
Occasion 2:
As you can see from the jsfiddle above, I had to go through each existing <div> and hide them:
$('#remote').click(function()
{
$('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
$('#tools-page').animate({marginLeft: '100%'}, 'fast'); // here
});
Final question: Is there a way to automatize this process and hide all visible divs and show the proper one when a menu button is clicked?
This is all I want to know.
Thanks
You can use complete parameter of the animate function to achieve that. I took the liberty of changing HTML and CSS a bit if you do not mind.
http://jsfiddle.net/UtH4m/9/
Final version: http://jsfiddle.net/UtH4m/13/
I hope this is what you want. I changed you markup a little bit. I added a #container for all the pages that is moved around. This is how it would look like: jsFiddle
I have problem with the slide effect with jquery-ui. I have a sidebar with a few buttons, which when clicked will spawn another sidebar to slide out from its left edge. One of these "secondary sidebars" contains a google JS map, and sliding that one out works fine.
Another one contains discussion with comments regarding the resource the right sidebar is showing. These discussions are filled using the template plugin and the code for filling the container is called before .toggle() is called.
While the container is sliding out the container (which has background color #eee) is not "spanning over its children in height." I'm seeing a box of perhaps 500x40 pixels with the correct background color, and the children of this container are shown as if their markup was outside the container.
Upon animation completion the container is stretched vertically to span over all its children and all is good. Unfortunately I cannot give anyone a link to a living example of this code, so what I am asking for is suggestions as to how I can start looking for the problem. This could be anything, but my guess is that it's jquery ui's fault.
important:
JQuery-UI's .slideToggle() does not reproduce this error, not does .fadeIn() or .toggle(). Unfortunately .slideToggle() does not take a direction parameter.
Thanks
check for floats, make suring your clearning them inside the sliding div, just before it, and just after it.
Add the following after a floated element(s) (divs with float:left or float:right)
Most people have a css class called "clear" or "clr"
.clr {clear:both;}
So then you can do
<div class="clr"></div>
It reads slightly better as you may use them alot in future :)
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!