Math question using JQuery and Javascript with a horizontal sliding row - JavaScript Discussion Boards

Any four random words.

But seriously, if you want to ask a question, you need to provide enough details for someone who can't read your mind to be able to answer it.

You also need to put some effort into finding the answer yourself first. Google[^] seems to have a lot of suggestions.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

C#

In a vb.net 2010 webform application, I am going to display a popup javascript alert message for the user when there are 2 records in the database for the current school year for each unique student. This popup message is displayed since the user needs to update the database using vendor software.

For the javacript alert message, I have the following questions:

1. At the top the alert message, it says 'Message from Web Page' since that is probably the default value. Is there a way that I can change this message to something I want? If so, how can I change the message?

2. I am wondering what if there maximum length that I can display in the error message? If so, what is the maximum length? 

3.  Can I extend the maximum size of the message and if so, can you show me how to extend the size of the error message?

4. Can I change the display icon to be an error instead of a warning? If so, how would I accomplish this goal?

All explained at JavaScript Popup Boxes[^].

Dialog | jQuery UI[^] has answer for all your questions

Please read about JqueryUI Dialog Box from jquery Forums. it will help you.

Can someone assist me on how to do a mouse over on a hyperlink that shows what the user selected on the page they just left or saved. For example, the user clicks a link that says 'Add' and it opens a popup window where they select a list of items that have checkboxes, they check the items they want and then they click save to close the popup and they return to the original page. The user then hovers over another link that says 'Edit' and it shows them what they selected on the popup page. Can this be done and if so how?

I tried using LabelHover function but I get a LabelHover() is error. Here is my code. What do I need to do to get rid of this error. This is on the page that has the link to the popup page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="NASA_LoD_Phase_1.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    

    <title><script language="javascript" type="text/javascript">
              
               function LabelHover() {
                   
                   var text = "event";
                  
                   document.getElementById("EditHyperLink").innerHTML = text;
                   
               }
               
    </script>
</title>
    <style type="text/css">

        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            text-align: left;
        }
        .auto-style4 {
            text-align: right;
        }
    </style>
     
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table class="auto-style1">
            <tr>
                <td class="auto-style2" colspan="2">
                    <asp:Label ID="lblProgram" runat="server" Text="Program:" style="text-align: left"></asp:Label>
                     <asp:HyperLink ID="AddHyperLink" runat="server" 
            NavigateUrl="javascript:var w=window.open('addprogramcode.aspx','','width=640,height=450');" 
            CssClass="style19" ForeColor="#A90D39">Add Program Code</asp:HyperLink>  <asp:HyperLink ID="EditHyperLink" onmouseover="LabelHover()"  runat="server" 
            NavigateUrl="javascript:var w=window.open('serviceset.aspx','','width=640,height=450');" 
            CssClass="style19" ForeColor="#A90D39">Edit</asp:HyperLink>  <asp:HyperLink ID="DeleteHyperLink" runat="server" 
            NavigateUrl="javascript:var w=window.open('newdonors.aspx','','width=640,height=450');" 
            CssClass="style19" ForeColor="#A90D39">Delete</asp:HyperLink>
                   
                    <br />
                    <asp:DropDownList ID="DropDownList1" runat="server" Width="400px">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td class="auto-style7">
                <asp:Button ID="BackButton" runat="server" OnClick="Button2_Click" Text="Back" />
                    </td>
                <td class="auto-style4" rowspan="2">
                <asp:Button ID="NextButton" runat="server" Text="Next" OnClick="SearchButton_Click" />
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

I have tested your code, mouseover event works fine. might be you are missing something.

Oh I'm terrible at math this summer.

I have this horizontal row, filled with items that overflow.
I have these radio buttons under them, that show the page number.

I'm trying to make it where your on a mobile phone, and you slide left, the correct radio button is selected.

I have a left, remaining left, and a total of pixels
I just can't figure out the math to say, this is in the range of 1, 2, 3 and so on.

I wrote some code

function run_touch_pagination() {

    var $e_sliderFrame                  = $(".slider ul"),
        $e_sliderSlide                  = $(".slider-slide"),
        _sliderSlide_width              = $e_sliderSlide.css('width'),
        _sliderFrame_maxWidth           = $e_sliderFrame.width(),
        _sliderSlide_count              = $e_sliderSlide.length,
        _sliderSlide_left               = 0;
        _sliderSlide_index              = 0,
        _sliderSlide_pageCount          = 0;

    // What is the current left of the UL Container
    $(".slider ul").filter(function () {
        // 23 is the margin or padding set in the CSS file
        // So we are removing 23 to get 0 or zero out the scale
        // Turn the negative number into a positive number
        _sliderSlide_left = Math.abs($(this).position().left - 23);<br />
    });

    // Calculate the Page Count
    _sliderSlide_pageCount = Math.ceil(_sliderSlide_count / sliderSlides);

    // Calculate the what radio button should be highlighted
    // The start number is 23 because of the margin in CSS
    // _sliderSlide_width is the width of a single slide

    var x = _sliderSlide_left;
    var y = _sliderSlide_count * parseInt(_sliderSlide_width);
    var z = y - _sliderSlide_left;

    $("#slideLeft").val(x + ', ' + z + ', = ' + y);
    $("#slideNumber").val();

}

