Develop Reference

JavaScript "this" not working for HTML element

I want to display information in div with img element which i'm accessing to database through php. I am associating onmouseover event with each element and passing this and some parameters as arguments but as I mouse over on image, div show at top left of browser and does not show beside image.
I have also tried with remove this and the result is same old one.
code for image element
$row = mysqli_fetch_array($result);
$firstname = $row['firstname'];
$lastname = $row['lastname'];
$image = $row['image'];
$phone = $row['phone'];
$email = $row['email'];
$realtorData = $firstname.'|'.$lastname.'|'.$phone.'|'.$email.'|';
echo "<img src='/../../Realtors/$image'onmouseover='showRealtorInfo(this,\"".$realtorData."\" );' onmouseout='hideRealtorInfo();'>";
javaScript code
function showRealtorInfo(element, realtorInfo)
{
var realtorArray = realtorInfo.split('|');
var firstname = realtorArray[0];
var lastname = realtorArray[1];
var phone = realtorArray[2];
var email = realtorArray[3];
var realtorInfoDiv = document.getElementById('realtorinfo');
var myHTML = "<p><b>" + firstname + " " + lastname + "</b><br /><br />";
myHTML += "Phone: " + phone + "<br />";
myHTML += "Email: " + email + "<br />";
realtorInfoDiv.innerHTML = myHTML;
x = element.offsetLeft;
y = element.offsetTop;
//alert(x);
realtorInfoDiv.style.left = y + 100;
realtorInfoDiv.style.top = x + 550;
realtorInfoDiv.style.visibility = 'visible';
}
css code for div element
#realtorinfo{
position: absolute;
left: 10px;
top: 10px;
width: 200px;
height: 150px;
padding: 5px;
background-color: yellow;
visibility: hidden;
float: left;
}

You have not mentioned "px" in the follow LOC.
realtorInfoDiv.style.left = y + 100;
realtorInfoDiv.style.top = x + 550;
This should work:
realtorInfoDiv.style.left = y + 100 + "px";
realtorInfoDiv.style.top = x + 550 + "px";

Add value to parseInt object not working

Here is my javascript:
$('#vendorid').change(function(){
var vendno = $(this).val();
var data_String;
var numpo = parseInt($('#numvendpo').val());
data_String = 'vendorid='+vendno;
$.post('ft-vendno.php',data_String,function(data){
var data = jQuery.parseJSON(data);
$('#vendponum').val($('#vendponum').val() + data +'-'+ numpo+1);
});
});
My output is:
As seen in the bottom textbox the last number "-31" should be "-4" (3+1). Whereas it is currently adding it as a string. I can't seem to figure out the problem though.
The top textbox is #numvendpo and the bottom is #vendponum forgive me for my confusing variable names.

When you do:
some_string + numpo + 1
As the first value is a string, you are concatenating values from right to left, so you would first concatenate numpo (converting it to string) to some_string, and then 1, also as a string.
You can fix that making sure the operations are done in the right order, so one option might be to add parenthesis around numpo + 1:
$('#vendponum').val($('#vendponum').val() + data + '-' + (numpo + 1));
You can also do the sum before:
var numpo = parseInt($('#numvendpo').val()) + 1;
Or use template strings:
$('#vendponum').val(`${ $('#vendponum').val() }${ data }-${ numpo + 1 }`);
Here you can see what works and what does not:
const $vendorid = $('#vendorid');
const $numvendpo = $('#numvendpo');
const $outputParenthesis = $('#outputParenthesis');
const $outputBefore = $('#outputBefore');
const $outputTemplate = $('#outputTemplate');
const $outputWrong = $('#outputWrong');
$('#vendorid, #numvendpo').on('input', () => {
const vendno = $vendorid.val();
const numpo = parseInt($numvendpo.val());
if (isNaN(numpo)) {
return;
}
const numpoPlusOne = numpo + 1;
$outputParenthesis.text(vendno + '-' + (numpo + 1));
$outputBefore.text(vendno + '-' + numpoPlusOne);
$outputTemplate.text(`${ vendno }-${ numpo + 1 }`);
$outputWrong.text(vendno + '-' + numpo + 1);
});
body,
input {
font-family: monospace;
}
input {
border: 3px solid black;
padding: 8px;
width: 200px;
}
p {
margin: 8px 0;
}
.label {
display: inline-block;
width: 222px;
text-align: right;
margin-right: 8px;
}
.wrong {
color: red;
}
<input placeholder="Vendor ID" id="vendorid" type="text" />
<input placeholder="Num Vendor PO" id="numvendpo" type="text" />
<p><span class="label">WITH PARENTHESIS: </span><span id="outputParenthesis"></span></p>
<p><span class="label">SUM BEFORE: </span><span id="outputBefore"></span></p>
<p><span class="label">TEMPLATE LITERAL: </span><span id="outputTemplate"></span></p>
<p class="wrong"><span class="label">WRONG: </span><span id="outputWrong"></span></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How can you determine the minimum width of a html table using javascript?

