addClass javascript for body-click background - javascript

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'); }

Related

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');
}

Javascript Expandable Header not working correctly

I am using a piece of Javascript that enables the user to expand a h3 tag in my HTML document. It is working perfectly however when I refresh my page the first time the header is contracted and then when I refresh it a second time the header is expanded again.
I would like it to just stay expanded and not contract ever but I am unsure what changes I may need to make to the code:
I should point out that when the user visits the page for the first time the header is already expanded. I do that by calling the function from within the body tag.
<body onLoad="expandcontent('sc1')">
This is the code:
var enablepersist = "on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious = "yes" //Collapse previously open content when opening present? (yes/no)
if (document.getElementById) {
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}
function getElementbyClass(classname) {
ccollect = new Array()
var inc = 0
var alltags = document.all ? document.all : document.getElementsByTagName("*")
for (i = 0; i < alltags.length; i++) {
if (alltags[i].className == classname)
ccollect[inc++] = alltags[i]
}
}
function contractcontent(omit) {
var inc = 0
while (ccollect[inc]) {
if (ccollect[inc].id != omit)
ccollect[inc].style.display = "none"
inc++
}
}
function expandcontent(cid) {
if (typeof ccollect != "undefined") {
if (collapseprevious == "yes")
contractcontent(cid)
document.getElementById(cid).style.display = (document.getElementById(cid).style.display != "block") ? "block" : "none"
}
}
function revivecontent() {
contractcontent("omitnothing")
selectedItem = getselectedItem()
selectedComponents = selectedItem.split("|")
for (i = 0; i < selectedComponents.length - 1; i++)
document.getElementById(selectedComponents[i]).style.display = "block"
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function getselectedItem() {
if (get_cookie(window.location.pathname) != "") {
selectedItem = get_cookie(window.location.pathname)
return selectedItem
} else
return ""
}
function saveswitchstate() {
var inc = 0,
selectedItem = ""
while (ccollect[inc]) {
if (ccollect[inc].style.display == "block")
selectedItem += ccollect[inc].id + "|"
inc++
}
document.cookie = window.location.pathname + "=" + selectedItem
}
function do_onload() {
uniqueidn = window.location.pathname + "firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist == "on" && typeof ccollect != "undefined") {
document.cookie = (get_cookie(uniqueidn) == "") ? uniqueidn + "=1" : uniqueidn + "=0"
firsttimeload = (get_cookie(uniqueidn) == 1) ? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload = do_onload
if (enablepersist == "on" && document.getElementById)
window.onunload = saveswitchstate

Unable To get Selected text on Enter key press from list box

I am trying for smart search on my web page, so in my search on Click event I am getting Text which is selected in same textarea and but when I try with On keypress I'm unable to do find text of selected item. I am using jquery1.4.2 and tried option:select but still fail to do so...
My Code for click
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_smartSearch').keyup(function(e) {
var str = document.getElementById('ctl00_ContentPlaceHolder1_smartSearch');
//alert("hi");
if (str.value.length >= 2) {
if (e.keyCode != 40 && e.keyCode != 38 && e.keyCode != 13) {
var str1 = str.value;
var str2 = str1.replace(' ', '+')
var url = "../SiteCache/90D/SmartGetQuoteData.aspx?Type=EQ&text=" + str2;
$("#ajax_response_smart").load(url);
}
$("#ajax_response_smart").show();
$('#listEQ li').live('click', function() {
var selected = $(this).text();
$("#ajax_response_smart").remove();
if (selected != "") {
var scripcode = selected.split("|");
document.getElementById('ctl00_ContentPlaceHolder1_smartSearch').value = scripcode[0];
document.getElementById('ctl00_ContentPlaceHolder1_hdnCode').value = scripcode[2];
}
});
var $listItems = $('#listEQ li');
var key = e.keyCode,
$selected = $listItems.filter('.ui-state-hover'),
$current;
if (key != 40 && key != 38 && key != 13)
{ return; }
else {
$listItems.removeClass('ui-state-hover');
}
if (key == 40) // Down key
{
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
}
else {
$current = $selected.next();
}
}
else if (key == 38) // Up key
{
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
}
else {
$current = $selected.prev();
}
}
else if (key == 13) {
}
}
else {
$("#ajax_response_smart").hide();
}
if (typeof $current != "undefined") {
$current.addClass('ui-state-hover');
}
});
$("#ajax_response_smart").mouseover(function() {
var $listItems1 = $('#listEQ li');
$selected1 = $listItems1.filter('.ui-state-hover');
$(this).find("#listEQ li").mouseover(function() {
($selected1).removeClass("ui-state-hover");
$(this).addClass("ui-state-hover");
});
$(this).find("#listEQ li").mouseout(function() {
$(this).removeClass("ui-state-hover");
});
});
});
Please Suggest and Thanks in advance
hey i got my the answer i called the keypress event on my textbox in aspx page and from there i came on the currently paosted js page then on keypress event i got value.i.e not able to use keyup event to detect enter

