Posts

Showing posts with the label jquery

select picture by choosing date in datepicker

select picture by choosing date in datepicker I would like to create a simple web page, where user can select a picture by choosing date in datepicker. The picture filenames consist date string. For example: img-2018-06-24.png. So far, I could get work this datepicker example: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#datepicker" ).datepicker(); //selecting the button and adding a click event $("#alert").click(function()...
-
Read more

Telerik MVC controls, OnDocumentReady is firing twice

Telerik MVC controls, OnDocumentReady is firing twice I'm new to Telerik MVC controls, so this may be something simple. I started out with making a new TelerikMvcApplication solution. Site.Master: </div> <%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true).Add("Index.js")) %> </body> </html> Index.aspx: <%: Html.Telerik().ScriptRegistrar().OnDocumentReady("Index.Init()") %> </asp:Content> Index.js: var Index = function () { return { Init: function () { alert('1'); } }; } (); When I load Index.aspx, the Init() function in Index.js is fired twice, so I see 2 alerts one after another. If I assign a click handler to a button inside the Init() function and hit the button with FireBug, it is actually showing 2 events being assigned to the button. Why is this happening? After some more firebugging, I figured out that both ...
-
Read more

Centered owl-carousel where each image has the same hight and keeps its aspect ratio

Centered owl-carousel where each image has the same hight and keeps its aspect ratio Is there an approach to to create a centered owl-carousel where each image has the same height without losing its aspect ratio? owl-carousel I tried to calculate the image sizes with JS/jQuery but then the calculation of the owl-carousel gets messed up. Same result with CSS s. example (jsfiddle): JS/jQuery owl-carousel CSS $(document).ready(function () { $('.loop').owlCarousel({ center: true, items: 3, loop: true, margin: 20 }); }); .owl-carousel .owl-stage { height: 150px; } .owl-carousel .owl-item { height: 100%; } .owl-carousel .owl-item .item { height: 100%; } .owl-carousel .owl-item img { height: 100% !important; width: auto !important; margin: 0 auto; } <link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"> <...
-
Read more

how to render a javascript files after a view is render in Angular

how to render a javascript files after a view is render in Angular I am new to angular and this is first time working with angular.js . I am trying to build an single page application in angular which has the following pages All my pages have jquery script to handle modal popup form submission etc. All of them work, but when i render those pages with ng-view inside index.html. Those script doesn't work,. They do not render as well. ng-view Can anyone please tell me how can i fix this issue or if there is any other way of doing the same keeping those jquery functions. Here is my file structure Index.html <html> ...... <header> <script src="<ANGULAR.JS>"></script> <script src="<ANGULAR ROUTE.JS"></script> <script src="<JQUERY>"></script> <script defer src="<OTHER SCRIPTS>"></script> </header> <body> <ng-view></ng-view> </bo...
-
Read more

Get image alt, add as parent class

Get image alt, add as parent class I'm doing some CSS and I'm not great with JavaScript. However I'm not allowed to edit any of the plugin files, so I thought I could use some JavaScript to solve my issue of missing unique classes. I just want to take the alt="" HTML attribute from an image and apply it as class="" HTML attribute to its parent <a> element. alt="" class="" <a> So instead of: <div class="wrapper-class"> <a class="img-parent"> <img alt="image 1" src=""> </a> <a class="img-parent"> <img alt="image 2" src=""> </a> <a class="img-parent"> <img alt="image 3" src=""> </a> </div> I need: <div class="wrapper-class"> <a class="img-parent image-1"> ...
-
Read more

Responsive, cover-fit image tagging

Responsive, cover-fit image tagging I am working on a project where I have a slideshow with images as follows: img { width:100vw; height:100vh; object-fit:cover; } This makes the images fullscreen and behave like background-size:cover, so they fill out the whole viewport on any screen size without distortion. I would like to tag certain points with text tooltips on these images. For this purpose I have found Tim Severien's Taggd, which works great on responsive images, but in my case the object-fit:cover; property makes the tagged positions inaccurate. object-fit:cover; I have tried everything from CSS hacks to improving Tim's code, but I am out of ideas. If you have any solution or workaround in mind please share. Thank you! 2 Answers 2 well i actually wanted to do the same thing. here is what i've done. maybe it will help someone in the future. it would be great if this fe...
-
Read more

jquery replace menu item text on hover

jquery replace menu item text on hover I have the following simple nav menu (there are no sub-menu items) and I need the text of each menu item to change upon hover. The default text is in the a href tags, the hover text is in the data-item attribute. I've tried variations of some jQuery code posted here, but I'm not getting it right. Any help would be appreciated. HTML <ul id="menu"> <li class="menu-item" data-item="Research"><a href="#research">01/08</a></li> <li class="menu-item" data-item="Awards"><a href="#awards">02/08</a></li> <li class="menu-item" data-item="Education"><a href="#education">03/08</a></li> <li class="menu-item" data-item="Publications"><a href="#publications">04/08</a></li> </ul> jQuery: $('li > .me...
-
Read more

ajax keypress function is not working and the ActionResult parameter is not receiving any value

ajax keypress function is not working and the ActionResult parameter is not receiving any value I want to change(calculate) a textboxs' value on ajax keypress event but the controller ActionResult is not receiving any value to calculate(receiving null) <script> $('#TotDiscnt').keypress(function () { //var data = $('#totDiscnt').val(); $.ajax({ type: 'Post', url: '/Whatever/Discount', data: $('#totDiscnt').val(), success: function (response) { $('#TotPurAmt').val(response); } }); }); </script> On controller public ActionResult Discount(string text) { // calculation return Json(sum, JsonRequestBehavior.AllowGet); I tried as data: { text: request.term }, while i do that the the ajax call is not calling the controller method.And one more thing how can i send two double value as a parameter t...
-
Read more

No validation don't show next fieldset

No validation don't show next fieldset I'm creating a multi-step form using this example - codepen.io/orozcokapo/pen/LmgjYg codepen.io/orozcokapo/pen/LmgjYg But, I want that in second fieldset, first validate required input textfield (I am using only one Textfield on second fieldset for mobile number input) and the button to go to the next step should work if the required field is not empty. I am unable to code it in JQuery. Could you please guide me how to do that? 1 Answer 1 First, designate which inputs are required by giving them the required attribute. Then, at the Next button's click function, move current_fs = $(this).parent(); to the top and add this code required current_fs = $(this).parent(); var inputs = current_fs.find("input[required]"); if(inputs.is((i,el) => $(el).val() == "")) { alert("Please fill out all required fields"); retur...
-
Read more

Onclick function not working with custom popup

Onclick function not working with custom popup I have created custom popup to show my records. I am using CodeIgniter, I am fetching records from database and display on the view page which is working. Now I have records in the view page like this EmpName EMPID Mobile No. Status Action xyz 122 0012141010 Pending view archive mnb 123 0124541021 Pending view archive poiu 124 0000000000 Approved view archive What I am doing is, When user click on " pending" then it will ask for confirmation popup "Are you sure want to continue?" If the user clicks on "Later" button then the popup will close. It will not take any action. There is no issue till now. " pending" "Are you sure want to continue?" "Later" Now let's talk about Sure button. Sure button not taking any action. I don't understand why it's not calling the submit action. Even it's not working on the archive. Sure Note: I don...
-
Read more

how to check if a div is empty

how to check if a div is empty Hello I have a div that has some content inside of it but when its empty I want it to say something like div is empty heres my code <div class="results">Hello</div> Just a simple google search yielded me this html-tuts.com/… – Vineet Jul 1 at 4:08 Possible duplicate of Check if the content of a DIV is empty in jQuery – Developer kt Jul 1 at 4:14 Please take the time to comment on the answers you received. – connexo Jul 1 at 4:24 7 Answers ...
-
Read more

ajax pagination - Can't get last table row

ajax pagination - Can't get last table row This code works perfectlly. But I can't get last row of the table. ex: My table had 9 rows but this displying only 8 rows, 1 row missing. Missing row is the last row when I use ASC or DESC. here's my code.. sorry my English not good. thank you! index.php <?php $db_username = 'root'; $db_password = ''; $db_name = 'ad_man'; $db_host = 'localhost'; $item_per_page = 2; $connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database'); if($check_ad = mysqli_query($connecDB,"SELECT ad_uid FROM fullbanner WHERE ad_uid='501'")){ $countr=mysqli_num_rows($check_ad); if($countr>=1){ $pages = $countr/$item_per_page; //create pagination if($pages > 1) { $pagination = ''; $pagination .= '<ul class="paginate">'; for($i = 1; $i<$pages; $i++) ...
-
Read more

Fancybox dynamic image load from var

Fancybox dynamic image load from var I am using this code to grab a class value from an a href: <a href="" class="images/success.jpg">Click to get image</a> <script> $("#myMenu a").bind("click", function() { var myPic = $(this).attr("class"); alert(myPic); }); </script> Everything working normal and smooth. Now I am using fancybox to load images and I have this code of fancy box that works normal also: $.fancybox.open('images/success.jpg'); I am trying to pass the variable myPic into fancybox code but I cant make it. So far I have tried this: $.fancybox.open(myPic); $.fancybox.open('myPic'); Is there any possibility to make it work? 1 Answer 1 There are always easier or more complicated ways to achieve the same result. Having a class="images/success.jpg" is not semantically appropriate. The easie...
-
Read more

jquery dynamic table render properly

jquery dynamic table render properly I am new to jquery, I am trying to display dynamic table with jquery. But when I call below jQuery.each(data, function(index, value) { value_split = value.slice(','); for(var i=0;i<value_split.length;i++){ $("#table").append("<tr><td>" + value_split[i] + "</td></tr>"); } }); I am splitting because it's comma separated list. I get data like First name Last Name Age Sam Don 23 How can I get in proper format with 3 headers and details in below row like normal table yes I'm slicing becuase data is object e.g. Object {headers: Array[6], values: Array[6]} data Object {headers: Array[6], values: Array[6]} sorry it's object not list Can you paste some of your CSV data? – omerowitz Apr 4 '17 at 18:16 ...
-
Read more