Is it possible to hide a div when the width changes? I know you can do it with bootstrap but I need to somehow do it without it. i need it to display:none when increase and it needs to display:block when it is returned to 612px
<div id="grid" style="width:612px"></div>
You cannot listen for a width change, instead of that you can add a new event listener (different from the kendo-ui event handler) for the same element and check the width. In that case you can show or hide the element depending on the current width.
You'd want to write something that checks the width and shows/hides it based on that width:
function checkGridWidth() {
var gridWidth = $('#grid').width();
if(gridWidth == 612){
$('#grid').show();
}else{
$('#grid').hide();
}
};
You'll probably want to check the width on document ready as well as when certain events happen, such as window width resizes or maybe clicks?? not sure what could affect the width:
$(document).ready(function() {
checkGridWidth();
});
$( window ).resize(function() {
checkGridWidth();
});
$('#someElement').click(function() {
checkGridWidth();
});
EDIT
Based on comments from OP, the need is for an event handler that will allow the #grid to be collapsed when another element is expanded...
See: http://demos.telerik.com/kendo-ui/splitter/api
And: http://demos.telerik.com/kendo-ui/splitter/events
$(document).ready(function() {
function collapseOtherSplitter() {
splitter.size(indexOfPane, 0);// where indexOfPane is the index of the pane you want to collapse
}
function onExpand(e) {
collapseOtherSplitter();
}
// One of your top, horizontal splitters that you want to collapse when the vertical splitter expands:
var splitter = $("#horiz-splitter").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "50%" },
],
});
// Your bottom, vertical splitter
$("#vertical-splitter").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "100px" },
],
expand: onExpand,
});
});
Related
My jquery UI dialog box always gets positioned to top left no matter what I specify in the position attribute. I tried adding a css position to the div too. But it was of no use.
Can someone help me with this? Thanks.
$("<div>----Play again?---</div>").dialog({
title: 'Game Over!',
height: 'auto',
width: 'auto',
autoOpen: false,
draggable: true,
modal: false,
position: 'center',
buttons:{
"Yes": function() {
startGame();
$(this).dialog('close');
},
"No": function() {
alert('\nYour Score is: '+score+'\nGood Bye '+playerName+'!');
$(this).dialog('close');
}
}
});
I'm pretty sure you shouldnt need to set a position:
$("#dialog").dialog();
should centre by default.
I did have a look at the article, and also checked what it says on the official jquery-ui site about positioning a dialog : and in it were discussed 2 states of: initialise and after initialise.
Code examples - (taken from jQuery UI 2009-12-03)
Initialize a dialog with the position option specified.
$('.selector').dialog({ position: 'top' });
Get or set the position option, after init.
//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');
I think that if you were to remove the position attribute you would find it centres by itself else try the second setter option where you define 3 elements of "option" "position" and "center".
jQuery UI "resizable" adds a 10 pixel handle to the right and bottom of an element. See example here: http://jsfiddle.net/Thaikhan/fGJ59/10/show/
If you click on Pikachu, then try to drag him into the bottom right corner, he doesn't fit flush because of the handle margin.
I want the images to be able to fit flush against the border. I've tried to disable the handle but have been unable to retain resizability while removing the border.
If this isn't possible, perhaps there's a way to add 10px to the right and bottom margin of the container and have the elements go through the border?
Thanks for your help!
Here is the relevant jQuery:
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
autoHide: true,
// containment: "parent",
minHeight: 50,
minWidth: 50,
maxHeight: 300,
maxWidth: 400
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});
Because you're working with the images directly resizable is wrapping them in a div and adding space for the handle. If you wrap the images in a div yourself, set resizable on the div and set the image to also resize you can get the desired effect. The handle will hover over the image and the image will be flush to the side.
The changes:
.frame img {
position: relative;
height : 50px;
width: 50px;
}
You need to get rid of the top and left positioning, they don't seem to be doing anything and they mess things up when you wrap the image in a div.
$('.inventory').on('click', 'img', function () {
$(this).wrap('<div style="height:50px;width:50px;"></div>');
$(this).parent().resizable({
aspectRatio: 1,
alsoResize:this,
autoHide: true,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
refreshIndexList();
zindex();
});
Wrap the image in a div when it's added to the frame.
$('.frame').on('dblclick', '.ui-draggable', function () {
$(this).find('img').appendTo(".inventory").attr('style', '');
$(this).draggable("destroy");
$(this).resizable("destroy");
$(this).remove();
refreshIndexList();
zindex();
});
And then break the image out of the div when you put it back.
http://jsfiddle.net/fGJ59/13/
I have implemented kendoUI splitter in my application. I want to vary the height of the splitter dynamically. I defined the splitter like this:
<div id="splitter" style="height:500px;width:100%">
<div id="leftPane"></div>
<div id="rightPane"></div>
</div>
$("#splitter").kendoSplitter({
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }
],
orientation: "horizontal",
});
I don't want to display the scrollbar in the panes. I want to increase the height of the splitter, in order to remove the scrollbar. Can you tell me how to implement this?
In order to resize the splitter you can do:
// Get reference to the splitter
var splitter = $("#splitter").data("kendoSplitter");
// Set the new height to 600px
splitter.wrapper.height(600);
But since there is no redraw method in splitter you should trigger a resize event by doing:
// Trigger a resize event in splitter to force a redraw.
splitter.trigger("resize");
I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).
I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:
onOpen:function() {
$('#colorbox').removeAttr('top');
$('#colorbox').css('top','200px');
},
It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.
So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.
Thanks in advance!
Edit: full code below
$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
innerWidth:660,
innerHeight:720,
returnFocus: true,
overlayClose: true,
fixed: false,
iframe: true,
href: loadUrl,
opacity: 0.6,
reposition: true,
onOpen:function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onLoad: function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onClosed:function() {
}
});
return false;
});
EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)
The jsfiddle was helpful, I was able to use the same code as you and get it working.
This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.
Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:
<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>
<div class="unitKontejner">
<div style="float:right;">
<a id="rezervuj" href="http://www.imgur.com">
<div class="reserveIt">
<div class="reserveIt-content">
open colorbox »
</div>
</div>
</a>
</div>
</div>
Here's the script that you can put in the head:
<script>
$(document).ready(function(){
// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.
$("#rezervuj").colorbox({
iframe:true,
innerWidth:660,
innerHeight:720,
opacity: 0.6,
top: 0,
left: 0
});
// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded.
$(document).bind('cbox_complete', function(){
// Grab the position of the button,
// colorbox can be positioned relative to it.
var pos = $(rezervuj).position();
//console.log(pos);
// Set the position of the colorbox div
// You can add to or subtract from the pos values
// Example: top: (pos.top + 20) + "px"
$("#colorbox").css({
position: "absolute",
top: pos.top + "px",
left: pos.left + "px"
}).show();
});
});
</script>
you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});
I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});
This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}
Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).
The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)