We Keep Coding

Rewrite script from js to jquery

I have a script that I want to make more bulletproof. At the moment the page breaks because class box-tip is not found. To make this bulletproof and not throw an error how can I rewrote the below code to jquery getting the same results as js
function applyRecommendedSleeveLength(selectedVal) {
if (selectedVal !== undefined) {
var recommendedVal = map[selectedVal.trim()];
var selected = $('.attribute__swatch--selected:first div').text().trim();
if (recommendedVal === null || recommendedVal === undefined) {
selectedVal = $('.attribute__swatch--selected:first div').text().trim();
recommendedVal = map[selectedVal.trim()];
}
if (selected === null || selected === '' || selected === undefined) return;
var recommendedLis = document.querySelectorAll('[class*="attribute__swatch--length-' + recommendedVal + '"] div');
recommendedLis.forEach(function(recommendedLi, i) {
if (recommendedLi !== null && recommendedLi !== undefined) {
recommendedLi.classList.add('showBorder');
$('.box-tip').show();
var currentPosition = $('.showBorder').parent().position().left;
var sleeveRecom = document.getElementsByClassName('box-tip');
var info = sleeveRecom.length ? sleeveRecom[0] : false;
info.style.paddingLeft = currentPosition + -75 + 'px';
}
});
}
}

If you want to check if the div exists, you can use this (using JQuery):
if ( $('.box-tip').length != 0 ){
//do something
}
OR- since you've edited your post- without JQuery:
if ( document.getElementsByClassName('box-tip').length != 0 ){
//do something
}

Just use jQuery for all of this. If the class doesn't exist the jQuery methods won't cause errors
function applyRecommendedSleeveLength() {
$('.box-tip').show().first().css('paddingLeft', (currentPosition - 75) + 'px');
}

How can i convert .outerHTML to .text()

I want to convert item.outerHTML to .text(), Actually I want to convert the html to text, now what do I do ?
$(imgAttr).each(function(index,item) {
var valImg = $(item).attr("alt");
if (typeof valImg == typeof undefined || valImg == "") {
$(".url-res").append(item.outerHTML.text());
}
});

i think if condition is not being satisfied try below one
$(imgAttr).each(function(index,item) {
var valImg = $(item).attr("alt");
if (typeof valImg ==='undefined' || valImg == "") {
$(".url-res").append(item.outerHTML.text());
}
});

Generate a div with the outerhtml as it's html property using jQuery, then use text() with that object.
$('.ele').each(function(index, item) {
var valImg = $(item).attr("alt");
if (typeof valImg == "undefined" || valImg == "") {
// -------------------^------ you can use "undefined` here
$(".url-res").append($('<div/>', {
html: item.outerHTML
}).text());
}
});
Or you can use outerText property
$('.ele').each(function(index, item) {
var valImg = $(item).attr("alt");
if (typeof valImg == "undefined" || valImg == "") {
// -------------------^------ you can use "undefined` here
$(".url-res").append(item.outerText).text());
}
});

if-statements with && and || in JavaScript

