How to show container on click with Localstorage? - javascript

I'm trying to show container on click with localstorage. I mean that when you click the button, CSS classess:is-hidden and is-visible will be saved and remembered by browser.
This is my code:
var comments = document.getElementById("js-comments");
if (comments) {
comments.addEventListener("click", function() {
localStorage.setItem('comments', 'true');
comments.classList.add("is-hidden");
var container = document.getElementById("js-comments__inner");
container.classList.add("is-visible");
if (localStorage.getItem('comments') == 'true') {
container.classList.add("is-visible");
}
});
}
HTML markup:
<div class="comments">
<button class="comments__button" id="js-comments">Load comments</button>
<div class="comments__inner" id="js-comments__inner">
<h3 class="h4">Comments</h3>
</div>
</div>
Idea is: when you click on the button and the comments__inner elements then they receive the CSS clasess.

Related

How to show hidden div that have data on edit page in Django forms

Iam trying to display an hidden div that have data, on the edit page using javascript in Django forms.
This is the script
<script>
const checkbox = document.getElementById('commute_id');
const box = document.getElementById('box');
checkbox.addEventListener('click', function handleClick() {
if (checkbox. Checked) {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
});
</script>
Checkbox code
<div class="ui_kit_checkbox">
<div class="df mb20">
<span>
{{form.commute_check|as_crispy_field }}
</span>
</div>
</div>
commute_check = forms.BooleanField(required=False, widget=forms.CheckboxInput(attrs={'id':'commute_id'}))
Div to show and hide
<div class="commute" ID="box" style="display:none" >
<div class="mb20" STYLE=" display:inline-flex !important;" >
<span style="padding-right:10px;">
{{ form.mon|as_crispy_field }}
</span>
</div>
</div>
This works when clicking the checkbox and adding data for the first time. But when in the edit page the check box is ticked but the div is hidden
Need help. Please share if nay have better idea for this scenario.

How to select specific elements with JS that are dynamically created?

<div class="gallery-container">
<?php while (have_rows('gallery')): ?>
[...]
<div class="toggle-container">
<button class="toggle-button active" onclick="gridView()">Grid</button>
<button class="toggle-button" onclick="listView()">List</button>
</div>
<div class="gallery-items grid-items">
[...Gallery Items...]
</div>
<?php endwhile; ?>
</div>
What would be the best way to select specific elements on a page when the elements are created with a while loop shown above. It's an ever-growing list and elements can also be removed.
In this example I am generating a page full of small galleries together with the toggle buttons for the Grid/List view next to each gallery.
I am trying to make all of those buttons work with just the gallery they are generated together with.
I know how to select them based on their index manually, but I don't know how I could tweak the code to be able to make it work with every small gallery separately.
This is what I came up with to make it work with the first gallery:
<script>
const button = document.getElementsByClassName('toggle-button');
const element = document.getElementsByClassName('gallery-items');
function listView() {
if ( element[0].classList.contains('grid-items') ){
element[0].classList.remove("grid-items");
}
button[0].classList.toggle('active');
button[1].classList.toggle('active');
}
function gridView() {
if ( !element[0].classList.contains('grid-items') ){
element[0].classList.add("grid-items");
}
button[0].classList.toggle('active');
button[1].classList.toggle('active');
}
</script>
You might consider using event delegation instead: add a click listener to .gallery-container. If the clicked target is a .toggle-button, run the appropriate logic, selecting the relevant surrounding elements on click:
document.querySelector('.gallery-container').addEventListener('click', ({ target }) => {
if (!target.matches('.toggle-button')) {
return;
}
const toggleContainer = target.parentElement;
const btns = toggleContainer.children;
if (target === btns[0]) {
btns[0].classList.add('active');
btns[1].classList.remove('active');
} else {
btns[0].classList.remove('active');
btns[1].classList.add('active');
}
const galleryItems = toggleContainer.nextElementSibling;
if (target === btns[0]) {
galleryItems.classList.add('grid-items');
} else {
galleryItems.classList.remove('grid-items');
}
});
.active {
background-color: yellow;
}
.grid-items {
background-color: red;
}
<div class="gallery-container">
<div class="toggle-container">
<button class="toggle-button active">Grid</button>
<button class="toggle-button">List</button>
</div>
<div class="gallery-items grid-items">
[...Gallery Items...]
</div>
<div class="toggle-container">
<button class="toggle-button active">Grid</button>
<button class="toggle-button">List</button>
</div>
<div class="gallery-items grid-items">
[...Gallery Items 2...]
</div>
</div>
Note that there's no need to explicitly test if a classList.contains a particular class before adding it (though, there's no harm in doing so, it's just unnecessary).

onclick switch div position

Brief Description: Need to switch the position of the div's when i click on them.
Requirement: If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Here is my code:
Note - i have switched the div's with a checkbox, note - only the top one is switching, i want to achieve the switching on clicking
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('#check').change(function () {
//alert('check clicked');
if ($(this).is(':checked')) {
$('#div1').insertAfter($('#div2'));
} else {
$('#div1').insertBefore($('#div2'));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="div1">Hello</div>
<div id="div2">World</div>
</div>
<br>
<div>
<div id="div1">Hello2</div>
<div id="div2">World2</div>
</div>
<br>
click me to switch Hello,World<input type="checkbox" name="check" id="check"/>
If i click on hello,world these 2 should switch , if i click on hello2,world2 those 2 will switch.
Please help.
If I get you right this is what you're looking for:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
alert("div swapped");
})
$('.click').click(function (evt) {
var $div = $(evt.target).closest('.switch');
$div.next('.switch').after($div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
<div class="switch">Hello</div>
<div class="switch">World</div>
</div>
<br>
<div class="click">
<div class="switch">Hello2</div>
<div class="switch">World2</div>
</div>

jQuery replace div content

I am playing around with Bootstrap modal and I want to change content of div when clicking a button. Here is the code :
html code of modal content
<div class="modal-content">
<div class="modal-body">
<div id="login-box" class="animated fadeIn">
Login form
<button id="show-register">Register</button>
</div>
<div id="register-box" class="animated fadeIn">
Register form
<button id="show-login">Login</button>
</div>
</div>
</div>
css styling
#register-box {
display: none;
}
javascript function to hide/show div
$(document).ready(function(){
loginRegisterSwitch();
});
function loginRegisterSwitch(){
var registerBtn = $("#show-register");
var loginBtn = $("#show-login");
var registerBox = $("register-box");
var loginBox = $("#login-box");
registerBtn.on('click',function(){
loginBox.hide();
registerBox.css('display','block');
});
loginBtn.on('click', function(){
registerBox.hide();
loginBox.css('display','block');
});
}
When user clicks register button, login-form div hides and register box shows.I can't get this code working(When user click register button , register div shows but login div does not hide). I would like to know if there is a better way to achieve this for example using jQuery html()
You're missing the # in the selector for the registerBox.
Change var registerBox = $("register-box"); to var registerBox = $("#register-box");

Giving a DIV a maximize button

I currently have a div on my page that I would like a user to be able to click and maximize the div so it appears over the whole screen. I would like it to be similar to how Gmail has a button that allows you to maximize what the user is looking at, and then return to the original size with another click of a button.
The problem I ran into is that my div contains 3 divs inside of it.
Here is my HTML
<div id="pre">
<div id="pre-title">Pre Reading</div>
<div id="pre-text">blahhh.</p></div>
</div>
<div id="passage">
<div id="passage-title">2.2.3</div>
<div id="passage-text">blahlkdsfjahlskdjfh</div>
</div>
<div id="media">
<div id="media-title">Media Videos</div>
<div id="media-text">even more garbage</div>
</div>
These div's are placed directly next to each other on the page and I would like it if I could include a button next to the title that would allow the user to make the section larger, like they were maximizing the readings.
Just giving you the glimpse, change styling as per your requirement.
WORKING:DEMO
JS
$(document).ready(function () {
$(".readmore").click(function () {
var readMore = $(this).parent().attr("id");
var mainDiv = $("#" + readMore).parent().attr("id");
var textDiv = mainDiv +"-text";
$("."+ textDiv).toggleClass("maximize");
});
$(".close").click(function () {
$(".pre-text, .passage-text, .media-text").removeClass("maximize");
});
});
<script>
$(document).ready(function() {
$('#pre').click(function(e) {
$('#pre').toggleClass('maximized', 500); // 500 ms to animate
} );
} );
</script>
<style>
#pre {
width: 50px;
}
#pre.maximized {
width: 500px;
}
</style>

Categories

Resources