Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
somebody know a js/css libary, or a keyword how it is called? I'm searching for a while for that button select element like digital ocean, see picture :-)
Where I can click and they got selected and so on, I think it is pretty nice
First of all it's not a button. It can be a simple div or a list element. Here is a sample code.
You can add content into each li element to emulate the required list. You can also use div or `span' for the same purpose.
$(".button-container li").click(function(){
console.log("list");
$(this).addClass("selected").siblings().removeClass("selected");
});
.button-container li {
list-style-type: none;
display: inline-block;
width: 150px;
border: 2px solid #f1f1f1;
border-radius:5px;
min-height: 100px;
margin: 0px;
box-sizing: border-box;
font-size: 1.3em;
text-align: center;
vertical-align: top;
position:relative;
margin:10px;
}
li.selected
{
background:#4183D7;
color:white;
border:2px solid #4183D7;
}
span
{
display:block;
color:#444;
height:30px;
width:100%;
background:white;
font-size:10px;
position:absolute;
bottom:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="button-container">
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
<li>some content
<span>
Some other content
</span>
</li>
</ul>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
</style>
</head>
<body>
<div class="header">
<h2><center>CAMPUS RECRUITMENT SYSTEM</center></h2>
<!-- <p>**Single stop for all your recruitment destinations.</p> -->
</div>
<ul>
<li><a class="active" href="index.php">Home</a></li>
<li>About Us</li>
<li>Contact Us</li>
<div class="topnav-right">
<li>Login</li>
<li>Admin</li>
</div>
</ul>
</body>
</html>
Please check the code and help me to change the color of active link dynamically. I don't know how to do that. I have tried to add some java script code but it didn't worked.
You can dynamically change the color of the a tag with active class in JS like:
document.querySelector('a.active').style.color = 'red';
But for your specific need it's better to do it in css with active pseudo class:
a:active {
background-color: red; /* choose your color here */
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I have had the desired effects, but have updated the HTML/CSS since, and JS has gone back to zilch.
The fiddle is here -
jsfiddle.net.
$( "#allies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
});
$( "#enemies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
});
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});
/*css*/
#bg{
background-image:url('https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png');
}
#wrap_main{display:block;
width:80%;
margin-left:auto;
margin-right:auto;
}
#fam{
display:block;
margin:auto;
border:double white 30pt;
width:100%-30pt;
float:center;
background-color: black;
font-family:fantasy, impact;
font-size:30pt;
text-align:center;
padding-bottom:2em;
}
#fam img{display:inline-block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-bottom:40px;
}
#fam a{text-decoration:none;
color:white;}
#fam a:hover{color:gold;}
#ae_seg{display:block;margin-left:auto;margin-right:auto;
}
#allies{
display:inline-block;
border:double 30pt;
background-color:white;
top:20%;
width:34%;
font-family:fantasy, impact;
font-size:30pt;
}
#allies ul li a{text-decoration:none;
color:black;}
#allies ul li a:hover{color:gold;}
#enemies{
display:inline-block;
border:double rgb(179,33,7) 30pt;
background-color:white;
float:right;
width:34%;
color:rgb(179,33,7);
font-family:fantasy, impact;
font-size:30pt;
}
#enemies ul li a{text-decoration:none;
color:black;}
#enemies ul li a:hover{color:gold;}
div img{
width:120px;
height:70px;
display:block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-bottom:5px;
}
#footer{
display:block;
margin:auto;
border:double white 30pt;
width:100%-30pt;
float:center;
background-color:rgb(179,33,7);
}
#footer img{height:120px;
}
#footer img:hover{
transform: rotate(-10deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="bg">
<div style="padding-bottom:10px;" id="fam">
<img style="display:block; margin-left:auto; margin-right:auto; pagging-top:10px;padding-bottom:40px;" src="http://fontmeme.com/permalink/170208/c2e98ece9088b3589606aa5f59e629f2.png">
BBTG_VENG<span style="font-size:24pt;color:white;"> & BBTG tags</span>
</div>
<div id="wrap_main">
<div style="padding:4em;">
</div>
<div id="ae_seg">
<div id="allies">
<img src="http://fontmeme.com/permalink/170203/949c0c2c2c0c34c044b9b45585717a70.png">
<ul>
<li>ON HOLIDAY</li>
<li>AKD_FLGSHP<span style="font-size:24pt;"> & AKD tags</span></li>
<li>MOOzing<span style="font-size:24pt;"> & Cow related tags</span></li>
<li>S N G</li>
<li>CRIME CITY</li>
<li>BOUTIQUEOG</li>
<li>RKNHVK 1<span style="font-size:24pt;"> & RKN tags</span></li>
</ul>
</div>
<div id="enemies">
<img src="http://fontmeme.com/permalink/170203/e8d4db59e876e5c94bd8f072137e33e2.png">
<ul>
<li>PHOENIX<span style="font-size:24pt;"> & PHX/PX tags</span></li>
<li>THEFALLEN</li>
<li>FALLENONES</li>
<li>CAULDRON</li>
<li>BC TA</li>
<li>DIMINISHED2</li>
<li>CLF WMD<span style="font-size:24pt;"> & WMD tags</span></li>
</ul>
</div>
</div>
<div style="padding:5.3em;">
</div>
</div>
<div style="padding-bottom:10px;" id="footer">
<a href="index.htm">
<img src="http://www.iconsdb.com/icons/preview/black/home-5-xxl.png">
</a>
</div>
</body>
</html>
I can't see anything wrong with it, but then I'm really not that experienced.
$( "#allies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
});
$( "#enemies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
});
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});
It is working now please add jquery in your project.
fiddle here
Others already explained it in the comments, your using jQuery and not plain JavaScript.
You need to attach the jQuery library into your project.
CDN
If you want to use jQuery via CDN use following code:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
See jQuery CDN
Download
If you want your own copy of the jQuery library in your project download it here and implement it like this:
<script src="jquery-3.1.1.min.js"></script>
Keep in mind, if your using another version of jQuery, you need to change the version number in this snippet.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Just learning JavaScript. I am having trouble with a simple menu. Right now, I just want the div class .welcome to have the class .inactive-slide attached to it (no, not a very useful thing, but I am just learning), but for some reason it is not working. My assumption is that my selector is not right (hence the general phrase in there now).
JavaScript code:
var main = function(){ "use strict";
$(li element selector).click(function() {
$('.welcome').toggleClass('inactive-slide');
});
};
$(document).ready(main);
relevant css:
.welcome {
width: 1000px;
text-align: left;
margin: auto;
border-left: medium solid #000000;
padding-left: 20px;
}
.inactive-slide{
display: none;
}
Relevant HTML:
<div class="nav">
<div class="container">
<ul>
<li id="port">Portfolio</li>
<li>Who We Are</li>
<li>Clients</li>
<li>Services</li>
<li>Pure Cause & Effect</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="welcome">
<div class="welcometop">
<h1>welcome</h1>
</div>
<div>
<p>a bunch of words</p>
</div>
</div>
Also, here is the JSfiddle of everything: https://jsfiddle.net/royal_wisdom/bqr7ew9z/3/
Your code is correct. The only reason it isn't working correctly in JSFiddle is because you haven't added the jQuery reference. See exactly the same code working below (notice the additon of jQuery reference at the very top) :
var main = function () {
"use strict";
$('.nav a').click(function () {
$('.welcome').toggleClass('inactive-slide');
});
};
$(document).ready(main);
#charset"utf-8";
/* CSS Document */
.wrapper {
margin-left:auto;
margin-right:auto;
width:max;
height:max;
}
body {
background-color: #FFCE5F
}
.logoheader {
color: #000000;
min-height: 400px;
}
.imagecontainer {
text-align: center;
margin-top: 100px;
width: max;
background-color: #FFFFFF;
}
.nav {
}
.nav li {
display: inline-block;
margin: 28px 0 0 0;
border-bottom: 2px solid;
border-bottom-color: #000000;
}
.nav ul {
}
.nav .container {
text-align: center;
vertical-align:bottom;
background-color: #FFFFFF;
width: max;
}
#port {
color: #5a5a5a;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
.welcometop {
text-align:center;
}
.welcome {
width: 1000px;
text-align: left;
margin: auto;
border-left: medium solid #000000;
padding-left: 20px;
}
.welcometop {
text-align:center;
}
.inactive-slide {
display: none;
}
.active-slide {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!doctype html>
<title>Rippe Keane</title>
<body>
<div class="wrapper">
<div class="logoheader">
<div class="imagecontainer">
<img src="https://media.glassdoor.com/sqll/248681/rippe-keane-marketing-squarelogo-1392301668926.png" alt="We're good at this, we promise!">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li id="port">Portfolio
</li>
<li>Who We Are
</li>
<li>Clients
</li>
<li>Services
</li>
<li>Pure Cause & Effect
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
<div class="welcome">
<div class="welcometop">
<h1>Welcome to Rippe Keane Marketing</h1>
</div>
<div>
<p>Accountability. It's a word that makes most marketers squirm; after all, the science of marketing is a "soft" one. Or is it? At Rippe Keane, we believe that the customer's experience with your brand can be managed in its entirety; carefully crafted and executed to not merely satisfy, but to captivate and inspire. To cater to wants your customers didn't even know they had.
<p>As part of our unique brand architecture and strategic planning process, we make it our business to know your business. Top to bottom, inside and out. We develop innovative solutions for nearly anything that affects your bottom line, from public relations and media services to business planning and operations.</p>We are meticulous. Insightful. Observant. We scrutinize. Collaborate.
<p>And we develop a solid foundation before moving on to the creative fun stuff.</p>All so your customers keep coming back for more.
<p>The results we deliver don't happen by chance. They happen by design.</p>That's "Pure Cause and Effect."</p>
</div>
</div>
</div>
</body>
</html>
Here's a jsfiddle example if you prefer (observe the addition of jQuery reference at the top left side of the page) : https://jsfiddle.net/z67ummw2/
Hope this helps!!!
You must include jQuery file before you doing your jQuery functions
In jsFiddle http://prntscr.com/8x404v it's there.
If you turn it on for jsFiddle your code starts working. Probably you executing your main function before including jQuery
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to make a Tumblr page. The idea is to have several book titles listed on the left side that, when hovered over, display the information for said book on the right side.
Example
There, "Example 2" is being hovered over in the blue box, so its respective information appears in the red box on the right. If I were to hover over "Example 3" from there, the information box for "Example 2" would fade out while the one for "Example 3" would fade in. I hope I'm make some sort of sense here.
Now, I know I could achieve this with pure CSS, but I imagine that would involve creating a custom CSS class for each title in the list. Is there any other way of potentially doing this while avoiding the CSS dance?
Pure CSS, one class for all titles - Codepen
HTML
<div class="menu">
Example 1
<div class="show">
<h1>EXAMPLE 1</h1>
<hr>
<p>text here</p>
</div>
Example 2
<div class="show">
<h1>EXAMPLE 2</h1>
<hr>
<p>text here</p>
</div>
Example 3
<div class="show">
<h1>EXAMPLE 3</h1>
<hr>
<p>text here</p>
</div>
Example 4
<div class="show">
<h1>EXAMPLE 4</h1>
<hr>
<p>text here</p>
</div>
</div>
CSS
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.menu {
width: 120px;
height: 300px;
background-color: #2F43B7;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu a:hover + .show { /* Select .show that is immediately after a */
opacity: 1;
}
.show {
transition: 500ms;
opacity: 0;
background-color: #B72F2F;
position: absolute;
top: 0;
left: 130px;
width: 400px;
height: 300px;
text-align: center;
}
.show h1 {
font-size: 46px;
margin-bottom: 0;
}
.show h1,
.show p {
color: #fff;
}
.show hr {
width: 90%;
border: 2px solid #000;
}
Same effect with jQuery:
$(".show").css("opacity", 0);
$("a").hover(
function(){
$(this).next(".show").stop().fadeTo("slow",1);
},
function(){
$(this).next(".show").stop().fadeTo("slow",0);
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
For the moment, my application only uses simple checkboxes with label. Our app designer wants us to change this into clickable images which works like checkbox.
Here an example:
I have no idea how to proceed, should i try to create a div (the square) filled with the image and then set my current checkbox in the bottom right corner of that div ?
Or maybe there's a simplier way to do it ?
http://jsfiddle.net/pwoojpv1/
HTML
<div class="check-img" style="width:100px;height:100px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/883px-Tux.svg.png" >
<div class="check">✓</div>
</div>
CSS
*{
box-sizing:border-box;
}
.check-img{
position:relative;
top:0px;
left:0px;
}
.check-img img{
border:solid 2px gray;
width:100%;
height:100%;
cursor:pointer;
}
.check{
padding-left:5px;
color:grey;
height:20px;
width:20px;
background:grey;
position:absolute;
bottom:0px;
right:0px;
}
.check-img.checked img{
border-color:orange;
}
.check-img.checked .check{
background:orange;
color:white;
}
JS
$(document).ready(function(){
$(".check-img").click(function(){
$(this).toggleClass("checked");
});
});
Put the <img> inside a <label> element that's tied to the checkbox <input> element's id. So when you click on the label (the image), it's the same as clicking on the checkbox. Then wrap the <input> and the <label> inside a <div> so you can position the checkbox on the bottom right corner.
HTML:
<div class="container">
<input id="checkbox1" type="checkbox" />
<label for="checkbox1">
<img src="http://i.imgur.com/rpUZ96Y.jpg" />
</label>
</div>
<div class="container">
<input id="checkbox2" type="checkbox" />
<label for="checkbox2">
<img src="http://i.imgur.com/fKRGSmS.jpg" />
</label>
</div>
CSS:
.container {
display: inline-block;
font-size: 0;
position: relative;
}
.container input {
bottom: 0;
position: absolute;
right: 0;
}
Here's a fiddle.