How to remove jQuery-ui dialog title bar? - javascript

I am trying to hide jQuery-ui dialog's title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post the title bar is hidden but the space taken by the bar is still there. I want to remove that space also but without removing the close button.
How can i do this?

Based on this answer:
Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:
$("#id").dialog({
autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​
You can then use CSS to eliminate unnecessary margin, border and padding. For example:
.ui-dialog-titlebar {
float: right;
border: 0;
padding: 0;
}
.ui-dialog-titlebar-close {
top: 0;
right: 0;
margin: 0;
z-index: 999;
}
Here is a demo based on above code plus it adds the necessary styles using jQuery.

If you want to remove the titelbar and keep the close icon using styles only, use the styles below. It shrinks the title bar to the size of the close icon and hides it behind. ui-icons_6e6e6e_256x240.png i created by lightening the ui-icons_222222_256x240.png image that jqueryui comes with.
.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}
.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}
.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}
.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}
.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}
.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}

The way I see it, you have 3 options.
Yes, eliminate the titlebar completely and add a custom one that you can style to match the default one, using absolute positioning should be the key.
If you have the time, extend (not overwrite) the _create method of the dialog https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 to do what you need
Work with CSS hackery to keep the titlebar there with a height of 0 for all elements but the close button.
Either one has their cons and pros, I would recommend #2 the best if you can, here's some info on how to work with widgets http://api.jqueryui.com/jQuery.widget/

This is How it can be done.
Go to themes folder--> base--> open jquery.ui.dialog.css
Find
Followings
if you don't want to display titleBar then simply set display:none as i did in the following.
.ui dialog.ui-dialog .ui-dialog-titlebar
{
padding: .4em 1em;
position: relative;
display:none;
}
Samilarly for title as well.
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
display:none;
}
Now comes close button you can also set it none or you can set its
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
display:none;
}
I did lots of search but nothing then i got this idea in my mind. However this will effect entire application to don't have close button,title bar for dialog but you can overcome this as well by using jquery and adding and setting css via jquery
here is syntax for this
$(".specificclass").css({display:normal})

Related

Hide the "resizing" handle in a resizable div?

There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).
My css looks like this:
.resizable-div {
resize: horizontal;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
The relevant bit of JS where I add the cell to the table row with a resizable div inside it, and text inside that, is like this:
row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);
The result works fine: resizable columns. Hurrah. There is only one fly in the ointment:
I can get rid of the borders, of course. I just want to lose those pesky handler triangles in the bottom right corners... all of them!
I realise users have to be given an idea that they are able to resize the columns... but I'd be perfectly happy to do that some other way if I could replace those triangle icons with 100% transparent ones (for example).
Edit
Here's a JSFiddle! Amazingly easy to do!
You can do this in WebKit based browsers currently with the ::-webkit-resizer pseudo element.
div{
overflow:auto;
resize:both;
width:50%;
}
div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}
<div>
Not Hidden
</div>
<div>
Hidden
</div>
WebKit provides a pseudo-element for this ::-webkit-resizer and you can hide those triangles by applying display: none, -webkit-appearance: none, or background: transparent.
For Firefox or anything without WebKit an alternative / workaround would be to position a custom handle over top of each resizable div. This may require some different markup though.
.wrapper {
position: relative;
display: inline-block;
}
.resizable-div {
position: relative;
resize: both;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
.handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: black;
pointer-events: none;
}
/* ::-webkit-resizer {
background: transparent;
} */
<div class="wrapper">
<div class="resizable-div"></div>
<div class="handle"></div>
</div>

Stop 'JavaScript function triggering css width' from affecting scrolling-screen position (On Mobile device)

