Change Dropdown Arrow for jsf h:selectOneMenu - javascript

I am working with jsf and I am using the h:selectOneMenu tag. Currently on the Website it is getting displayed like this :
selectOneMenu
But i would like to change the apperieance of the arrow at the end. It should have a red color and no background. I have tried a lot of things like using the overflow attribute or changing the background of the select item to the dropdown arrow i would like to have. Changing the Color of the element also effects the writing in it. For some reason putting the selectOneMenu into a div and adding folowing styles to it works fine:
.epSelect {
width: 240px;
overflow: hidden;
background: url(..arrowdown_red.png) no-repeat right #FAFAFA;
border: 1px solid #CDCDCD;
color: #333333;
height: 27px; }
.epSelect select {
background: transparent;
width: 257px;
height: 27px;
padding-top: 5px;
font-size: 12px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
padding-left: 3%;
cursor: pointer;
}
"epSelect" ofcause beeing added as class to the div
Does anyone knonw the specific css element which can be addressed to change the color of the arrow only ?
in the standard html select tag it would be addressed by the label:after attribute as can be seen here : http://cssdeck.com/labs/styling-select-box-with-css3
Any help is much appreciated.

Simply put JSF is in this part merely an html generator in which it generates a plain html select/dropdown. Effectively your question is 'How do I change the icon of an html select'.
So look at the following Stackoverflow Q/A for answers
How to change down-arrow on select tag
CSS Select box arrow style

Related

Raw HTML styling differently from jQuery generated HTML with same structure

I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle

Change ColVis Style in Datatable Javascript

I want to give background color for 'Hide/Show columns' label in ColVis.js file where I need to do the change?
Looks like you can edit the css for the button in extras/ColVis/media/css/ColVis.css
.ColVis_Button {
position: relative;
float: left;
margin-right: 3px;
padding: 3px 5px;
height: 30px;
background-color: #fff; /* here */
border: 1px solid #d0d0d0;
cursor: pointer;
*cursor: hand;
}
Can't really see a way to do this using the api or options.
I suppose you could do this:
$('.ColVis_Button').css("background-color", "red");
These button styles are all CSS defined already. Just change the CSS in the ColVis CSS file that defines them.
This is the official and proper way because these are styles.
instead of css change is there any possibility to change in view page
jquery,i.e,using this,$('#example').datatable({});
You don't change it in the datatable init because that is JS that modifies the ColVis JS params and controls the plugins functionality i.e. not how it looks.

What is the pop up/hoover box called in jquery/javascript/html/css

I am at the beginning of researching how to do something and not sure what is the proper name of what I am trying to research and if there is something that can be done in jquery, or a mix of jquery and css. What I am looking for is something similar to a small pop up when you hover over something; similar to hovering over a hyperlink will reveal the full link. But it will be styled to something that looked like a dialog box and instead of hovering over it the user will have to click it to see that dialog box, but it will be displayed similar to hoovering over something. I hope this question is clear and that I am not over thinking this.
You can do this with pure CSS if you wanted
DEMMO jsFiddle
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
margin-left:100px;
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
.alert {
display: none;
}
span {
display: line-block;
position: absolute;
left: 10px;
top:45px;
}
span:focus ~ .alert {
display: block;
}
I would 2nd SiDiX's recommendation of qTip if you are looking for a jQuery based solution. It has numerous features and is fairly easy to implement.
Since you mentioned you are still in the researching phase, I would suggest a google search on "top jquery tooltip plugins" - you will find many solutions.
Are you talking about tooltip? Check out this plugin called qTip
http://craigsworks.com/projects/qtip/
I believe what you are looking to define is referred to as a 'tooltip'. I like to use PowerTip to implement tooltips. It relies on jQuery, has lots of useful options, and outputs easily styled tooltips.
Checkout Bootstrap and look at what they are calling Tooltip, popover, and modal. That should help clarify.
http://getbootstrap.com/2.3.2/javascript.html#tooltips...
tooltips and popovers by bootstrap...You can put in html in the tooltip if you want.

The correct way of styling a select menu for cross browser functionality [duplicate]

This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 8 years ago.
I came across this problem with a select menu, it's about styling it with the help of CSS & Jquery. By now, I managed to get this result, which I really like it:
till now it works perfect in mozila, opera, chrome, IE7+.
This is the source which i have at the moment:
HTML:
<select class="styled" name="">
<option>Select title</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss.</option>
</select>
CSS:
select {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
width: auto;
cursor: pointer;
margin-bottom: 10px;
}
select > option {
text-transform: uppercase;
padding: 5px 0px;
}
.customSelect {
border: 1px solid #d6d8db;
background-color: #ecedee;
text-transform: uppercase;
color: #47515c;
padding: 12px 10px 12px 10px;
margin-bottom: 10px;
}
.customSelect.changed {
background-color: #f0dea4;
}
.customSelectInner {
background:url(../images/select_arrows.png) no-repeat center right;
}
The jQuery is composed from two parts:
- the plugin
- and the control code
This can be viewd in the FIDDLE that i just created:
http://jsfiddle.net/s6jGW/1/
Please note there is "External Resources" on the left.
What I want to achieve
The drop down I want to style it so that it will look approximately like in the image (I mean those options like - height - padding - on hover:
I don't want the "SELECT TITLE" to be as a selection option, it must be only the title of the select box. in this fiddle you can see the it is as a option too. http://jsfiddle.net/s6jGW/1/
Probebly most important, I AM LOOKING FOR CROSS BROWSER SOLUTION.
Thank you in advance
The correct way of styling a select menu for cross browser functionality
Give up, there is no cross-browser way to style select and option elements. You'll need to replace them with your own, HTML-based controls.
But, if you want to insist (and probably give up on older browsers), the following links might help:
How to style a <select> dropdown with CSS only without JavaScript?
Styling or Replacing the Standard Select Element.

Effect for image on mouseover

look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins

Categories

Resources