I have looked all over for a solution but can't find anything specific and I know it is very doable but I think my lack of experience with JavaScript is limiting me here.
Essentially I have 5 divs, each one acts like a button. I want each button to make another div unrelated to the 5 buttons to appear. I called them "Menubox1/2/3/4" and each one is linked to each one. My first idea was to have all the menus stacked on top of each other with a blank one on top with a z-index of 5.
And then by using the "onclick" method on the div button, I would tell it to get the element of its respective menu and increase its z-index to 6, to go on top of the pile. I would also tell it to make all the other menus go to 4, to go below the rest.
So effectively each button would make the menu associated with it appear on top with the highest z-index and also hide the other menu boxes so that no other box is on the same level.
I have found a way to make it work with this JS
//Shows the current menu on top
function showstuff(boxid) {
document.getElementById(boxid).style.zIndex="5";
}
//Hides the rest of them.
function hidestuff(boxid) {
document.getElementById(boxid).style.zindex="3";
}
<div onclick="showstuff('Menu1'); hidestuff('Menu2'); hidestuff('Menu3');" ;style="cursor:pointer;">
And by putting the respective boxid in the "onclick" , it all works but the problem is it only works once, and I need it to work every time each one is clicked.
If anyone needs more information I an provide.
Why don't you just use visibility:hidden/visible on the panes you want to hide/display? It would require resetting that attribute on each pane on each click, but you don't have to worry about how browsers render z-index, or if there are any times in rendering where you get a weird display of multiple divs rendering when only one should.
Related
I have encountered this strange issue where the dropdown will jump to the top left if scrolling with overflow: scroll or if it's bigger than the body.
I'm trying to "dynamically" change a dropdown button to an input on keypress, and have it share the same dropdown box. The content of the dropdown changes as you type.
I think it's better to illustrate the issue by showing a direct example, (because it's a bit big): https://jsfiddle.net/eno4v9kL/
The issue occurs if you scroll down, and then start typing something. It will then jump to the top left.
I have kind of tried to control the behavior of the dropdown but I don't understand how it should be handled;
dropdown = new bootstrap.Dropdown(elm);
I'm not quite sure how to handle this properly in JavaScript, because bootstrap initializes the dropdown automatically. How does one control this automatic behavior?
I think a possible solution would be to have 2 dropdowns, one for each element instead of sharing the same dropdown, but I would like to only use this one dropdown if possible
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.
Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/
i really need help, i can't see something that is obvious, and usually then it is the best to ask for help.
I have 4 divs in a 12 column grid.Each div is clickable, and when clicked should display the corresponding div beneath it, that is initially set to display:none.
Everything is fine as long as i click on them in order from first to last, but if i first click, let's say on third div, it shows its corresponding div, but not beneath it, it shows it in place of the first corresponding div.
I am using simple slideToggle here, and really can't understand what is wrong.If i put the corresponding divs(the hidden ones) to visible, they are all displayed correctly, so it is not a CSS error.
I can provide the code, but i put it online, just click on methods tab, and you will see what i mean.
Here is the link
Sorry if i didn't explain it better, english is not my native language.Thanks!
You need to keep space for these div's. Use visibility:hidden and animation but do not use display:none which doesn't keep space for hidden element. All built-in effect functions like hide(), slideToggle() etc. will set display:none to your element.
I have a website where I want to achieve the following behavior:
if someone clicks on a particular item (image or swf) everything else on the page would either disappear or blur out.
this way the only thing left on the page that is visible is the thing that was just clicked
Is this possible to make everything change except this one div?
Generally speaking, this effect is achieved by setting the z-index of the 'selected' item to a very high value, then adding a position:fixed div to the page that covers the entire page and has a z-index just lower than the selected item. It's generally referred to as a 'modal div'. Searching for 'modal' along with your JS framework of choice will return you a number of usable solutions almost out of the box.
I think you want a modal. Check out the jqueryui dialog widget's modal option:
http://jqueryui.com/demos/dialog/#modal