We Keep Coding

how to hide a div when the width in pixels change

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,
});
});

Hide tab by clicking the tab instead of clicking any part of the website

I created a support tab on this page (the one on the right):
http://test88.fccbet.com/
This is where I got the the tab slide out effect: http://www.building58.com/examples/tabSlideOut.html
Right now the main tab hides if you click to any part of the webpage. What js should I add so it will only hide if I click the side tab?
Please refer to this image to know the main tab and side tab.
echosantos.com/tabslideout/tab-desired-outcome.jpg
These are the codes I used for this support tab:
HTML:
<div id="bannerLeft">
<div class="slide-out-div no-phone no-phone-landscape" style="background-image:url(images/support-tab.png); "><br />
Fccbet
<a class="handle" href="#"></a><div id="close-bottom"><img src="#routes.Assets.at("images/close-chat.jpg")"/>
</div>
CSS:
.slide-out-div {
width: 125px;
height:392px;
background: url(../images/support-tab.png); }
#range-logo {
background-image:url(../images/support-tab.png);
display:block;
text-indent:-9999px;
width: 125px;
height:396px;}
JAVASCRIPT:
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click();
});
Thanks in advance! Cheers!

Looking into the jQuery.tabSlideOut plugin code you can see here:
https://gist.github.com/katowulf/2655810#file-jquery-tabslideout-1-3-js-L164-L165
The document is listening to a click event hiding the menu in the callback.
$(document).click(function(){
slideIn();
});
I would suggest removing this part of the code from the plugin if you do not want to use this feature.
If you think you may need this feature in the future you can wrap a flag around it by adding a property to callerSettings parameter that is passed in when you initialize the plugin.
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '200px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false,
tabHandleOffset: 0,
hideOnDocClick: true //new flag to check for doc click hide
}, callerSettings||{});
...
Then use the flag to check whether to add the listener or not:
if(settings.hideOnDocClick){
$(document).click(function(){
slideIn();
});
}
....
And when you finally initialize the plugin you can set the flag to false:
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false, //options: true makes it stick(fixed position) on scroll
hideOnDocClick: false //set flag to false - menu does NOT hide when user clicks on doc
});

jQuery ui dialog box always positioned to top left

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".

Colorbox positioning on top of another element

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
},
});

Jquery dialog resizing only happens the first time it's opened

I have this code for a JQuery a dialog for a div containing a gridview that loads with a lists of tasks. The dialog fits to the contents OK, but if hundreds of tasks are loaded the dialog gets too big and can't be resized by hand, so I needed to code a way for it to open with a manageable size.
Before anyone suggests it, I tried setting the max-height property on my div to 500px and that worked fine except the div wouldn't fill the whole dialog if the dialog got higher than 500px, which we want it to. I also tried setting the maxHeight property on the dialog directly but that only takes effect when you resize the dialog by hand, not when the dialog opens. And when the dialog opens bigger than the screen that can't be done.
So instead I wrote this code which declares the dialog, then if more than 20 tasks are loaded the dialog is supposed to be resized to 500px high. That way the div inside fills the dialog completely at all times and the dialog size stays managable.
function ShowReferedTasks(title, s, taskCount) {
//On crée le dialog à partir de la même div
$('#litReferedTasks').dialog({
autoOpen: true,
modal: true,
resizable: true,
show: 'drop',
hide: 'drop',
width: 800,
minHeight: 0,
title: 'Tâche' + s + ' référée' + s + ' de ' + title
});
//if more than 20 refered tasks are found
if (taskCount > 20) {
$('#litReferedTasks').dialog('option', 'height', 500);
$('#litReferedTasks').dialog('option', 'position', 'center');
}
}
This code is called from a button in each line of a parent gridview, loading each line's tasks.
Here is what happens when I refresh my page and flush the cache (ctrl+F5), then open some task lists.
If I open one list of tasks containing more than 20 tasks (a dialog that will need to be refreshed), it works fine.
If I open any list of tasks, even one with less than 20 tasks that doesn't need resizing, then close it, and open one with more than 20 tasks, the dialog opens and the gridview is filled perfectly but the resizing doesn't work, the dialog is too big to fit on the screen, and can't be resized by hand.
Basically the resize part of my code only works on the first dialog I open after refreshing my page and flushing the cache. I think something must be kept in memory after the first time a dialog is opened, but I'm a newbie with JQuery and JS in general and I can't find the answer.
<div id="litReferedTasks" style="background-color: White; display: none; overflow:auto; height:95%;">
<asp:GridView ID="gvReferedTasks" runat="server" OnRowDataBound="gvReferedTasks_RowDataBound" Width="97.5%" Visible="false">
</asp:GridView>
<asp:Label ID="lblNoReferedTasks" runat="server" Visible="false" Width="100%"></asp:Label>
</div>
Any help?

Okay, so if you set the option after the dialog has been opened, height may not have an effect, but if you put height into the initial dialog creation code, it should have a set height just fine:
function ShowReferedTasks(title, s, taskCount) {
var dialogOptions = {
autoOpen: true,
modal: true,
resizable: true,
show: 'drop',
hide: 'drop',
width: 800,
minHeight: 0,
title: 'Tâche' + s + ' référée' + s + ' de ' + title
};
//if more than 20 refered tasks are found
if (taskCount > 20) {
dialogOptions.height = 500
}
//On crée le dialog à partir de la même div
$('#litReferedTasks').dialog(dialogOptions);
}

I think you are over-complicating the .dialog function. The easiest thing to do is create the dialog once with autoOpen set to false, rather than trying to re-initialize it every time. I think you'd have better luck with something like this:
// Do this once when the document is ready
$(function() {
$('#litReferedTasks').dialog({
autoOpen: false,
modal: true,
resizable: true,
show: 'drop',
hide: 'drop',
width: 800,
minHeight: 0
});
});
function ShowReferedTasks(title, s, taskCount) {
$('#litReferedTasks').dialog('option', 'title', 'Tâche' + s + ' référée' + s + ' de ' + title);
if (taskCount > 20) {
$('#litReferedTasks').dialog('option', {
height: 500,
position: 'center'
});
}
$('#litReferedTasks').dialog('open');
}