I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example here.
.headerDropdown {
border-radius: 6px;
border: 2px solid #d4d4d4;
height: 34px;
}
.headerDropdown select {
height: 34px;
line-height: 34px;
padding-left: 10px;
padding-right: 5px;
margin-right: 20px;
font-size: 16px;
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat;
width: 100%;
background-position: 98% 50%;
background-color: white;
text-indent: 0.01px;
text-overflow: "";
transition: 0.2s;
}
.headerDropdown select::-ms-expand {
display: none;
}
.headerDropdown select::-moz-focus-inner {
border: 0;
padding: 0;
}
.rotateCaret {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
It looks a bit stiff so I want to rotate my image when the dropdown is being opened. I found a lot of examples online dealing with the problem but they all solve it when it is actually a separate object (image, for instance, not a background attribute like in my case).
$("#mainnavigation").on("click", function() {
$(this).toggleClass("rotateCaret");
});
My question is - how can I rotate my dropdown selection image without affecting the entire dropdown? I need only the image next to the content, so to say.
Thanks in advance!
PS. Ignore my poor choice of image, I used it only as an example.
Add another element for the caret and rotate it separately. You can create a custom CSS animation and manipulate it as you wish.
https://jsfiddle.net/johnniebenson/xajzuxn4/
Related
Im currently having an issue where for whatever reason I can't get any Transform CSS attributes to apply to an SVG image inside a div.
Here is the CSS for the code in question:
#interior-map-container {
background-color: white;
width: 1200px;
height: 600px;
overflow: hidden;
border-radius: 25px;
margin-top: 50px;
box-shadow: 0px 0px 21px 3px rgba(0,0,0,0.74);
position: relative;
}
#interior-map {
transform-origin: center;
transform: scale(0.3);
}
I've tested replacing the svg file (which is interior-map) with a JPG and still could not get the transform styles to apply. Other styling applies just fine, it's just transform attributes. Any suggestions would be great, thank you.
I have a search field at the top of my site that when your selected it jumps up abit out of position and when you click out of the box so it's not selected but not close it the search field is aligned correctly. I can't figure out what is going on to make it move while the cursor is in the input field.
https://www.argentscientific.com
Click the link then click the search icon on the right side of the top level menu and you will see the problem. Rather confused about this one.
This is because of :focus is not being included. When you select the search input, :focus is triggered but there is an existing css that overwrite your css, to fix this you need to explicitly include :focus into your css to prevent it being overwritten. Try changing below css from
.aws-container .aws-search-field{
width: 100%;
color: #313131;
padding: 6px;
line-height: 30px;
display: block;
font-size: 12px;
position: relative;
z-index: 2;
background: rgb(247, 247, 247);
-webkit-appearance: none;
}
to
.aws-container .aws-search-field, .aws-container .aws-search-field:focus {
width: 100%;
color: #313131;
padding: 6px;
line-height: 30px;
display: block;
font-size: 12px;
position: relative;
z-index: 2;
background: rgb(247, 247, 247);
-webkit-appearance: none;
}
Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>
If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>
Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.
Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.
One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!
I am using the range slider in my website for showing the image zooming and zoomout by using "range" option but i want to change this as a vertical slider and want to display customized thumb button also
<input class="zoom-range vertical" type="range" orient="vertical" step="0.05" min="0.1" max="1">
And css for the different browsers like
input[type=range].vertical
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 0px;
height: 100px;
margin-top: 20px;
}
The above css will do the slider as vertical but how can i change the pointer color and hide the width of scroller?
I am getting my slider like this
And i want to make my slider as shown in below
Please help me to sort out this issue
It's working for Firefox but for chrome browser if i will use the properties
input[type=range]::-webkit-slider-thumb {
background: blue;
-webkit-appearance: slider-vertical;
}
these two are not applying to the pointer in chrome. And if i will do -webkit-appearance: none; then the pointer color is changing
Try this css:
input[type=range] {
-webkit-appearance: none; // important
margin: 18px 0;
width: 100%;
transform:rotate(90deg); //for vertical slider
outline:none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 1px;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: #BFBFBF; // you can change it accordingly
border-radius: 1.3px;
}
input[type=range]::-webkit-slider-thumb {
height: 36px;
width: 16px;
border-radius: 3px;
background: #004C8F; //Your preferred color
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
Demo: http://jsfiddle.net/esvqpkbf/
Fiddle also has CSS for mozilla, you can modify it accordingly.