I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle).
Here is my button CSS code:
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family: "open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
and here is CSS icon code:
.w8-button.iconize {
padding-right: 50px !important;
background: url(D:/firstPicture.png) no-repeat 115px center;
}
And this is how I call my button in html:
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>
Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)
On a a modern browser that supports addEventListener and the Class List API (shims are available for both on their respective MDN pages to add support for older broswers), you could do this.
CSS
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family:"open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
.w8-button.iconize {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}
HTML
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>
Javascript
document.getElementById("w8-d-blue").addEventListener("click", function (e) {
var target = e.target;
target.classList.toggle("iconize");
target.classList.toggle("iconize2");
}, false);
On jsfiddle
Here is how you can do this in jquery
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
To use jquery you'll have to add this to the head section of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and type the above code afterwards.
Quick solution
var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2;
element.onclick = function(){
if (switch == 0){
element.style.backgroundImage(img1);
switch = 1;
}
else {
element.style.backgroundImage(img2);
switch = 0
}
I think you are unaware of the wonders Jquery can bring you. If so you should really look it up, it makes many things like that much easier.
Related
I have a button with a className 'actions'
This button shows the
css styling from '.actions' but not '.actions button' . I expect both to be included.
This syntax here works for every element except the button.
The full code is at: https://github.com/keithmacinnis/for-play-activity-browser
Activity.module.css
.item {
margin: 1rem 0;
}
.image {
width: 100%;
height: 20rem;
overflow: hidden;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.image img {
width: 100%;
object-fit: cover;
}
.content {
text-align: center;
padding: 1rem;
}
.content h3 {
font-size: 1.25rem;
color: #2c292b;
}
.actions {
padding: 1.5rem;
text-align: center;
}
.actions button {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
.actions button:hover,
.actions button:active {
background-color: #ffe2ed;
}
Activity.js
import css from "./Activity.module.css";
import Card from "./Card";
function Activity(props) {
return (
<li className={css.item}>
<Card>
<div className={css.image}>
<img src={props.activity.image} alt={props.activity.title} />
</div>
<div className={css.content}>
<h3>{props.activity.title}</h3>
<address>{props.activity.address}</address>
<p>{props.activity.description}</p>
</div>
<div>
<button className={css.actions}>Join Activity</button>
</div>
</Card>
</li>
);
}
export default Activity;
Again, I'm unsure why my button receives the stylings for padding and text-align, but the eight properties that follow are ignored.
I do not have much experience with creating selector combinations that include an element type and className, but I just did a little experimenting on my own, and it appears that these may be considered sibling selectors (as opposed to one being the child of the other). Also, it seems like the element type may have to come before the className.
It looks like if you write the selectors like one of these two ways, it should work:
button ~ .actions {
*styles*
}
button + .actions {
*styles*
}
You can read more about combinators here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
To use .class selector for a specific element. You need Start with the element name first, then write the period (.) character, followed by the name of the class... like this
Button.actions {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
If that doesn't work. It might be a problem with the browser using your previous css version from the cash and not the updated styling. To solve it use this:
Ctrl + F5 On Mac OS (in Chrome) use: Cmd + Shift + R .
This will force your browser to reload and refresh all the resources related to the website's page.
It was fixed by this change in Activity.js :
new code:
<div className={css.actions}>
<button >Join Activity</button>
</div>
old code:
<div>
<button className={css.actions}>Join Activity</button>
</div>
I have managed to remove the tooltip entirely, just to see if it was possible to style this tooltip, in any way. But what I actually need is to position it centred below the choose file button.
The CSS for getting rid of the tool tip was basically this:
input[type="file"] {
display: none;
}
Which basically results in the button looking like this
However, if I remove the css, I am left with this mad button inside of a button mess which includes the tooltip inside the button
To be clear, both the button and the button within the button do the same thing. I am not 100% clear on why it displays like it as this is my first time working with a file upload button which isn't my own code.
Followed by this Codepen you can simply do it like this:
<html>
<style>
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
color: black;
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
</style>
<input type="file" class="custom-file-input" />
</html>
Now the question is how it works?
To get the answer know about css ::before selector here
Hope this helps!
You can see the code here: http://jsfiddle.net/KfwyL/
I have a div and inside of the div there is an h1. I have the h1 set so that on hover it becomes green. I want to make it so that when the mouse hovers over the h1, the div gets a box shadow. my code is not working.
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/1.css">
<title> Max Pleaner's First Website
</title>
</head>
<body>
<div class="welcomebox">
<h1 class="welcometext">Welcome to my site.
</h1>
</div>
</body>
<<script src="../Scripts/1.js"> </script>
</html>
css:
body {
background-image:url('../images/sharks.jpg');
}
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
Javascript:
welcomeboxshadow = document.getElementsByClass("welcometext");
function doit()
{
var topbox = document.getElementsbyClass("welcomebox")
topbox.style.box-shadow = "-webkit-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);-moz-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);"
};
welcomeboxshadow.onmouseover.doit;
The first thing you'll want to do is discover your browser's Dev Tools. On Chrome and IE, press F12, but you can find it somewhere in the menus. The dev tools console reports errors, amongst other things.
Here it would be telling you that getElementsByClass doesn't exist on document. The method is called getElementsByClassName (note the "Name") at the end.
Once past that, you'd find that it would complain that NodeList doesn't have a style property. getElementsByClassName returns a NodeList (a list of nodes, in this case elements). Each of those has a style, but not the list. So you'd have to loop through the list to work with the style of each element.
here is a working version of your code that doesn't use jQuery since I figured you wanted to know how to do this in pure JS...
welcomeboxshadow = document.getElementsByClassName("welcometext");
welcomeboxshadow[0].addEventListener('mouseover',
function() {
var topbox = document.getElementsByClassName("welcomebox");
topbox[0].setAttribute("class","welcomebox welcomeBoxMouseOver")
}, false)
I changed the inline style to a class but the concept is the same.
The problems were mostly invalid function names (getElementsByClass*Name*), trying to set properties that didn't exist (topbox.style.box-shadow)
Also you need to remember that function returns a collection, not a single element, so you need to reference it using [0]
Note that I would recommend not using the raw js approach in this
case, I'd prefer to use jQuery as it's much cleaner and once you go beyond anything simple like your code you will be glad you used it
This doesn't use your event listeners, but gives you an idea of how to apply the drop shadow. This uses jQuery.
http://jsfiddle.net/KfwyL/20/
I modified your html since it doesn't want you to use head/body tags.
<div class="welcomebox">
<h1 class="welcometext" onmouseover="$('.welcomebox').addClass('boxshadow');" onmouseout="$('.welcomebox').removeClass('boxshadow');">Welcome to my site.
</h1>
</div>
css:
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
.boxshadow
{
box-shadow: 10px 10px 5px #888888;
}
Here's a working version with a box shadow working correctly without using jQuery:
Live demo
Javascript:
welcomeboxshadow = document.getElementById("welcomeH1");
welcomeboxshadow.addEventListener('mouseover', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox shadowed";
}, false)
welcomeboxshadow.addEventListener('mouseout', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox";
}, false)
HTML changes:
<div class="welcomebox" id="welcomeDiv">
<h1 class="welcometext" id="welcomeH1">Welcome to my site.</h1>
Im not an expert either, but why not just add:
.welcomebox:hover { box-shadow here }
to your css?
I'm building a jQuery form-field validator, and at the moment I'm working on building in the pop-up notifications in CSS.
The problem is, I can't get .notification-point to align to the center of .notification-body, regardless of the application of margin-top/padding-top properties.
Here's a link to my JsFiddle: http://jsfiddle.net/Z6Jtd/8/
Any help/edits would be greatly appreciated!
Solution: http://jsfiddle.net/vonkly/Z6Jtd/9/
There you go.
Note: I changed your javascript a little. I removed .fadeOut; I would highly recommend creating a function for .focusout() - or better yet, detect changes to the value and when it matches the required rule, hide the message.
For future readers:
The solution to this issue was to wrap both the marker ("point") and the body ("message") in a container with position: relative; on it.
Then, I positioned the marker using position: absolute; and top: 8px.
Next, I added margin-left: 12px to the message in order to not overlap the marker.
CSS
input[type="text"], input[type="password"] {
display: inline-block;
font: bold 13px Arial;
color: #555;
width: 300px;
padding: 8px 10px;
border: 0;
}
.notify-wrap {
position: relative;
display: none;
}
.notify-point {
position: absolute;
top: 8px;
display: inline-block;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
border-width: 6px;
}
.notify-body {
margin-left: 12px; /* push the body out to make room for point */
padding: 8px 10px;
font: bold 11px Arial, Helvetica;
color: #fff !important;
background-color: rgba(0, 0, 0, 0.75);
}
note: above code is modified to not take up loads of room with border-radius, etc
HTML
<div id="email">
<input name="1" type="text" value="Enter your email address"/>
<div class="notify-wrap x1">
<div class="notify-point"></div>
<div class="notify-body">
You've entered an invalid email address.
</div>
</div>
</div>
note: on notify-wrap, i added the class x1 to define a specific error message to keep in line with the OP's original formatting for javascript.
Javascript (jQuery)
$('input').focus( function() {
var num = $(this).attr('name');
$('div.notify-wrap.x' + num).css('display','inline-block');
});
I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}
When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}