I have added two customized buttons on my dialog box, but they are currently just in the middle. How can i move these buttons next to the close button on the title bar, without covering or touching the close button, and also without using anyCSS?
My fiddle: http://jsfiddle.net/ZSk6L/928/
If you are alright using css within your jQuery then you could add a class to the minus button:
$('<button class="minusButton">-</button>').appendTo(titlebar).click(function() {
$('#resultId').parents('.ui-dialog').animate({
height: '40px',
top: $(window).height() - 90
}, 50);
});
And then set the margin
$(".minusButton").css("margin-left", "105px");
If you are happy to use inline styling in the jquery, this gets you what you want (without floats or covering the close button - simply set a left margin to the first custom button:
$('<button>-</button>').appendTo(titlebar).css('margin-left', '35%').click(function() {
Fiddle
There is absolutely no way to do this without at least using inline CSS, written in through jQuery.
Your best bet is just using a float and a fixed small margin on the + button so it doesn't overlap the closing button. Be aware, that any answer written here is probably going to have a problem when the user resizes the dialog window a lot, and the only way to prevent that is to give the whole dialog window a min-width property.
Here is what you should do:
$('<button>+</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right', 'margin-right': '10px'}).click...
And for the other button:
$('<button>-</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right'}).click...
You can see the working Fiddle Here
Related
I am trying to add a floating button with js DA, scrolling to top/bottom of the inline dialog.
I tried with $(window).scrollTop(xx); and it's scrolling the page not the dialog, I also tried with $(dialog_ID).scrollTop(xx); but nothing happens.
Any ideas how can I work this out?
Thanks
First set a Static ID to your inline dialog, lets say PREGLED. Then use the following line and the content of your inline dialog should scroll to the bottom.
$("#PREGLED .t-DialogRegion-bodyWrapperOut").animate(
{
scrollTop: $('#PREGLED .t-DialogRegion-bodyWrapperOut').prop("scrollHeight")
}
, 1000);
I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.
May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.
http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold
Hello im trying to get a box from the right to get a width of 100px
But i have the problem when im showing and hiding the box the height changes.
I have a picture to show:
Like you see the height is getting smaller when it shouldn't anyone know how to stop this?
We don't have your code, but it can be solved by adding yourElement.style.height = normalHeightSize;
In JQuery,
$('#yourElement').css('height: normalHeight');
when the user shows the box, in their click event or whatever happens in the code. In your case, after toggle().
This is the plugin:
Fancyselect page - http://code.octopuscreative.com/fancyselect/
This is the situation:
I need to control the position where the selector window with the various options is going to open.
I have tried to look into the code, but i did not figured out how to do it.
But i think that, by default, it depends if there is or not some space above.
To be more clear I have recreated two examples:
Here the selector is opening at the top: http://jsbin.com/AqoYucAG/2/edit
Here the selector is opening at the bottom: http://jsbin.com/AqoYucAG/3/edit
But, trust me, the css and the js are exactly the same in the both.
What change is that in the second example it misses the div with its content.
My actual situation is similar to the first example: the fancyselect is under a div with some text, and as in the jsbin, the selector is opening at the top, while i need to open it at the bottom.
This is the question:
How is possible to control the position where the selector is going to open?
And how to make it opening at the bottom?
Thank you!
if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height()) {
options.addClass('overflowing');
} else {
options.removeClass('overflowing');
}
}
he add and remove overflowing class
that css class control the way control is opened
if add > options.addClass('overflowing');
the select will open at the bottom
to test that try to comment //options.addClass('overflowing'); and see the behavior
It is a bit difficult to explain my issue but I will try using images.
Demo: http://jsfiddle.net/H8Qbn/13/
I try to automatically arrange jQuery dialogs using Isotope.
The first picture shows that everything is working just fine.
The second picture shows what is happening when trying to resize the 1st jQuery dialog. It is resizing just fine and all other dialogs are automatically arranged.
When I try to arrange the second dialog it first moves according its position(top, left) and then resizes and all other dialogs are not automatically arranged.
The third dialog behaves exactly the same as 2. It moves according its position (top, left) and is not arranged automatically.
Any suggestions?
Isotope is not made for draggable dialog boxes; see what the plugin author says regarding this type of functionality.
EDIT Fiddled around with a few more things and got the layout to rearrange when a dialog is closed with .remove(); however, dragging is not suported (see above) and resizing manually won't work either. Why do you need manual resizing of dialog boxes? Can't that be done programmatically?
The jquery masonry plugin can compute the new position when you call it with the masonry("reload") function on the surrounding container after you have resized the dialog boxes or add or remove items. I used it in my Javascript when I add or remove an image to my surrounding container. You can see the Masonry plugin working live in my homepage at the web address http://www.chihoang.de.
This is my prepend and append function with masonry("reload") at the end:
if (ele.Additem == "Append") {
container.append($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
} else if (ele.Additem == "Prepend") {
container.prepend($j("#brickTemplate").tmpl(ele).css({
"display": "block"
})).masonry('reload');
}
And this is my remove function:
$j('.brick').remove(":contains('" + ele.Headline + "')");
container.masonry('reload');