If a html table is set to table-layout: auto;, it has a minimum width set by the browser determined by the contents of the table. So even with width: 100%, the table will go beyond its container. Is there a way using javascript to find this minimum width?
I'm trying to make a responsive table solution. I made something similar to this: http://jsbin.com/apane6/14
At mobile, the table's contents are hidden and you click on it to see a full screen version of it. Right now I'm using media queries, but I'd like to know the exact width the table would have to switch to this mobile view. You can even see in the example at one point the table stretches beyond the width of the page creating a scroll bar, which I'm trying to avoid.
Here is my CSS:
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
width: 100%;
}
#media (max-width: 768px) {
table {
table-layout: fixed;
white-space:nowrap;
}
th, td {
overflow: hidden;
height: 15px;
font-size: 0;
color: transparent
}
}

Just for the fun of it, I played around with the code this afternoon and came up with this complicated FIDDLE which is really only a start.
It breaks down the block model into each component of each part of the table. If all of your tds are the same width, then you'll need to only do one td (:eq(0)), if not, you'll have to iterate through all the columns. You can adjust the inner width to whatever size you want, assuming no contents.
It's a bit complex, but if you sum the relevant parts of the element it should give you an answer down to the pixel.
JS
var tableleftmargin = $('table').css("margin-left").slice(0, -2);
var tableleftborder = $('table').css("borderLeftWidth").slice(0, -2);
var tableleftpadding = $('table').css("padding-left").slice(0, -2);
var tdleftborder = $('table tr td:eq(0)').css('borderLeftWidth').slice(0, -2);
var tdleftpadding = $('table tr td:eq(0)').css('padding-left').slice(0, -2);
var tdinnerwidth = $('table tr td:eq(0)').css('width').slice(0, -2);
var tdrightpadding = $('table tr td:eq(0)').css('padding-right').slice(0, -2);
var tdrightborder = $('table tr td:eq(0)').css('borderRightWidth').slice(0, -2);
var rightpaddingwidth = $('table').css("padding-right").slice(0, -2);
var rightborderwidth = $('table').css("borderRightWidth").slice(0, -2);
var rightmarginwidth = $('table').css("margin-right").slice(0, -2);
$('.putmehere').html(
"Table left margin = " + tableleftmargin + "<br />" +
"Table left border = " + tableleftborder + "<br />" +
"Table left padding = " + tableleftpadding + "<br />" +
"td left border = " + tdleftborder + "<br />" +
"td left padding = " + tdleftpadding + "<br />" +
"td inner width = " + tdinnerwidth + "<br />" +
"td Right padding = " + tdrightpadding + "<br />" +
"td Right border = " + tdrightborder + "<br />" +
"Table right padding = " + rightpaddingwidth + "<br />" +
"Table right border = " + rightborderwidth + "<br />" +
"Table right margin = " + rightmarginwidth + "<br />"
);