Now I know looking at the function above won't tell you much, and my description as well
So this is a link to the program.
Program Demostration[^]

You have to reduce the size of your browser so just 4 items show. The frame will appear and turn gray.
There are 2 textboxes on the bottom of the frame under the radio buttons,
Left Box, is x, z and y, the right box is suppose to be the radio button index.

I'm wondering if this slider program is worth it. but that's what people want when they shop.

This seems to work and appears to be sort of accurate for 4 items, but not accurate for 2 items being shown so I guess it needs more work. I'm missing something here. Plus I turned the negative number into a positive to work 0 to max, and my loop has to run backwards i--.

What do you think?

function run_touch_pagination() {

<pre>
var $e_sliderFrame                      = $(".slider ul"),
    $e_sliderSlide                      = $(".slider-slide"),
    _sliderSlide_width                  = $e_sliderSlide.css('width'),
    _sliderFrame_maxWidth               = $e_sliderFrame.width(),
    _sliderSlide_count                  = $e_sliderSlide.length,
    _sliderSlide_left                   = 0;
    _sliderSlide_index                  = 0,
    _sliderSlide_pageCount              = 0;

// What is the current left of the UL Container
$(".slider ul").filter(function () {
    // 23 is the margin or padding set in the CSS file
    // So we are removing 23 to get 0 or zero out the scale
    // Turn the negative number into a positive number
    _sliderSlide_left = Math.abs($(this).position().left - 23);
});

// Calculate the Page Count
_sliderSlide_pageCount = Math.ceil(_sliderSlide_count / sliderSlides);

// Calculate the what radio button should be highlighted
// The start number is 23 because of the margin in CSS
// _sliderSlide_width is the width of a single slide
var x = Math.floor(_sliderSlide_left);
var y = Math.round(_sliderSlide_count * parseInt(_sliderSlide_width));
var z = Math.round(y - _sliderSlide_left);
var p = Math.round(z / x);
var page = (p <= _sliderSlide_pageCount ? p : _sliderSlide_pageCount);

// Reset all the Radio Buttons, and fill the one that coordinates to the page Number
var idx = _sliderSlide_pageCount;

$(".slider-paginator-item i").each(function () {
if (x < z) { // This elimates the first and last radio from going blank or hollow
if (page === idx) {
$(this).removeClass('fa fa-circle-o').addClass('fa fa-circle');
}
else if (page !== idx) { // do nothing if no match
$(this).removeClass('fa fa-circle').addClass('fa fa-circle-o');
}

}
idx--;

});

$("#slideLeft").val(x + ', ' + z + ', = ' + y);
$("#slideNumber").val('page:' +page + ' idx:' + idx);

}

Project Demostration[^]

Don't forget the squeeze the width of your browser down to show 4 items to see the results.

modified 14-Aug-16 16:36pm.

So I have this code that I copied and modified for horizontal use.
I load all the items on page load, 7 of them for testing, but just the first 6 shows
When I run the code the first time, I get 6 items which is correct.
Then I slide the items left to show items 2 - 7 and run the code again, and I get 7 instead of 6
I suspect that the code is operating correctly, and it's designed to show me 7

I really wanted the value 6. Could you just double check the code for me.

var $e_sliderFrame = $(".slider ul"),
    $e_sliderSlide = $(".slider-slide"),
    _sliderSlide_width = $e_sliderSlide.css('width'),
    _sliderFrame_maxWidth = $e_sliderFrame.width(),
    _sliderSlide_count = $e_sliderSlide.length,
    _sliderSlide_visible = 0,
    _sliderSlide_pageCount = 0,
    _sliderSlide_x = 0;

<pre>
 // How many visible slides are being displayed, because were responsive

_sliderSlide_visible = $(".slider ul li").filter(function () {
return $(this).position().left + $(this).width() < _sliderFrame_maxWidth;
}).length;

Working Example
Shop the Project Indigo! store[^]

Well that's how it's suppose to work. Not what I wanted.

Styling madness!

I'm guessing that your last LI is being ignored because it's right side lies on the right edge of the UL, which lies on the right edge of .slider.

Therefore:

JavaScript

return $(this).position().left + $(this).width() < _sliderFrame_maxWidth;

Should be:

JavaScript

return $(this).position().left + $(this).width() <= _sliderFrame_maxWidth;

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

