I need to make 2 div content visible by pressing a button.
I do not use "getElementsById" since the Id should be unique. The divs will be in different location so I cannot wrap then with another div.
I am aiming of using plain JS.
Background for doing this is to have a button for demos where one iframe will show an app, and the other iframe will show the app description. The button click should therefor activate 2 divs (that are spreadout in the code).
function display_both_divs() {
document.getElementsByClassName('boxes').style.display = "block";
}
body {
background-color: pink;
}
.boxes {
display: none;
}
.button {
width: 200px;
height: 60px;
}
<button
class="button"
type="button"
name="button"
onclick="display_both_divs()"
> Show boxes content
</button>
<div class="boxes">box_1</div>
<div class="boxes">box_2</div>
You need to loop over the elements retrived by getElementsByClassName:
function display_both_divs() {
Array.from(document.getElementsByClassName('boxes')).forEach(e => e.setAttribute('style','display:block'));
}
body {
background-color: pink;
}
.boxes {
display: none;
}
.button {
width: 200px;
height: 60px;
}
<button
class="button"
type="button"
name="button"
onclick="display_both_divs()"
> Show boxes content
</button>
<div class="boxes">box_1</div>
<div class="boxes">box_2</div>
look here: JS: iterating over result of getElementsByClassName using Array.forEach
You could put both the div within another div and set show/hide that div using unique id
HTML
<div id="superbox">
<div class="boxes">box_1</div>
<div class="boxes">box_2</div>
</div>
Script
function display_both_divs() {
document.getElementById('superbox').style.display = "block";
}
You can do this using JQuery.
function display_both_divs() {
$('.boxes').css('display','block')
}
body {
background-color: pink;
}
.boxes {
display: none;
}
.button {
width: 200px;
height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button
class="button"
type="button"
name="button"
onclick="display_both_divs()"
> Show boxes content
</button>
<div class="boxes">
<div>box_1</div>
<div>box_2</div>
</div>
Seems the most straightforward way is to utilize the fact that [getElementsByClassName] returns an array. I can then specify each div named boxes. No loops, no frameworks needed:
function display_both_divs() {
document.getElementsByClassName('boxes')[0].style.display = 'block';
document.getElementsByClassName('boxes')[1].style.display = 'block';
}
Related
There are 3 buttons in my code.
One is to add more files. (.btn-plus)
One is to remove the one added. (.btn-minus)
One is to reset the file. (.btn-reset)
I could add more input with (.btn-plus) button.
How could I delete only the one I click among every input I add with (.btn-plus)?
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".btn-minus").click(function(){
$(this).nextUntil('li').remove()
})
$(".btn-reset").click(function(){
$(".board-box__attachments input").value = "";
})
li {
width : 60%;
background : lightblue;
list-style : none;
padding : 0.5em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
<button class="btn-reset">Reset</button>
</div>
</li>
</ul>
You have to use on() to attach event to dynamically added element. Then use closest() to find currently clicked element's parent.
$("body").on("click", ".btn-minus", function(){
$(this).closest('li').remove();
})
$(this).nextUntil("li") doesn't match anything. It only searches siblings of this, and the button doesn't have any li siblings. If you want to select the li containing the button, use $(this).closest("li").
You also need to use event delegation to bind an event handler to dynamically-created elements.
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".board-box__attachments").on("click", ".btn-minus", function(){
$(this).closest("li").remove()
})
li {
width : 50%;
background : lightblue;
list-style : none;
padding : 1em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
</div>
</li>
</ul>
There are 2 issues with you code:
Your element which contains btn-minus is being created dynamically. So the click event would not work instead you need to use on event.
$(".btn-minus").click(function(){
So instead of this you need to use
$(document).on('click', '.btn-minus', function() {
Also you need to use following code to remove element.
$(this).closest('li').remove();
Please see the updated JSFiddle
Here you can creating elements dynamically so once the page is loaded, browser has no knowledge of '.btn-minus'
Try this:
$(document).on('click', '.btn-minus', function(){
$(this).closest('li').remove()
})
Hope this helps!
I'm trying to implement CSS nth-child on every number of elements. If a certain number is reached I want to hide the first element and make it reappear if the number reduces again.
The problem is that somehow the nth-child still counts the hidden element and thus wrongly implements the styling. Is this a bug or am I doing it wrong?
NOTE: The same thing also happens if I use jQuery
http://jsfiddle.net/bedex78/uZ5wn/23/
The View:
<div ng-app>
<div ng-controller="TheCtrl">
<p>Amount to add: <input type="text" ng-model="amount" ng-init="amount=1"></p>
<div class='holder'>
<div ng-class='elements.length < 6 ? "inside" : ""'
ng-hide="elements.length >= 6">
<button class='button' ng-click="add(amount)">Add more</button>
</div>
<div class='inside' ng-repeat="(k,v) in elements">
{{ $index }} Remove
</div>
</div>
</div>
</div>
The JS (AngularJS):
function TheCtrl($scope) {
$scope.elements = [{id:1},{id:2}]
$scope.add = function(amount) {
for (i=0; i < amount; i++){
$scope.elements.push({id:$scope.elements.length+1});
}
};
$scope.remove = function(index) {
$scope.elements.splice(index, 1);
};
}
The CSS:
.holder {
width: 300px;
height: 400px;
border: 1px solid black;
}
.inside {
height: 30px;
border: 1px solid black;
}
.inside:nth-child(3n+1) {
background-color: yellow;
}
.inside a {
float: right;
}
It happens because hidden element is still in DOM. So it is count as a child and styles applied accordingly.
You can try to use ng-if instead of ng-hide. It will make div disappear from DOM and styles will work fine.
Example
I have some containers with ids="container1", "container2", "container3"...
They can have one of two types of tags inside: tables or canvas.
I want to hide one of them depending on the device orientation.
I have tried with this
$('[id^=container]:has(canvas)').hide();
or
$('[id^=container]:has(table)').hide();
but both hide all the containers, don't filtering their inside tags.
You can do
var x = $('[id^=container]').find("table").length;
// Will be 0 if no table inside it
if(x==0) { .. }
else { .. }
You can use classes on your containers instead of ids. Here's a JSFiddle demo.
For better performance in modern browsers, use $( "your-pure-css-selector" ).has( selector/DOMElement ) instead.
Source: https://api.jquery.com/has-selector/
Basically I made a 3 containers. One with a table, one with a canvas and one with nothing.
<div class="container green">
<table></table>
</div>
<div class="container blue">
<canvas></canvas>
</div>
<div class="container red"></div>
And a quick CSS to have the divs visible.
div.container{
display: inline-block;
height: 50px;
margin: 10px;
width: 50px;
}
div.green{
background-color: green;
}
div.blue{
background-color: blue;
}
div.red{
background-color: red;
}
And to complete it, a jQuery that executes when the document is ready.
$(document).ready(function(){
$('div.container').has('canvas').hide();
});
If you know the element by which you want to grab the container is not nested within additional tags, you can use the parentNode property of an HTML element to climb up the DOM tree and hide the parent.
document.querySelector("[id^=container] > table").parentNode.style.display= "none";
Example that demos the concept:
document.getElementById("input").addEventListener("change", function() {
document.getElementById("container1").style.display = "block";
document.getElementById("container2").style.display = "block";
document.querySelector("[id^=container] > " + this.value).parentNode.style.display = "none";
});
#container1 {
border: 1px solid red;
}
#container2 {
border: 1px solid blue;
}
<select id="input">
<options>
<option value="table">Hide the table</option>
<option value="canvas">Hide the canvas</option>
</options>
</select>
<div id="container1">Table
<table></table>
</div>
<div id="container2">Canvas
<canvas></canvas>
</div>
I didn't realized I had a global container with id= "container*".
What a silly mistake. Sorry for stealing your time, and thank you everyone!
I'm trying to change the text and color of a button when the user clicks it.
I am trying to change the text from "Search" to "Close".
I have attempted to code it, and have posted what I tried in jsfiddle.
now another problem is I can't figure out why jsfiddle isn't running the code, haha, but maybe someone can figure it out regardless of the jsfiddle glitches.
Without further ado, my code...
HTML:
<form>
<p>
<button class="btn submit" type="submit" onClick="changeHeight();">Search</button>
<button class="btn cancel" onClick="changeHeight2();">Reset</button>
<div id="SearchDiv">Here I am</div>
</p>
</form>
CSS
p{
text-align:center;
background-color: rgb(222,222,222);
}
.btn{
margin-top:10px;
margin-bottom:10px;
font-size: 22px;
color:rgb(255,255,255);
width: 150px;
height: 60px;
outline: none;
border-radius:5px;
border:0;
}
.submit{
background-color: rgb(44,228,191);
}
.submit:hover{
background-color: rgb(24, 188, 156)!important;
}
.submit:active{
background-color: rgb(15,121,100)!important;
}
.cancel{
background-color: rgb(244,123,130);
}
.cancel:hover{
background-color: rgb(237,28,36)!important;
}
.cancel:active{
background-color: rgb(154,12,19)!important;
}
#SearchDiv {
background-color:purple;
height:50px;
display:none;
}
JS
function changeHeight() {
$('#SearchDiv').fadeIn(500);
}
function changeHeight2() {
$('#SearchDiv').fadeOut(200);
}
http://jsfiddle.net/fdkzp9dm/8/
You have a couple of things you need to change:
You need to change the fiddle from onload to No wrap in <body> as #Shaunak correctly commented.
You need to pass the element if you're not selecting it in the function. So you either do onClick="changeHeight($(this))" or inside the JS function you do $(el).
You need to check for el.text() == "Search" and to set using el.text("Close"), since you're checking the text inside and not a value attribute if you're doing el.value (that returns undefined for your example).
The last glitch is because the button is of type submit, and whenever clicking it the request failed and it overwritten the HTML.
So, basically:
function changeHeight(el) {
$('#SearchDiv').fadeToggle(500);
if (el.text()=="Search") {
el.text("Close");
}
else {
el.text("Search");
}
}
Fiddle
Using thecss and the text jquery's attributes will do the work:
$(document).ready(function() {
$('#button_id').click(function(){
$(this).text('another text')
$(this).css('height', '100px')
})
})
Here's a demo
Change your button like:
<button class="btn submit" type="submit" onClick="changeHeight($(this), $('#SearchDiv'));">Search</button>
Change your javascript function like so:
function changeHeight(btn, div)
{
if (div.is(":visible") )
{
btn.val("Search").css("color", "#ffffff"); // Color: White
div.fadeOut(500);
}
else
{
btn.val("Close").css("color", "#000000"); // Color: Black
div.fadeIn(500);
}
}
I have a question about how I can dynamically change a href="" in a button.
The jsfiddle below shows a button fixed at the bottom of the viewport starting at the landing page:
http://jsfiddle.net/Hm6mA/3/
The html of the button is like so:
<div class="button">
<a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
<img src="img/down.png" alt="down">
</a>
</div>
When it is clicked I want it to scroll to the next section and change the href="" to the following section of the page. So, when it is first clicked, the href will change to #second. It would obviously also need to change when the user manually scrolls past a section.
This is for a single page website. How would I go about such a thing?
Use .prop() to change its value
$(".button").on('click', function(){
$('.button').find('a').prop('href', '#services');
});
Demo
You can use fullPage.js plugin to achieve what you want. Maybe it is faster than coding it from cero :)
Demo fullPaje.js
Page
I am not used to jquery. Here is a pure javascript solution. It surely changes the hash value.
<body>
<div id="sections">
<section id="s100">asdfasd</section>
<section id="s101"></section>
<section id="s102"></section>
<section id="s103"></section>
<section id="s104">asdfasdasdfsdf</section>
<section id="s105"></section>
</div>
<div class="nav-bar">
<a id="next-button" class="button" href="#s100">Next</a>
</div>
<script type="text/javascript">
var sections = document.getElementById("sections");
var nextButton = document.getElementById('next-button');
sections.onscroll = function (evt) {
}
var counter = 100;
var limit = 105;
// closure
nextButton.onmouseup = function (evt) {
var incCounter = function () {
// add your custom conditions here
if(counter <= limit)
return counter++;
return 0;
};
var c = incCounter();
if(c != 0)
this.setAttribute('href', "#s" + c);
}
</script>
</body>
CSS
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sections {
height: 50%;
width: 100%;
overflow: scroll;
}
.nav-bar {
margin: 30px 20px;
}
.button {
text-decoration: none;
border: 1px solid #999;
padding: 10px;
font-size: 120%;
}
I have written a small jQuery plugin for that, just pushed it to GitHub. https://github.com/ferdinandtorggler/scrollstack
What you basically want to do is calling
$('.button').scrollstack({stack: ['#first', '#second', ... ]});
You dont even need the link when you call it on the button. So check it out and let me know if it works for you. ;)
Here you can try it and read more: http://ferdinandtorggler.github.io/scrollstack/