JQuery select class name that consists of 2 specific words

is there a way to select class name based on 2 words

for example these 5 classes

<div class="catsanddogs">1</div>
 <div class="cats and dogs">2</div>
 <div class="anddogs">3</div>
 <div class="catand">4</div>
 <div class="catsanddogs">5</div>

I want to select the class that consists of these 2 words cats, dogs

And only the first one will be effected

 <div class="catsanddogs">1</div>
 <div class="cats and dogs">2</div>
 <div class="catsanddogs">5</div>

then apply the changes on first one only because the three of them has the words
so it will select these 3

is that possible using jquery ??

I found a way to select class that start with certain word but I want anywhere in the class name

$('[class="catsanddogs"]').html('test');

but its only match the first one!

I know jquery has (:first ) but the problem with finding what matches these 2 names

replace second occurrence of comma with line break in string

Trying to figure out what’s the best way to insert a line break after the second comma in a string. Here’s what I’m currently using and it works, but I would like to know if a regex would be better for this.

var data = $('#test1').html();
var position = data.indexOf(",", data.indexOf(",") + 1);

String.prototype.replaceAt = function(index, replacement) {
  return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}

var newstr = (data.replaceAt(position, "<br />"));

$('#result').html(newstr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="test1">3131, abc street, ZZ, ZZ  128 376</span>
<br /><br />
<span id="result">###</span>

JQuery function overrides submit action and works only on second click

Hello I’m developing a website and wanted to add discount counter which takes value from element with price and calculates it with hidden attribute. It should work everytime user changes something in form-basket class. The problem is that it disables submit button action and price update, works only after second or third change in form. What could be the issue of such behavior? Here’s the website for test
Kup teraz button is the submit one

$(document).ready(function() {
    function promo_price() {
        if (document.getElementById('przecenajs')) {

            var cena = 0;
            var stara_Cena = 0;
            var procent = 0;
            cena = jQuery('#przecenajs').attr("data-cena");
            procent = jQuery('#przecenajs').attr("data-procent");
            cena = parseInt(cena);
            procent = procent / 100;
            console.log(procent);
            console.log(cena);
            stara_Cena = jQuery('.main-price').html();
            console.log(stara_Cena);
            stara_Cena = stara_Cena.substring(0, 5);
            console.log(stara_Cena);
            stara_Cena = parseInt(stara_Cena.split(',').join('.'));
            console.log(stara_Cena);
            if (!isNaN(cena)) {
                cena = parseInt(cena);
                stara_Cena = parseInt(stara_Cena + cena);
                $('.staraCena').remove();
                jQuery('.promojswynik').append('<span class="staraCena"><del>' + stara_Cena + ',00</del></span>');
            } else if (!isNaN(procent)) {
                stara_Cena = parseInt(stara_Cena * procent + stara_Cena);
                $('.staraCena').remove();
                jQuery('.promojswynik').append('<span class="staraCena"><del>' + stara_Cena + ',00</del></span>');
            }
            cena = 0;
            stara_Cena = 0;
            return false;
        }
    }
    promo_price();
    $('.form-basket, input:not(input[type="submit"])').on("change click keyup blur keypress", promo_price);
});

Deleting the first listitem from an unordered list without using the listitems id

I need to remove li on first place. How can I do it without using id of first li in the list? Because id can change and I need a method that works for every li.

My code:

<ul id="fortask1" class="adds">
  <li id="lik4" class="lid">..</li>
  <li id="lik3" class="lid">..</li>
  <li id="lik2" class="lid">..</li>
  <li id="lik1" class="lid">..</li>
</ul>

How do I restrict date range in bootstrap calendar plugin?

Hopefully, this post is in the right place.

enter image description here

I’m using bootstrap calendar plugin. How to restrict the previous and next range button in the bootstrap calendar?
So far as I am aware, the prev/next triggers should place near to calendar.js.

Here is the code I have so far in calendar.js:

Calendar.prototype.navigate = function(where, next) {
        var to = $.extend({}, this.options.position);
        if(where == 'next') {
            switch(this.options.view) {
                case 'year':
                    to.start.setFullYear(this.options.position.start.getFullYear() + 1);
                    break;
                case 'month':
                    to.start.setMonth(this.options.position.start.getMonth() + 1);
                    break;
                case 'week':
                    to.start.setDate(this.options.position.start.getDate() + 7);
                    break;
                case 'day':
                    to.start.setDate(this.options.position.start.getDate() + 1);
                    break;
            }
        } else if(where == 'prev') {
            switch(this.options.view) {
                case 'year':
                    to.start.setFullYear(this.options.position.start.getFullYear() - 1);
                    break;
                case 'month':
                    to.start.setMonth(this.options.position.start.getMonth() - 1);
                    break;
                case 'week':
                    to.start.setDate(this.options.position.start.getDate() - 7);
                    break;
                case 'day':
                    to.start.setDate(this.options.position.start.getDate() - 1);
                    break;
            }
        }

I added today as a pivot to this section in calendar.js:

else if(where == 'today') {
    // to.start.setTime(new Date().getTime());
    // Sunday 15 July, 2018
    var moonLanding = new Date('July 15, 2018 00:00:00 GMT+00:00');
    to.start.setTime(moonLanding.getTime());
}

Is there any way to limit date range?

Slide two items for two categories

Is there a possibility that for two categories (like in image), the latest item for two categories to be next or preview? Usually, in case with one category I have used Slick slider.

enter image description here

My HTML Code:

<div id="cat1">
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
</div>
<div id="cat2">
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
</div>

jQuery code:

$('.cat1').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});