I actually didn't understand why the count increased when I scrolled the li's left to see more.
Now I realize it's because the width of all the li's are wider now, so the hidden li's on the left are being included.

So I made a global var and ran the function on Dom Ready to get a snapshot first, and then on window resize, take another snapshot, which is probably a bad idea, since they may not be on the left slide.

I did implement your suggestion just now, god idea!

Maybe I should scrap the idea and start again, and make it ajax loading.
I have a better version of it today, in the link on the first post.

I m new to javascript and I want to filter specific elements into new array. Eg ['a', 'b', 'c', 'd', 'e', 'f'] to [' c', 'd', 'f']

If you are new to a language then it is always a good idea to work through one of the many online tutorials, and get familiar with the basic features of the language. You can read all about arrays at JavaScript Arrays[^].

JavaScript

var input = ['a', 'b', 'c', 'd', 'e', 'f'];
           var filter = ['a', 'b', 'e'];
           var output =[];
           for (var i = 0; i < input.length; i++) {
               if (filter.indexOf(input[i]) == -1)
                   output.push(input[i]);
           }

Customise it depends on your need

Hi ,

I need to remove duplicate entries.
ex : Here "Voltage" array is repeating, having one is enough.

Please help anyone to solve this.

<pre lang="Javascript">var data =  [
      {
        "metadata" : {
            "names":["times","values","types"],
            "types":["time","linear","ordinal"]
        },
        "data": [
        ["0",2.37130,"Global"],
        ["1",2.37130,"Voltage"],
        ["1",2.37130,"Voltage"],
        ["2",10.30980,"Intensity"],           

        ],
      }
    ];</pre>

Here's some logic which, although not the most elegant will work across many programming languages. It is to teach you to solve a problem by breaking it down to smaller levels. Note that there are languages the let you automatically compare two arrays with a single function and this becomes much easier.

First, sort your array: any simply sort will do because if any entry is a mismatch then the array's your comparing are different. Sort by element 0, 1, 2, would be simplest to work with.

Second, for a 2-dimensional array, you can use nested loops.
Use a for() loop to operate on array elements explicitly by index so you can compare n and n+1
Similarly, work on the internal elements of of array n vs n+1, comparing them.
If you reach a failure to match, do a continue to the outer loop.
If you reach the end, they're a matched pair. Store the index of one of them.
Return to the outer loop for next (n+1, n+2).

When done, you can remove the duplicate members from the stored index list.

Various languages will allow you to do shortcuts.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

you can use Underscore.js. So you do not need to code from scratch

I think my query is right I am having trouble adding Quantity and TotalPrice to the output

{!REQUIRESCRIPT("/soap/ajax/32.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/32.0/apex.js")}
var record = new sforce.SObject("Opportunity");
record.Id = '{!Opportunity.Id}';
var retriveOpptyLineItems = sforce.connection.query("Select PricebookEntry.Product2.Name, Quantity, TotalPrice From OpportunityLineItem WHERE OpportunityId = '{!Opportunity.Id}' and (NOT Name like '%Discount%')");
 
var strProductNames = '';
for(var i=0; i<retriveOpptyLineItems.records.length ; i++){
strProductNames += retriveOpptyLineItems.records[i].PricebookEntry.Product2.Name + ',' + '\n ';
}
 
//eliminate the last ','
if(strProductNames.length>0){
strProductNames = strProductNames.substring(0,strProductNames.length-1);
}
record.Sample_Product_Name_1__c = strProductNames;
sforce.connection.update([record]);
window.location.reload();

~~I've never worked with SafesForce, but I'm going to guess that your query returns a promise, and that you're attempting to act on the promise object rather than its resolved value.~~

Never mind, it looks like that's supposed to be synchronous. Sorry, too busy giggling into my coffee to find an answer.

Just FYI, your code is completely vulnerable to SQL injection.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

This throws an unexpected identifier error that has me baffled

Thanks

JavaScript

{!REQUIRESCRIPT("/soap/ajax/32.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/32.0/apex.js")}


var record = new sforce.SObject("Opportunity");
record.Id = '{!Opportunity.Id}';

qOli = Select Amount,CloseDate,Name, 
     (Select PricebookEntry.Product2Id, 
             TotalPrice, 
             UnitPrice, 
             ListPrice 
      From OpportunityLineItems) 
   From Opportunity;

record.Sample_Product_Name_1__c= qOli;

window.location.reload();

What language is that supposed to be? It doesn't look like valid Javascript to me. Confused | :confused:

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Hi i have table have 5 comnun
Name Salary Bonus Deduction Total
Ahmed 500 500 100 900
calculation of total is
Total=Salary+Bonus-Deduction
and total in red color according to my code
what i need actually if i changed in Salary cell or Bonus cell or Deduction cell affect in total cell
suppose i added row above then edit salary
from 500 to 2000 meaning in this time row will be as bellow
Ahmed 2000 500 100 2400
total will be 2400 with green color
i can do by button but how to do by changing cell in table affect in total

