jQuery

16K

Solutions

27

Articles & Videos

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

Imagine you have a text and that each and every word is an anchor link. When you click on one word, the dictionary pops up. This has been already implemented, and seems to work quite fine.

Now, the problem is that I would like users to be able to select phrases too. I have thought of this to work as follows:

1. click on one anchor element (not necessarily at the beginning of the word)
2. drag (and show current selection progress somehow)
3. drop on another anchor element

Any ideas on how to implement this using jQuery and HTML5?
1
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

I need to integrate Google Adwords Conversions code https://support.google.com/adwords/answer/6331304?hl=en&authuser=0

How should I add the below code...

<!-- Google Code for Adwords - Contact Us Conversion Page
	In your html page, add the snippet and call
	goog_report_conversion when someone clicks on the
	chosen link or button. -->
	<script type="text/javascript">
	  /* <![CDATA[ */
	  goog_snippet_vars = function() {
		var w = window;
		w.google_conversion_id = 857015425;
		w.google_conversion_label = "hjP2CL3P6G8QgYnUmAM";
		w.google_remarketing_only = false;
	  }
	  // DO NOT CHANGE THE CODE BELOW.
	  goog_report_conversion = function(url) {
		goog_snippet_vars();
		window.google_conversion_format = "3";
		var opt = new Object();
		opt.onload_callback = function() {
		if (typeof(url) != 'undefined') {
		  window.location = url;
		}
	  }
	  var conv_handler = window['google_trackConversion'];
	  if (typeof(conv_handler) == 'function') {
		conv_handler(opt);
	  }
	}
	/* ]]> */
	</script>
	<script type="text/javascript"
	  src="//www.googleadservices.com/pagead/conversion_async.js">
	</script>

Open in new window


into this code so the conversion gets registered.

$(document).ready(function() {
	
	$('#contact-form').formValidation({
		
		// live: 'enabled', // Default value
		trigger: 'input change keyup'
		
	}).on('success.form.fv', function(e) {
		
		$.post("contact_script.php", {
					first_name: $("#first-name").val(),
					last_name: $("#last-name").val(),
					company: $("#company").val(),
					email: $("#email").val(),
					phone: $("#phone").val(),
					message: $("#message").val()
        		}, function(data) {
					$("#contact-form").hide();
					$("#contact-success").html(data).show();
					$('html, body').animate({scrollTop: $("#contact-success").offset().top - 100}, "fast");
		});
		
    });
		
});

Open in new window

0
Hi, It seems to me that everything is set up correctly, and yet I am not getting a result with this.

I looked over this and all seems to be right. https://mozilla.github.io/nunjucks/templating.html#template-inheritance

But when I try to use it, it does't work. I'm going to upload the relevant files here for you to look at. The problem lies in trying to add meta tags. See my expectations below the files.

src/pages/full-width.html:
full-width.html

src/templates/layout.html:
layout.html

src/templates/partials/head.html:
head.html

dev/gulp/gulpfile.js:
gulpfile.js

My expectation is this: 1. On fullwidth.html, I make this change:

From:
{% block title %}Site - Home Title{% endblock %}
{% block description %}Site - Home Description{% endblock %}

To:
{% block title %}Meal Plans, Healthy Prepared Meal Plans Home Delivery {% endblock %}
{% block description %}Our site offers the best flexible meal program with a satisfaction guarantee. Getting delicious meals delivered to your home has never been easier.{% endblock %}

2. I run gulp nunjucks, and a new file appears in src:  fullwidth.html. This file has two metatags:
<title>Meal Plans, Healthy Prepared Meal Plans Home Delivery </title>
<meta name="description"  content="Our site offers the best flexible meal program with a satisfaction guarantee. Getting delicious meals delivered to your home has never been easier.">