The problem is that in this case, show only items from category one.

Animated class on addClass not working

I have the following CSS for an effect class:

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
.effect {
    animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

Using the the jquery.appear functionality, I add the class .effect when a button appears in the viewport. The class is indeed added to the button, but the shake is not done as intended. So my guess is you cannot add a class like I am doing now to show the user the effect. Or because it’s once…

Below the JS code:

$('.parent .link').appear();
$('.parent .link').on('appear', function(event, $elements) {
    $(this).addClass('effect');
});

Which correctly adds the class to below element:

<a class="link effect" href="/new-page">
    <span>Click me</span>
</a>

Trigger keydown on text-input with jQuery, retain value after event

Using Tampermonkey on an angularjs site.
I’m prepopulating an inputbox with a value whenever I open the url, but the search is triggered by typing. So I need a keydown-event ie “space” to trigger the search.

I’ve figured out how to trigger a keydown-event, but it overrides the value already in the inputbox.
How do I retain it, while still triggering a keydown?

(function() {
'use strict';

var herId = getParameterByName('Q');
window.setTimeout(function() {
    var el = document.querySelector('.form-control');
    el.value = herId;
}, 200);

window.setTimeout(function() {
    var e = jQuery.Event("keydown");
    e.which = 32; // # Some key code value
    $("input").val(String.fromCharCode(e.which));
    $("input").trigger(e);
}, 1600);
})();

function getParameterByName(name, url) {
   if (!url) url = window.location.href;
   name = name.replace(/[\[\]]/g, "\\$&");
   var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
   results = regex.exec(url);
   if (!results) return null;
   if (!results[2]) return '';
   return decodeURIComponent(results[2].replace(/\+/g, " "));
}

I’m using the delays because the page takes some time to load.

PHP extracting multiple images from div via post [on hold]

Trying to access the image data contained in a DIV with PHP after posting.

When the user selects an image, I’m automatically loading it into the “pictureviewer” div for viewing as follows:

HTMLCODE:

<form name="frmMain" action ="<?php echo(htmlentities($_SERVER['PHP_SELF'])); ?>"
                  method="post" enctype="multipart/form-data">
<input type="file" name="inputfile" id="inputfile" class="file" accept=".jpg, .jpeg, .png" multiple> 
<div class="col-md-12" style="padding:0;"><div name="pictureviewer" id="pictureviewer"></div></div>
</form>

JSCRIPT (loading into the pictureviewer div):

window.onload = function()
{  
    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("inputfile"); 
        filesInput.addEventListener("change", function(event)
    {
            var files = event.target.files; //FileList object
                var output = document.getElementById("pictureviewer");            
                for(var i = 0; i< files.length; i++)
                {
                    var file = files[i];

                    //Only pics
                    if(!file.type.match('image')) continue;
                    var picReader = new FileReader();                
                    picReader.addEventListener("load",function(event)
                    {                    
                        var picFile = event.target;                    
                        var div = document.createElement("div");
                        div.innerHTML = "<img class='pictureviewer' name='pictures[]' src='" + picFile.result + "' " +
                                "title='" + picFile.name + "'/>";                    
                        output.insertBefore(div, null); 
                    });                
                     //Read the image
                    picReader.readAsDataURL(file);
                }/* 'for(var i = 0; i< files.length; i++)' delimiter */
        }); 
    }    
}

After the form is posted, How can I access the images from the pictureviewer DIV to insert in my Database?
The following displays nothing:

if($_POST)
{
    if(isset($_POST["pictures"])) echo("yes");
}

I tried copying the contents of the pictureviewer div into a hidden input element via javascript before the form is posted as follows:

<form name="frmMain" action ="<?php echo(htmlentities($_SERVER['PHP_SELF'])); ?>"
                  method="post" onsubmit="return validateform(this);" enctype="multipart/form-data">
                <input type='hidden' name='hid_attachedpics' id='hid_attachedpics' value=''/>

To Strip out the div tags and put in a separator:::

document.getElementById("hid_attachedpics").value=document.getElementById("pictureviewer").innerHTML;    
// replace all occurrences of start img with :::img to split
// also remove the start and end div tags
document.getElementById("hid_attachedpics").value=document.getElementById("hid_attachedpics").value.replace(/<img class=/g, ":::<img class=");
document.getElementById("hid_attachedpics").value=document.getElementById("hid_attachedpics").value.replace(/<div>/g, "");
document.getElementById("hid_attachedpics").value=document.getElementById("hid_attachedpics").value.replace(/<[/]div>/g, "");

I’m now getting POST data, but something is wrong here. While binary code is writing to the Database, when I try to retrieve it, it’s not displaying as image

if(isset($_POST["hid_attachedpics"]))
{
$picdata=explode(":::", $_POST["hid_attachedpics"]);

for($x=1;$x<sizeof($picdata);$x++)
{
    $query = sprintf("insert into pictures(id, picture) values(null, '%s');", 
                    $conductevalid, $picdata[$x]);
    mysql_query($query) or $DBError=true;                
}
}

FORGET it fellas, I got it out. I had to strip the html in the for loop above and it worked:

$picdata[$x] = str_replace('<img class="pictureviewer" name="pictures[]" src="data:image/jpeg;base64,','', $picdata[$x]);
                $picdata[$x] = str_replace('" title="undefined">','', $picdata[$x]);