Develop Reference

How to edit HTML value if its in a class that cointains a specific href with javascript?

Well I am learning javascript and I am trying to write a function which would look if(href.contains(1234567) and change class="price" value to any number.
I tried googling but I cant seem to find an answer to this
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
I expect class="price" value to be changed to some number

You can use the a[href*=1234567]+.price selector to do it.
a[href*=1234567] select all <a> elements that have a href attribute value containing "1234567" and +.price select element has class price placed immediately after that a[href*=1234567].
Demo:
$('a[href*=1234567]+.price').text(123456)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div></a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
<a href="https:someUrl.com/test">
</a>
<div class="price">
ValueNoNeedsToBeAddedHere
</div>

A solution with jQuery:
function myFunction() {
var str = $('#link').attr('href');
if (str.indexOf("1234567") >= 0){
var x = document.getElementsByClassName("price");
var y = x[0];
y.classList.add('myClass');
y.classList.remove('price');
y.innerHTML = "123456"
}
}
myFunction();
.myClass{
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a id="link" href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>

You can do without jquery :-
<div class="product-info">
<a href="https:someUrl.com/1234567" id="link_id" onclick="check(this.href)">
<div class="title">
Some Sweet Title
</div></a>
<div class="price" id="setvalue">
ValueHereNeedsToBeAdded
</div>
</div>
function check()
{
event.preventDefault();
var href = document.getElementById("link_id").getAttribute("href");
if(href.includes(1234567))
{
document.getElementById('setvalue').innerHTML = '1313133';
}
}

jQuery callback function to check number of child elements on element click

I have a set of "div" whose children count I want to check when a user fadeOut images under that div block, if the all childrens have be closed out i want to call the function: kind of like:
edited: the current code always alerts YES whenever the div is faded,
how do i destroy the DOM entirely without having to use :visible
filter. getting rid of the entire card class after fading out
considering the HTML:
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100' />
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'> <span class='fa fa-plus-circle fa-fw'> </span>Join </button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
</div>
and the jquery below:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.card').closest('scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.length < 1) alert('yes');
});
});
when the <span class = 'close-x'> × </span> is clicked the
entire <div class='card'> is fadedOut, then on fadeout, if no more
cards exist or the last cards have been faded, then alert('yes');

