Binding mouse events to dynamically created select

I have created select tag dynamically in jquery function. I want to bind the mouse events to it. I have dynamically created the selct tag

function loadValues()
{
var sel='<select id="flavor_slct'+index+'" class="popper" data-popbox="pop1"     

onclick="alert()">'+flavor_fetched_string+'</select>';
$("#attach").append(sel);

}

I have tried using the .on Jquery function. Still events are not triggered.


$("body").on("hover","Select",function(
alert("hovered");
)};

How should i bind events to dynamically created elements.?

via Chebli Mohamed

Check if textbox contains a number

I'm currently working on a digital assistant website which is based around JavaScript and jQuery. The user can type in questions or tell the assistant things into the textbox and the assistant will respond with something relevant to the input. What I am planning to implement is to check if the textbox contains a number (intager) and if it does some sort of function will run. The concept sounds fairly simple and but I am having trouble. I have been searching around for a bit but I can't seem to find anything which will work with my code.

I will add my JavaScript and the nessacary parts of the HTML. But I am warning you, the code is messy.

JavaScript:

// JavaScript Document
function submitted() {
    var srch = document.getElementById("srch");
    command();
    getPlaceHolder();
    srch.value = "";
}

function searchKeyPress(e) {
    e = e || window.event;
    if (e.keyCode == 13) {
        //document.getElementById('btn').click();
        submitted();
    }
}

function goBtn() {
    submitted();
}

function refreshBtn() {
    getWelcome();
}

function stClock() {
    window.setTimeout("stClock()", 1000);
    today = new Date();
    self.status = today.toString();
}

function getWelcome() {
    var ar = new Array(20)
    ar[0] = "What's on your mind?";
    ar[1] = "How can I help?";
    ar[2] = "Anything you need help with?";
    ar[3] = "Ask me anything";
    ar[4] = "What can I help you with?";
    ar[5] = "What would you like me to do?";
    ar[6] = "What can I do for you?";
    ar[7] = "Need help with anything?";
    ar[8] = "Need someone to talk to?";
    ar[9] = "I'm here to help";
    ar[10] = "Anything you need to know?";
    ar[11] = "How else can I help?";
    ar[12] = "What can I do now?";
    ar[13] = "Need anything?";
    ar[14] = "Any problems you need solving?";
    ar[15] = "Hello, how do you do?";
    ar[16] = "Hi there";
    ar[17] = "Hi, I'm aurum";
    ar[18] = "Hello there";
    ar[19] = "How do you do?";
    var now = new Date();
    var sec = now.getSeconds();
    document.getElementById('output').innerHTML = ar[sec % 20];
}

function getPlaceHolder() {
    var ar = new Array(20)
    ar[0] = "What's on your mind?";
    ar[1] = "How can I help?";
    ar[2] = "Anything you need help with?";
    ar[3] = "Ask me anything";
    ar[4] = "What can I help you with?";
    ar[5] = "What would you like me to do?";
    ar[6] = "What can I do for you?";
    ar[7] = "Need help with anything?";
    ar[8] = "Need someone to talk to?";
    ar[9] = "I'm here to help";
    ar[10] = "Anything you need to know?";
    ar[11] = "How else can I help?";
    ar[12] = "What can I do now?";
    ar[13] = "Need anything?";
    ar[14] = "Any problems you need solving?";
    ar[15] = "Hello, how do you do?";
    ar[16] = "Hi there";
    ar[17] = "Hi, I'm aurum";
    ar[18] = "Hello there";
    ar[19] = "How do you do?";
    var now = new Date();
    var sec = now.getSeconds();
    document.getElementsByName('srch')[0].placeholder=ar[sec % 20];
}

function command() {
        var srchVar = document.getElementById("srch");
        var srch = srchVar.value;
        var t = srch;
        var outputElement = document.getElementById('output');
        if (srch == '') {
            outputElement.innerHTML = "How can I help you, if you don't say anything?";
        }
        else if (srch.indexOf('about') != -1) {
            outputElement.innerHTML = "Hello, I'm Aurum. I was designed by Omar Latreche to help people answer their questions. However, I also like to talk to people aswell as answer their questions.";
        }
        else if (srch.indexOf('time') != -1) {
            outputElement.innerHTML = 'The current time according to your computer is' + ShowTime(new Date());
        }
        else {
            if (confirm("I am sorry but for some reason I don't understand. You could either repeat that or would you like to search Google for that instead?") == true) {
                window.open('http://ift.tt/1ANNWBe' + srch, '_blank');
            }
            else { /* Nothing */ }
        }
    }
    //Show time in 12hour format
