i have implemented a button which should change the background color, into blue from black.
But i didnt find a easy way, how I can do that.
This is my HTML file
<div style="background-color: #161624; width: 100%; height: 20%; "></div <div style="background-color: #efece7; width: 100%; height: 60% "> </div> <div style="background-color: #161624; width: 100%; height: 20%; vertical-align: bottom ; "</div>
<button id="changecolor">Change Color</button>
</div>
I want that the button changecolor, change the background color, where the height is 20% at both.
enter image description here
The blueblack color should change
I would recommend using a seperate css file for this with classes of colors and designs depending on dark/light mode.
simply add a css class of example down below and add some javascript to be able to change the class on the button or element you want to use as the switch.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
<body>
currently this is just pointing to the body but can easily be adjusted to point at any element you would like it to
Just let me know if you have any questions
Related
I've created a vertical navigation on the left of our site. We'd like the background color for a .item to change based on the subdirectory where a user is viewing content. So if someone clicks on a nav .item, the href will redirect them to a page and we want that .item to be highlighted a unique hex color that we can customize for each nav .item. All 6 nav items would have a different color.
One point of clarification is that sometimes folks may visit our site without having ever clicked a navigation item. I want the navigation items to still be highlighted based on the current subdirectory where a person is viewing content. This helps them easily identify where they are and how to get back if they navigate to other parts of the community. Also if a person does a global search and stumbles upon content in one of our 6 main areas, we want the nav menu to instantly identify their current location (based on url) and highlight that nav .item in our vertical nav bar.
Is Javascript or Jquery the way to go? Any help would be appreciated!!
Heres a FIDDLE with all the code.
sample CSS:
.navback {
position: fixed;
top: 0;
left: 0px;
width: 100px;
height: 100%;
background: #283237;
z-index: 4;
}
.navbar {
position: fixed;
top: 44px;
left: 0px;
width: 100px;
height: 60vh;
background: #283237;
display: flex;
z-index: 5;
flex-direction: column;
}
.topbar {
border-top: 1px solid #000;
top: 44px;
}
.navbar .item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
max-height: 100px;
z-index: 5;
}
.navbar .item div.label {
color: #fff;
position: relative;
top: 5px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
left: -100px;
}
Sample HTML:
<div class="topbar"></div>
<div class="navback leftnav">
<div class="navbar">
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
JS/jQuery
// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";
// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;
$(".item")
.find("[href^='" + hereUrl + "']")
.closest(".item").addClass("here");
Note .find("[href^=...]") selects things that start with what you're looking for.
CSS
/* now use .here to style */
.item.here {
background-color: purple;
}
.item.here .label {
font-weight: bold;
}
To answer your question directly, yes this could be done also via JavaScript/jQuery but there is a far simpler way using the css :active selector.
For example, if the user clicks the .item
then the code would be:
.item:active {
background-color: #cecece; // or whatever styling you want
}
Sidenote: As a webdesigner myself, in general i'd advise using the :hover selector when it comes to navbar highlightng instead of the :active one.
Use jquery in your html (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
Add the following script
$('.item').click(function(){
$('.item.active').removeClass("active");
$(this).addClass('active');
})
CSS
.item.active {
background-color: red;
}
Please see updated fiddle
If you are using jQuery you can loop through each anchor and test it against the current URL of the page like this:
$(function highlightCurrentUrl() {
var currentUrl = window.location.href;
var items = $(".item").each(function() {
var anchor = $(this).find('a');
$(this).removeClass('active');
//comparison logic
if (anchor.prop('href') == currentUrl) {
$(this).addClass("active");
}
});
});
What this does is add a class to the matching .item in the menu. (This won't work in JSFiddle due to Content Security policy so you will have to test it your own environment.)
Next, you will need to define the styles that will be applied to an .item.active DIV tag. And, if you want different colors for different items, you should probably give them ID's in you markup, so you can reference them individually:
<div class="item hvr-shrink" id="home-link">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink" id="central-link">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
These rules are saying that when the active class is added to the div with the ID home-link or central-link it should have the following properties
#home-link.active {
background-color: blue;
}
#central-link.active {
background-color: green;
}
a {
text-decoration: none;
}
.social {
padding-left: 670px;
/*margin-left: 670px;*/
margin-top: -140px;
}
.blog_roll_links {
margin-left: 58px;
width: 210px;
height: 40px;
line-height: 40px;
}
.blog_roll_links:hover {
background-color: #C74451;
color: white !important;
text-shadow: 1px 1px 1px black;
}
.social_links {
padding-left: 8px;
margin-left: 40px;
width: 140px;
height: 30px;
line-height: 30px;
}
<div class="bolgnsocial">
<div class="blog">
<h3 class="featArt">blogroll</h3>
<div class="blog_roll_links">
HTML5 Doctor
</div>
<div class="blog_roll_links" style="margin-left:17em; margin-top: -40px;">
HTML5 Spec (working draft)
</div>
<div class="blog_roll_links">
Super Magazine
</div>
</div>
<div class="social">
<h3 class="featArt">social</h3>
<div class="social_links blog_roll_links">
facebook
</div>
<hr align="right" style="border-style: outset; border-color: white; margin-left: 45px; width: 140px;" />
<div class="social_links blog_roll_links">
twitter
</div>
</div>
</div>
I have this little snip of code and two questions:
The "facebook" and "twitter" have the same class of "blog_roll_links", however, the final result is different. It supposed to change the div color when hovered over the link, like the links in blog does. I just cannot figure it out why "blog" and "social" have the same class, but don't have the same effect.
I want to change the text color to white when hovered over, i have the code in my CSS, why it won't work?
Hi I highly recommend you to explore the browsers (chrome recommended) development tools.
if you inspect the elements you will see that in your current styling, that the anchor is nested inside your div AND that the anchor doesn't have the same width and height.
depending on which class you are adding :hover, css will react accordingly.
also the color of the font belongs to the anchor.
My suggestion is that you wrap the styling div inside the anchor, so that the whole div becomes a link ;)
Hope this helps you
How do I create an url link prefixed with a small thumbnail-image, such that when I hover on them, BOTH the link color and the thumbnail-image change
Example:
Im now using an image tag that goes with an anchor tag, Im able to change the anchor tag text color on hover, however I dont know how to change the img src accordingly
CSS:
.hoverable-link {
color: gray;
}
.hoverable-link:hover {
color: blue;
}
HTML:
<div>
<img src="thumbnail-1"> //Change to thumbnail-2
Cool Link
</div>
JsFiddle: https://jsfiddle.net/rbb5ow1v/9/
In conclusion:
[1] How can I change img src when it's on hover
[2] How can I trigger hover-event for both element at the same time
I would give fontello.com a go
Once you have chosen the desired icons set up your tag as follows
<span class="icon-twitter"></span>example
When you do the CSS you just have to apply a hover state to the anchor and because of fontello it will change that colour too by just using the CSS color attribute.
EDIT:
If you are using a specific twitter icon that you made. Try changing it to an SVG, and change its fill. Same can be applied to the fontello where you can display none and reveal on hovers.
[1] How can I change img src when it's on hover
You can't do this with CSS alone, as src is a DOM attribute not a CSS attribute, to accomplish this some javascript is required with HTML DOM Event system
<body>
<div>
<img onmouseenter="highlight(this)" onmouseleave="unhighlight(this)"
src="thumbnail1">
Some Link
</div>
<script>
function highlight(image) {
image.src = "thumbnail2"; //Blue Image
}
function unhighlight(image) {
image.src = "thumbnail1"; //Gray Image
}
</script>
</body>
JsFiddle: https://jsfiddle.net/f0c7p3tL/2/
List of DOM Events: http://www.w3schools.com/jsref/dom_obj_event.asp
Another approach is to not using the src DOM attribute at all. Instead you can use the background CSS attribute, that way you can utilize the CSS:hover selector
CSS:
#my-thumbnail {
background: url("/thumbnail1") no-repeat;
width: 32px;
height: 32px;
}
#my-thumbnail:hover {
background: url("/thumbnail2") no-repeat;
}
HTML:
<div>
<img id="my-thumbnail">
Some Link
</div>
JsFiddle: https://jsfiddle.net/7xoprwky/
[2] How can I trigger hover-event for both element at the same time
Again, two approaches are available here.
First is using javascript and the HTML DOM Events. In this approach, instead of triggering events on either of the child elements, we want them to be triggered on the surrounding <div> parent element. Then, in the event handler, we select the child elements and change their DOM Attribute accordingly
<body>
<div onmouseenter="highlight(this)" onmouseleave="unhighlight(this)">
<img id="my-thumbnail" src="thumbnail1">
<a id="my-anchor" href="#potato">Some Link</a>
</div>
<script>
var myThumbnail = document.getElementById('my-thumbnail'),
myAnchor = document.getElementById('my-anchor');
function highlight() {
myThumbnail.src = "/thumbnail2";
myAnchor.style.color = "blue";
myAnchor.style.fontWeight = "bold";
}
function unhighlight() {
myThumbnail.src = "/thumbnail1";
myAnchor.style.color = "gray";
myAnchor.style.fontWeight = "normal";
}
</script>
</body>
JsFiddle: https://jsfiddle.net/2uthconL/
In the second approach we utilize the CSS selector syntax to highlight our internal element from our surrounding div
CSS:
#my-thumbnail-link {
}
#my-thumbnail-link img { /* Select all img tag inside div */
background: url("/thumbnail1") no-repeat;
width: 32px;
height: 32px;
}
#my-thumbnail-link:hover img { /* Select all img tag inside div when it is hovered */
background: url("/thumbnail2") no-repeat;
}
#my-thumbnail-link a { /* Select all a tag inside div */
color: gray;
}
#my-thumbnail-link:hover a { /* Select all a tag inside div when it is hovered */
color: blue;
font-weight: bold;
}
HTML:
<div id="my-thumbnail-link" class="vcenter-parent">
<img class="vcenter-child">
Some Link
</div>
JsFiddle: https://jsfiddle.net/x61dy0mk/2/
More on CSS Selector: http://www.w3schools.com/cssref/css_selectors.asp
If your thumbnail is just a static asset, I recommend the CSS approach over the Javascript HTML DOM one for its readability and maintainability (imagine keeping thousands of event handlers)
maybe you can try this one:
html
css for styling
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
this answer is based on this question CSS: image link, change on hover
Update - Just try this one:
html
<ul>
<li><a id="hoverable" href="#"><i class="home-icon"></i><span class="text">Link 1</span></a></li>
<li><a id="hoverable" href="#"><i class="tshirt-icon"></i><span class="text">Link 2</span></a></li>
</ul>
css
a {
color: black;
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.home-icon {
background: url("http://s1.postimg.org/gk5fbl6vv/home_black.png") no-repeat;
width: 32px;
height: 32px;
display: inline-block;
margin-right: 20px;
}
a:hover .home-icon {
background: url("http://s2.postimg.org/43870q29h/home_green.png") no-repeat;
}
.tshirt-icon {
background: url("http://s30.postimg.org/61bqc12fh/tshirt_black.png") no-repeat;
width: 32px;
height: 32px;
display: inline-block;
margin-right: 20px;
}
a:hover .tshirt-icon {
background: url("http://s17.postimg.org/3x9qzn8sb/tshirt_green.png") no-repeat;
}
a#hoverable:hover {
color: green;
font-weight: bold;
}
demo is on this link https://jsfiddle.net/nv4dw8vr/
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg
Hi all !
I want to create a small round static percent indicator in CSS but I can't find the solution.
The squared indicator at left is ok, but so ugly, I want it round !
I have tried with rounded corner (cf indicators at the right of the screenshot), and I wonder if there is possibility to add a rounded mask to hide the corners (cf. css3 mask : http://webkit.org/blog/181/css-masks/), but it seems like it's only for img...
The solution can works only on webkit browsers, because it's for a mobile webapp.
Here is my code to create the (ugly) indicator in the image above :
<div class="meter-wrap">
<div class="meter-value" style="background-color: #489d41; width: 70%;">
<div class="meter-text"> 70 % </div>
</div>
</div>
And the css :
.meter-wrap{
position: relative;
}
.meter-value {
background-color: #489d41;
}
.meter-wrap, .meter-value, .meter-text {
width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
background: #bdbdbd top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 2px;
color: #000;
text-align: center;
width: 100%;
font-size: 40%;
text-shadow: #fffeff 1px 1px 0;
}
Add a wrapper around your .meter-value class, set its overflow to hidden and then set the width of that layer to get the desired effect. The rounded corners on the .meter-value class should remain intact and give you a nice fluid progress indicator.
You will have to move the .meter-text div outside of the wrapper to ensure it's visible throughout the transition, so your html would like something like:
<div class="meter-wrap">
<div class="meter-text"> 70 % </div>
<div class="meter-value-wrapper" style="width:70%;">
<div class="meter-value" style="background-color: #489d41;">
</div>
</div>
And the class for .meter-value-wrapper might look like:
.meter-value-wrapper {
overflow: hidden;
width: 30px;
height: 30px;
}