Trigger alert function event for text area node in Firefox Javascript XUL

I want to trigger an alert if the user reached max number of characters in the text area.
Generally my plugin fill the user node values directly to my plugin text box. So, I want to generate an alert if the user reached var mymaxlength = 20;
var mymaxlength = 20;
if ( nodeName == "textarea" && node.value.length >= mymaxlength ) {
// call your popup / alert function
alert('hi, you have reached 20 characters');
}
I have tried the above code, it didn't work without any errors? In my full code, the general alert is working but the alert inside the loop is not working?
1. Is it a good way of triggering an alert in onKeypress : function (e)? or
2. Would it be possible to trigger an alert if the user node has filed 20 characters in the fillText : function (node)?
Please assist me!
This is the full code:
run : function () {
//alert(content.document.cookie);
//alert("-"+content.document.cookie+"-");
var cookieTest = content.document.cookie
var JSESSIONID = pdees.get_Cookie("JSESSIONID");
if(verifyConnection){
if(JSESSIONID && cookieTest){
//var result = verifyUserIdentity(JSESSIONID);
var head = content.document.getElementsByTagName("head")[0];
var body = content.document.body;
//var style = content.document.getElementById("pdees-style");
//var allLinks = content.document.getElementsByTagName("pdees");
var foundLinks = 0;
//extract text element from body
if(document.getElementById && document.createTreeWalker && typeof NodeFilter!="undefined"){
var tw=document.createTreeWalker(body,NodeFilter.SHOW_TEXT,null,false);
lookForpdees(tw);
}
addJScode();
idpdeesbutton=0;
}else{
alert("You should connect to the Application Environment to be authentified");
}
}else{
//var result = verifyUserIdentity(JSESSIONID);
var head = content.document.getElementsByTagName("head")[0];
var body = content.document.body;
//var style = content.document.getElementById("pdees-style");
//var allLinks = content.document.getElementsByTagName("pdees");
var foundLinks = 0;
//extract text element from body
if(document.getElementById && document.createTreeWalker && typeof NodeFilter!="undefined"){
var tw=document.createTreeWalker(body,NodeFilter.SHOW_TEXT,null,false);
lookForpdees(tw);
}
addJScode();
idpdeesbutton=0;
}
},
onKeypress : function (e) {
var mymaxlength = 20;
var node = e.target;
var nodeName = node.nodeName.toLowerCase();
//text area cache onKeyPress code
//alert('hi1');
if ( nodeName == "textarea" && node.value == "" && e.keyCode == 13 ) {
pdees.fillText(node);
return;
}
if ( nodeName == "textarea" && node.value.length >= mymaxlength ) {
// call your popup / alert function
alert('hi, you have reached 20 characters');
}
// this node is a WYSIWYG editor or an editable node?
if ( ( nodeName != "html" || node.ownerDocument.designMode != "on" ) && node.contentEditable != "true" )
return;
if ( node.textContent == "" && e.keyCode == 13 ) {
pdees.fillText(node);
return;
}
if (!node.tacacheOnSave) {
pdees.fillText(node);
}
},
onChange : function (e) {
var node = e.target;
var nodeName = node.nodeName.toLowerCase();
//alert("onChange : "+nodeName);
if ( nodeName != "textarea" )
return;
pdees.fillText(node);
},
onInput : function (e) {
var node = e.target;
var nodeName = node.nodeName.toLowerCase();
//alert("onInput : "+nodeName);
// Only for textarea node
if ( node.nodeName.toLowerCase() != "textarea" )
return;
if ( node.value == "" )
return;
pdees.fillText(node);
},
fillText : function (node) {
nodeSRC = node;
if ( node.nodeName.toLowerCase() == "textarea" )
{
//alert('hi');
userContent = node.value;
//alert(userContent);
}
else if ( node.nodeName.toLowerCase() == "html" ) {
userContent = node.ownerDocument.body.innerHTML;
//alert(userContent);}
}
else // element.contentEditable == true
userContent = node.innerHTML;
},
emptyNodeSRC : function (node){
if ( node.nodeName.toLowerCase() == "textarea" ) {
node.value = "";
}
else if ( node.nodeName.toLowerCase() == "html" ) {
node.ownerDocument.body.innerHTML = "";
}
else // element.contentEditable == true
node.innerHTML = "";
},
};
}();
Finally, I have found my problem and I have succeed to trigger mu custom alert:
In this function fillText : function (node)where I can trigger an alert for the userContent. So I made a length and triggered an alert for it.
else if ( node.nodeName.toLowerCase() == "html" ) {
userContent = node.ownerDocument.body.innerHTML;
//alert(userContent);
var myTest = userContent.length;
if(userContent.length == 30)
{
alert('Hi, there!');
}
}
else // element.contentEditable == true
userContent = node.innerHTML;
},
Note: For complete code please refer to my question.