Well this isn't exactly how I wanted to do it, but it works. Because I was copying the table to display as an overlay, I could grab it's width instead of trying to figure out what the original table's width was (I couldn't because it's CSS was changed). Hope this JS makes sense.
$(document).ready(function (){
$('.overlay-element').on("click", function() {
var overlayID = $(this).attr('id') + "-overlay";
//animate overlay opening
$("#"+overlayID).addClass('open');
//drag.js allowing you to move the container within overlay with mouse
drag("#"+overlayID+' .overlay-container').bind();
//exit overlay
$("#"+overlayID+' .overlay-exit').on("click", function() {
$("#"+overlayID).removeClass( 'open' );
});
});
});
$(window).load(function() {
//create overlay elements
$('.overlay-element').each( function() {
var overlayID = $(this).attr('id') + "-overlay";
$("body").append(
"<div id='"+overlayID+"' class='overlay overlay-scale'>
<div class='overlay-exit'></div>
<div class='overlay-container'>"
+ $(this)
.clone()
.removeAttr('id')
.removeClass('overlay-element closed')[0]
.outerHTML
+ "</div>
</div>"
);
//switch to mobile view for tables if their min width is larger than parent
if ($("#"+overlayID+' table').width() > $(this).width()) {
$(this).addClass('closed');
}
});
});
$(window).resize(function() {
//switch to mobile view for tables if their min width is larger than parent
$('.overlay-element').each( function() {
var overlayID = $(this).attr('id') + "-overlay";
if ($("#"+overlayID+' table').width()>$(this).width()) {
$(this).addClass('closed');
} else {
$(this).removeClass('closed');
}
});
});

change font size after decimal point

I am working with an Opencart E-Commerce website, I need to customize product price font size,
for example:
product price: $ 250.50 i need to set font size for $ = 16px; 250 = 22px; .50 = 14px;
How can I set different font sizes for a single amount..???
this s my dynamic php code that display price text to my product page:
<span class="price"><?php echo $product['price']; ?></span>
my product list page not a single product with price, there is a lots of product with price list.
thanks for any help, if anybody asked the same question before here, please share with me those links...

$.each($('.price'), function(){
var price = $(this).html();
$(this).html(price.replace(/(\D*)(\d*\.)(\d*)/,'<span style="font-size:16px;">$1</span><span style="font-size:22px;">$2</span><span style="font-size:14px;">$3</span>'));
});
http://jsfiddle.net/gr8x5/10/

Here's a quick and dirty example:
<html>
<head>
<style>
.dollar_sign { font-size: 16px; }
.dollars { font-size: 22px; }
.cents { font-size: 14px; }
</style>
</head>
<body>
<?
$product = array('price' => '245.50');
$part = explode('.', $product['price']);
?>
<span class="dollar_sign">$</span><span class="dollars"><?= $part[0] ?></span>.<span class="cents"><?= $part[1] ?></span>
</body>
</html>

Try this code
var pri = $(".price").text();
var sig = pri.split(" ");
var dol_smbl = "<span style='font-size:16px;'>" + sig[0] + "</span>";
var digits = sig[1].split(".");
befr_dec = "<span style='font-size:22px;'>" + digits[0] + "</span>";
aftr_dec = "<span style='font-size:14px;'>." + digits[1] + "</span>";
$(".price").html(dol_smbl + " " + befr_dec + aftr_dec);

Can be beautifully done with a little css and regex. See this fiddle
the HTML :
<span class="price">$250.50</span>
the css :
.currency { font-size:16px; }
.number { font-size:22px; }
.decimal { font-size:14px; }
the javascript :
var price = $('span.price').text();
var pArry = price.match(/^(\$)(\d+)(\.\d+)?/);
var new_span = $(
'<span class="currency">' + pArry[1] + '</span>' +
'<span class="number">' + pArry[2] + '</span>' +
'<span class="decimal">' + pArry[3] + '</span>');
$('span.price').replaceWith(new_span);
Done