code:
// if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" || ".png")
if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && image.substring(image.length-4) != ".png")
{
// do stuff
}
context: Trying to do an if-statement in JavaScript which uses the && and || operators but it's not working out... Might be due to the fact of how JavaScript returns true-like and false-like values.
EDIT:
full code:
function validateContent(title, rating, link, image, desc)
{
var flag = true;
// add more if-statements
if (title == "")
{
$("#inputTitle").css("background-color", "red");
flag = false;
}
if (rating == 0)
{
$("#selectRating").css("background-color", "red");
flag = false;
}
if (link.substring(0,26) != "http://www.imdb.com/title/")
{
$("#inputLink").css("background-color", "red");
flag = false;
}
// if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" || ".png")
//if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && image.substring(image.length-4) != ".png")
//if ((image.substring(0,7) != "http://") && (image.substring(image.length-4) != ".jpg") && (image.substring(image.length-4) != ".png"))
//if (image.substring(0,7) != "http://" && (image.substring(image.length-4) != ".jpg" || image.substr(image.length-4) != ".png"))
//if (/^http:\/\/.*\.(jpg|png)$/.test(image))
if ((image.substring(0,7) != "http://") && ((image.substring(image.length-4) == true) != ".jpg") && ((image.substring(image.length-4) == true) != ".png"))
{
$("#inputImage").css("background-color", "red");
flag = false;
}
return flag;
}
function addContent()
{
var title = $("#inputTitle").val();
var rating = $("#selectRating option:selected").index();
var link = $("#inputLink").val();
var image = $("#inputImage").val();
var desc = $("#textareaDescription").val();
if (validateContent(title, rating, link, image, desc))
{
document.forms.formFilmerPHP.submit();
}
}
function disableOption(pos)
{
$("#selectRating option:eq(" + pos + ")").prop("disabled", true);
}
function validateInputs(inputType)
{
// add more cases
switch(inputType)
{
case "title":
var title = $("#inputTitle").val();
if (title != "")
$("#inputTitle").css("background-color", "white");
break;
case "rating":
var rating = $("#selectRating option:selected").index();
if (rating != 0)
$("#selectRating").css("background-color", "white");
break;
case "link":
var link = $("#inputLink").val();
if (link.substring(0,26) == "http://www.imdb.com/title/")
$("#inputLink").css("background-color", "white");
break;
}
}
function preventDefault()
{
$("#btnAddContent").click(function(event) {event.preventDefault();});
}
function addEventListeners() // QUESTION: when to use anonymous functions and when not to when adding eventlisteners in order to safely attach functions without invoking them?
{
// misc eventlisteners
$("#selectRating").on("focus", function() {disableOption(0);});
// real-time polling of invalid input correction
$("#inputTitle").on("input", function() {validateInputs("title");}); // QUESTION: takes some time before this fires, how to make it fire more quickly?
// ANSWER: use the "oninput" event, previously used onkeydown
$("#selectRating").on("change", function() {validateInputs("rating");});
$("#inputLink").on("input", function() {validateInputs("link");});
// main eventlisteners
$("#btnAddContent").on("click", function() {addContent();});
}
function init()
{
preventDefault();
addEventListeners();
}
/* method used to test during development */
function devtest()
{
}
$(document).ready(init);
EDIT:
var a = image.substring(0,7);
var b = image.substring(image.length-4);
alert(a);
alert(b);
if(a != "http://" && b != ".jpg" && b != ".png")
{
$("#inputImage").css("background-color", "red"); // <-- not being executed
flag = false;
}
return flag;
can't get the $("#inputImage").css("background-color", "red"); statement to execute even though the condition should be evaluated to true.

The below code will be evaluated as true when the first part of the string isn't http:// and the strings last four characters are neither .jpg nor .png
if (image.substring(0,7) != "http://" &&
image.substring(image.length-4) != ".jpg" &&
image.substring(image.length-4) != ".png")

Ok, after a night of good sleep, here's the proper solution:
var imagebegin = image.substring(0,7);
var imageend = image.substring(image.length-4);
if(imagebegin != "http://" || (imageend != ".jpg" && imageend != ".png"))
{
$("#inputImage").css("background-color", "red");
flag = false;
}
return flag;
The validation will occur only if the beginning of the string is "http://" and the end is either ".jpg" or ".png", if either of these conditions aren't met then the if-statement will evaluate to true and the statements within will be executed (including setting the flag to false).

sorry i didnt read your answer proper but i think i gave the right hint anyway
if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && (image.substring(image.length-4) != ".png" || image.substring(image.length-4) != 'or'))

addClass javascript for body-click background

i need to add one class at body when i click on.
i know is : $("body").addClass.("ex4Trigger"); but it doesn't work.
I want that when I click on the body, it does something like that =>
....
i dont know if he as possible with that :
var sasClickUrl = "/link/open";
var sasClickTarget = "_self";
document.write('<style>');
document.write('body {');
document.write('background-image: url("/gallery/background/image.jpg")!important;');
document.write('background-repeat: repeat-y;');
if ('top' == 'top with offset') {
document.write('background-position:center 0px;');
} else {
document.write('background-position:center top;');
}
if ('FFFFFF' != "") document.write('background-color: #FFFFFF;');
document.write('padding: 0px 0 0 0;');
if (0) document.write('background-attachment: inherit;');
if (sasClickUrl != "") document.write('cursor: pointer;');
document.write('}');
if (sasClickUrl != "" && !0) document.write('body > *{cursor: default;}');
document.write('</style>');
if (sasClickUrl != "") {
function OpenWin(page) {
if (sasClickTarget == "_parent") window.open(page);
else document.location = page;
}
sasBackClick2213491 = function (e) {
var bglink = sasClickUrl;
EE = e ? e : event;
if (!EE) return;
var tg = EE.target ? EE.target : EE.srcElement;
if ((!tg || tg.tagName != "BODY") && tg.parentNode.tagName != "BODY") return;
var BackLink = OpenWin("" + bglink);
};
document.onclick = sasBackClick2213491;
}
document.write('\r\n');
document.write('\r\n');
thx for help
(PS Sorry for my bad english)

