I'm wondering how to bring attention to a section that has more information than is showed on the screen. Essentially, the way it currently looks, it might only appear that there is one piece of data in the table, but in reality there is a scroll window. I'd like to bring attention to the fact that there is more data, you just need to scroll. I added the border and that at least started to help.
http://jsfiddle.net/xG3uc/
How would you highlight that there is more data but you just need to scroll to see it?
.but_there_is_more {
max-height: 50px;
overflow-y: auto;
border: 1px dotted #ccc;
}
Maybe if the div expands over the max-height, have some javascript to show a link to "expand" the rest?
Want to try qTip2? Check DEMO http://jsfiddle.net/yeyene/xG3uc/10/
JQUERY
$(document).ready(function(){
$('.a')
.qtip({
content: {
text: 'Scroll for more data!'
},
position: {
my: 'bottom right',
at: 'bottom right'
},
show: {
event: 'mouseover',
ready: true // show the tooltip when ready
},
hide: {
event: 'click unfocus' // click anywhere to hide
},
style: {
classes: 'ui-tooltip-red'
}
});
});
Source and Doc of qTip2 http://craigsworks.com/projects/qtip2/demos/
Related
I am trying to show tooltips in a mouseover event in cytoscape.js using qtip. The tooltip is displayed when the mouse is over a node in the graph, however, it is positioned at the top-left corner of the graph, instead of showing at the bottom of the node. Here is the code to display the graph:
this.cyto = cytoscape({
container: document.getElementById("graph"),
layout: {
name: 'spread',
minDist: 200
},
elements: this.graph.elements,
style: this.cy_style
});
Add here is the code I am using to add the qtip
this.cyto.nodes().forEach(function (element) {
var nodeName = element.data("name");
if (nodeName) {
element.qtip({
content: {
text: nodeName
},
position: {
my: 'bottom center',
at: 'bottom center',
adjust: {
y: 50,
mouse: false
}
},
show: {
event: 'mouseover'
},
hide: {
event: 'click mouseout'
},
style: {
classes: 'qtip-bootstrap'
}
});
}
});
Here is a screenshot showing how the tooltip is currently being displayed:
As you can see in the image above, the tooltip displays at the top left corner of the graph. However, I want to display the tooltip like this:
How can I make the tool-tip display at the proper position? What am I doing wrong here?
It looks like you're missing the qtip stylesheet, which I believe qtip needs to work.
You can refer to the demo code for a working example: http://js.cytoscape.org/demos/qtip-extension/
Is it possible to style the combo box container using the Select2 jQuery plugin? I can successfully style the dropdown menu where autocomplete selections appear, but not the container where text is entered. Here's what I'm doing:
$(document).ready(function() {
$("#combo").select2({
data:[{id:0,text:'One'},{id:1,text:'Two'}],
multiple: true,
createSearchChoice: function (term) {
return { id: term, text: term };
},
containerCss: 'container',
dropdownCssClass: 'dropdown',
containerCss: {
background: 'green'
}
});
});
<input type="hidden" id="combo" style="width:350px" />
#combo {
background: green;
}
.container {
background: green;
}
.dropdown {
background: red;
}
The container should be green, but it's not. Here's a fiddle.
Edit:
I noticed on the documentation page for the site (which is quite comprehensive) that every example of the kind I'm trying to do (hidden input field with dynamically loaded options) has the same standard style, like in my example fiddle. The version that originates from a select element, however, has rounded corners etc. If this means you can't style the container when using a hidden input, it's seems like an odd limitation.
Edit2:
#emmanuel has already provided a solution, but since I was actually after the border-radius, there was a bit more to do to get it working properly. After setting the radius on all corners, opening the dropdown results in rounded corners visible between the top of the dropdown and the bottom of the container, which is a bit ugly. You can do something like this to fix it:
$('ul.select2-choices').on("select2-open", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '0px',
'border-bottom-right-radius': '0px',
});
});
$('ul.select2-choices').on("select2-close", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '5px', // or whatever
'border-bottom-right-radius': '5px', // or whatever
});
});
I think this will cause a problem, though, for any other Select2 combo boxes visible on the same page.
In order to add background color to container you have to put the rule to #s2id_combo. The problem is that ul.select2-choices already has a background and it's over container so you have to add:
ul.select2-choices { background: green !important; }
I have a case where I am using a jquery ui dialog and I have any html table in the dialog where the dialog is fixed height:
$("#modalDialogContainer").dialog({
resizable: false,
height: 700,
autoOpen: false,
width: 1050,
modal: true,
I call an AJAX query from a button click and I want to use jquery UI blockUI plugin to show a "loading" message. Something like this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
The issue I have is that the content in the dialog is longer than the height of the dialog
and I given the dialog is FIXED height so that causes the dialog to have a vertical scroll bar.
Having the scroll bar is fine (that's actually what I want) but the knock on effect is that
because of that depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically.
Question: Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?
Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way
In short, if i am at the top of the scroll, then i would have this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
if i am at the bottom of the scroll, then i would want this:
$("#myTableInsideDialog").block({
css: {
top: '',
bottom: "200px",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
I wouldn't alternate between top AND bottom properties:
For a window sized 1000px, top:800 == bottom:200
The important question, is how you can find out your scroll distance from the top. For that lets use a function:
function calcTopLocal() {
var s = $('#modalDialogContainer').scrollTop() + 'px';
return s;
}
Now, to apply it to your block:
$("#myTableInsideDialog").block({
css: {
top: calcTopLocal()
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
This can be refactored many ways. The significant detail is using scrollTop() and applying styling.
response to MKaama:
My proposed answer has no loops, no timers, and no suggestions of repeated action. There is no
Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU
If you want to add an loading message when the ajax is requesting the data, you can append a <div> on the dialog containing the message you want to display. Then you can apply a relative position to the dialog and an absolute position to the <div> and with margin:auto the div remains in the center of dialog always, even if you scroll the dialog.
jsFiddle demo
$("#modalDialogContainer").dialog({
resizable: true,
height: 300,
autoOpen: true,
width: 300,
modal: true,
buttons: {
'call ajax': function(){
// insert the loading div to the dialog
$(this).parent().append("<div class='loading' />");
$.ajax({
type: 'json',
url: 'jsonRequest.php',
complete: function(){
// remove the loading div
$('.loading').remove();
},
success: function(){
//do what you want
}
});
}
}
});
the CSS file should be something like this
#modalDialogContainer{
position: relative;
}
#myTableInsideDialog{
height: 1000px;
width: 100%;
}
.loading{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
...
}
there is a useful plugin that can tell if an element is visile on screen or not ( scrolled to ) , you may simply use it , the function returns true for visible areas on screen :
Here is a quick demo:
http://opensource.teamdf.com/visible/examples/demo-basic.html
Here is the source page :
http://www.teamdf.com/web/194/jquery-element-onscreen-visibility
usage as simple as:
$('#element').visible()
Use
$('#modalDialogContainer').scrollTop()
to find the amount of user's scroll.
You can then show your message with
{ top: $('#modalDialogContainer').scrollTop()+'px' }
And it will always be visible for them, and appear at the top of what they are looking at :)
Why bother with the height of the content at all?
I mean, isn't an easier solution to the problem possible by putting a "BlockUI" on the JQuery Dialog. Since you have a fixed height there, your block UI would most certainly be fixed as well. There is no way the scroll can now affect your message.
A crude example is hosted here in fiddle. It gives you both experiences so you can see how it behaves.
For example, you can put the block UI on the following class.
var container = ".ui-dialog";
$(container).block({
message: '<h1>Processing</h1>'
});
$.ajax({
url: "/echo/json/",
data: {
json: {},
delay: 5
}
}).done(function() {
console.log("Done with ajax");
$(container).unblock();
});
I'm using this javascript/jQuery to open a dialog, however when I scroll down on the page and open another window after closing the first one, the window will open at my selection position, plus the position I scrolled down. When I try to move it around, it will keep jumping down, causing a very annoying result.
function showDialog(url) {
dialogFrame = $('<iframe style="width:100% !important;" frameborder="0" id="Dialog" src="' + url + '" />').dialog({
autoOpen: true,
height: 500,
width: 1000,
title: 'myWindow',
resizable: false,
modal: true,
position: {
my: "center",
at: "center",
of: window
}
});
}
How can I prevent this behavior? It's probably the position : { } but what should it be?
I had the same issues with a jQuery UI dialog when the body had the CSS property position:relative;. You might want to check if that is the case.
In my case I could not remove the position:relative; so I decided to override the top value and use a fixed positioning:
$(".dialogFrame").dialog({
// ...
open: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
$(event.target).parent().css('top', '20px');
}
// ...
});
The script could be optimized by calculating the effective center of the screen.
I am using qTip: http://craigsworks.com/projects/qtip2 and my current problem is that when I hover the tooltip it disappears (because the target was mouseleave/mouseout).
Is there a way to make it stay visible when I hover the tooltip? I positioned the tooltip so that its right under the target so there are zero empty space between the target and the tooltip.
Use fixed: http://craigsworks.com/projects/qtip2/docs/hide/#fixed
You may wish to add a delay as well before the tooltip disappears, in case there's some distance between your triggering element and the tooltip.
e.g.
$('.moreinfo').qtip({
content: {
text: $('<p>This is a tooltip.</p>')
},
show: {
effect: function() { $(this).fadeIn(250); }
},
hide: {
delay: 200,
fixed: true, // <--- add this
effect: function() { $(this).fadeOut(250); }
},
style: {
classes: 'ui-tooltip-blue ui-tooltip-shadow ui-tooltip-rounded'
}
});
Hope it helps.
Use fixed: true as well as leave: false
The problem you might be having is that when you leave the qtip target it is hiding.
For some reason, using fixed:true alone didn't work for me. Instead, I had to use these configurations (v3.0.3):
hide: {
fixed: true,
delay:90,
},
position: {
viewport: $(window)
},