var ShowTime = (function() {
    function addZero(num) {
        return (num >= 0 && num < 10) ? "0" + num : num + "";
    }
    return function(dt) {
        var formatted = '';
        if (dt) {
            var hours24 = dt.getHours();
            var hours = ((hours24 + 11) % 12) + 1;
            formatted = [formatted, [addZero(hours), addZero(dt.getMinutes())].join(":"), hours24 > 11 ? "PM" : "AM"].join(" ");
        }
        return formatted;
    };
})();

And the HTML:

<!DOCTYPE html>
<html>
<body onload="getWelcome(); getPlaceHolder();">
    <div class="output" id="output">
        An error has occoured. Please make sure you have JavaScript enabled in your browser.
    </div>
    <div class="cont">
        <div class="ui-widget">
            <div class="search-cont">
                <input class="search-field" id="srch" name="srch" onkeypress="searchKeyPress(event);" placeholder="ask me anything" spellcheck="false"> <input class="refresh" onclick="refreshBtn()" title="Refresh the conversation" type="button"> <input class="go" onclick="goBtn()" type="button">
            </div>
        </div><br>
    </div>
</body>
</html>

I really appreciate any help provided. Thanks, Omar.

PS. I apologies for the long paragraph but that is the only way I could think to explain what I need.

PPS. If you need any more information on my project just incase, the URL is http://ift.tt/1InGUrg

via Chebli Mohamed

Copying a email will returns html

I've created a list of different email links, however when i'm on the page trying to copy a email it will return email with the tags aswell is there any javascript code or something like this that can avoid this?

via Chebli Mohamed

Calling PHP Function through JavaScript with Parameter

I have a function in a separate PHP page to add information to a MySql database. However if I want to pass in a paramater which is only available in my JavaScript file.

PHP Function in ModelBrowse.php

function databaseAdd($lockval)
{
    include_once('../dbConnect.php'); 

    $con = connect();
        if (!$con) {
            trigger_error(mysqli_error($con), E_USER_ERROR);
            die('Could not connect: ' . mysqli_error($con));
        }
        if ($lockval = "locked")
        {
        $sql = "INSERT INTO model(lock) VALUES ('lock')";
        }

        if ($lockval = "unlocked")
        {
        $sql = "INSERT INTO model(lock) VALUES ('unlock')";
        }


        mysqli_query($con, $sql)

        mysqli_close($con);
}

I want to call databaseAdd in my JavaScript file. I know I must use AJAX but I am confused on how I must do this.

via Chebli Mohamed

Delay in function calling

The code is:

setTimeout(function () {
    $(id_lastchild).click();
    $("#upload_download_doc").hide();
}, 150);
setTimeout(function () {
    $(id_lastchild).click();
    $("#upload_download_doc").hide();
}, 100);

but I want to do above in a function like

function click_hide_Scroll(){
        $(id_lastchild).click();
        $("#upload_download_doc").hide();
}

Implementation which I am looking for is

delay(100).click_hide_Scroll().delay(100).click_hide_Scroll();

that means after 100ms delay call function after completion of it and 100ms delay call that function again.. Is it possible? or any other code to do this?

via Chebli Mohamed

Active menu Changer on Sticky Bar

I have designed a Parallax Page with Sticky Menu bar. I need to change the active menu on scrolling. I have made it to change the active class on Click event. But I need it to do for the scroll event.

Here is my HTML Code

<div class="main-menu">

    <ul>             
        <li><a class="active" href="#" data-delay="2000" data-appear="false" data-scrollto="#intro-slideshow">Home</a></li>
        <li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#overview">Features</a></li>
        <li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#categories">Categories</a></li>
        <li><a href="#" data-delay="2000" data-appear="false" data-scrollto="#contact">Contact Us</a></li>
    </ul>

</div>

Here is my JQuery Code for Onclick Active Menu Changer

$('*[data-scrollto]').click(function(){

        $( "a" ).removeClass( "active" );
        $(this).addClass("active");

        var dest = $(this).data('scrollto');                
        var pixels = $(dest).offset().top - 70;         
        var ms = Math.round(1000 + pixels/5);

        $('html, body').animate({               
            scrollTop: pixels
        }, ms, 'easeOutQuint');

    }); 

How do I change the active class on Scroll Event with the Data-Scrollto attribute ?

via Chebli Mohamed

multiple html pages with different display time in same iframe

i have 5 html pages and an iframe.

i need to display the html pages in an iframe with specific display time for each page. the delay should include the time for loading the i frame container. say first page have a display time of 10 sec 2nd page a display time of 20 sec ,3rd page a display time of 30 sec and so on.

how do i display all these pages bound to there display time. ?

i have tried many ways to add the load time my including iframe.load in the code but it causes some wiered recursions which alters the display time

via Chebli Mohamed