How to disable dates before current date in jsdatepicker

I am using jsdatepicker to display calendar.
http://javascriptcalendar.org/javascript-date-picker.php
function initialize()
{
new JsDatePick({
useMode:2,
limitToToday :false,
target:"deadlinedate",
dateFormat:"%d-%m-%Y"
});
}
Is there any way to disable all dates before current date.
Any help would be appreciated.
Thanks
download the full version not the min one and change the JsDatePick.prototype.isAvailable function > for < in all 3 ifs
You can add startDate and finishDate parameters to jsDatePick. There is a "limitToToday" control statement in this library (jsDatePick.full.1.x.js) and you can add 2 control statement after this statement, like this:
if (this.oConfiguration.limitToToday){
if ( ! this.isAvailable(this.currentYear, this.currentMonth, parseInt(oDay.getDate()) - 1 ) ){
disabledDayFlag = true;
aDayDiv.setAttribute("isJsDatePickDisabled",1);
}
}
// Your startDate method
if (this.oConfiguration.startDate != ''){
startDate2 = new Date(Date.parse(this.oConfiguration.startDate));
if ( (oDay.getFullYear() < startDate2.getFullYear()) ||
(oDay.getFullYear() == startDate2.getFullYear() && oDay.getMonth() < startDate2.getMonth()) ||
(oDay.getFullYear() == startDate2.getFullYear() && oDay.getMonth() == startDate2.getMonth() && oDay.getDate() < startDate2.getDate() )
)
{
disabledDayFlag = true;
aDayDiv.setAttribute("isJsDatePickDisabled",1);
}
}
// Your finisDate method
if (this.oConfiguration.finishDate != ''){
finishDate2 = new Date(Date.parse(this.oConfiguration.finishDate));
if ( (oDay.getFullYear() > finishDate2.getFullYear()) ||
(oDay.getFullYear() == finishDate2.getFullYear() && oDay.getMonth() > finishDate2.getMonth()) ||
( oDay.getFullYear() == finishDate2.getFullYear() && oDay.getMonth() == finishDate2.getMonth() && oDay.getDate() > finishDate2.getDate() )
)
{
disabledDayFlag = true;
aDayDiv.setAttribute("isJsDatePickDisabled",1);
}
}
You should update "JsDatePick.prototype.setConfiguration" :
JsDatePick.prototype.setConfiguration = function(aConf){
this.oConfiguration.isStripped = (aConf["isStripped"] != null) ? aConf["isStripped"] : false;
this.oConfiguration.useMode = (aConf["useMode"] != null) ? aConf["useMode"] : 1;
this.oConfiguration.selectedDate = (aConf["selectedDate"] != null) ? aConf["selectedDate"] : null;
this.oConfiguration.target = (aConf["target"] != null) ? aConf["target"] : null;
this.oConfiguration.yearsRange = (aConf["yearsRange"] != null) ? aConf["yearsRange"] : [1971,2100];
this.oConfiguration.limitToToday = (aConf["limitToToday"] != null) ? aConf["limitToToday"] : false;
this.oConfiguration.field = (aConf["field"] != null) ? aConf["field"] : false;
this.oConfiguration.cellColorScheme = (aConf["cellColorScheme"] != null) ? aConf["cellColorScheme"] : "ocean_blue";
this.oConfiguration.dateFormat = (aConf["dateFormat"] != null) ? aConf["dateFormat"] : "%m-%d-%Y";
this.oConfiguration.imgPath = (g_jsDatePickImagePath.length != null) ? g_jsDatePickImagePath : "img/";
this.oConfiguration.weekStartDay = (aConf["weekStartDay"] != null) ? aConf["weekStartDay"] : 1;
**this.oConfiguration.startDate = (aConf["startDate"] != null) ? aConf["startDate"] : '';
this.oConfiguration.finishDate = (aConf["finishDate"] != null) ? aConf["finishDate"] : '';**
....
}
When you create your DatePicker object:
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"div_calendar",
startDate:"05.01.2013",
finishDate:"05.31.2013"
});
EDIT:
Read it wrong, you have to set the minimum date for that in your option:
var options = {minDate:'03/18/2011',maxDate:today}
$("#datestart").datepicker(options);

Categories