I want to change the background color of the column when it is clicked and revert back to its initial color when another column is clicked on.
Please check the code on codepen link.
<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>
http://codepen.io/SantoshNeela/pen/zKYAOa
First in your codepen you haven't included Jquery.
Include it.
Then if you want to change the color of the background you can do it by adding this code
.active div{
background-color:red!important;
}
the jquery code is ok.
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
});
.active div{
background-color:red!important;
}
.stats-div {
display: inline-block;
text-align: center;
margin-left: 20px;
}
.stats-div .row .col2 {
background: grey;
margin-left: -10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
font-weight: bold;
color: white;
}
.stats-div .row .col3 {
background: lightgrey;
padding: 8px;
font-weight: bold;
color: black;
border-right-style: ridge;
}
.stats-div .row .col4 {
background: lightgrey;
padding: 8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
font-weight: bold;
}
.stats-div .row a,
a:visited {
background: lightgrey
}
a.link {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stats-div col-sm-6 col-md-6">
<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>
</div>
$('a.link').click(function(e) {
$('a.link').each(function(i, el) {
// Remove existing active classes
$(el).removeClass('active');
})
// Set the new (clicked) class as active.
$(e.target).addClass('active');
})
Also, don't forget to include jQuery in your codepen.io.
You can find using JavaScript please ref this back ground color changer http://jsfiddle.net/p7w9W/2/
var $p = $("#P44");
$p.stop()
.css("background-color","yellow")
.hide(1500, function() {
$p.css("background-color","red")
.show(1500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"> </script>
<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>
Just add jquery in your head, nothing else
Related
I'm fairly new to Javascript, and i've reached an issue I can't figure out yet, so I'll explain it as best as I can.
I've got 2 divs containing a reply link with the same ID, OnClick. Only difference is the data-attribute which I thought could be used to differentiate the two. There are 2 reply divs that are styled to be hidden. The aim is once the reply link is clicked, the correct div will display below it.
The issue is, when you click any of the two Reply links, it only opens the first reply div below the first parent div. I'll created a little example to give a better understanding:
// Opens reply div and retrieves data-attribute (reply_id) to insert into MYSQL database
function replyLink(element) {
document.getElementById('reply').style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink() {
document.getElementById('reply').style.display = "none";
}
#comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
#comment #content{
border: none;
padding: 15px;
font-size: 12px;
}
#comment #link{
border: none;
padding: 5px;
margin-top: 5px;
}
#comment #link a{
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
#comment #link a:hover{
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
#reply{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div id="comment">
<div id="content">
Content #1
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='1'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
<div id="comment">
<div id="content">
Content #2
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='2'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
Would a java genius be able to help me out.
You can use the classes for styling and IDs with indexes to identify the unique div boxes.
Here is the working example
function replyLink(index) {
document.getElementById('reply_' + index).style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink(index) {
document.getElementById('reply_' + index).style.display = "none";
}
.comment {
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .content {
border: none;
padding: 15px;
font-size: 12px;
}
.comment .link {
border: none;
padding: 5px;
margin-top: 5px;
}
.comment .link a {
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
.comment .link a:hover {
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
.reply {
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">
Content #1
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(0)" data-test='1'>Reply</a>
</div>
</div>
<div class="reply" id="reply_0" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink(0)'>[Close]</a>
</div>
<div class="comment">
<div class="content">
Content #2
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(1)" data-test='2'>Reply</a>
</div>
</div>
<div class="reply" id="reply_1" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink(1)'>[Close]</a>
</div>
While the use of an id is straightforward when first working with JavaScript and HTML, it's use is discouraged as an anti-pattern. IDs make for brittle code (as you are seeing here) and don't scale well. Instead, don't use ids at all and instead use classes or a relative reference to the elements, such as this, .closest(), nextElementSibling, parentNode, etc.
Also, using hyperlinks as a "hook" to initiate some code upon a click event is semantically incorrect. Hyperlinks are for navigation and people who use screen readers will have difficulty navigating your page. Just about every visible HTML element supports a click event, so just attach a click handler directly to the element instead of wrapping the element with a hyperlink.
Lastly, there is no need for separate show and hide functions. Just add or remove a "hidden" class based on what was clicked.
You can see in my answer how much cleaner the HTML and JavaScript are without ids.
See comments inline below.
// Set up a single event handler for any clicks to any reply or Close
document.addEventListener("click", function(event){
// Check to see if the click originated at a Reply element
if(event.target.classList.contains("reply")){
// Find the closest ".comment" ancestor of the clicked reply
// element and then get the next element sibling to that and
// unhide it.
event.target.closest(".comment")
.nextElementSibling.classList.remove("hidden");
} else if(event.target.classList.contains("replyContainer")){
event.target.classList.add("hidden");
}
});
.hidden { display:none; }
.comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .reply{
padding: 5px;
margin-top: 5px;
}
.replyContainer{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">Content #1</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 1[Close]</div>
<div class="comment">
<div class="content">Content #2</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 2[Close]</div>
<div class="comment">
<div class="content">Content #3</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 3[Close]</div>
The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.
Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;
I'd like to visit my site: http://testsite.com/#accordion2 and for it to anchor down & open the 2nd accordion. How do I achieve this? I'd also like this to happen for the first accordion if the url was #accordion1.
Here's my Fiddle: http://jsfiddle.net/jmjmotb3/
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
if($(e.target).is('.active')) {
close_accordion_section(e.target);
}else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background: url("http://placehold.it/50x50") top right no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="accordion1" class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>
<div id="accordion2" class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">More information 2</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>
Check the window.location.hash property and go from there.
document.addEventListener('DOMContentLoaded', function() {
if (window.location.hash === 'x') {
// do x
}
});
I want to make my buttons change colour after clicking on another button. At the moment, I have an idea in mind... but that would be creating more html pages which is not what I want. The code below features 3 buttons where button1 is set as dark grey, and button2 and button3 are light grey. Clicking button2 or button3 should change to dark grey, and button1 should be light grey. I have tried researching on the internet and haven't found any solution to this.
Note: I have created my buttons using divs.
Here's a snippet of my code:
.select:hover {
background-color: #2a2a2a;
}
.select:visited {
background-color: pink;
}
.bcardunlaminated {
display: table-cell;
height: 37px;
width: 210px;
float: left;
background-color: #2a2a2a;
text-align: left;
margin-top: 10px;
line-height: 36px;
}
.bcardmatt {
display: table-cell;
height: 37px;
width: 225px;
float: left;
background-color: #757575;
text-align: left;
margin-left: 3px;
margin-top: 10px;
line-height: 36px;
}
.bcardspotuv {
display: table-cell;
height: 37px;
width: 230px;
float: left;
background-color: #757575;
text-align: left;
margin-left: 3px;
margin-top: 10px;
line-height: 17px;
}
.mat-font {
color: white;
font-size: 9pt;
text-align: center;
}
<div class="materialtable">
<div class="materialrow">
<a href="javascript:;" id=" hideaway1" onclick="document.getElementById('hideaway1').style.display='block';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='none';toggleTable();return false">
<div class="bcardunlaminated select">
<div class="mat-font">1</div>
</div>
</a>
<a href="javascript:;" id=" hideaway2" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='block';
document.getElementById('hideaway3').style.display='none';toggleTable2();return false">
<div class="bcardmatt select">
<div class="mat-font">2</div>
</div>
</a>
<a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='block';toggleTable3();return false">
<div class="bcardspotuv select">
<div class="mat-font">3</div>
</div>
</a>
</div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" style="display:block;">1</div>
<div id="hideaway2" style="display:none;">2</div>
<div id="hideaway3" style="display:none;">3</div>
Any suggestions?
Just add a change to the backgroundColor. I'm using orange here, use the one you want.
<a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='block';document.getElementById('hideaway1').style.backgroundColor='#f60';toggleTable3();return false">
You HAVE to use unique IDs, you are using the same with an space in front, what makes it very confusing and buggy
My suggestion - using jQuery since it seems you do not mind that based on your accepted answer:
You will need to change toggleTable to take an idx to toggle. You also likely want to make the container div of the links clickable instead of having the link. You will need to add a cursor:ponter to the CSS
$(function() {
$(".select").on("click",function(e){
e.preventDefault(); // only needed if .select are links
var idx = $.trim($(this).text());
$(".hideaway").hide();
$("#hideaway"+idx).show();
toggleTable(idx);
});
});
HTML:
<div class="materialtable">
<div class="materialrow">
<div class="bcardunlaminated select">
<div class="mat-font">
1
</div>
</div>
<div class="bcardmatt select">
<div class="mat-font">
2
</div>
</div>
<div class="bcardspotuv select">
<div class="mat-font">
3
</div>
</div>
</a>
</div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" class="hideaway">1</div>
<div id="hideaway2" class="hideaway">2</div>
<div id="hideaway3" class="hideaway">3</div>
Here is a sample of what I think you are looking for: http://jsfiddle.net/f60z1nj3/2/
using jquery:
$(function () {
$('.test').click(function(){
if ($(this).hasClass('darkGrey') ){
$(this.children).removeClass('darkGrey')
}
else
{
$(this.children).addClass('darkGrey');
$(this).siblings().children().removeClass('darkGrey');
}
})
});
So I've just given your selectable items a class instead of an id, which is a bit less specific than using an id. Then its a simple onlclick event to add and remove a highlight class I've called darkGrey. I've not included toggling the divs at the bottom, as it looks like you have a function to handle that.
I've been learning HTML and CSS for some weeks now and I start feeling comfortable with those. However I'm trying to learn JavaScript too.
I've been working on a button in HTML and CSS, you can view the demo of the button here.
I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.
Is there any simple or understandable way for creating a function which does this in JavaScript?
Here is the code I have:
HTML:
<div id="language-wrapper">
<a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
<div id="language-dropdown">
<h3>Choose your language</h3>
<a class="language-links" href="#">Chinese</a>
<a class="language-links" href="#">Danish</a>
<a class="language-links" href="#">Deutsch</a>
<a class="language-links" href="#">English</a>
<a class="language-links" href="#">Espanol</a>
<a class="language-links" href="#">Filipino</a>
<a class="language-links" href="#">Hindu</a>
<a class="language-links" href="#">Italiano</a>
<a class="language-links" href="#">Norsk</a>
<a class="language-links" href="#">Nederlands</a>
<a class="language-links" href="#">Polski</a>
<a class="language-links" href="#">Portugues</a>
<a class="language-links" href="#">Svenska</a>
<a class="language-links" href="#">Suomi</a>
<a class="language-links" href="#">Turkce</a>
<a class="language-links" href="#">Urdu</a>
<p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>
</div> <!-- end of language-dropdown class -->
</div> <!-- end of language-wrapper -->
CSS:
#language-wrapper { display: inline-block; }
#language-wrapper:hover #language-dropdown { opacity: 1; display: block; }
.language-icon {
color: #fff;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
left: 0; top: 0;
}
.fr { background: url("images/language-sprite.png") no-repeat 0 0; }
.fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }
.language-icon:before {
content:'\25BE';
width:0px;
height:0;
position:absolute;
right:16px;
top: 0;
}
.language-icon:hover:before {
color: #d13030;
content: '\25B4';
top: -1px;
}
/* ------------------ LANGUAGE DROPDOWN ------------------ */
#language-dropdown {
opacity: 0;
width: 1023px;
display: none;
margin-top: 3px;
left: 0;
position: absolute;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0px 3px 3px #b3b3b3;
}
#language-dropdown h3 {
color: #d13030;
font-size: 14px;
font-weight: normal;
padding: 5px 15px 0px 15px;
}
#language-dropdown p {
font-size: 12px;
padding: 0px 0px 10px 15px;
}
#language-dropdown a {
padding: 0px 0px 0px 15px;
}
.language-links {
font-size: 12px;
text-decoration: none;
color: #2793e6;
}
.language-links:hover {
text-decoration: underline;
}
it can be a basic toggle display function on onclik event:
function toggle(el) {
var tag=document.getElementById(el);
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');">Language</a>
test here : http://codepen.io/anon/pen/cHIrd/
note:
opacity:0; removed from your initial CSS
Better practice is to toggle class not style values :)
and maybe to set onclick event via javScript.
return false can be added to avoid link to href .
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');return false;">Language</a>
The Html
<button id="clickme">Clickme</button>
<h1 id="Another">Menu</h1>
The JavaScript:
document.getElementById("clickme").onclick=function(){
var el = document.getElementById('Another');
if (el.style.display == '') {
el.style.display = 'none';
alert("hide");
}else{
el.style.display = '';
alert("show");
}
};
Here is a sample