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
Related
I have kind of a weird problem in my website, but which seems to be a problem of the UI library I'm using.
Every time I click a select element in my page the background is slightly changing, in width, which flickers the background image.
At first I though this is a problem in my code, but after checking, I see that in the UI library docs it also happens.
Example:
My site : https://dinsangun.github.io/crypto-converter/
The lib docs: https://mui.com/components/selects/
(In the lib docs, when you click a select element, pay attention to the slider on the right side, it disappears when the dropdown menu of the select items is clicked)
Is there a way to overcome this little bug?
Thanks.
Your problem comes from the scrollbar, when you click on the select it dissapears and so the background extends to cover all the screen.
It's the same problem for MUI website.
One of the solution I can propose would be to put on your body or root div height:100vh;overflow:hidden;
I'm using select2.full.min.js in my Ruby on Rails project in order to give one of my select tags search functionality. I'm initializing it in the most vanilla way possible: $( 'select.select2' ).select2();.
The select2-ified tag seems to work fine, except for one issue - the "modal" when the select is clicked opens over the select element under my mouse cursor as soon as the select is clicked. The problem is, an object is immediately selected and on mouse release, committed to the select tag.
I've seen plenty of examples where the modal always pops up below the select tag, and I'm trying to achieve this functionality, but I'm not really sure what I need to do in order to make that happen. I'm following the examples at the Select2 web site, but don't really see what's wrong here.
Can anyone tell me how I might achieve this? Thank you!
[EDIT] After some investigation, it looks like the problem happens when the viewport is beyond a certain vertical size. If I shrink the browser window enough, the select2 modal pops up above the element. Expanding the viewport size again does not cause the problem to resurface until I refresh the page.
[EDIT2] This appears to have something to do with the calculation select2 uses to decide how to position the modal. It's placed with the following style:
position: absolute;
top: 350px;
left: 472px;
Dragging the bottom of the viewport up to the bottom of the modal moves it up above the select2 element, and the top value changes accordingly. I can override this with my own CSS to fix it.
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/
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.