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;
}
Related
I'm working on a mock clothing site. I have a parallax banner and a nav below it. What I'm trying to achieve is having the nav stick to the top of the page once the user actually scrolls past the nav. I am able to get the nav to stick to the top of the page, but it does so while still on the banner image.
Here's the CSS
.banner {
background-image: url('https://images.pexels.com/photos/896291/pexels-photo-896291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: cover;
min-height: 100%;
background-attachment: fixed;
}
nav {
border-top: solid #000 1px;
background-color: #fff;
padding: 5px;
margin: 0 0 50px 0;
}
.sticky {
position: fixed;
width: 100%;
top:0;
border-bottom: solid black 1px;
box-shadow: 0 2px 5px dimgray;
}
Here's the jQuery
$(window).on('scroll', function() {
if($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
And here's my fiddle demonstrating the issue.
I've had a few theories on why this is happening.
At first I thought maybe it's happening because my top is set to 0, but when I changed the value it still triggered .sticky, but just floated in the middle of the page.
Then I thought, maybe it was because I attached scrollTop() to window. I tried attaching it to nav like this
if($('nav').scrollTop()) {
//add class
}
and that didn't work either.
Thanks in advance for any insight you guys might have!
First of all you will have to check if you the scroll top is bigger then a the value it should be scrolling to the top. If you did that, you should be able to just add a class to that item or remove it.
Example:
var slide = $('yourIdOrClassName').offset().top;
$(window).on('scroll', function() {
if($(window).scrollTop() > slide) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
You will need a class with the property display: none; and a class with the property display: block;
The property of display: none; says that the element will not be shown on the page. display: block is the default display property for the nav / div element.
I'm using the jquery ui combobox inside jquery accodrdion propblem I'm having is if the combobox dropdown menu extends past the accordion section it gets hidden behind. I think it might have something to do with the z-indez but when I try and retrieve the values to see if that's the problem I get 'auto' which is no help. I added a screen shot to show what I'm trying to explain as the problem.
Here's a jsfiddle...
jsfiddle
$('select').combobox();
EDIT: working jsfiddle
what I changed...
removed position
.ui-combobox { display: inline-block; margin: 0; margin-right: 1.8em; }
Changed position to relative, was absolute. added height. and changed top: -2px, use to be 0.
.ui-combobox-button { position: relative; height: 24px; width: 1.8em !important; margin: 0; margin-left: -1px; top: -2px; bottom: 0; }
I checked codepen and the z-index does not apply, maybe I am not doing it right, but I did add a Jquery code and it works!.
Here's the code
$(document).ready(function(){
$(".ui-button-icon-primary").click(function(){
$("#sinkDetails").height($(this).height()*15);
});
});
Issue was with positioning, here is an updated jsfiddle with new css code.
.ui-combobox { display: inline-block; margin: 0; margin-right: 1.8em; }
.ui-combobox-button { position: relative; height: 24px; width: 1.8em !important; margin: 0; margin-left: -1px; top: -2px; bottom: 0; }
Okay, I'm trying to design a mobile version of my site and am stuck on my menu.
Basically at the moment I've got a simple onClick running on the page so if the user decides they don't want to view click whats on the menu then they can click the page and the menu disappears.
But what I really want is a way of using the back button on the browser to return from the menu. I'm guessing it takes some kind of event or setting something, but am at a loss.
I'm a newbie, so be gentle, I'm hoping the community can help me a little as to where to start.
My main question is how to use the back button on a browser within my HTML or JavaScript, any ideas as to how to proceed would be greatly appreciated.
Updated JS only version: http://jsfiddle.net/0uk0g0qq/4/ (works everywhere)
:target implementation is buggy in ie. so previous one wasn't working. hash changes only affects css when user directly does something on page, click button that changes hash and unfortunately back button is not considered part of the page
The all the javascript you need is this:
var menu = document.getElementById('menu');
window.addEventListener('hashchange', function(e) {
if (location.hash != "#menu") {
menu.style.display = "none";
} else if (location.hash == "#menu") {
menu.style.display = "block";
}
});
Css Only Version:::
You can do it using just css only. It's time you learned about :target selector.
It lets you apply style to whatever is url hash fragment and is the id of element on page.
Demo: http://jsfiddle.net/0uk0g0qq/1
So i hide menu by default, but if it matches i show the menu. Since hastags in url affect browser history it accomplishes what you asked for.
It was pretty awesome first time i learned it.
#menu:target {
display: block;
}
the whole code:
body {
background-color: cornsilk;
}
.cont {
width: 500px;
margin: auto;
}
#menu {
display: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
background-color: rgba(0,0,0,.3);
margin: auto;
}
#menu > ul {
width: 200px;
list-style-type: none;
background-color: #fff;
margin: auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
#menu > ul li {
padding: 20px 10px;
}
#menu:target {
display: block;
}
EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?
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})