@{
Layout = null;
}

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var x = $("#txt1").val();
var y = $("#txt2").val();
var z = $("#txt3").val();
var M = $("#txt4").val();
var L = parseInt(y) + parseInt(z) - parseInt(M);

$("#tb").append(" " + x + " " + y + " " + z + "" + M + "" + L + "");
$("#tb tr").each(function () {
var total = $(this).find("td:nth-child(5)").html();

if(parseInt(total)>1000)
{
$(this).find("td:nth-child(5)").css("background-color", "green");
}
if (parseInt(total) < 1000) {
$(this).find("td:nth-child(5)").css("background-color", "red");
}
if (parseInt(total) == 1000) {
$(this).find("td:nth-child(5)").css("background-color", "yellow");
}

});

});

$("#tb").on("click", "tr", function () {

$(this).find("td").slice(0, 4).prop("contenteditable", true);

});

});
</script>

.red{
color:#ff0000;
font-weight:bold;
}

</head>
<body>

Name<input type="text" id="txt1" />

Salary<input type="text" id="txt2" />

Bonus<input type="text" id="txt3" />

Deduction<input type="text" id="txt4" />

<input type="button" value="add" id="btn" />

Name	Salary	Bonus	Deduction	total

</body>
</html>

in my code below i can edit row success without any error but if i need to cancel value edited in row OR get value before changed what i write to cancel edit in row in table by using jquery my code as following

<br />
@{<br />
    Layout = null;<br />
}<br />
<br />
<!DOCTYPE html><br />
<br />
<html><br />
<head><br />
    <meta name="viewport" content="width=device-width" /><br />
    <title>Index</title><br />
    <script src="~/Scripts/jquery-1.10.2.js"></script><br />
    <script><br />
      <br />
        $(function () {<br />
            $("#btn").click(function ()<br />
            {<br />
                var x = $("#txt1").val();<br />
                var y = $("#txt2").val();<br />
                var z = $("#mycountry").val();<br />
                $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "</td><td> <input type='button'class='c' value='Delete'/></td><td> <input type='button' class='d' value='Edit'/></td><td><input type='button' class='e' value='Cancel'/></td></tr>");<br />
              <br />
<br />
            });<br />
            $("#tb").on("click", ".c", function () {<br />
                //$(this).parent().parent().remove();<br />
                $(this).closest('tr').remove();<br />
            });<br />
            $("#tb").on("click", ".d", function () {<br />
               var row = $(this).closest('tr').toggleClass("editing");<br />
               row.find("td").slice(0, 2).prop("contenteditable", row.hasClass("editing"));<br />
              var myselect = '<select id="mycountr1" name="mycountry1">' +<br />
               '<option>---select---</option>' + '<option>Egypt</option>' + '<option>qatar</option>' + '<option>saudia</option>' + '<option>emarates</option>'<br />
              '</select>';<br />
              var dropcountry = $(this).parent().prev().prev().text;<br />
              $(this).parent().prev().prev().html(myselect);<br />
               <br />
                //$('#tb').append(myselect);<br />
                //  $("#tb").children().children().eq(3).children().eq(3).append("myselect");<br />
                <br />
            });<br />
            $("#btndis").on('click', function () {<br />
                $("body").append("<ul id='listNames''></ul>");<br />
                $('#tb td:nth-child(2)').each(function () {<br />
                    $("#listNames").append("<li>" + $(this).text() + "</li>")<br />
                });<br />
            });<br />
            <br />
<br />
        });<br />
    </script><br />
   <br />
    <style><br />
        .editing {<br />
            background: yellow;<br />
        }<br />
    </style><br />
</head><br />
<body><br />
    <div><br />
        ID<input type="text" id="txt1" /><br /><br />
        Name<input type="text" id="txt2" /><br /><br />
        Country: <select id="mycountry"><br />
    <option>---select---</option><br />
    <option>Egypt</option><br />
    <option>qatar</option><br />
    <option>saudia</option><br />
    <option>emarates</option><br />
</select><br /><br />
        <input type="button" value="add" id="btn" /><br />
        <input type="button" value="display" id="btndis" /><br />
<br />
        <table><br />
            <thead><br />
                <tr><br />
                    <td><br />
                        ID<br />
                    </td><br />
                    <td><br />
                        Name<br />
                    </td><br />
                    <td><br />
                        Country<br />
                    </td><br />
                    <td><br />
                </tr><br />
            </thead><br />
            <tbody id="tb"></tbody><br />
        </table><br />
    </div><br />
</body><br />
</html><br />