Currently have the following HTML:
<div class="wrapper">
<div id="sat0" class="sat"></div>
<div id="sat1" class="sat"></div>
<div id="sat2" class="sat"></div>
<div id="sat3" class="sat"></div>
<div id="sat4" class="sat"></div>
<div id="sat5" class="sat"></div>
<div id="sat6" class="sat"></div>
<div id="sat7" class="sat"></div>
<div id="sat8" class="sat"></div>
<div id="sat9" class="sat"></div>
<div id="sat10" class="sat"></div>
<div id="sat11" class="sat"></div>
</div>
I want the class="active" added to id="sat0" and id="sat6" on page load. Then a second later the active class should be remove from both and be added to the two next ones so id="sat1" and id="sat7". It should loop endlessly, so when gets to id="sat5" and id="sat11" the next would be "id=sat6" and id="sat0".
Currently using the following javascript.
<script>
$(document).ready(function(){
$("#sat0").addClass("active");
$("#sat6").addClass("active");
setTimeout(autoAddClass, 1200);
});
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length)
$(next).addClass('active');
else
$("#sat0").addClass("active");
$("#sat6").addClass("active");
setTimeout(autoAddClass, 1200);
}
</script>
It acts rather chaotically. Any thoughts?
The main reason you seem to get chaotic behavior is that you're always adding active back to #sat6, because you need to use a block in your else (really, I recommend always using blocks with control-flow statements) so the #sat6 part is conditional:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
Updated example:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
But another reason would be that the top sequence (starting with #sat0) continues longer than the other; you might want if (next.length == 2) instead of just if (next.length):
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length == 2) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
BTW, if you want to make it easier to add/remove divs, you don't need any of those id="..."; just use $(".sat:nth-child(1)") and $(".sat:nth-child(7)") (or if you have other elements in there, $(".sat:eq(0)") and $(".sat:eq(6)")) to start with:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length == 2) {
$(next).addClass('active');
} else {
$(".sat:nth-child(1)").addClass("active");
$(".sat:nth-child(7)").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div class="sat">0</div>
<div class="sat">1</div>
<div class="sat">2</div>
<div class="sat">3</div>
<div class="sat">4</div>
<div class="sat">5</div>
<div class="sat">6</div>
<div class="sat">7</div>
<div class="sat">8</div>
<div class="sat">9</div>
<div class="sat">10</div>
<div class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
(If you have multiple .wrapper that you're doing this in, you'll have to adjust things a bit to work within them individually...)
Related
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 just want to toggle a class from various items. I mean, I have 5 divs with .item class inside a div with .container class. Can I toggle a new class to those 5 .items? Maybe with a loop?
I was trying to do it but it seems that the loop goes infinite.
This is what I tried:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<button onclick="myFunction()"></button>
</div>
<script>
function myFunction () {
var x = document.getElementsByClassName("item");
for (i=0; i<x.length; i+1) {
x[i].classList.toggle('new-class');
}
}
</script>
I expect something like this at the end (maybe with some loop in JS):
<div class="container">
<div class="item new-class"></div>
<div class="item new-class"></div>
<div class="item new-class"></div>
<div class="item new-class"></div>
<div class="item new-class"></div>
</div>
You can do it by using the for loop and the classList.add() method.
function myFunction() {
var items = document.querySelectorAll('.item');
for(var i = 0; i < items.length; i++) {
items[i].classList.add('new-class');
}
}
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 want to append the data only into a specific ID myID. It only prints the last value of the loop which is 3.
setInterval(sample, 2000);
function sample()
{
for(var i=0;i<=3;i++)
{
$('.found .find').each(function() {
if(this.id == "myID")
{
// if the ID of this element is equal to #myID
// this is the place where the data will append
$(this).empty();
$(this).append(i);
}
});
}
}
HTML:
<div class="found">
<div class="find" id="myID"></div>
</div>
<div class="found">
<div class="find" id="anID"></div>
</div>
<div class="found">
<div class="find" id="anID2"></div>
</div>
empty removes all children from the given element, so you probably want to use it before the loop:
$('.found').empty();
for (var i=0; i <= 3; i++) {
$('.found').append(i);
}
This will empty out the container, then append your list of elements (or numbers).
This can be used in an MVC framework's render method to empty the container of the previous render before adding new content.
Try
$(function() {
setInterval(loop, 1000);
function loop() {
var n = "0123";
for(var i=0;i<=3;i++) {
$(".found").find(".find[id*=ID]").html(n);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="found">
<div class="find" id="myID"></div>
</div>
<div class="found">
<div class="find" id="anID"></div>
</div>
<div class="found">
<div class="find" id="anID2"></div>
</div>
Modified the code as You want it to happen just once
Run the original code if you want to keep doing it
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="found">
Hello World
</div>
<div class="found">
<div class="find" id="myID"></div>
</div>
<div class="found">
<div class="find" id="anID">Append here</div>
</div>
<div class="found">
<div class="find" id="anID2"></div>
</div>
<script>
$(document).ready(function(){
//$('#anID').empty();
for(var i=0;i<=3;i++)
{
$('<p>'+i+'</p>').appendTo('#anID');
//$('.found').append(i);
//$('.found').append("\n");
}
});
</script>
</body>
</html>
$(function() {
setInterval(loop, 1000);
function loop() {
$(".found").find(".find[id*=ID]").empty();
for(var i=0;i<=3;i++)
{
$(".found").find(".find[id*=ID]").prepend(i);
}
}
});
Let's say I have an HTML structure like this:
<li id="jkl">
<div class="aa">
<div class="bb">
<div class="cc">
<div class="dd">
<a ...><strong>
<!-- google_ad_section_start(weight=ignore) -->Test
<!-- google_ad_section_end --></strong></a>
</div>
</div>
</div>
<div class="ee">
<div class="ff">
<div class="gg">
<div class="excludethis">
<a...>Peter</a>
</div>
</div>
</div>
</div>
</div>
</li>
My goal is to set the content(innerhtml) of <li id="jkl"> to '' if inside of <li id="jkl"> there is any word of a list of words(In the example below, Wortliste) except when they are in <div class="excludethis">.
In other words, ignore <div class="excludethis"> in the checking process and show the html even if within <div class="excludethis"> there are one or more words of the word list.
What to change?
My current approach(that does not check for <div class="excludethis">)
Wortliste=['Test','Whatever'];
TagListe=document.selectNodes("//li[starts-with(#id,'jk')]");
for (var Durchgehen=TagListe.length-1; Durchgehen>=0; Durchgehen--)
{
if (IstVorhanden(TagListe[Durchgehen].innerHTML, Wortliste))
{
TagListe[Durchgehen].innerHTML = '';
}
}
with
function IstVorhanden(TagListeElement, Wortliste)
{
for(var Durchgehen = Wortliste.length - 1; Durchgehen>=0; Durchgehen--)
{
if(TagListeElement.indexOf(Wortliste[Durchgehen]) != -1)
return true;
}
return false;
}
Only has to work in opera as it's an userscript.