However, what I get is this(although …
0
I'm looking for a way to asynchronously load the contents of a whole div. I'd like to delay the loading of everything in the div. Right now, everything is loaded all at once and it's not bandwidth efficient.

https://codepen.io/anon/pen/GENGJW
0
I am using Modernizr to detect if autoplay is available in the browser. Then, I am displaying either a video or a Javascript-based slide show depending on the result. Here is my code:

videoAutoPlayCheck=setInterval(videoCheckAutoPlay, 1000);
videoCheckAutoPlay();

function videoCheckAutoPlay(){
	Modernizr.on('videoautoplay', function(result){
		if (Modernizr.videoautoplay){
			//PLAY VIDEO
			window.clearInterval(videoAutoPlayCheck);
		} else {
			//PLAY SLIDE SHOW
			window.clearInterval(videoAutoPlayCheck);
		}
	});
}

Open in new window


I am getting unpredictable results in Chrome, however this seems to be working in all other browsers. Researching the issue on Google, there are posts from a couple years ago describing what I am seeing. However, I would have thought that enough time has passed that Modernizr would have fixed that issue.

To describe what is happening, sometimes Chrome loads the video, sometimes the slide show. There doesn't seem to be any way to predict... in fact, sometimes reloading the page brings the opposite result as the previous page load.

Is there anything wrong with my code, or is this still a known issue with Modernizr? Or should I be looking for some other solution?

Thank you.
0
I want to ignore a function if a specific button/submit is clicked.  If I have a submit button with an ID of submit, how do I not run a function?  

If Clicked Do NOt Run.
0
Hi,

I am in need of some assistance with a character search in any string for the followign characers

-
[
]
*
!

Any and all help would be very much appreciated.

Thanks

Simon
0
Hello experts,

I've been struggling with this for some days now. I use the function below to control a youtube video embedded with an iframe. The initialize function works properly. The problem is the onPlayerStateChange function. I'm trying to control the pause and play using the same button but it doesn't seem to run properly. It doesn't pause the video and the video itself cracks or lags.

var player, time_update_interval = 0;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('videod', {
        playerVars: {
            color: 'white'
        },
        events: {
            'onReady': doThisFirst,
            'onStateChange': onPlayerStateChange
        }
    });
}

function doThisFirst(){
    updateTimerDisplay();
    clearInterval(time_update_interval);
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
    }, 1000);
    $('#volume-input').val(Math.round(player.getVolume()));
}

function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {  // If video is playing…
              var stop = document.getElementsByClassName('playButton');
              stop[0].click(player.pauseVideo());
        }
        else{    // If video – pause
            var start = document.getElementsByClassName('playButton');
            start[0].click(player.playVideo());
        }
      }
0
http://maps.aerophotos.cf/test.
Basically make the markers update every second or so from the JSON file aswell as display the data in the JSON file i.e altitude callsign etc when clicking on marker.
0
Trying to make a mobile swipe work and running into this in chrome.  Haven't found a work around yet, wondering if anyone else has.

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

My event code looks something like this

 $( ".some-element" ).on( "swiperight", function(e){
       doSomething();
 });
0
Learn by Doing. Anytime. Anywhere.
Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

How to populate select options from database in jquery. I am using datatables editor plugin to edit the row.

