http://semantic-ui.com/modules/popup.html#/examples
I have used the pop up described above and it works well. The only thing I see that I have a blue coloured page header div (width 100%, height 200px, z-index:9998).
I have a series of images below that on the page. The pop up triggers when an image is clicked. However for some reason the pop up window is popping up under the page header div when an image near the top of the page is clicked.
How can I make the pop up appear over the top of that header div?
If I need to set the z-index of the div, where do I set it and on which element/class?
I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings
set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working.
Search for 1190 in semantic-UI.css. Override the value.
Related
Let's see if someone comes up with something. I have the following problem:
I need to know, with javascript or jquery, when an element has finished displaying on the screen.
It is a table that is displayed on the screen as a modal popup window. It has a main container div with the size of the entire viwport, with a z-index of 10000 and display flex so that the div that acts as a popup window is centered. What I need to know is the clientWidth and offsetWidth properties of the body of the table to determine the width of the scroll bar which is equal to offsetWidth - clientWidth, and apply this width to the right margin of another div.
When the table is finished filling in a javascript function, the d-flex class is added to the main container so that the popup modal window is displayed.
The problem is that until the popup is not physically seen on the screen it gives me that both properties are the same, that is, there is no scroll bar visible. Only when popup appears on the screen is that they are different because there is a scroll bar. The scroll bar only appears when the popup has been physically displayed on the screen.
If I ask for any visibility properties they tell me that everything is visible but it hasn't really been shown on the screen yet.
I've even tried with a jQuery extension of the show function, but it doesn't give me the results I need either.
Thank you very much for your collaboration.
Greetings
You could do a work around IF you never desire the two property values to be the same. You could implement a setInterval to keep checking the property values:
let x = setInterval(function(){
if (propertyValue1 !== propertyValue2){
clearInterval(x);
//do or trigger any code that you need to here
}
},100)
I am having a serious problem using .delegate in jQuery 1.11
I have a sidebar called ".local-filters" which opens when I click #consult-filter.
After that, the hidden sidebar from the right appears (named .local-filter) (toggles a class called .active) and ".overlay" (100% height and width div) makes a black background with class ".active"
I used this to make that happen. Also, I want to click on .overlay (black background) and toggle the overlay class to make it visual disappear.
$(document).delegate('#consult-filter, .overlay, .cerrar filtros','click',function(){
$(".local-filters").toggleClass('active');
$("body").toggleClass('menu-active');
return false;
});
I read a lot of articles and read something about bubble spreading, but I don't know actually what is happening.
Everything is working correctly, but I don't know why in the second click I made to this element, it automatically refreshes the entire page.
Any ideas?
I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/
I have a jQuery modal window that appears upon click of a button. I have a on the close-modal box where I want to capture the editable text of the modal window upon closing and so I want to make the modal full screen so the user cannot simply click on the main page thus rendering the action on the click of the close modal defunct.
I have tried setting the position as absolute with top:0 left:0 bottom:0 right:0 as mentioned on some posts but this is not working. The modal is being displayed relative to the position of the click despite setting the values in line so I am unsure as to why this is happening. It keeps adding random values to the top style despite being specified.
Is there anyway round this?
Have you try to put the div of the modal window right after de tag? And try to aadd body, html {width:100%; height 100%; }
I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>