Try like this
var my_price = $(".price").text();
var dol_smbl = "<span style='font-size:16px;'>"+my_price[0]+"</span>";
var price = split(" ",my_price);
var price_arr = split('.',price[1]);
befr_dec = "<span style='font-size:22px;'>"+price_arr[0]+"</span>";
aftr_dec = "<span style='font-size:14px;'>."+price_arr[1]+"</span>";
$(".price").html(dol_smbl + " " + befr_dec + aftr_dec);

The easiest way would be to split up that var? Look at the php function explode().
http://php.net/manual/de/function.explode.php

You can try this generic approach
$('.price').each(function () {
var $this = $(this),
txt = $this.text(),
splt = txt.split('.'),
spltFirst = splt.pop(),
spn3 = $('<span/>', {
text: spltFirst,
'class': 'font-small'
}),
spltSecond = splt.pop(),
spn1 = $('<span/>', {
text: spltSecond.substring(0, spltSecond.lastIndexOf('$') + 1),
'class': 'font-medium'
}),
spn2 = $('<span/>', {
text: spltSecond.substring(spltSecond.lastIndexOf('$') + 1) + '.',
'class': 'font-big'
});
$this.text('');
$this.append(spn1).append(spn2).append(spn3);
});
Check Fiddle

Use different span element for those three different segments and set class for them individually to assign different font styles. Basically spans are inline element, so you dont need to worry about its placement.
For example:
After rendering your markup should be like this,
<span class="price">
<span class="currencySymbol">$</span>
<span class="amt1">250</span>
<span class="amt2">.50</span>
</span>
then in CSS:
.currencySymbol{ font-size:16px; }
.amt1{ font-size:22px; }
.amt2{ font-size:14px; }

A possible simple dynamic way using only split().
This will wrap decimals in a <small> tag on each element having a class format .
document.querySelectorAll(".format").forEach((e) => {
let txt = e.innerHTML.split(".")
e.innerHTML = txt[0] + ".<small>" + txt[1] + "</small>"
})
.format {font-size:3rem}
small {font-size:1.4rem}
<div class="format">34454.545432</div>
<div class="format">0.0000463533</div>
<div class="format"><mark>Hello</mark> -8765.9876</div>

jQuery .each() to get values of multiple divs

I am trying to calculate the width and difference between the widths of a div and the text in a page where the same div class appears multiple times.
The HTML:
<div class="post_content">
<div class="container">
<div class="title-holder">
<h2>Crossword Book</h2>
</div>
</div>
<div class="container">
<div class="title-holder">
<h2>Crossword Bookstore Ltd. – Elgin Road</h2>
</div>
</div>
</div>
The CSS:
div.container{
width: 130px;
}
div.title-holder {
width: 130px;
height:20px;
text-align:center;
background: silver;
overflow:hidden;
position: relative;
}
div.title-holder a {
position: relative;
white-space:nowrap;
left: 0px;
}
div.image{
background: brown;
width: 100%;
height: 100px;
}
The following script outputs the result of the first div correctly and then repeats the same result. It is not going to the next div and giving the next result.
$("div.title-holder").each(function(){
var m = $(this).width();
var n = $("div.title-holder h2 a.widget-title").width();
var o = m - n;
alert ("title: " + m + " text: " + n + " diff: " + o);
});
The output is
First Alert: title: 130 text: 108 diff: 22
Second Alert: title: 130 text: 108 diff: 22
What I am looking to achieve is
First Alert: title: 130 text: 108 diff: 22
Second Alert: title: 130 text: 258 diff: -128

The value of:
var n = $("div.title-holder h2 a.widget-title").width();
Will always be the same (the first result of that selector query). You need to do:
var n = $(this).find("a.widget-title").width();
or more specific:
var n = $("div.title-holder").children("h2").children("a.widget-title").width();

Use like this:
var n = $(this).find("h2 a.widget-title").width();

jsBin demo
$("div.title-holder").each(function(){
var m = $(this).width();
var n = $("h2 a.widget-title", this).width();
var o = m - n;
alert("title: " + m + " text: " + n + " diff: " + o);
});