This might be a simple issue to fix but I struggled:
On this website index page, if you scroll a bit down to interactive map.
This problem also arises on web browser on laptop as well.(just discovered!
ps. This was an embedded map as iframe html!
See source html:
<iframe id="iframe" width="100%" height="620px" src="leaflet_v1/index.html"></iframe>
Basically after you click a lot (area), the info section will show up. (this is made from leaflet web map from QGIS)--> I changed JS code here to make slider info appear:
function popup(){
document.getElementById('slider').style.width='75%';
document.getElementById('slider').style.zIndex='1000';
//..then insert data
//.. put a inline html for js Close function
}
layer.bindPopup(popup, {maxHeight: 400});
At the end of the leaflet index page, I got a section closer JS function:
<script>
function CloseSlider(){
document.getElementById('slider').style.width='1px';
}
</script>
BUT weird thing is that when you close the section using that button on "MOBILE DEVICES", the screen will JUMP UP and make the map stick at the top of the screen.
I wish I can cancel this effect.
:) Can anyone solve it ? :)
If you need to see the css setting for that slider , here you go:
<style>
.slider{
height: 100%;
width:2px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:rgb(39,57,66);
opacity: 0.90;
padding-left: 20px;
padding-top: 20px;
overflow-x: hidden;
transition: 0.3s;
}
.slider a{
padding: 5px 20px 5px 0px;
text-decoration: none;
font-size: 15px;
color: pink;
display: block;
transition: 0.3s;
}
.slider a:hover{
background-color:rgb(39,57,66);
color: white;
}
.slider .btn-close{
position: absolute;
top:0;
right: 10px;
font-size: 35px;
margin-left: 30px;
}
</style>
Hope this is not too complex :)
Surprisingly, the Solution is so silly:
Get rid of the:
href="#"
from <a> element...

JQuery UI dialog - need to add a minimize button

Update - Method without JQuery UI Plugin
** I I have added an answer to this question which solves it without use of any plugins (and which is IMO instructive on the JS/CSS involved). Your CSS may need to be different but this is a good start **
--
I am familiar with jQuery but not jQuery UI. A project uses jQuery UI's .dialog() method which I observe to wrap the actual container around the designated element, usually a div.
The title bar, and x or close button is also "painted" or handled automatically on the upper right of the bar.
My goal is to add a minimize button next to the close button, which if clicked minimizes the dialog (bar remains visible, everything else is hidden, and bar moved near page bottom), and if clicked while minimized maximizes the dialog.
I can certainly do this with my own HTML/CSS/JS by creating the button and absolutely positioning it above into the painted bar/container. But is there a more native way to do this in jQuery UI (without an additional plugin)? thank you for your help!
The following JS and CSS successfully manages to create a minimize/maximize button without any additional plugins. This might be helpful if you can't or don't want to install plugins:
Javascript:
$('#chatPanel').dialog({
width : 475,
dialogClass : 'fixedPosition presav-chatPanel',
open: function(event, ui){
var panel = $('.presav-chatPanel');
if(panel.hasClass('presav-minimize')){
//maximize the panel
panel
.removeClass('presav-minimize')
.attr('style', panelStyleMaximized);
$('.presav-chatPanel .ui-dialog-titlebar-minimize span')
.removeClass('ui-icon-plusthick')
.addClass('ui-icon-minusthick');
}
//build the minimize button if not already built
if(!$('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').length){
$('.ui-dialog-titlebar').append('<span class="ui-icon ui-icon-minusthick">minimize</span>');
$('.presav-chatPanel .ui-dialog-titlebar .ui-dialog-titlebar-minimize').on('click', function(){
var panel = $('.presav-chatPanel');
var style = panel.attr('style');
if(panel.hasClass('presav-minimize')){
//maximize the panel
panel
.removeClass('presav-minimize')
.attr('style', panelStyleMaximized);
$('.presav-chatPanel .ui-dialog-titlebar-minimize span')
.removeClass('ui-icon-plusthick')
.addClass('ui-icon-minusthick');
}else{
//minimize the panel
panelStyleMaximized = style;
panel
.addClass('presav-minimize')
.attr('style', 'width: 200px; z-index: 1015; bottom: 0px; right: 20px; top: inherit; left: inherit;');
$('.presav-chatPanel .ui-dialog-titlebar-minimize span')
.removeClass('ui-icon-minusthick')
.addClass('ui-icon-plusthick');
}
return false;
});
}
},
close: function(event, ui){
//When the UI panel is closed, assume that it should re-open in a maximized state; however the place to maximize is the .open() method
},
});
CSS (related to minimized state, and overriding the crosshairs for draggable-ness):
.presav-chatPanel .ui-dialog-titlebar-minimize{
/* base taken from jquery-ui.min.css:
position: absolute;
right: 40px;
top: inherit;
width: 20px;
padding: 1px;
height: 20px; */
position: absolute;
border-radius: 0;
outline: none;
background: transparent;
right: 38px !important;
border: 1px solid #FFF;
width: 20px !important;
height: 20px !important;
margin: inherit !important;
top: inherit !important;
/* margin: -10px 0 0 !important; */
padding: 0 !important;
text-align: center;
}
.presav-minimize #chatPanel{
display: none !important;
bottom: 0 !important;
right: 10px !important;
}
.presav-minimize .ui-dialog-titlebar{
cursor: default !important;
}

