Develop Reference

how do i compare 2 visible div numbers and display a div based on a number threshhold?

I'm trying to figure out how to code my following theory in jquery but i'm having trouble since im more of a front end designer/developer, i don't deal very much with comparing/parsing.
I have a div(#product) that contains 2 spans. 1 span that contains a number('.price-ship-1') and another hidden span that also contains a number ('.price-ship-2').
'.price-ship-1' always exists, and '.price-ship-2' exists some of the time; How do i check to see if both exist at the same time within '#product'?
If only '.price-ship-1' exists, base my number parsing from that number and display a hidden div. But if both exist, base my number parsing on '.price-ship-2' and add a class.
Currently i'm only checking 1 number and adding a class to another div but now need to check an additional number and add a class but i'm not sure how to write it. I realize i don't need the check below since '.price-ship-1' always exists, its only in there because I was trying to write it myself, but to no avail.
my current script is as follows:
if ($('.promo-ship-1').length){
$('.promo-ship-1').each(function(){
var $this = jQuery(this);
var number=$this.html();
number=number.substring(1);
number=parseFloat(number);
if(number > 99){$this.parents('.ship-banner').addClass('test123');}
});
}
Thank you for your time!
UPDATE:
i inherited the code and don't know it 100% yet. reading deeper into it, my issue is actually more complex than i initially thought... i may have to close the question for my purpose, but im sure somebody else may find it useful.

Based on what you've shared I've written a piece of code that would simulate your scenario. I believe you can use most of it in your own code:
$(function () {
// Just to work out the elements existence and visibility.
function calculate() {
var prod = $('#product');
var span1 = prod.find('.price-ship-1');
var span2 = span1.siblings('.price-ship-2');
var p = $('p');
if (span2.length <= 0) {
// Second element isn't there.
p.text('Second element is not there');
}
else if (span2.is(':visible')) {
// Second element is there and is visible.
p.text('Second element is there and is visible');
}
else {
// Second element is there and is invisible.
p.text('Second element is there and is invisible');
}
}
$('button').on('click', function () {
var op = $(this).data('id');
var el = $('#product .price-ship-2');
switch (op) {
case 'show':
el.show();
break;
case 'hide':
el.hide();
break;
case 'remove':
el.remove();
break;
case 'add':
$('<span>', {
class: 'price-ship-2'
}).text('50.00').appendTo($('#product')).show();
}
calculate();
});
calculate();
});
.price-ship-2 {
display: none;
}
#product {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<span class="price-ship-1">100.00</span>
<span class="price-ship-2">50.00</span>
</div>
<button data-id="show">Show price-ship-2</button>
<button data-id="hide">Hide price-ship-2</button>
<button data-id="remove">Remove price-ship-2</button>
<button data-id="add">Add price-ship-2</button>
<p></p>
Demo jsFiddle

check if $('#product').find('span').length is 1 or 2
depending upon the value you can parse the number and manipulate both the divs. There is no need for each statement.

if you want to check the existence of both price-ship-1 and price-ship-2 and both are beneath a div with id #product then it is more simple.
//try to only query the dom once, it is an expensive op
var productDiv = $('#product')
if (productDiv.length) {
productDiv.each(function () {
var $this = jQuery(this);
var priceShip2 = $('.price-ship-2', $this)
if (priceShip2.length) {
//PRICE 2 EXISTS
} else {
//ONLY PRICE 1 EXISTS
}
});
}

Jquery to check height and add class

I am trying to check which div has bigger height and than place a class inside the one that is greater.
I have this code
$(document).ready(function () {
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (sideNavMenu > mainColumn)
{
$(".col-md-3").addClass('dotRight');
}
else
{
$(".col-md-9").addClass('dotLeft');
}
});
The goal here is to check if sideNavMenu is greater than mainColumn than place dotRight on its div tag.
If the mainColumn is greater, then place dotLeft on its div tag.
But its not working.
Any suggestion how to change/improve it.
Thanks a lot

You should reference these by IDs and not classes, since there can be multiple elements with these class names on the page. There should only be one with each ID.
$(document).ready(function () {
var sideNavMenu = $("#sidebar").height();
var mainColumn = $("#main").height();
if (sideNavMenu > mainColumn) {
$("#sidebar").addClass('dotRight');
} else {
$(".#main").addClass('dotLeft');
}
});
Of course, you need to add the id's to your <div>s respectively.
The jQuery docs say:
Get the current computed height for the first element in the set of matched elements or set the height of every matched element.
But, I was just playing with it in jsfiddle and it seems to return an object containing the height of the first element.
http://jsfiddle.net/wwx2m/2/
Which means you should be able to do:
$(document).ready(function () {
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (JSON.stringify(sideNavMenu) > JSON.stringify(mainColumn)) {
$(".col-md-3").addClass('dotRight');
} else {
$(".col-md-9").addClass('dotLeft');
}
});
But the first way I said is preferred. This is not stable, since there can be more objects introduced with the same class. The only reason I'm even mentioning it is to explain why you were having problems with your original code. :)
http://jsfiddle.net/wwx2m/4/

I put the jsfiddle together for you
<html>
<div class='col-md-3'>
</div>
<div class='col-md-9'>
</div>
<script>
var sideNavMenu = $(".col-md-3").height();
var mainColumn = $(".col-md-9").height();
if (sideNavMenu > mainColumn){
$(".col-md-3").addClass('dotRight');
}
else{
$(".col-md-9").addClass('dotLeft');
}
jsFiddle
updated jsFiddle with Animation

How to remove duplicated content/value with jQuery

So, i have span element where i appending some content - sometimes this content is duplicated. How to remove this one value which is duplicate of another ...
This is how looks like my output html:
<span class="some_class">
"value01"
"value01"
"value02"
"value03"
"value03"
</span>
I can't add any function because i have no idea how to do this, can u help me?

If these values are being added by JS code, then You can make sth like this:
http://jsfiddle.net/Sahadar/Nzs52/5/
You just have to make object which will store all strings placed inside this span, then just before insertion check if this inserted string is already in store object.
function(event) {
var textareaValue = textarea.value();
if(insertedTexts[textareaValue]) {
event.preventDefault();
textarea.value('');
} else {
insertedTexts[textareaValue] = true;
someSpan.append("\""+textareaValue+"\"");
}
}
If these values are already inside span, use function as follows:
var someSpan = $('.some_class');
var insertedTexts = [];
var result = someSpan.text().match(/"\w+(?=\")/gm);
result = result.map(function(value) {
return value.substring(1,value.length);
});
result.forEach(function(value) {
if(insertedTexts.indexOf(value) === -1) {
insertedTexts.push(value);
}
});
var newSpanText = "\""+insertedTexts.join('""')+"\"";
someSpan.text(newSpanText);
console.info(result, insertedTexts);
It's rebuilding span text (trimming etc.) but main functinality is preserved.
jsFiddle working copy:
http://jsfiddle.net/Sahadar/kKNXG/6/

Create an array variable
var vals = [];
which keeps track of the items. Then, in your function that appends items to the span check:
if (vals.indexOf("Mynewvalue") > -1) {
// Add to the span...
}

jQuery javascript way of checking if some html exist on page

Before appending more code, I want to make sure:
<a href='index.php?option=com_content&view=article&id=36'>Hello</a>
isn't already on the html page inside the div where id='faqs'
<div id='faqs'>
<a href='index.php?option=com_content&view=article&id=36'>Hello</a>
</div>
What is the best way of doing this with jquery or javascript?
Thanks

The easiest way would be to use jQuery to select the element, and check the length property of the resulting object:
var anchor = $('#faqs a[href="index.php?option=com_content&view=article&id=36"]')
if(anchor.length == 0) {
// element isn't on the page
}

You could search using indexOf
var inBlock = $('#faqs').html();
if (inBlock.indexOf("<a href='index.php?option=com_content&view=article&id=36'>Hello</a>") == -1) {
$('#faqs').append ("<a href='index.php?option=com_content&view=article&id=36'>Hello</a>");
}

if (!$('a[href$="view=article&id=36"]', '#faqs').length) {
//does'nt exist
}

If the goal is to end up with the a tag as a child in the div tag, and thats it, then don't bother checking, just re add it, like this:
$('#faqs').html('');
$('<a />')
.attr('href', 'index.php?option=com_content&view=article&id=36')
.html('hello')
.appendTo($('#faqs'))​;​
However, if you genuinely need to check if it exists, then you can do something like this:
var exists = $('#faqs a[href="index.php?option=com_content&view=article&id=36"]').length > 0;
UPDATE
Finding the string in the html can be done as follows, but this is not a recommended solution. You may run into issues with different browsers encoding html in different ways etc (tested in chrome):
var stringToFind = 'Hello';
// need to replace the & ...
stringToFind = stringToFind.replace(/&/g, '&');
var exists = $('#faqs').html().indexOf(stringToFind) > -1;
if (exists) {
// do something
} else {
// do something else
}
Here's a working example -> http://jsfiddle.net/Uzef8/2/

How to empty the content of a div

Does someone know how to empty the content of a div (without destroying it) in JavaScript?
Thanks,
Bruno

If your div looks like this:
<div id="MyDiv">content in here</div>
Then this Javascript:
document.getElementById("MyDiv").innerHTML = "";
will make it look like this:
<div id="MyDiv"></div>

If you're using jQuery ...
$('div').html('');
or
$('div').empty();

An alternative way to do it is:
var div = document.getElementById('myDiv');
while(div.firstChild)
div.removeChild(div.firstChild);
However, using document.getElementById('myDiv').innerHTML = ""; is faster.
See: Benchmark test
N.B.
Both methods preserve the div.

If by saying without destroying it, you mean to a keep a reference to the children, you can do:
var oldChildren = [];
while(element.hasChildNodes()) {
oldChildren.push(element.removeChild(element.firstChild));
}
Regarding the original tagging (html css) of your question:
You cannot remove content with CSS. You could only hide it. E.g. you can hide all children of a certain node with:
#someID > * {
display: none;
}
This doesn't work in IE6 though (but you could use #someID *).

In jQuery it would be as simple as $('#yourDivID').empty()
See the documentation.

This method works best to me:
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
To use it we can deploy like this:
document.getElementsByID('DIV_Id').remove();
or
document.getElementsByClassName('DIV_Class').remove();

you can .remove() each child:
const div = document.querySelector('div.my-div')
while(div.firstChild) div.firstChild.remove()

You can empty your DOM using this:
const el = document.getElementById("MyDiv");
while (el.firstChild) {
el.removeChild(el.firstChild);
}
This is supposed to be faster than the traditionally used method : document.getElementById("MyDiv").innerHTML = "";