How can I set different code base on @media
I'm a novice with jquery. I wanted to have the main background image on my site fade in when users first come to the site. I was able to accomplish that with some code I found. $(document).ready(function() { $('#back').animate({opacity: 0}, 0).css({'background-image': 'url(http://bobpower.net/wp-content/uploads/2014/12/group-celebrate.jpg)'}).animate({opacity: 1}, 3500); }); I had it setup before hand to change the background image based on different screen sizes using @media and css but
jQuery plugins with table and pagination
I'm using jQuery 2.x, I wonder if there's a plugin that involve less javascript code as possible when building a table filled with ajax call. Datatables.net has a good way to achieve this, but I suspect that works only with jQuery 1.x because I can't call the server side code with ajax. Any suggestion? Thank you
Closing widget issue
Hi there, I am new to widget development and I am trying developing a dialog widget. How can I unload/close/kill/destroy the dialog from a command button which is part of the dialog ?
shorten jquery code
Hi, I am trying to change this massive code to have just 1 popup ONLY of 'availability doesnt match do you want to continue' ok or cancel as the options. The code is part of a html code which just calls this code as part of a cakephp program. I cant remove the extra dialogs after this notification. Also the notification if the availability does match I want it to continue. I really want to shorten this code to a few lines only but i cant . How do I get 1 option only of this because when I did myself
infinite scrolling only div part and not hole page
hi! i want to load specified div for my infinite scrolling, not hole page. i know i have to use valid jquery selector at load, but i make it wrong always in my testings. i used below code for page scrolling, but how i make it to only div loading scrolling and not hole pages? jQuery(document).ready(function() { //location.href = 'index.html#start'; var pages = new Array(); var current = 0; var loaded = new Array(); $('#pages a').each(function(index) { pages[index] = $(this).attr('href');
Random infinite scroll and doesnt repeat already published divs
Hi, I have infinite scroll with JQuery. But repeats already published divs when scrolling down. I want that randomly (from about 7 different div content pages with each page having an x number of div content, those div contents are news articles), a random number of artcles are taken from each page and published on my home page. And that this process repeats itself till all artcles, over all 7 pages, have been published. So, no repeats happen on my home page. I am breaking my head over this one.
[Keith Wood Datepicker] multiple date range selection
Hi I am developing a WebApplication, in that i am having a requirement to select date range as well as a single date. Please find the below code which i have used to show the datepicker and i am using keith-wood JQuery DatePicker Plugin. $('#txtMonthlyView').datepick({ multiSelect: 31, monthsToShow: 1, monthsToStep: 1, prevText: '', todayText: '', nextText: '', minDate: '01/12/2014', maxDate: '31/12/2014', defaultDate: '01/12/2014', dateClass: 'showDoY',
Why there isn't an oldTab/oldPanel in Tabs Load() event?
Hi, as in the title, i don't understand why in the implementation of the Load() Tabs there isn't a oldTab/oldPanel object that reference the last loaded (or showed) panel (like in the activate() event). Someone can explain me that? thanks
problem with if istruction.
Hello everybody, I need help how to set if instruction in case where the final part of a condition is equal. I mean I have many strings like AD01, AD02, AD03, AD04 and then C100, C101, C102 and so on, I tryed to set in this way: if (mat == "AD*" || mat == "C*") some thing ... but not working How can I set my condition instead to set many times if (mat == "AD01" || mat == "AD02" || mat == "AD03" || mat == "AD04")? Thanks in advance. Tegatti
How to slide/reveal content properly
> Test Page On the above test page, I would like to add some slide effects to the boxes that are revealed on click. I'm not much experienced with jQuery, but I figure I need to do some kind of testing to know if the user is clicking on a non "active" tab link - if so, close the active box and open the details box of the link just clicked. If clicking on the already active box don't do anything. I'm currently using this code near the bottom of the HTML page: $( ".nav-tabs li" ).click(function() {
Another JQuery UI Issue
Hello I am trying to use a JQuery UI dialog box on my website http://www.jameswinfield.co.uk/Emma.html which would appear when clicking the Events button. It does actually now bring up the dialog bit - but I want to shade out the rest of the screen and just show the dialog in front - how can I do that? Apologies for the dumb question - this is the first time I am testing out JQuery and keep getting stuck, Thanks James
set hashtag and it word color before submit.
hello. sorry my english language isn't good. i used hashtag system in my website. but i want now before submiting post by user, hashtag and it word will get blue color. in fact like twitter. like this picture. thank you. if is require to my code, i will put to next post.
identify the child
Hello, sorry first, my english isn't the best and the problem to describe is not easy. I hope i can do. I have some tabels and every tablke has its own id. i have some rows in this table. In every row i have two radio-buttons. Now I need a function to find the line in the clicked radio. Sample: (is only a sample to describe what i need) an which CHILD is the radio-button clicked The reason why i need that is this i manipiulate the <input> fields at the row. with this $("#box-"+TypeId+" tbody tr:nth-child("+child+")
css or jquery and how?
Hi I want a menu like the site hookerfurniture.com Please help I do not know where to put
Fade In not working.
Hi, Why on the face of the earth this does nothing when pressing the button ? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $("#btFadeIn").click(function () { $('PictureHolder').fadeIn('slow'); }); </script> </head> <body> <div id="PictureHolder" style="background-color:red;width:300px;height:200px;"
Referencing jquery to html in many sources
1. <script src="jquery.js"></script> (downloaded jquery uncompressed file) 2. <script src="http://code.jquery.com/jquery-2.1.3.min.js" ></script> 3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script> Is there any differences between these three? Which one should i use?
Binding touchstart to body causes iOS hover delays to disappear
I work heavily on the Drupal platform and several jQuery modules, but recently the Drupal Google Analytics module came out with an update that binds touchstart to the body in order to track clicks and taps for usage statistics. The only problem with this is that on iOS (most recent 8.x in my case) it kills the delay on hover CSS selectors. I've created a very simple demo of this behavior here: http://codepen.io/johnny5th/full/KwamjJ/ and my Drupal issue is here: https://www.drupal.org/node/2404215
how to get key value from list Items in html format in jquery to show respective detail page?
Am newbie to jquery.. I have tried to get json array in html format using ajax call in jquery.. then I have tried to show the respective detail page when click on item in item list.. how to get key value from jquery?? .. I have tried to search in net .. but didnt get clear idea.. Below mentioned code: <!DOCTYPE html> <html> <head> <script src="jquery-2.0.2.min.js" type="text/javascript"></script> </head> <body> <button id="action-button">Click me to load info!</button> <table id="info"></table>
using stringify
I am trying to pass two arrays to a php page like this: var mainFilter = getAllMainCheckedCheckboxesVals(); var subFilter = getAllSubCheckedCheckboxesVals(); JSON.stringify(mainFilter); JSON.stringify(subFilter); $.ajax({ url: 'process.php', data: { mainFilter : mainFilter, subFilter : subFilter}, type: 'post',
Colorbox-pop up automatically and after 5 minutes
Hi I am using colorbox and I want to display pop up automatically but after 5 seconds delay. How can I do this. Thanks Regards, Nazia
php Form, Validation & Preview in same page
Hi , I already build a form as php_self , i want to make it validation and preview on same page ; 1 file only . The source code : <?php // validate data $fnameErr = $lnameErr = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["fname"])) { $fnameErr = "First name is required"; } elseif (preg_match("/^[A-Z][a-zA-Z -]+$/", $_POST["fname"]) === 0) { $fnameErr = "First name must contain letters and spaces only"; } else { $fname = $_POST["fname"]; } if (empty($_POST["lname"]))
sum not working
Hi there.. Could someone tell me why this code give me as result of totViewNav 1935 instead of 54 (the sum)? I premise that I'm putting this on a wordpress theme.. thx in advance! jQuery( window ).load(function(){ var halfWindowHeight = jQuery( window ).height()/2; var halfViewportHeight = jQuery('.flex-active-slide').height()/2; var viewportNavHeight = jQuery('.flex-control-nav').height(); var paddingViewNav = jQuery('.flex-control-nav').css('padding-top').replace('px', ''); var totViewNav = viewportNavHeight
hide images and release the space.
I have a lightbox gallery. Everything is fine but I wanted to make it filterable. I used a tutorial and ended up with this code: HTML: <ul id="filter"> <li class="current"><a href="#">All</a></li> <li><a href="#">Kitchens</a></li> <li><a href="#">Bathrooms</a></li> <li><a href="#">CAD</a></li> </ul> <script> jQuery(function () { jQuery.thumbGrid.transitions.slideLeft = {in: {x:"0%", opacity:0}, out: {x:"-100%", opacity:0}}; jQuery.thumbGrid.transitions.slideRight = {in: {x:"0%",
using variable
I have the following code: var weight = ""; weight = $("#selectWeight").val(); if(weight == '') { alert('you must select a value first!'); } If weight has no value, I do not get a alert box. If I add an alert after getting the weight value, then I get the alert box. Is there something about using/initializing variables that I'm missing?
on() "mousedown" isn't working anymore. What am I doing wrong?
Hi On my site I want to change the href on all itunes links into a shorturl. I use this code. I think it worked before, but now it seems it has stopped working. Not sure why. No errors in log. Maby there's a more elegant solution (that's working)? jQuery(document).ready(function() { jQuery("body").on('mousedown', 'a[href*="itunes.apple.com"]', function() { var l = jQuery(this).attr('href'); if (l.match(/id(d{3,25})/g)) { jQuery(this).attr('href','http://tinyituneslink.co.uk/'+RegExp.$1);
Hover a div and change the class of the child div.
Hi All, I'm trying to create a sliding div inside a product on a product category page. But I can't figure out how to target just the div inside the div I'm hovering. Here is my js code ("jQuery" is needed instead of "?" in Wordpress ) ... <script> jQuery( ".woocommerce ul.products li.product, .woocommerce-page ul.products li.product" ).hover(function() { jQuery( ".product-info-slide" ).toggleClass( "showMe", "hideMe" ); }); </script> It toggles all the the .product-info-slide divs. I just want the
Tooltip - growing number of DOM elements
Why it adds new DOM element every time tooltip is shown?
Hover img with id=?
<div id="something"> <img class="button" id="article-222" src="image.jpg"> <img class="button" id="article-212" src="image.jpg"> <img class="button" id="article-292" src="image.jpg"> </div> How to catch particular hovered image and to do something with it?
Problem accessing li element in ASP master page
I have problem to access li element with jquery. When I use an addon for chrom jquery selector everything works as expected. But without the addon the code doesn't display anything on hover Thanks < li class = "subMenuLi"> < a id ="AllRecipes_Link" href ="~/Pages/AllRecipes.aspx" runat = "server"> A to Z Recipes </ a > < ul id = "subMenuUl"> < li >< a href = "#"> Test1 </ a ></ li > < li >< a href = "#"> Test2 </ a ></ li > < li >< a href = "#"> Test3 </ a ></ li > </ ul > </ li > $(document).ready(
jQuery not reacting to the change event
Hi, I'm glad this forum exits, I have written a jquery code to capture an change event defined on an select html element, which should trigger an ajax request to a PHP file, the data returned is used to update another select element. When I indeed trigger the change event on the first select element I don't see any change in the second select element. Firebug shows no errror in the console. html code of the select elements: <select name="sous-compte" id="sous-compte" class='selec' <!--onchange="selectdepartement(this.value)"
Question about external links and local projects
I'm new to JQuery mobile and I have viewed several tutorials and I have an issue with linking between pages. I have a simple 2 page setup, index.html and index2.html Many resources say you can simply link with a normal anchor but when I view my project locally, I get a "Error Loading Page" popup appear. If I add rel="external" then it loads the page fine. I am viewing this setup in my browser (Chrome) - so is this expected behaviour? Or should JQM be able to deal with this without needing the rel="external"?
.click() and getting row ID from tables
Hi ! Let's say I have a dynamic table output from a database onto a PHP page that looks something like this - I have removed some columns to keep things clear : <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>Tony</td> <td> <button id="banUser" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span></button> </td> </tr> </table> When the button is clicked (i.e JavaScript
jQuery targeting an element I don't want targeted
I need to pull the submenu under the last element "inside" the box but ONLY when it's using the widescreen menu. To do that I need to grab the last element in the navigation, the submenu under it and then calculate how much the submenu needs to be pulled to the left. That I have no problem doing. My problem is I can't seem to isolate ONLY the navigation element in ONLY the #top-menu ul. The first step was just to isolate the last child element in the navigation. I'm stymied at the first step which
Compare ID and attribute and apply class
I have this HTML structure: <div id="our_mega_menu_wellness" class="our_mega_menu"> <div> <div> <a class="subcat_menu1" onmouseenter="submenu_display(this.id)" id="wellness22" href="">Emotional Well-being</a> <a class="subcat_menu1" onmouseenter="submenu_display(this.id)" id="wellness24" href="">Home & Family</a> </div> <div class="menu_article_content"> <div data-id="wellness22"> </div> <div data-id="wellness22">
the third argument in .data() method
hi there, I found something odd ( I think ) , in the owl carousel plugin . previously, I was a junior in js. I have read .data() on api.jquery . and I see this method only can enter a maximum two arguments . while at the plugin I see the developers enter the third variable . for what the third variable is? while at the api.jquery only 2 arguments . the code is: $.data(this, "owlCarousel", carousel); on line 1448. thanks before. and sorry for my english.
Keep picture with slectMenu after selected
I use jquery UI - Select Menu to build a List with picture. I follow this link and it's good. But When you select an item, just the text is copying, not the picture. I explain why I want picture. I've a List with no text, just picture, then When you choose an item, you see an empty span ... Someone have an idea? <script type="text/javascript"> $(function () { $.widget("custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function (ul, item) { var li = $("<li>", { html: item.element.html() });
weird behavior navigating to dynamically created page
I have a jquery mobile app where I add dynamic pages. These pages get added to the dom and use the pagecontainer to navigate to the first page created. What happens is it navigates to the page that was created but immediately navigates back to the previous page, which also happens to be the first page in the dom. What's going on???? $.mobile.pageContainer.pagecontainer("change", "#" + firstpage); function changePage() { var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"), nextPage
postmessage issue
Hi I am writing timer java script to get current time value in ui I am using following method to post message postMessage(minutes + ":" + seconds); but i am getting param issue, that i tried postMessage(minutes + ":" + seconds, "*"); getting message but it comes on widow.message event how can i get worker thread object? creating worker as w = Worker(test.js) test.js file sends postmessage //this wont work w.onmessage == window.onmessage is expecting , but i must stop worker as w.stop how
on selection of radio button jump on second accordion panel itself.
hello to all, i wanted to make accordion in a way, in my first panel there will be 2/3 radio buttons and a submit button. If on selection of a radio button and say submit, then next accordion panel will open. On second panel also few radio buttons and a submit buttons will be there. The same funda applies to the second panel too. Before selection of radio button, don't open second panel in accordion. Selection of radio button and submit must be there on both panel. Have created a code, but i dont
Inspecting objects in console output
How do you inspect Javascript objects, say, in console output? I thought I new the right answer - most browsers will show object values in console output by just passing the object. However, there is a fatal flaw - at least with Safari. The value shown is the CURRENT value of the object, NOT the value at the time it was logged! So, if the object was changed subsequent to logging, when you go to look at the log the object content will not be correct. The only time it can be guaranteed correct is if
Next Page