The sidebar is hidden and it will fadeIn once I have submitted the correct pin. But when I click any option in the sidebar more than once it is hiding! Why?
var pin = 1234;
$("#confirm_pin").click(function () {
var pin = document.getElementById("Pin").value;
if (pin == 1234) {
alert("You have now acesss!");
$(".management").hide();
$(".management_sidebar").fadeIn();
} else {
alert("Please, enter the correct pin");
}
});
$(".option_management").on("click", function () {
$(".page_holder_management").children().hide();
var option = $.trim($(this).text());
var find_click_object = $(this).attr("id");
if (option == "Home page") {
$("div.page_holder_management > div:nth-child(1)").fadeIn();
} else {
alert("false");
}
});
HTML
<div class="management_sidebar" style="display:none;">
<div class="header_management_sidebar">
<p style="position:absolute; margin:10px; font-weight:bold;"> Site administration </p>
</div>
<div id="management_content" STYLE="margin:20px; color:black;">
<div class="box_management">
<div class="option_management" id="1">Home page</div>
<div class="option_management" id="2">Table page</div>
<div class="option_management"> test </div>
<div class="option_management"> test </div>
</div>
</div>
</div>
<div class="page_holder_management">
<div class="management_homePage" style="display:none;">
<div class="header_management_homePage">
<p style="position:absolute; margin:10px; color:black; font-weight:bold;"> Change home page </p>
</div>
</div>
<div class="management_tablePage" style="display:none;">
<div class="header_management_homePage">
<p style="position:absolute; margin:10px; color:black; font-weight:bold;"> Change table page </p>
</div>
</div>
</div>
In the html code I made pages that should fadeIn when I click on any option in the sidebar and it should fadeOut when i click another option with another page should fadeIn!
Please tell me where I am doing wrong?
PLease check this http://kapten.mzzhost.com/test/System_management.php to test my problem! The pin is: 1234
Check the fiddle, you should make html and js relations simpler. I used data attributes there and if i understand correctly, this is what you want
var pin = 1234;
$("#confirm_pin").click(function () {
var pin = document.getElementById("Pin").value;
if (pin == 1234) {
alert("You have now acesss!");
$(".management").hide();
$(".management_sidebar").fadeIn();
} else {
alert("Please, enter the correct pin");
}
});
$(".option_management").on("click", function () {
var target = $(this).data('target');
$('.contents').hide();
$('.contents.' + target).fadeIn();
});
html changes with data attribute
<div class="option_management" data-target="management_homePage" id="1">Home page</div>
<div class="option_management" data-target="management_tablePage" id="2">Table page</div>
Related
Using this example:
$('[data-switch]').on('click', function(e)
{
var
$page = $('#page-2')
, blockToShow = e.currentTarget.getAttribute('data-switch')
;
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when requested. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
How would one go about changing the font color and weight of the button text when the content is being displayed (not based on when the button is clicked)?
I have tried to find posts with a similar request, but I am greatly struggling. Any direction would be appreciated.
There is many ways to do that, like this one :
const
btns_Switch = document.querySelectorAll('[data-switch]')
, page2_parent = document.querySelector('#page-2')
;
btns_Switch.forEach( btn =>
{
btn.onclick = e =>
{
page2_parent.dataset.switch = btn.dataset.switch;
setButtonActive();
}
})
setButtonActive(); // init on page load...
function setButtonActive()
{
let activBtn = page2_parent.dataset.switch;
btns_Switch.forEach( btn =>
btn.classList.toggle('active', activBtn === btn.dataset.switch ))
}
#page-2[data-switch="about_me"] > div:not(#about_me) ,
#page-2[data-switch="education"] > div:not(#education) ,
#page-2[data-switch="about_name_bravitus"] > div:not(#about_name_bravitus)
{
display : none;
}
button.active
{
background : yellow;
font-weight : bold;
}
<button data-switch="about_me">Click to read about me</button>
<button data-switch="education">Click to show my education</button>
<button data-switch="about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2" data-switch="education" > <!-- set initial ID value -->
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<div id="education" class="container" >
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" >
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
I am trying to write a code when click on the link it toggleSlide the relevant div and hide all other divs. But the issue I am facing, when I click to close same div then it reopens.
jQuery(document).ready(function($){
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian(){
var _this = $(this);
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
_this.toggleClass('opened');
filters.slideToggle();
}
});
.facetwp-facet {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>
Basic we have to check if the one you click on already is "opened"
var opened = _this.hasClass("opened");
Then we can use that to determent if we shall toggle the class or not.
if (!opened) {
_this.toggleClass('opened');
filters.slideToggle();
}
Demo
jQuery(document).ready(function($) {
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian() {
var _this = $(this);
var n = _this.hasClass("opened");
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
if (!n) {
_this.toggleClass('opened');
filters.slideToggle();
}
}
});
.facetwp-facet {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>
I would like the .box elements to show/hide based on the words the user searches for, so for example if a user types in 'Title2 Title1' because those words exists inside box one and two they will remain visible with the renaming .box elements hiding. All the text within the .box elements needs to be searchable not just that in the .title element.
Below is how far I've got. It's almost there but it's not quite working as hoped.
Any help would be great.
Many thanks.
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>
<script>
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')')) {
$(this).show();
} else {
$(this).hide();
}
});
});
} else {
$(".box").show();
}
});
</script>
You need to use a different search method. :contains does not work as you expect. Consider the following example.
$(function() {
function filter(e) {
var term = $(e.target).val();
if (term.length < 3) {
$(".box").show();
return;
}
$(".box").each(function(i, el) {
if ($(".content", el).text().indexOf(term) >= 0) {
$(el).show();
} else {
$(el).hide();
}
});
}
$("#search").keyup(filter);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">Box title one content</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">Box title two content</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">Box title three content</div>
</div>
So for example if on is entered, no filtering is performed. If one is entered, the script will look inside the content class of each box and if one is found in the text, it will be shown otherwise, it is hidden. If the User clears their search out, all items are shown.
Hide all box before iterate, then only show when match any words:
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
// Hide all .box
$(".box").each(function () {
$(this).hide();
})
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')') ) {
$(this).show();
}
});
});
} else {
$(".box").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>
Loop through all .boxs and using regex pattern matching, check either the title or content matches the search query. Show all matched boxes and hide all others
I have also fiddled it here
$("#search").on("input", function () {
var searchables=$('.box');
console.log(searchables)
var query=$(this).val();
searchables.each(function(i,item){
var title=$(item).find('.title').text();
var content=$(item).find('.content').text();
var rgx=new RegExp(query,'gi');
if(rgx.test(title) || rgx.test(content))
{
$(item).show();
}
else
{
$(item).hide();
}
})
})
I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.
I'm building the feature to take notes on my web app. I'm running into two problems:
I can't figure out how to recognize line breaks. I can hardcore text with line breaks, but when user clicks Edit it shows on the text the <br> and if he saves it just shows <br> in plain text.
Also if the user deletes all the text and clicks save it doesn't work and just prints <textarea>.
Any help is greatly appreciated!
$('#edit').click(function() {
$('#edit').hide();
$('#note').each(function() {
var content = $(this).html();
$(this).html('<textarea style="width:inherit">' + content + '</textarea>');
});
$('#save').show();
});
$('#save').click(function() {
$('#save').hide();
$('textarea').each(function() {
var content = $(this).val(); //.replace(/\n/g,"<br>");
$(this).html(content);
$(this).contents().unwrap();
});
$('#edit').show();
});
#note {
word-wrap: break-word;
max-width: 40rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<h5 class="card-tittle">Note</h5>
<hr>
<div class="container index">
<div class="row">
<div class="jumbotron col-md-12" id="note">
Test Text.
</div>
<div class="col-md-12">
<button class="btn btn-primary" id="edit"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<button class="btn btn-primary" id="save"><span class="glyphicon glyphicon-save"></span>Save</button>
</div>
</div>
</div>
</div>
I think you want to do something like this...
$('#edit').click(function() {
$('#edit').hide();
$('#note').each(function() {
var content = $(this).html().replace(/<br>/g,"\n");
$(this).html('<textarea style="width:inherit">' + content + '</textarea>');
});
$('#save').show();
});
$('#save').click(function() {
$('#save').hide();
$('textarea').each(function() {
var content = $(this).val().replace(/\n/g,"<br>"); //.replace(/\n/g,"<br>");
$(this).html("");
$(this).append(content);
$(this).contents().unwrap();
});
$('#edit').show();
});
Demo: https://www.codeply.com/go/hAL9pWWUFk