I won't to give a different hover colors to my jquery dialog buttons. For example when the user will hover over the "Ok" button the hover color will be blue and when he hovers over the cancel button the hover color will be gray.
Can anyone tell me how can I do it?
$(document).ready(function() {
$(":button").hover(function() {
$(this).css('background', 'url(' / images / buttons / green_26.png ')');
});
$(":button").mouseout(function() {
$(this).css('background', 'url(' / images / buttons / grey_26.png ')');
});
});
Basic theory: use one or more css classes which you add to your html object dynamically on mouse-in, and remove on mouse-out. You can take a look at the jQuery hover event and some examples of how to work with attributes in jQuery to get an idea of how to do it.
In detail: There are two different ways to approach this that I can immediately think of, depending on where you want to make the ok/cancel button "decision".
Add two different classes to your stylesheet with different background colors, and add one class to each element. That means you'll need two very similar jQuery methods, but most of it can be factored out to avoid duplication.
Hard-code different class names on your buttons (or use button id's or someting) and make two different css selectors, for example something like .ok .hover { your style here } and .cancel .hover { your style here }. Then you just need one jQuery call, that hits both buttons with the jQuery selector and adds/removes the hover class.
You can use this function:
function changeButtonClass(buttonIndex, classes) {
var selector = 'div[class^=ui-dialog-buttonpane] > button';
var buttonConcerned;
if (buttonIndex >= 0) {
buttonIndex++;
buttonConcerned = $(selector + ':nth-child(' + buttonIndex + ')');
} else {
return;
}
buttonConcerned.removeClass();
buttonConcerned.addClass(classes[0]);
buttonConcerned.
hover(
function() {
$(this)
.removeClass()
.addClass(
classes[1])
},
function() {
$(this)
.removeClass()
.addClass(
classes[0])
})
.focus(
function() {
$(this)
.removeClass()
.addClass(
classes[2])
})
.blur(
function() {
$(this)
.removeClass()
.addClass(
classes[0])
});
}
And then call your function with this (for a 3 buttons dialog):
var classes = new Array('myClass', 'myClass2', 'myClass2');
changeButtonClass(0, classes);
var classes = new Array('myClass3', 'myClass4', 'myClass4');
changeButtonClass(1, classes);
changeButtonClass(2, classes);
And so it works ;)
Related
I'm trying to make a jquery-ui tooltip show/hide on a click event. Also I don't want it to show hide on mouse enter/leave.
Here is a fiddle with a normal tooltip : http://jsfiddle.net/Michael_0/sLhD9/
(unfortunately jsfiddle doesn't seem to be able to include jquery-ui from google cdn ?).
I had the idea to disabled the tooltip at initialization then enable it on click just before showing it, it works but I can't prevent the tooltip from hiding when the mouse leaves the target.
$("#myDiv").tooltip({
disabled: true,
content: function () {
return "<div>Custom content</div>"
}
});
$("#myDiv").click(function () {
$(this).tooltip("option", "disabled", false);
$(this).tooltip("open");
});
To do this you need to unbind the default event handlers:
$("#myDiv").unbind('mouseover');
$("#myDiv").attr('ttVisible','no');
$("#myDiv").click(function() {
if($("#myDiv").attr('ttVisible') == 'no') {
$("#myDiv").tooltip('open');
$("#myDiv").unbind('mouseleave');
$("#myDiv").attr('ttVisible','yes');
} else {
$("#myDiv").tooltip('close');
$("#myDiv").attr('ttVisible','no');
}
});
You can track the current state however works for you, I used an attribute called ttVisible. jQuery UI doesn't seem to expose the current state of the tooltip in any way.
The following example is probably the easiest way to try and explain the effect I'm trying to achieve:
http://jsfiddle.net/qSscJ/2/
Code:
$(function() {
$('#handle').click(function() {
$('#box').toggle('slide', { direction: 'right' });
});
});
Click on the blue handle to make the entire red box collapse. How do I keep the blue handle visible after the box is collapsed (while keeping the handle anchored to the edge of the box)? I'm open to other jQuery UI APIs to achieve this effect.
You could do just animate the width directly so the element doesn't get marked as hidden at the end of the animation:
$(function() {
$('#handle').click(function() {
$('#box').animate({width: "0px"}, 1000);
});
});
But, it would be much better to change the design so that the blue tab was not contained within the box you're closing like here: http://jsfiddle.net/jfriend00/gKQrv/.
$(function() {
$('#handle').click(function() {
var box = $('#box');
var targetWidth = box.width() > 0 ? 0 : 150;
box.animate({width: targetWidth + "px"}, 1000);
});
});
I have implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}
Structure of jQueryUI's Accordion is something like this,
<h2>title</h2><div>content</div>
for each item. What I am going to do is create accordion inside of my backbone view through looping, but backbone create div tag for each item so I have html code like this
<div><h2>title</h2><div>content</div></div>
This makes jQuery Accordion control does not work correctly, collapse and expand is not working.
I think this can be solved if I can set nothing on el or tagname, but I cannot find out.
Is there any way to solve this problem?
I think you'd be better off leaving the accordion to one view and then have a separate view inside each panel. After all, the <h2>s are controls for the accordion as-a-whole rather than for a specific panel.
You'd have some per-panel views like this:
var P = Backbone.View.extend({
render: function() {
// Add the panel's content to this.$el (which is a <div> by default).
return this;
}
});
And then an accordion view like this:
var A = Backbone.View.extend({
render: function() {
var panels = [ ... ];
for(var p, i = 0; i < panels.length; ++i) {
p = new P({ ... });
this.$el.append('<h3><a>' + panels[i] + '</a></h3>');
this.$el.append(p.render().el);
}
// The accordion wants to know the sizes of things so
// we let the DOM sort itself out before binding the
// accordion.
var _this = this;
setTimeout(function() { _this.$el.accordion() }, 0);
return this;
}
});
Then you can simply $('#something').append((new A).render().el) and it all works out nicely while leaving everything where it should be.
You could also add a title method to the P views and then A could ask the panel what its name/title/header should be so that all the per-panel information is nicely contained in the per-panel view.
Demo: http://jsfiddle.net/ambiguous/Y49W8/
I have the following icons in JQuery accordion setup:
icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' }
Is it possible that I can have two icons at the same time for 'header' instead of just one.
Hence, the question is to display two icons for one 'Header'/'headerSelected' state?
Something like it will work
$('#myAccordion > h3').click(function(){
if($(this).hasClass("ui-state-active"))
{
// insert your image/text
$this.append("<span id='test'>Hello World</span>");
}
else
{
$("#test").remove();
}
});