Skip to main content

Posts

Showing posts with the label JavaScript

How to Scroll to an Element with Javascript

  Overview Scrolling to a specific element or part of a webpage is mainly done to keep a user intact with the webpage for a longer period. A scroll is a function that can be used also to scroll to the beginning of a webpage from the bottom of the webpage instantly. Instant scrolling functionality is done or implemented using JavaScript. Scrolling to a particular section of a webpage adds a single-click functionality without much intervention from the user. There are different JavaScript scroll to element methods that are used to implement the functionality of scrolling to a particular element. These methods include: JavaScript  scrollIntoView  method. JavaScript  scroll  method. JavsScript  scrollTo  method. In this article, we will understand them thoroughly. Introduction Before learning about the JavaScript scroll to element, Let's learn a bit about JavaScript. JavaScript  is an object-oriented programming language used on web pages. JavaScript ...

How to convert JavaScript Date without time stamp

 At some point when setting pika date min date I had to use JavaScript date variable without time stamp. When you try JavaScript new Date() in browser console, you can see date with time stamp. To remove time stamp what I did was use new Date with year , month and day parameters. new Date(new Date().getFullYear(),new Date().getMonth() , new Date().getDate())

Typescript - Self-Executing Anonymous Functions

/** * Self executing anonymous function using TS. */ (()=> { // Whatever is here will be executed as soon as the script is loaded. console . log ( 'executed' ) })(); I want a built a plugin that may work for Node.js, also for fron-tend as well. In that case you should compile your TypeScript in AMD and use an AMD loader on the frontend, like  http://requirejs.org/docs/start.html On the server side, you would need to use  requirejs  node package as well to load the file. Take a look at this:  http://requirejs.org/docs/node.html Basically there are two ways to compile TS to JS, using AMD, which is browser compliant, or using CommonJS, which is node.js compliant. Loading an AMD script in the browser or in the server needs to use an AMD compliant loader, and *requirejs** is one of them. (the most famous/used I'd say) Ref :  https://stackoverflow.com/questions/30274464/typescript-self-executing-anonymous-functions

creating json object with variables

if you need double quoted JSON use   JSON.stringify( object) var $items = $ ( '#firstName, #lastName,#phoneNumber,#address ' ) var obj = {} $items . each ( function () { obj [ this . id ] = $ ( this ). val (); }) var json = JSON . stringify ( obj ); Ref : https://stackoverflow.com/questions/12979335/creating-json-object-with-variables

small code snippet to get Youtube video views from URL using Javascript

<div>     <input type="url" placeholder="Enter Youtube video URL">     <a href="#" onClick="videoViews()">GO</a>  </div> <div class="videoembed"></div> <div class="views"></div> -------------------------------------------------- function videoViews() {     var rex = /[a-zA-Z0-9\-\_]{11}/,         videoUrl = $('input').val() === '' ? alert('Enter a valid Url'):$('input').val(),         videoId = videoUrl.match(rex),         jsonUrl = 'http://gdata.youtube.com/feeds/api/videos/' + videoId + '?v=2&alt=json',        embedUrl = '//www.youtube.com/embed/' + videoId,        embedCode = '<iframe width="350" height="197" src="' + embedUrl + '" frameborder="0" allowfullscreen></iframe>'      ...

Render bundle script after page load using Javascript

get bundle url and set in script tag in Head after page load  window.onload = function () {             var LayoutJsBundleUrl = ('@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/LayoutJs")');             var script = document.createElement("script");             script.src = LayoutJsBundleUrl;             script.type = "text/javascript";             document.getElementsByTagName("head")[0].appendChild(script);         } Also get bundle url from Scripts.Url("~/bundles/LoginJs")

How to Get Dropdown's Selected Item's property in Kendo UI?

Kendo Dropdown: getting the selected item You could use the   dataItem   method of the ComboBox/Dropdown to get the model for the selected item. As a side note, the context of the event handler is the ComboBox and it is accessible via   this . E.g. function   change(e) {      var   text =   this .text();      var   value =   this .value();      var   object =   this .dataItem( this .select()); } I hope that this information was helpful for you. I wish you a great day! and another way is : var ddl = $ ( "#ddl" ). data ( "kendoDropDownList" ). dataItem ( $ ( "#ddl" ). data ( "kendoDropDownList" ). select ()). FieldName ; //FieldName is the text field of DataSource --- .DataTextField("FieldName") Ref :  http://www.telerik.com/forums/getting-the-selected-item Ref : http://stackoverflow.com/questions/21600895/how-to-get-dropdowns-selected-items-tex...

Check if Popup Window Closed

Sometimes you will want to use a popup window for an antiquated system and need to maintain a reference to the popup window so that when the popup loses focus you can bring it back in focus with a click of a button. The following script will allow you to do that. In brief, the script opens a window when a button is clicked, if it loses focus you just need to click the button again to get it back. The script also deals with the fact that the user may close their browser window, navigate away from the main page or refresh the current browser window. Enjoy! <html> <head> <title></title> <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script> </head> <body> <button id="button">Click Me!</button> <script type="text/javascript"> var win; $(window).load(function() { $('#button').click(function(){ openPo...

Smooth Scrolling To Internal Links With jQuery

jQuery allows you change the way you interact with your website with very little code. jQuery has an animate function which allows you to animate anything that jQuery does, including scrolling. Animate scrolling creates a better effect to the visitor than to just job to a place on the page. There are many websites that will use internal links to jump to different parts of the page this is done by using a # and then the element id in the anchor tag. < a href = " #services " > Jump to services </ a > < div id = " services " > </ div > Doing the above creates a link that will move the page to the services div when you click it. But it jumps to this position and if it's far down the page it's not the nicest effect to the visitor. It's better if you can actually scroll to this position to help the visitors see where this is positioned. In jQuery if you set an animation on the scroll event then it creates a scrolling...