var local_path = "/dashboardlocal_list/0/?format=json";
var local_editor = new $.fn.dataTable.Editor( {
        idSrc:  'id',
        ajax: {
            // create: {
            //     type: 'POST',
            //     url:  '/dashboard/local_detail/'+ idSrc +'/?format=api'
            // },
            edit: {
                type: 'PUT',
                url:  '/dashboard/local_detail/_id_/',
                data: function (d) {
                        var updated_data = {};
                        $.each( d.data, function (id, value) {
                            updated_data['description'] = value['description'];
                            updated_data['start_date'] = value['start_date'];
                            updated_data['end_date'] = value['end_date'];
                            updated_data['task.name'] = value['task.name'];
                                                             } );
                        console.log(updated_data);
                        return updated_data;
                                 },

                success: function() {
                        console.log('Updated')
                        workorder_table.api().ajax.reload();
                                    },
                    },
            remove: {
                type: 'DELETE',
                url:  …
0
Hye experts, i have a problem to display data in data datagrid based on searching..can someone look it up..
Thank you for your help

Here is my code: test3.php

<?php
include "utama.php";
?>

<script type="text/javascript">
 function doSearch(){
    $('#tt').datagrid('load',{
        MUKIM: $('#mukim').val()
    });
}
</script>




<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
        url="test4.php" toolbar="#tb"
        title="Load Data" iconCls="icon-save"
        rownumbers="true" pagination="true">
    <thead>
        <tr>
            <th field="MUKIM" width="80">MUKIM</th>
            <th field="KAWASAN" width="80">KAWASAN</th>
            <th field="NAMA_KAWASAN" width="80" align="right">NAMA_KAWASAN</th>
        </tr>
    </thead>
</table>

<div id="tb" style="padding:3px">
    <div>
    <input name="MUKIM" id="mukim" class="easyui-combobox" style="width:100%"
            data-options= "label: 'MUKIM : ',
            valueField: 'MUKIM',
            textField: 'NAMA_MUKIM',
            url: 'dropdown_mukim.php'">
    </div>
    <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
</div>

code test4.php

<?php
include "connection.php";
$mukim = isset($_POST['mukim']);


if (isset( $_POST ["mukim"] ))
{
    $mukim = $_POST ["mukim"];
}

// echo  $name ;
// echo $phone;
// echo $mukim;

$rs = $conn->prepare("SELECT KAWASAN, NAMA_KAWASAN, MUKIM FROM …
0
Coding : PHP HTML jquery JavaScript.
Database : SQL Server 2008

I would like to import excel from pattern form in excel.

Example
How to import Excel data by browse file and select cell data for import.
cell data is select C1 C2 C3 A5.
in file Excel
     |A| B             |C
|1|   |Name      | A
|2|   |Surname| B
|3|   |Gender   | Man
|4|   Status
|5|   Good

and import data to SQL table
 
ID|name|surname|gender|status|
1 |A         |B            |Man     |Good

Thank you for help me.
0
Hello, Could anybody help,
I have a textbox:
 <td><asp:TextBox ID="Comments" runat="server"
                              width="200px" Font-Size="Small" Height="20px" Text ='<%# Eval("comments")%>' Enabled ="true" />
</td>
in Repeater and I need to allow user to open popup by clicking on "Comments" textbox to read, edit or enter text in popup and then return it to "Comments" textbox.
What should I do?
0
I have a user form that is created in extjs framework. The user form has many user fields which are being passed as part of request payload to the REST controller. I am trying to add a grid panel(most likely in a tabular format with multiple rows & columns) to the user form. But I am not sure how to pass the grid panel data as part of request payload to the REST controller. I will post more code if any more details are needed. Any help would be appreciated. Thanks.

Ext.define('soylentgreen.view.admin.UserForm', {
    extend : 'Ext.form.Panel',
    alias : 'widget.userform',
    bodyStyle : 'padding:5px 5px 0',

// some userform elements like firstname,lastname, go here.....

name : 'userTeamGrid',
  xtype : 'gridpanel',
id : 'userTeamGrid',
itemId : 'userTeamGrid',
multiSelect : true,
selModel : Ext.create(
        'Ext.selection.CheckboxModel',
        {
          injectCheckbox : 'first',
          mode : 'MULTI',
          checkOnly : false
        }),
anchor : '100%',
width : '700px',
height : 250,
flex : 1,
store : 'userTeamStore',

var user = form.getRecord();
form.updateRecord(user);
user.save({
        callback : function(records, operation){
          //reset the (static) proxy extraParams object
          user.getProxy().extraParams =  {
            requestType: 'standard'
          }
          if(!operation.wasSuccessful()){
            var error = operation.getError();
0
The website is using a vertical accordion menu which works great, but resets to its' initial position each time (if expanded) while going to a new page. This can be very annoying for a visitor who has to start browsing through a lot of sub-menus, to expand it back exactly where it was. There are a lot of pages/links nested in the menu and I am planning to add even more, so the accordion should stay open. It should close back up only when and if the visitor chooses to, but I'm not sure how to accomplish that, because I'm not very familiar with these scripts.
Please take a look at the scripts pasted below and let me know if you have any suggestions.
Thank you.

$(document).ready(function(){
                        $("#accordian a").click(function(){
                              var link = $(this);
                              var closest_ul = link.closest("ul");
                              var parallel_active_links = closest_ul.find(".active")
                              var closest_li = link.closest("li");
                              var link_status = closest_li.hasClass("active");
                              var count = 0;

                              closest_ul.find("ul").slideUp(function(){
                                    if(++count == closest_ul.find("ul").length)
                                          parallel_active_links.removeClass("active");
                              });

                              if(!link_status)
                              {
                                    closest_li.children("ul").slideDown();
                                    closest_li.addClass("active");
                              }
                        })
                  })

and

$(document).ready(function(){
      $("#accordian h3").click(function(){
            //slide up all the link lists
            $("#accordian ul ul").slideUp();
            //slide down the link list below the h3 clicked - …
0
I am using keno ui grid for angularjs keno grid in our project and am  new to kendo . I am getting data from API similar to below JSON Data and need to bind this data to Kenod Grid basically there will be no header fields / columns .Just simply bind data to grid.

JSON Data (json data viewer

["cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6"
]

It would be great if anyone can provide sample example  in plunker/jsfiddle.

Thanks in advance
0
I have a very simple responsive popup enabled to view large image, it works perfectly fine when viewing in the portrait mode but when I view it in landscape mode only of the image is shown and I think the reason being I have css  position fixed to center the popup, If I remove position fixed and making is absolute then the popup always stays at the top

here is the link for my dev site

dev site link

if you click on any of the badges you will see popup, try viewing in landscape mode and you will see what I mean

Here is my HTML code

<a class="cd-popup-glink gallery-link" onclick="openPopup(this);"><img class="box-shadow" src="/wp-content/uploads/2017/06/star32.jpg" alt=""></a>
<div id="b125" class="cd-popup-gl popup is-visible" role="alert">
 <div class="cd-popup-container-gl">
 <div class="gallery-item-cat-full-img">
  <p class="pop-title">Product Name<br><span class="pc-sku">Model# <strong>sku</strong></span><br>To design your custom badge CALL: xxx-xxx-xxxx</a> and use the Model# as reference</p>
  <img id="zimage" class="box-shadow" src="/wp-content/uploads/2017/06/star32.jpg" alt="">
 </div>
 <a onclick="closePopup();" class="cd-popup-close-gl img-replace">close</a>
 </div> 
 </div>

Open in new window


JavaScript

<script type='text/javascript'>
function openPopup(elem) {$(elem).next().addClass('is-visible');$(elem).next().siblings(".popup").removeClass('is-visible');}
function closePopup() {$('.popup').removeClass('is-visible');}	 
</script> 

Open in new window


and CSS:


Open in new window

0
Hi, All. I have a nunjucks page. In part it says:
<!-- layout.html -->
{% extends "layout.html" %}
{% set activePage = "pic-content" %}

{% block title %}This is the new title of our webpage{% endblock %}
{% block description %}This is the new description of our webpage{% endblock %}

Open in new window


OK? Then layout.html says above the body tag:
{% include "partials/head.html" %}

And partials/head.html has a bunch of tags:
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <title>{% block title %}Default Title{% endblock %}</title>
  <meta name="description" content="{% block description %}Default Description{% endblock %}">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/styles.min.css">
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <link href='css/animations-ie-fix.css' rel='stylesheet'>
    <![endif]-->
    <script async type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"></script>
  <noscript><p class="bg-warning noscript">
    JavaScript is off. Please enable to view full site.
  </p></noscript>
</head>

Open in new window


Ok, when I run gulp nunjucks, I get this in the head of the resulting file:
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Default Title</title>
  <meta name="description" content="Default Description">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/styles.min.css">
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <link href='css/animations-ie-fix.css' rel='stylesheet'>
    <![endif]-->
    <script async type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"></script>
  <noscript><p class="bg-warning noscript">
    JavaScript is off. Please enable to view full site.
  </p></noscript>
</head>
  

Open in new window

So almost everything is transferring over, but the block title and block description are not. I'm going to attach the gulpfile here, hope someone can help me. Thanks.
gulpfile.js
0
Increase Agility with Enabled Toolchains
Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

I am using a JavaScript plugin called listjs.  For those that don't know about it, what it does is the following.
You configure a textbox as a search and then tag columns in a table with class names and use those names to configure the options on the listjs plugin.

The plugin will then rebuild your list allowing incremental search returns of rows have strings which match the search box values.  It mostly works, but with a hidden string which is a JSON structure it only partially works,  I can find matches for say  8 rows and when I add another character that still matches in order the 8 rows,  one or more rows disappears.

Also,  in jQuery,  I set the val() of the searchbox to what should return some rows, and it behaves as though nothing was entered.  It seems that it knows about keypress and using jQuery to plop the value in has no keypress.

Any advice on these issues would be greatlya appreciated.

Thanks.
0
Hi,  

I am trying to implement jquery validation on my simple form but have a few questions.

1.  How do I get it to carryout submitting the form after validation is true?

My current code is this and it works perfectly:

$('#submitButton').click(function(e) {
	

			
		e.preventDefault();
		$.ajax({
            type: "POST",
            url: "pages/add/AddPageUpdate.asp",
            data:  $(this.form).serialize(),
            cache: false,
            dataType: "html"
		})
		.done(function(responseText) {
				 $('#dialog').popup('show');
		})
		.fail(function() {
                alert("Error");
        });
		return false;
		
		 
		
	});

Open in new window



I just want to be able to run my ajax code if the form validates correctly.


2.  How can I improve the validation text so it looks better than just white text?   Are there any predefined symbols?
0
I currently login to the time from website using the following script.


browser = webdriver.Chrome('E:/Shared Folders/Users/runnerjp/chromedriver/chromedriver.exe')
browser.get("https://www.timeform.com/horse-racing/account/sign-in?returnUrl=%2Fhorse-racing%2F") 
time.sleep(3)
username = browser.find_element_by_id("EmailAddress")
password = browser.find_element_by_id("Password")
username.send_keys("usr")
password.send_keys("pass")
login_attempt = browser.find_element_by_xpath("//input[@type='submit']")
time.sleep(3)
login_attempt.submit()

Open in new window


it works but I find using Chrome web driver is hammering my CPU. Is there an alternative code I could use that does not mean I need to physically load the page to sign in?
0
Hello All;

OK, this is code that I found a while back, and posted here.
ASP Classic - Insert text, Line breaks and Code

The issue that I had, or am still having now, is that I am giving the user the option to choose the tags they want to use.
They can have as many tags as they need in their post.

The issue with the code in the link above is that it will only do one tag hard coded.
So, that I have done is added an REGGEX into it, and it works GREAT! for the highlighting,
However, adding this in, has messed up the main function of this code FUNCTION, and that is.
It adds the line breaks to everything OUTSIDE of the Code tags.

The REGGEX that I used and works is this.

Function Reggex(strString, strPattern, strReplace)

	Dim RE: Set RE = New RegExp

	With RE
		.Pattern = strPattern
		.Global = True
		.IgnoreCase = True
		Reggex = .Replace(strString, strReplace)
	End With
	
End Function

fString =   Reggex(fString, "\[code=(.*?)\](.*?)\[\/code=(.*?)\]", "<pre class=""line-numbers"" id=""code""><code class=""language-$1 demo"">$2</code></pre id=""code"">")

Open in new window


The original code is this. (Modified to work in my project)

 	CodeTags(1,1,1) = "[ code=sql]" ' Remove the space between the bracket, 
 	CodeTags(1,2,1) = "[/ code=sql]" ' Remove the space between the bracket, 
 	CodeTags(1,1,2) = "<pre class=""line-numbers"" id=""code""><code class=""language-sql demo"">"
 	CodeTags(1,2,2) = "</code></pre id=""code"">"

Open in new window


This is the entire script.


Open in new window

0
Hi,
I am using Jquery datatables. In that when data is not there then select all check box is properly aligned,When i have supplied the data to data table then it is misplaced. It is aligned in down but the clicking property is in correct place,Only check box is not in correct place.
I don't know how to solve,Please help me.
0
I use Twilio to receive SMS notification.
On Twilio the Response is successful.
My issue is: On Default.aspx, I do not see anything when I tried to send SMS from my phone to the twilio phone no.

TwilioReceiver.aspx
protected void Page_Load(object sender, EventArgs e)
        
{
            
Response.ContentType = "text/xml";
            
var twiml = new Twilio.TwiML.MessagingResponse();
            
twiml.Redirect("http://www.surecocrm.com/ziprick/Default.aspx?From=" + Request.QueryString["From"]);
        
}

Open in new window


Default.aspx
protected void Page_Load(object sender, EventArgs e)
        
{
            
if (!(string.IsNullOrEmpty(Request.QueryString["From"])))
            
{
                
string from = Request.QueryString["From"];
                
Response.Write("Hello" + from);
                
// messageReceiver.Text = "<i class='fa fa-commenting' style='font-size:40px;color:red'></i>" + " You got new message(s)";
            
}
        
}

Open in new window

0

jQuery

16K

Solutions

27

Articles & Videos

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics