function onMouseEnter(index){ var star = document.getElementsByClassName(“starClass”); var j; for(j = 0; j < fa.length; j++){ if(j < index){ star[j].style.color = “orange”; } else{ star[j].style.color = “#ccc”; } } } function onMouseOut(){ var star = document.getElementsByClassName(“starClass”); var k; for(k = 0; k < fa.length; k++){ star[k].style.color = “#ccc”; } }
Let’s say you have 2 buttons on your web page. <form id=”form1″ runat=”server”> <asp:Button ID=”Button1″ runat=”server” Text=”Button1″ OnClick=”Button1_Clicked” /> <asp:Button ID=”Button2″ runat=”server” Text=”Button2″ /> </form> Scenario 1: Disabling the specific button <script type=”text/javascript”> function DisableButton() { document.getElementById(“<%=Button1.ClientID %>”).disabled = true; } window.onbeforeunload = DisableButton; </script> The DisableButton JavaScript function is used for disabling specific Button when Clicked. […]
Here is the Asp part: <label for=”chkCondition”> <asp:CheckBox ID=”chkCondition” Text=”Should i show the div?” runat=”server” onclick=”ShowHideDiv(this)” /> </label> <hr /> <div id=”divToShowOrHide” style=”display: none”> this div will be shown regarding the checkbox checked status. <asp:TextBox ID=”myTextBox” runat=”server” /> </div> And here is the Javascript part: <script type=”text/javascript”> function ShowHideDiv(chkCondition) { var divToShowOrHide = document.getElementById(“divToShowOrHide”); divToShowOrHide.style.display […]
var table = $(“#datatable”).DataTable({ “paging”: false, “ordering”: false, “searching”: false, “info”: false });
<script> let mySession = ‘<%= Session[“SessionName”].ToString() %>’; //use your session … console.log(mySession); alert(mySession); </script>
<table align=”center” width=”20%”> <tr> <td style=”padding-right: 10px”> <input type=”text” id=”Search” onkeyup=”myFunction()” placeholder=”Please enter a search term..” title=”Type in a name”> </td> </tr> </table> <br> <div class=”target”> This is my DIV element. </div> <div class=”target”> This is another Div element. </div> <div class=”target”> Can you find me? </div> <script> function myFunction() { var input = document.getElementById(“Search”); […]
const theName = “Vincent van Gogh”; function hideWord(word) { if (word.length < 2) return word; return word.substring(0, 1) + ‘*’.repeat(word.length-1); } console.log(theName.split(” “).map(hideWord).join(” “)); OUTPUT: V****** v** G*** You could also wrap the whole lot in a function if you wanted to be able to call it from multiple places and avoid redefining it. function […]
Let’s say we want to truncate long strings (length > 250): short = long.replace(/(.{250})..+/, “$1…”); or short = long.replace(/(.{250})..+/, “$1…”);
We just need to loop through the razor collection to populate the Javascript array as below: @foreach (var item in Model) { @:$(function () { @:$(“#map”).googleMap(); @:$(“#map”).addMarker({ @:coords:[@item.Latitude], @:title: `@item.City, @item.District`, @:text: `@item.Address` @:}); @:}); }
Let’s say you send a model called “MyModel” from controller to view. In Controller: … var result = new MyModel() { Id = 1, Name = “Ercan”, FavoriteTeam = “Galatasaray”, FavoriteGame = “Half Life Series” } return View(result); … and now we will send this model which comes with result to Javascript via setName function: […]
classList is pretty smart and the most modern system of manipulating CSS class names in elements via JavaScript. Adding class name: const element = document.getElementById(‘txtMyText’); element.classList.add(‘myClass’); Removing class name: const element = document.getElementById(‘txtMyText’); element.classList.remove(‘myClass’); Removing multiple class names: const element = document.getElementById(‘txtMyText’); element.classList.remove(‘myClass1’, ‘myClass2’) Thanks to clubmate.fi
The split() method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method’s call. Syntax split() split(separator) split(separator, limit) Return value An Array of strings, split at each point where the separator occurs […]
<script> var mySessionValue = ‘<%= Session[“SessionName”].ToString() %>’; alert(mySessionValue); </script>
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified. Syntax: slice() slice(start) slice(start, end) Parameters start Optional Zero-based index at which to start extraction. A negative index can be used, indicating […]
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, you should use the slice() method. Syntax: splice(start) splice(start, deleteCount) splice(start, deleteCount, item1) splice(start, deleteCount, item1, item2, itemN) Parameters start The index at which to […]
pop(): Remove an item from the end of an array (returns the removed item) push(parameterToAdd): Add items to the end of an array (returns the new array length) shift(): Remove an item from the beginning of an array (returns the removed item) unshift(parameterToAdd): Add items to the beginning of an array (returns the new array […]
Template literals are enclosed by the backtick (` `) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between the backticks (` `) get passed to a function. let myUnOrderedList = [‘Record1’, ‘Record2’, […]
Auto-Scroll (every 5 seconds) window.setInterval(function() { var element = document.getElementById(“myDiv”); element.scrollTop = element.scrollHeight; }, 5000);