Button behind text only on mobile

I am trying to do a very simple quiz like this one:
https://www.sitepoint.com/simple-javascript-quiz/
I tried to make it more responsive and added this line:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
It worked fine but when I add a long text on the alternatives of each question, the button "Next Question" stay behind the text, only on mobile (iphone 6, safari).
I tried to add a z-index: 1000; and nothing changed:
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
z-index:1000;
}
So, there's a few things wrong here. As said above you need to remove the height from .quiz-container and remove the absolute positioning from .slide.
What I would suggest is that you add display: none; to slide then your active style to display:block - this will correctly display the button where it should be. With that said, you will lose the fade effect. You'd need to add this CSS to get it back. Hope this helps!
.quiz-container {
position: relative;
margin-top: 40px;
}
.slide {
width: 100%;
opacity: 0;
display: none;
}
.active-slide {
opacity: 1;
display: block;
}
You set position: absolute to your quizz questions, so they will ignore the space of every element you set in HTML.
A large z-index will only put an element above another, that's the why you see the quizz questions above the button.
The problem will be solved if you increment the height of quiz-container on mobile screen (try use #media screen).
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I recomend you to find another way to put your questions at the top of page instead using position: absolute
The problem really is that your quiz-container div has a fixed height of 200px, and you can't make it fluid because your slides have position:absolute, which removes them from the flow and prevents the parent growing in height accordingly.
So you need to re-think how to go about this.
An interesting approach would be to use flexbox, controlling which slide to show with the order property.
.quiz-container {
margin-top: 40px;
overflow: hidden;
}
#quiz{
display: flex;
}
.slide {
opacity: 0;
transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
flex: 0 0 100%;
}
.active-slide {
opacity: 1;
/*sets the order to -1, so it's positioned before all other flex-items*/
order: -1;
}

Help with Mootools Gallery - Transition text

I'm not sure if what i want is possible but i'm using a Mootools image gallery which you can see an example of here:
</script>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
The gallery rotation is above but what i'd like to achieve, ideally, is the second text element (with the white background) to be wider than the top text element, so it looks more like the picture underneath.
There's a lot of Javascript involved so i don't know what i should post here to enable people to help, but just let me know what i should put in here and i'll come back and edit.
Or, if some knows of somethign similar in jQuery which would allow me to get the same effect, but not require too much JS coding, i'd be much obliged.
Thanks in advance as always,
Dan
Try this css and see if its what your after.
.slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
top:40px;
color: #FFF;
text-indent: 0;
overflow: hidden;
padding: 10px 0 0 20px;
height: 70px;
}
.slideInfoZone h3{
background: #000;
width: 200px;
padding: 30px;
margin-left: -30px;
display:inline;
}
.slideInfoZone p {
position: absolute;
bottom: 0;
background: #FFF;
font-size: 14px;
color: #000;
margin: 20px 0 0 -20px;
padding: 10px 0 10px 20px;
width: 50%;
}
Basically what I did was remove your background color for the containing element, then I gave the p tag a bg color, and modified the padding/margin for the h3. Im not too happy with what I had to do with the h3 but without changing the markup at all it works.

Categories