$('body').click('function'){ $(this).addClass('ex4trigger'); }

javascript form cookies - select only opening cookie for first 10 indexes

I have never used cookies before, so I am using a peice of code I am very unfamiliar with.
It was working all fine, until I noticed just now that for select boxes, it is not working for any values after the tenth index. (for index 10 and above).
I have looked at the cookie stored on my system, and it appears t be saving them correctly. (I saw select10) ETC stored properly.
When it runs onload of body however, it is not loading in the values properly.
Here is the cookie code I am using:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var expDays = 100;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1) { endstr = document.cookie.length; }
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg) return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
// use the following code to call it:
// <body onLoad="cookieForms('open', 'form_1', 'form_2', 'form_n')" onUnLoad="cookieForms('save', 'form_1', 'form_2', 'form_n')">
function cookieForms() {
var mode = cookieForms.arguments[0];
for(f=1; f<cookieForms.arguments.length; f++) {
formName = cookieForms.arguments[f];
if(mode == 'open') {
cookieValue = GetCookie('saved_'+formName);
if(cookieValue != null) {
var cookieArray = cookieValue.split('#cf#');
if(cookieArray.length == document[formName].elements.length) {
for(i=0; i<document[formName].elements.length; i++) {
if(cookieArray[i].substring(0,6) == 'select') { document[formName].elements[i].options.selectedIndex = cookieArray[i].substring(7, cookieArray[i].length-1); }
else if((cookieArray[i] == 'cbtrue') || (cookieArray[i] == 'rbtrue')) { document[formName].elements[i].checked = true; }
else if((cookieArray[i] == 'cbfalse') || (cookieArray[i] == 'rbfalse')) { document[formName].elements[i].checked = false; }
else { document[formName].elements[i].value = (cookieArray[i]) ? cookieArray[i] : ''; }
}
}
}
}
if(mode == 'save') {
cookieValue = '';
for(i=0; i<document[formName].elements.length; i++) {
fieldType = document[formName].elements[i].type;
if(fieldType == 'password') { passValue = ''; }
else if(fieldType == 'checkbox') { passValue = 'cb'+document[formName].elements[i].checked; }
else if(fieldType == 'radio') { passValue = 'rb'+document[formName].elements[i].checked; }
else if(fieldType == 'select-one') { passValue = 'select'+document[formName].elements[i].options.selectedIndex; }
else { passValue = document[formName].elements[i].value; }
cookieValue = cookieValue + passValue + '#cf#';
}
cookieValue = cookieValue.substring(0, cookieValue.length-4); // Remove last delimiter
SetCookie('saved_'+formName, cookieValue, exp);
}
}
}
// End -->
</script>
I beleive the problem lies with the following line, found about 3/4 of the way down the code block above (line 68):
if(cookieArray[i].substring(0,6) == 'select') { document[formName].elements[i].options.selectedIndex = cookieArray[i].substring(7, cookieArray[i].length-1); }
Just for reference, here is the opening body tag I am using:
<body style="text-align:center;" onload="cookieForms('open', 'ramsform', 'decksform', 'hullsform', 'crewform', 'shipwrightform'); Swap(crew0z,'crew0i'); Swap(crew1z,'crew1i'); Swap(crew2z,'crew2i'); Swap(crew3z,'crew3i'); Swap(crew4z,'crew4i'); Swap(crew5z,'crew5i'); Swap(crew6z,'crew6i'); Swap(crew7z,'crew7i'); Swap(crew8z,'crew8i'); Swap(crew9z,'crew9i');" onunload="cookieForms('save', 'ramsform', 'decksform', 'hullsform', 'crewform', 'shipwrightform');">
(Please ignore the swap()'s as they are unrelated)
Page I am working on can be found: http://webhostlet.com/POP.htm

In both the open and save codes, change:
document[formName].elements[i].options.selectedIndex
to:
document[formName].elements[i].selectedIndex
options is an array of all the options, the selectedIndex property belongs to the select element that contains them.
Change:
cookieArray[i].substring(7, cookieArray[i].length-1)
to:
cookieArray[i].substring(6)
You were off by 1 because you forgot that it's 0-based counting. The second argument isn't needed, it defaults to the rest of the string.
The reason it worked for the first 10 menu items is a quirk of substring: if the second argument is lower than the first, it swaps them! So "select5".substring(7, 6) is treated as "select5".substring(6, 7), which gets the last character of the string. But for the longer strings, it was `"select35".substring(7, 7), which is an empty string.