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.
Related
I am trying to design Google search page and facing some problems.
I have completed almost every thing but got stuck in aligning "Google Search" button and "I am feeling Lucky button" in line and in center below search bar.
Below is my HTML and CSS for entire layout.
body,a{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px;
margin: 5px;
text-align: center;
}
.i{
margin-left: auto;
margin-right: auto;
margin-top: 135px;
}
nav{
text-align: right;
padding-top: 5px;
}
.sb input{
border-radius: 25px ;
border: 0.5px solid ;
height: 40px;
width: 480px;
}
.foo{
font-size: medium;
padding-left: 40px;
padding-right: 40px;
}
<nav>
<div>
Google Image Search
Advance Search
</div>
</nav>
<img src="image.png" class="i">
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="gs">
<input type="submit" value="Google Search">
</div>
</form>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
Here is my output: http://jsfiddle.net/zqwmogvd/#&togetherjs=Rd6Qeg60cd
Here is how I would do it. I would wrap the two buttons in a parent div with a classname buttons-wrap or any class name of my choosing:
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="buttons-wrap">
<div class="gs">
<input type="submit" value="Google Search">
</div>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
</div>
</form>
I would then reference the .buttons-wrap class in CSS and use flexbox to center it:
.buttons-wrap {
display: flex;
justify-content: center;
margin-top: 3px;
}
If you don't know flexbox, you can also use the following:
.buttons-wrap>div {
display: inline-block;
margin-top: 3px
}
> selects the children elements.
.button-wrap {
display: flex;
justify-content:center;
margin-top:10px
}
flex is the value of css display. By using display:flex in parent elements, child elements automatically align like columns or rows with auto width and auto height.
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container.
I have a wordpress site with this image boxes
each box is an event, this events have tags ,also reflectes in a class, what i need to do is all the elements with an specific class ("free" in this case) to have a little non clickable button or a text with a background that says "Free" in the upper corner of the box, no, this boxes are generated with a plugin and its just a shortcode, so i cannot directly change the html, so i tried doing it with just css and javascript
This is a single Event with the tag (named "tag-gratis")
<article id="post-9072" class="regular post-9072 post type-post status-
publish format-standard has-post-thumbnail category-eventos185 tag-
culturales tag-fuera-del-barrio tag-gratis">
<div class="inner-wrap animated">
<div class="post-content">
<div class="content-inner">
<span
class="post-featured-img" style="background-image:
url(https://vivirenuevacba.com/wp-content/uploads/2019/01/genaro_perez_7-
800x589.jpg);"></span>
<div class="article-content-
wrap">
<span class="meta-
category"><a class="eventos185"
href="https://vivirenuevacba.com/category/eventos185/">EVENTOS</a></span>
<div class="post-
header">
<h3
class="title">
<a href="https://vivirenuevacba.com/museo-genaro-perez/">
Museo Genaro Pérez
</a>
</h3>
<span
class="meta-author"><span>By</span> <a
href="https://vivirenuevacba.com/author/Vics/" title="Entradas de Vics"
rel="author">Vics</a></span> <span class="meta-category">| EVENTOS</span>
</div><!--/post-header-->
</div><!--article-content-wrap-
->
</div><!--/content-inner-->
</div><!--/post-content-->
</div><!--/inner-wrap-->
</article><!--/article-->
Here is a simple button that i did with css
.button {
margin-top: 20px;
line-height: 60px;
font-weight: bold;
padding: 0 40px;
background: salmon;
border: none;
}
and here is my javascript
document.addEventListener('DOMContentLoaded', function() {
$(function() {
$('.tag-gratis').each(function() {
var button = document.createElement("button");
button.innerHTML = "GRATIS";
var body = document.getElementsByClassName(".tag-gratis");
body.appendChild(button);
});
});
});
</script>
Now the button doesnt appear and i just get a
"Uncaught TypeError: body.appendChild is not a function"
I don't think there is any need to use JavaScript here. A simple pseudo element would suffice.
.tag-gratis {
position: relative;
}
.tag-gratis img {
width: 100%;
}
.tag-gratis::after {
content: "FREE";
position: absolute;
top: 20px;
right: 20px;
padding: 5px 10px;
background: salmon;
color: white;
}
<article class="tag-gratis">
<img src="//placehold.it/300x150">
</article>
Since document.getElementsByClassName is a collection you need to pass the index to get th element
Try this
document.getElementsByClassName(".tag-gratis")
I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!
Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>
This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>
When I select an option from the dropdown, a set of buttons associated with that selection appears in a div (where it should). I then click one of those buttons which causes a second div to appear (#info, green background) and content associated with the button to appear inside of the div (as intended).
My issue is this:
Once the second div has appeared, if I go back to the initial dropdown and select a different option, I want the green #info div to disappear, where it currently stays visible and contains the content associated with the last button clicked despite having selected a different dropdown option.
I would SO appreciate any help anyone can provide! Thanks so much for taking a look. So grateful to have access to all of your smart brainz.
Here is my Fiddle
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "red") {
$(".box").not(".red").hide();
$(".red").show();
} else if ($(this).attr("value") == "green") {
$(".box").not(".green").hide();
$(".green").show();
} else if ($(this).attr("value") == "blue") {
$(".box").not(".blue").hide();
$(".blue").show();
} else {
$(".box").hide();
}
});
}).change();
$('.buttons button').click(function() {
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
});
.box {
padding: 20px;
margin-top: 20px;
border: 1px solid #000;
width: 200px;
height: 250px;
padding: 0px;
display: inline-block;
float: left;
}
#button-column {
text-align: center;
padding: 0px;
}
button {
font-size: 12px;
width: 100px;
height: 30px;
padding: 10px;
margin: 15px;
}
#info {
width: 250px;
height: 200px;
float: left;
display: inline-block;
text-align: center;
margin-left: 15px;
margin-top: 30px;
}
#dropdown {
width: 200px;
text-align: center;
}
.box h3 {
text-align: center;
}
.info {
background-color: green;
height: 200px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown">
<h3>I am a...</h3>
<select>
<option>Select</option>
<option value="green">Dinosaur</option>
<option value="red">Unicorn</option>
</select>
</div>
<div class="green box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="content">Content</button>
</li>
<li class="buttons">
<button data-link="mad">Mad</button>
</li>
<li class="buttons">
<button data-link="hungry">Hungry</button>
</li>
</ul>
</div>
<div class="red box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="shy">Shy</button>
</li>
<li class="buttons">
<button data-link="curious">Curious</button>
</li>
<li class="buttons">
<button data-link="sleepy">Sleepy</button>
</li>
</ul>
</div>
<div id="info">
</div>
<div id="hiddenDivs" style="display:none;">
<!-- Dinosaur Select -->
<div id="content">
<div class="info">
<h3>Laying in the sun is nice.</h3>
</div>
</div>
<div id="mad">
<div class="info">
<h3>Go knock some trees over!</h3>
</div>
</div>
<div id="hungry">
<div class="info">
<h3>Go make a salad!</h3>
</div>
</div>
<!-- Unicorn Select -->
<div id="shy">
<div class="info">
<h3>I like to hide in the forest.</h3>
</div>
</div>
<div id="curious">
<div class="info">
<h3>Wait until everyone is asleep.</h3>
</div>
</div>
<div id="sleepy">
<div class="info">
<h3>Napping under a shady tree is the best.</h3>
</div>
</div>
Here's an updated Fiddle.
You just need to hide and show the #info div on change or load.
So anytime the dropdown changes, that #info div will hide. And then, if someone clicks a button, it will show. That show() function will always run, but will be ignored if you're clicking on the button multiple times.
});
$("#info").hide(); // Hide
}).change();
$('.buttons button').click(function (){
$("#info").show(); // Show
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
I'm trying to get the icon to display in the middle of the words 'some text'.
Could anyone advise?
http://jsfiddle.net/LZxxB/50/
<div>
<div style="display:inline-block;">some</div>
<span class='ui-btn-icon-notext ui-icon-arrow-u-l' style="display:inline-block;"></span>
<div style="display:inline-block;">text</div>
</div>
Here is one way to do it. You basically make an icon button that is not a button.
The HTML:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
<span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
</span>
<div style="display:inline-block;">text</div>
</div>
The CSS:
.nonbuttonicon .ui-btn {
background: transparent;
cursor: default;
border: 0;
margin: 0;
}
.nonbuttonicon .ui-btn:hover{
background: inherit;
}
DEMO
UPDATE:
Here is a way without using jQM buttons and a single span:
<div>
<div style="display:inline-block;">some</div>
<span class="ui-alt-icon ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
<div style="display:inline-block;">text</div>
</div>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
.inlineIcon:after{
background-color: transparent;
}
Updated DEMO
An if you like the white icon on top of the round disk, the CSS becomes even simpler:
<span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
}
DEMO
These lines of code will reset the jquery mobile css that is displaying it differently. You might need to tweak it a little bit to fit your needs.
div span.ui-icon-arrow-u-l:after {position:relative;}
div span.ui-icon-arrow-u-l {display:inline-block;height:30px;margin-top:0;width:16px;}
Hope this helps.