here's the link to my dialog (click here)
I tried to fix the below in order to referring to the official website dialog (click here) but I can't find how to do that:
I need to :
bring back the cross sign (x) at right side of the dialog,
and add the small exclamation image,
change background color of the title frame only,
and buttons (Delete all items & Cancel), the frame that surrounds them must be like here (with space "High, Down, Left, Right").
Looking at the chrome dev tools, it seems you image files for icons are not loading.
Sort this out and this will fix your icon problems (close button and exclamation image).
Set what ever color you want using following css.
.ui-draggable .ui-dialog-titlebar {
background: red;
}
For Dialog buttons use following css
.ui-button {
padding: .4em 1em;
}
I use Bootstrap in my Rails app, in it I have a navbar that contains some elements. When I press one of these elements I present a modal popup. When I close this popup, the clicked element for some reason gets highlighted. This isn't the experience I'm looking for.
See image below:
I wonder how I can get rid of this unwanted effect?
Without you supplying us with a Fiddle, it is very hard for us to determine what is going on exactly.
Although, from your image, it seems as if it is just 'focus'. Below is an image from the Bootstrap website, and it features one of their 'default' buttons. On the left is the button in its original state, and on the right is the button after I have clicked on it and it is in 'focus'. Chrome, by default (created by their 'user agent stylesheet') places this light blue border around elements once they are focused.
To remove the border for all fields you can use the following:
*:focus {
outline: none;
}
To remove the border for selected fields just apply this class to the input fields you want:
.nohighlight:focus {
outline:none;
}
*:focus
{
outline: none;
}
this is work like a charm
In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?
Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)
Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!
Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.
I have a default JQuery UI tooltip function call on my page. Is there a way to style the tooltip div interactively using the Inspector? If I had two mouse pointers, one would be hovering over an element to keep the tooltip displayed and second would be using the Inspector and build the style. But I only have one mouse and as soon as it moves off the element, the tooltip disappears. Checking the ":hover" state in Inspector doesn't help. the tooltip disappears on mouse out.
I am using Chrome, but any trick in any browser would do.
My working solution in Firefox:
1. hover over tooltip (tooltip is shown)
2. hit CMD-Option-K (OSX) or CTRL-Shift-K (Windows), to open "Web Console"
3. type "debugger" (this will stop JS execution, so tooltip won't disappear)
4. open "Inspector" Tab, search for .ui-tooltip
5. edit as necessary. note: changes to CSS will work immediately, even if execution of JavaScript is stopped
I found a workaround how to temporary inspect it :
just implement hide settings where you hookup the tooltip logic:
hide: {
effect: "slideDown",
delay: 20000
}
This gives you 20 sec time to inspect it. If you need more time then increase the "delay" attribute.
Here is my working code for page jquery tooltips:
$(function() {
$(document).tooltip({
tooltipClass: "jqueryTooltip",
content: function() {
return $(this).attr('title');
},
hide: {
effect: "slideDown",
delay: 20000
}
});
});
After you are done with the inspection just remove the delay and you are done.
Note: I am using custom class "jqueryTooltip" to style the tooltip after inspection.
In Chrome follow the following steps:
1- Open Developers Tools ( Ctrl + Shift + I ) or (right click on screen and select inspect).
2- Choose Sources:
3- On the right side, you found accordion, Open "Event Listener Breakpoints"
4- You will found all events, Open "Mouse", then Select "mouseout" event, this will stop execution of code and stop before "mouseout action".
5- Go to App screen, and Try to hover only the item which has the tooltip, then screen will freeze, and you will found the tooltip stand as you want.
Note: If you hovered other item by wrong, you can resume the execution of code by clicking resume (blue button), and then try hover again.
If you want to return to the normal execution of code, Deselect the "mouseout" event, and click resume (blue button).
In Firefox the same, the difference in "Sources" tab is named "Debugger".
I'm late to the party, but there is actually a simple way to accomplish this.
In your browser's dev console, use jQuery to target the tooltip as follows:
$('.selector').tooltip('open');
In my case, for instance, I have a class .grey-tooltip on my tooltip, so I call $('.grey-tooltip').tooltip('open');. This should open the tooltips and you can then inspect them as you would any other visible element.
Different methods you can use one tooltips are described in their docs here: https://api.jqueryui.com/tooltip/.
the easy way is to pause js with F8 when tooltip is shown
It should be possible to modify the CSS such that the tool tip is always visible as opposed to on hover only, at which point you could tweak the div's styling via the inspector and see how it's affected real-time.
If you open the developer tools in the newest Google Chrome you should see the elements tab is selected. On the element you have to hover on you just right click on it and open the 'Force element state' menu to select the :hover option.
You can't change a jQuery tooltip's styling in a browser's inspector, because as you are saying it is removed from the DOM on mouseout.
However, with the following code this is what I did to change to change the styling:
$("#myElement").attr({
title: "my tooltip text"
}).tooltip();
$("#myElement").tooltip({
// the .tooltip class is applied by default anyway
tooltipClass: "tooltip"
});
Type debugger; in the JavaScript, before the previous code
In Firefox, hit F12 to open Firebug (download it if you don't have it)
Select the Script tab and click Reload
Now that the debugger is activated, highlight
$("#myElement").tooltip from the 2nd code block (without the parentheses), right-click the highlighted text, and
select Add Watch
Under the Watch tab in the right window, click on +
next to $("#myElement").tooltip to expand all the properties
Under that expand Constructor, then DEFAULTS, and then
template to see the HTML that the tooltip is made of
This is then the exposed HTML structure of a jQuery tooltip:
<div class="tooltip">
<div class="tooltip-arrow"> ... </div>
<div class="tooltip-inner"> ... </div>
</div>
...and now you can apply CSS, something like this:
.tooltip {
background-color: blue;
border: 2px solid black;
border-radius: 5px;
}
.tooltip-arrow {
/* hackery, placing the arrow where it should be: */
margin-bottom: -7px;
}
.tooltip-inner {
/* hackery, making all browsers render the width correctly: */
width: 300px;
min-width: 300px;
max-width: 300px;
/* hackery, removing some unknown applied background: */
background: none;
background-color: none;
color: white;
text-align: center;
}
All the "hackery" mentioned in the CSS above is what I had to do to get Bootstrap to play nicely with jQuery (they both have a tooltip, which can conflict with each other -- see https://stackoverflow.com/a/19247955 for more info).
Here is what I did:
jQuery(".myDiv").attr("title", 'Hello');
jQuery(".myDiv").tooltip({close: function( event, ui ) {
console.log(jQuery(ui.tooltip[0]).html());
}});
And the console content was:
<div class="ui-tooltip-content">Hello</div>
Also, I placed a breakpoint on the console.log function and then examined the page structure before the </body> end tag, and there was something more:
<div id="ui-tooltip-0" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -463.60003662109375px; left: 1px; display: block; opacity: 1;"><div class="ui-tooltip-content">Hello</div></div>
It was possible to change the tooltip styling on the fly using Inspector (tested in Chrome).
Go to this beta of my new website (link redacted). If you hover over one of the colored squares, a popup box à la Panic's Coda pops up, except there are two problems:
a) The text inside the popup does not show up. It is programmatically set to :) using the following code:
http://grab.by/syM http://grab.by/syM
$('td.middle', this).text(':)');
td.middle is the class of the middle cell
this is a reference to $('.info').each()
Use may want to use an inspector tool like Firebug for Firefox or the one included one in Safari or Google Chrome.
b) The sides are clipped off:
http://grab.by/syE http://grab.by/syE
I think it is due to this:
http://grab.by/syW http://grab.by/syW
For some reason, the sides have computed widths of 1px, as opposed to
.bubbleInfo .popup td.corner {
position: inherit;
height: 15px;
width: 19px;
}
19px as defined in (link redacted)
You can grab a ZIP archive of all the files here (link redacted).
Thanks so much. I know this is a lot to ask.
The width of the container div for the :) table is clipping the sides of the :) table popup. If you edit the width of the .info class up from 32 to something bigger (I did width:80px) you see the whole popup. Alternately, you can change the width (or min-width) of .popup to about 50px, which fixes them without distorting the size of the colored boxes.
As for the :) being missing, I was able to make it appear by setting text-indent:0 in the .middle class. This had no ill effects on FireFox and fixed it in Chrome.