Assuming that multiple .card elements are nested in the same parent, you can check if all the siblings have faded out.
In your original markup, you have an unclosed </div>, which causes the .card elements not to be siblings of each other, I believe this is a typo on your part, since it is the most parsimonious explanation.
Since .fadeOut() hides the element, you can simply check if the filtered set of :visible returns a length of 1 or more:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
Here is a proof-of-concept example:
$(function() {
$('.close').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
// Get wrapping ancestor
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
// Filter out those that are not visible, and check for remaining visible cards
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
});
/* Just styles for a dummy call-to-action element in .card */
span.close {
cursor: pointer;
color: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrolling-wrapper">
<div class="card">Card 1. <span class="close">Click to hide me.</span></div>
<div class="card">Card 2. <span class="close">Click to hide me.</span></div>
<div class="card">Card 3. <span class="close">Click to hide me.</span></div>
<div class="card">Card 4. <span class="close">Click to hide me.</span></div>
<div class="card">Card 5. <span class="close">Click to hide me.</span></div>
</div>

In your callback you may simply test if at least a card is visible:
if ($(this).closest('.card').siblings('.card:visible').length < 1) alert('yes');
$('.img-wrap .close-x').on('click', function () {
var card = $(this).closest('.card');
card.fadeOut('slow', function () {
if ($(this).closest('.card').siblings('.card:visible').length < 1) console.log('yes');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
</div>

jQuery not working on dynamically generated same divs

I am trying to make a comment reply section. I am loading the same div for reply which I use for commenting using $('#1').append($('.enterComment').html()); where 1 is the id of the div which will be displayed when reply is clicked.
.enterComment div contains a hidden submitPost button which will be displayed as soon as the user starts typing comment.
That div is loading properly but The problem for me is that when I loaded the same div in reply section and as I start typing anything in that it only displays the hidden div in the main comment div and not in the reply one.
My html is
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div id="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
For reply I have
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>
and script is
$("body").on('focus', 'textarea', function() {
$('#commentOptions').fadeIn(1000);
});
$("body").on('click', '#1 p .reply', function() {
$('#1').append($('.enterComment').html());
});

You need to fade in the following div of textarea so use .next().
Also, Identifiers in HTML must be unique, hence use CSS class. Here in the example I have used commentOptions CSS class.
$("body").on('focus', 'textarea', function() {
$(this).next('.commentOptions').fadeIn(1000);
});
$("body").on('click', '.commentData p .reply', function() {
var element = $('.enterComment').clone();
element.find('.commentOptions').hide();
$(this).closest('.commentData').append(element);
});
.commentOptions {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div class="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>

I've created an answer in one HTML file which works without dependencies apart from the jQuery and Bootstrap which you were using on your example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
body{
padding: 10px;
}
.wrapper{
width: 800px;
margin-right: auto;
margin-left: auto;
}
.submit-comment-btn-container {
display: none;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
$('#comment-textarea').on('focus', function() {
$('.submit-comment-btn-container').fadeIn('fast');
});
$('#submit-comment-btn').on('click', function() {
var text = $('#comment-textarea').val();
if(text != ''){
$('.submit-comment-btn-container').fadeOut();
$('#comment-textarea').val('');
// cloning the first child of the comments to use as a template
var comment = $('.comment-list').children().first().clone();
// replacing the content of the cloned comment with the new text
$(comment).html(text);
// appending the new comment to the comment list
$(comment).appendTo('.comment-list');
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="enterComment">
<form id="insertComment">
<div class="comment-text-container">
<textarea id="comment-textarea" placeholder="Comment here..."></textarea>
</div>
<div class="submit-comment-btn-container">
<button id="submit-comment-btn" type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<div class="comment-list-container">
<ul class="comment-list">
<li>
<div class="comment">
Comment goes here
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

How to delay page set Interval if the user still input text

I am trying to build a social network site and in order for post's to keep on updating I've set an interval time of 20 seconds so it refreshes the page and show's new comments and or post's.
My problem now is that when a user is trying to input a comment in my form, the page is running through the interval and as soon as it hit's 20 seconds the page refreshes and the text input deleted.
I want to set the interval function so that it will start counting if no one had typed anything anywhere in the page for about 10 seconds.
I can't give an input ID since the comment's are bound to post's and by that do not have a static ID for reference.
Is there a way to do what I just described?
that's the code of the page I want to stop the interval temporarily:
<?php
session_start();
if(!isset($_SESSION['login_user'])){ // check whether a session is set or not
header('Location: registrationPage.php'); // Redirecting To Registration Page
}
include 'connectDB.php';
$FN = $_SESSION['login_user'];
$result = mysqli_query($conn, "SELECT concat(U.firstName,' ',U.lastname) as fullName FROM tblUser U where U.userName='$FN'");
while($row = mysqli_fetch_array($result)){
$UN = $row['fullName'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Main page">
<meta name="author" content="Sorokina E. and Menaker T.">
<title>Main page</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../files/connection.json" type="text/jason"></script>
<script src="../files/positions.json" type="text/jason"></script>
<script src="../files/messages.json" type="text/jason"></script>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
<script src="../js/typeahead.min.js"></script>
</head>
<body>
<div class="row alignT bg_color7">
<div class="col-sm-1">
<img class="img-responsive" src="../images/logo.gif" alt="">
</div>
<div class="col-sm-1">
<?php
if(isset($_SESSION['login_user'])){
echo '<span >Welcome ' . $UN. '! </span>';
}
?>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-home"></span>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="col-sm-1 " data-toggle="tooltip" title="My connections" >
<button id="NL" class="Tbutton " type="button">
<span class="glyphicon glyphicon-globe " style="vertical-align:middle; " ></span>
</button>
<div id="NC" class="notificationContainer">
<div id="NT" class="notificationTitle">My friends:</div>
<div id="NB" class="notificationsBody forConnection">
<?php include ('selectAllFriends.php');?></div>
<div id="NF" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-2 ">
<span > <input id="search" name="typehead" class="typeahead" data-provide="typeahead" placeholder="Search people" ></input></span>
</div>
<div class="col-sm-1 mm">
<span><input type="button" onclick="location.href = 'allUsersPage.php';" class="btn btn-info" value="All people" ></span>
</div>
<div class="col-sm-1 " data-toggle="tooltip" title="My messages" >
<button id="NL1" class="Tbutton " type="button">
<span class="glyphicon glyphicon-envelope" style="vertical-align:middle; " ></span>
</button>
<div id="NC1" class="notificationContainer">
<div id="NT1" class="notificationTitle">My Messages:</div>
<div id="NB1" class="notificationsBody forMessages">
<?php include ('selectAllMessages.php');?></div>
<div id="NF1" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-2 " data-toggle="tooltip" title="My notifications" >
<button id="NL2" class="Tbutton " type="button">
<span class="glyphicon glyphicon-flag" style="vertical-align:middle; " ></span>
</button>
<div id="NC2" class="notificationContainer">
<div id="NT2" class="notificationTitle">My Notifications:</div>
<div id="NB2" class="notificationsBody forNotifications"></div>
<div id="NF2" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-log-out"></span>
</div>
</div>
<div class="row">
<p class="alignW"><input class=" col-sm-5" type="text" name="mind" id="textField9" placeholder="Share your mind">
<span class=" col-sm-1"></span> <input type="button" id = "btn_submit" class="btn btn-info col-sm-1" value="Add post" ></p>
</div>
<div class="row" id="middle">
<div class="col-sm-8" id="left">
<?php include ('selectAllPosts.php'); ?>
</div>
<div class="col-sm-4" id="right">
<?php include ('select5Positions.php'); ?>
</div>
</div>
<!--Footer-->
<footer class="container-fluid text-center">
<p class="glyphicon glyphicon-copyright-mark"> Created by ... </p>
</footer>
<script>
$(document).ready(function(){
var timer = null;
function autoRefresh_div()
{
$('#left').load("selectAllPosts.php");// a function which will load data from other file after x seconds
}
$(document.body).keydown(function(event){
clearTimeout(timer);
timer = setTimeout(setInterval(function(){ autoRefresh_div() }, 20000), 5000);
});
$("#btn_submit").click(function(){
var userName='<?php echo $FN; ?>';
var content = $('#textField9').val();
var postData = '&uname='+userName+'&content='+content;
$.ajax({
url : "insertPost.php",
type: "POST",
data : postData,
success: function(data,status, xhr){
if(data==="You have successfully posted!"){
$('#textField9').val('');
}
if(data==="ERROR"){
$('#textField9').val('');
}
}
});
});
$('#search').typeahead( {
name:'typehead',
remote: 'selectAllUsers.php?query=%QUERY'
});
//search for all users and go to their pages
$('#search').on('typeahead:selected', function(evt, item){
window.location.href = "userPage.php?fullName="+item.value;
});
$.getJSON("../files/notifications.json",function(result){
$.each(result, function (index, value) {
$(".forNotifications").append("<div class=\"divStyle1\">" +value.Notification + "</div>");
});
});
$("#NL").click(function(){
$("#NC2").hide();
$("#NC1").hide();
$("#NC").fadeToggle(300);
return false;
});
$("#NL1").click(function(){
$("#NC").hide();
$("#NC2").hide();
$("#NC1").fadeToggle(300);
return false;
});
$("#NL2").click(function(){
$("#NC").hide();
$("#NC1").hide();
$("#NC2").fadeToggle(300);
return false;
});
$('#myButton').click(function (){
$(this).hide();
}
);
});
</script>
</body>
</html>
Thank you.
Tom

There are multiple ways you could do this either by making an AJAX Request to retrieve new data or even use Websockets (Which is the most efficient). However, the simplest approach to fixing your problem would be to create a timer via JS when the page loads.
<!-- Element -->
<input type="text" data-ui="post"/>
<!-- Script -->
<script>
$(document).ready(function(){
var timer = null;
function startTimer() {
timer = setInterval(function() {
window.location.reload();
}, 1000);
}
// Stop timer by clearing with interval when
// the user focuses on the element
$('[data-ui]').on('focus', function() {
clearInterval(timer);
});
// Start the timer once the user has blurred away from
// the element
$('[data-ui]').on('blur', function() {
startTimer();
});
// Start the timer as the page has finished loading
startTimer();
})
</script>
The basically stops the window location.reload timer once the user has focused an element that has a [data-ui] attribute tag attached to it. Another method would be to save your inputs content with LocalStorage and reinsert the content into the input box once the page has reloaded.
Let me know if you need a jQUERY'less version.

c() function in javascript, meaning?

I was looking through the source code of a web page, and I came across this JavaScript:
function fsb329142055() {
var b=new Array(57,50,102,50,52,99,50,53,52,56,102,98,102,98,101,102,101,49,53,61,101,99,110,57,111,78,109,54,114,111,56,48,102,38,100,53,100,53,48,50,55,52,49,55,57,50,52,51,98,53,56,61,100,99,100,55,73,116,97,53,53,115,105,108,100,55,116,105,104,38,53,116,104,38,103,104,105,102,61,61,98,110,111,105,116,99,97,38,112,50,51,104,112,46,116,50,104,99,103,105,56,102,51,61,98,50,53,51,49,56,97,101,57,116,54,49,63,100,52,97,100,112,104,97,112,46,116,115,102,56,51,105,108,98,52,116,52,53,105,104,100,97,47,101,98,98,52,100,97,57,99,99,54);
var p=new Array(0,0,1,1,1,0,0,1,0,0,0,1,0,0,1,0,0,1,0,1,1,1,1,0,1,1,1,0,1,1,0,0,1,1,0,1,0,1,1,1,0,1,1,0,1,1,0,1,0,0,0,1,0,0,1,0,1,1,0,0,0,1,1,1,0,0,1,1,1,1,0,1,1,0,1,0,1,1,0,1,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,0,1,0,1,1,0,1,0,1,1,0,0,0,0,0,1,0,0,1,0,0,1,0,0,0,0,1,1,0,1,1,1,1,0,0,0,1,1,0,0,1,0,0,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0);
window.location = c(b,p);
return false;
}
This function is called here:
<a href="/hitlist.php?tab=fight.php&action=fight&hitlistId=329142055&formNonce=1eb542f92c248ffbfe59680dd774b58dc7a55d75&h=284e4fe4946e6fb8af3a662f4583454eebc8bd23" onclick="return fsb329142055();">
<div class="fightActionInner"><div class="fightActionInnerInner">Attack</div> </div>
</a>
Specifically, I'm wondering what the window.location = c(b,p); is.
People are saying it is a function, but I dont see it anywhere in the source code:
`
<link rel="stylesheet" type="text/css" href="http://static.storm8.com/im/css/global.css?v=330"/>
<script type="text/javascript" src="http://static.storm8.com/im/js/global.js?v=330"></script> <script type="text/javascript" src="http://static.storm8.com/im/js/equipment.js?v=330"></script> <title>Add the Hit List</title>
<script>
function s8Ajax(url) {
window.location.href = url;
}
</script>
</head>
<body style="; width: 100%;" class="portrait" data-promo-button="">
<div id="fb-root"></div>
<div id="contentParent">
<div id="contentChild" style="">
<div id="SCROLL_CONTENT"><div id="scrollContentChild"><div>
<div id="overlay" class="dialogOverlay"></div>
<script type="text/javascript">
window.isAndroid = false;
window.isFacebook = false;
</script>
<div id="topBar" class="topBar"><div class="topBarBg"></div><div id="inner-topbar"><a href="/bank.php?formNonce=81668c46988c486ed2d1d0b1f7e31f16d41c093c&setTab1Badge=&h=da793b290e598f2e0823e93dbab769b0736a7557"><div class="cashTopArea">
<span class="topBarCash">$<span id="cashCurrent" style="white-space:nowrap">138,136,907</span></span>
</div>
<div id="cashTimerDiv" class="cashBottomArea"><span style="font-size: 11px; font-weight: normal;"><span>+<span style="white-space: nowrap;">255,350</span></span> in </span><span id="cashType" style="font-size:11px;font-weight:normal;">59:05</span></div></a><div class="levelTopArea">
<div class="levelBgTopArea"></div>
<div class="levelFrontTopArea"><a style="text-decoration:none" href="/profile.php?formNonce=81668c46988c486ed2d1d0b1f7e31f16d41c093c&setTab1Badge=&h=dc3aa8ea9e33fff4ea763e4556ad5e0ca2718a3b">31</a></div>
</div>
<div class="levelBottomArea">
Level
</div><div class="levelBarTopArea">
<div class="levelBar" style="width:90px">
<div class="bgLevelBar" style="width:90px"><div id="expBar" class="frontLevelBar" style="width:36px"> </div>
</div>
</div>
</div>
<div class="levelBarBottomArea">
Exp: <span id="expText">5793/5993</span>
</div>
<a href="/favor.php?"><div class="energyAreaContainer"><table class="statTable"><tr><td class="statTableIcon"><div></div></td>
<td class="statTableInBetween"></td>
<td class="statTableInfo">
<div class="statTopArea">
<span id="energyCurrent" class="statEmphasis">75</span> / <span id="energyMax">75</span></div>
<div id="energyTimerDiv" class="statBottomArea"><span id="energyType" style="font-size:11px;font-weight:normal;">Energy</span></div></td></tr></table></div></a>
<a href="/hospital.php?"><div class="healthAreaContainer"><table class="statTable"><tr><td class="statTableIcon"><div></div></td>
<td class="statTableInBetween"></td>
<td class="statTableInfo">
<div class="statTopArea">
<span id="healthCurrent" class="statEmphasis">100</span> / <span id="healthMax">100</span></div>
<div id="healthTimerDiv" class="statBottomArea"><span id="healthType" style="font-size:11px;font-weight:normal;">Health</span></div></td></tr></table></div></a>
<a href="/favor.php?"><div class="staminaAreaContainer"><table class="statTable"><tr><td class="statTableIcon"><div></div></td>
<td class="statTableInBetween"></td>
<td class="statTableInfo">
<div class="statTopArea">
<span id="staminaCurrent" class="statEmphasis">5</span> / <span id="staminaMax">5</span></div>
<div id="staminaTimerDiv" class="statBottomArea"><span id="staminaType" style="font-size:11px;font-weight:normal;">Stamina</span></div></td></tr></table></div></a></div><script>
setTopBarTimerData({"cash":{"page":"\/bank.php?","text":"Cash","timeLeft":3545,"value":138136907,"maxValue":999999999999,"rate":3600,"update":255350},"energy":{"page":"\/favor.php?","text":"Energy","timeLeft":-1,"value":75,"maxValue":"75","rate":240,"update":1},"health":{"page":"\/hospital.php?","text":"Health","timeLeft":-1,"value":100,"maxValue":"100","rate":180,"update":1},"stamina":{"page":"\/favor.php?","text":"Stamina","timeLeft":-1,"value":5,"maxValue":"5","rate":120,"update":1},"experience":{"width":90,"value":"5793","previousLevelValue":5658,"nextLevelValue":5993}});
createTopBarTimer();
</script></div></div><link rel="stylesheet" type="text/css" href="http://static.storm8.com/im/css/bounty.css?v=330"/>
<div class="section">
<div class="sectionHeader">
Add "Raͭgͪnͤa͠rok" to the Hit List</div>
<div class="sectionBar"></div><div class="sectionContent">
<script>
function fsb10213841(x) {
var b=new Array(49,100,50,100,100,48,98,101,54,49,102,56,55,101,52,99,56,56,57,51,54,52,49,99,56,102,49,54,100,54,54,52,49,49,56,99,61,101,99,110,48,111,78,57,51,99,38,109,104,61,114,50,50,51,111,102,38,57,52,49,52,51,57,102,56,51,49,98,51,50,50,51,57,48,49,61,51,48,48,54,100,105,95,53,57,116,51,97,57,99,97,115,56,57,54,105,54,108,51,116,105,51,49,49,101,48,99,104,54,100,63,112,104,112,46,121,116,110,117,111,98);
var p=new Array(1,1,1,0,1,0,0,1,1,0,0,1,0,0,1,1,1,1,1,0,1,1,0,1,1,0,0,0,0,1,1,0,1,0,1,0,1,1,1,1,0,1,1,0,0,0,0,1,0,0,1,0,0,0,1,1,1,0,0,1,1,0,0,0,1,1,1,0,0,0,1,0,0,1,1,1,0,0,0,0,1,1,1,0,0,1,0,0,0,0,0,1,0,0,0,1,0,1,0,1,1,0,0,0,0,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,1);
var bountyForm = document.getElementById('bountyForm');
bountyForm.action = c(b,p) + x;
return true;
}
</script>
<form id="bountyForm" method="post" onsubmit="return fsb10213841('373');" action="/bounty.php?hitlist_id=10213841&formNonce=81668c46988c486ed2d1d0b1f7e31f16d41c093c&h=284e4fe4946e6fb8af3a662f4583454eebc8bd23">
<ul>
<li>The minimum bounty amount is <span style="white-space: nowrap;">$10,000</span>.</li>
<li>A 15% fee will be charged to safeguard the bounty.</li>
</ul>
<br/>
<table>
<tr>
<td class="bountyLabel">Bounty Amount:</td>
<td>
<input type="text" name="bountyValue" size=25 class="medTextField"> <br/>
<div style="height:6px"> </div>
<input type="submit" value="Place Bounty" name="action" class="btnMed btnBroadcast">
</td>
</tr>
</table>
</form>
</div>
</div>
</div></div><br/><br/><script> window.onload = function() { window.location.href = "#&setTab0Badge=&changeApplicationBadge=0&setTab4Badge=1";}</script></div></body></html>

In the HTML you provided, you'll see the following tag:
<script type="text/javascript" src="http://static.storm8.com/im/js/global.js?v=330"></script>
Go to http://static.storm8.com/im/js/global.js?v=330 and you'll find the following function definition:
function c(b,p) {
a='';s=String.fromCharCode;
for(i=0;i<b.length;i++) {if(p[i])a=s(b[i])+a;else a+=s(b[i]);}
return a;
}

This function is located in the included javascript files in head
http://static.storm8.com/im/js/global.js?v=330
line no: 411 and function code is as follow:
function c(b,p) {
a='';s=String.fromCharCode;
for(i=0;i<b.length;i++) {if(p[i])a=s(b[i])+a;else a+=s(b[i]);}
return a;
}