jQuery Forum

Hi all

I have the following to capture a click event on any checkbox where it's ID begins with 'iagree':

1. $('body').on('click', '[id*=iagree]', function (e) {      

What I need to do is add in the ability to check if adifferent id is clicked as well, as part fo the same line of code (if possible). i.e:

1. $('body').on('click', '[id*=iagree],[id*=otherone]', function (e) {      

How can I do this?

Hi all

I have a class applied to many different elements throughout my site.  On one page I have a button which when clicked needs to update one instance of this class (the closest instance to the button) in the DOM but I cannot get this to work. A loose example of my HTML is below:

1. <p class="thisone">text here</p>
2. <p>blah blah</p>
3. <p class="thisone">other text here</p>
4. <input type="button" id="mybtn1">

What I need to do is ensure that when the #mybtn1 button is clicked, only the closest instance of the "thisone" class to the button changes its text.

How can I achieve this with jquery?

Thank you.

Hi all

I use HoverIntent to trigger a submenu appearing:

1. $('[id^="showmenu_"]').hoverIntent({
       over: makeTall,
       out: function(){  },
       timeout: 100
   },function(){ });
   
   $('[id^="models_"]').hoverIntent({
       over: function(){  },
       out: makeShort,
       timeout: 100
   },function(){});
   

Now the respective functions for the above are:

1. function makeTall() {
       itemid   = $(this).attr('id').split("_")[1];
       $('[id^="models_"]:not('+itemid+')').hide(); // hide all other sub menu items
       $("#models_"+itemid).show(); // show the correct sub menu
       var run = setTimeout(function() { $("#models_"+itemid).hide(); }, 5000);   // start a NEW countdown 
   }
   
   function makeShort() {
       $('[id^="models_"]').hide(); // hide all sub menus
       clearTimeout(run); // clear any existing countdowns in process
   }
   

Now I have an issue where if the user does not mouse over the submenu and then mouse-out, the sub menu stays on screen for eternity.  I need to add a setTimeout function to it to hide the sub menu automatically if X number of seconds passes regardless where the mouse cursor is.

I have had a stab at it above but the timeout doesn't seem to clear if I mouse over a new menu item, it's like the 5 seconds just counts down regardless when I need it to reset.

Any thoughts?

Thank you for reading.

Hi all

I have the following HTML of links:

1. <ul class="maingrid">
       <li><aside class="slidebox left">Test One</aside><img src="/images/image.jpg"></li>
       <li><aside class="slidebox right">Test Two</aside><img src="/images/image.jpg"></li>
       <li><aside class="slidebox top">Test Three</aside><img src="/images/image.jpg"></li>
       <li><aside class="slidebox bottom">Test Four</aside><img src="/images/image.jpg"></li>
       <li><aside class="slidebox right">Test Five</aside><img src="/images/image.jpg"></li>
   </ul>

The idea being that the <aside> tags have a negative margin and can't be seen initially, all the user sees is the image in each list item. When they hover over the image, the <aside> tag slides in via top, bottom, left or right direction as per the class name associated to the <aside> tag. I have this nearly working but when I hover over (using the example above) the the second list item, both the second <aside> and the fifth <aside> animate as they have the same class name.

This is my js:

1.     $('.maingrid li').hoverIntent({
           over: function(){simpleTestOver($(this).find('.slidebox').attr('class'))},
           out: function(){ },
           timeout: 200
       },function(){ });
2. 
   
3. 
   
4. function simpleTestOver(element) {
        // take the string e.g. 'slidebox left' and store into array
       var useclass = element.split(" ");
   
       switch(useclass[1]) {
           case 'left':
               $("."+useclass[0]+"."+useclass[1]).animate({ marginLeft: "230px"} , 1000);
           break;
           case 'right':
               $("."+useclass[0]+"."+useclass[1]).animate({ marginRight: "230px"} , 1000);
           break;
           case 'top':
               $("."+useclass[0]+"."+useclass[1]).animate({ marginTop: "230px"} , 1000);
           break;
           case 'bottom':
               $("."+useclass[0]+"."+useclass[1]).animate({ marginBottom: "230px"} , 1000);
           break;
       }
   }

Can anyone help and provide a solution that will only animate the <aside> tage that is related to the list item I am hovering over?

Many Thanks

Doug

Hi all

I am developing a site and for the life of me I cannot see why jquery fading or sliding will not work on my site (which I have used many times before in the past on other sites).

Take this example:

1.         $("#loginform").fadeTo('slow', 0, function() {
               $('#loginform').remove();
               $("#forgotpassword").fadeIn("slow");
           });
   

Now, all that happens when I  click a link to trigger that code, the #loginform disapppears without fading out and the #forgotpassword appears instantly without fading in.  #forgotpassword has a css property of display:none to start with.

This is happening everywhere I have used fadeIn/fadeOut/slideToggle etc, they simply jump between states and miss the animation in between!

I am using jquery 1.9.1.

I have tested this in Chrome, FireFox, IE9/10/11, Safari (all on windows) and they are exactly the same across all browsers.

What on earth could be causing the problem?

Thank you for reading and any advice.

Hi all

I have two functions below. One detects of the user has "clicked" a menu item and one is if a user "touches" the menu item.

The "click" function is working perfectly.  The "touch" version doesn't show or hide my html.  I can alert() the ID in the touch event so I know im capturing the "touch" but the hiding/showing of content simply does not work.

Any thoughts as they are the same function in all essence? Its got me stumped.

1.         // click the link
       $('body').on('mouseenter', '[id^="showmenu_"]', function(e){
           e.preventDefault();
           var itemid   = this.id.split("_")[1];
           //alert(itemid);
           $("#dynamic-submenu ul:not(#models_"+itemid).hide();
           $("#models_"+itemid).show();
       });   
      
      
       // touch the link
       $('body').on('touchstart', '[id^="showmenu_"]', function(e){
           e.preventDefault();
           var itemid   = this.id.split("_")[1];
           //alert(itemid);
           $("#dynamic-submenu ul:not(#models_"+itemid).hide();
           $("#models_"+itemid).show();
       });
   
   

Hi

I have a menu which displays text for each link (e.g. Link 1, Link 2, Link 3 etc) and when I hover over the link, I change the text of the link for an image.  The image is different for each link so i have so far got the first part working where the text changes for the image but I need to get th eimage to change back to the text when i "mouseleave".

When I "mouseleave" on my function below, it breaks indicating that "whichone" and "originaltext" variables do not exist.  Can you help fix my problem?

Many thanks for reading.

1.     $('#dynamic-submenu').on({
           mouseenter: function () {
               var whichone = $(this).attr('id').split("_")[1]; // the image name is stored as the ID
               var originaltext = $(this).html(); // store the original link text
      
               var newHTML = $(this).html().replace(originaltext,'<img src="/images/cars/'+whichone+'" />');
               $(this).html(newHTML);
           },
      
           mouseleave: function () {
               var newHTML = $(this).html().replace('<img src="/images/cars/'+whichone+'" />',originaltext);
               $(this).html(newHTML);
           }
       }, 'li a');   
   
   

Hi all

I have two datepicker objects on my page to represent arrival and departure dates.  The Arrival Date picker is set to be a default date which comes from the database (its a dynamic event date that changes depending on which event we are looking at).

Everything works fine however I have discovered that if the event date lands on the 1st of the month, the user cannot select a previous date.  How can I get round this issue as I believe I have to use MINDATE parameter in order to set the default month to be the event date.

Here is my code and any help is greatly appreciated:

1.    var SelectedDates = {};
   SelectedDates[new Date('<?php echo $dates[1]; ?>/<?php echo $dates[2]; ?>/<?php echo $dates[0]; ?>')] = new Date('<?php echo $dates[1]; ?>/<?php echo $dates[2]; ?>/<?php echo $dates[0]; ?>');
   
   var SeletedText = {};
   SeletedText[new Date('<?php echo $dates[1]; ?>/<?php echo $dates[2]; ?>/<?php echo $dates[0]; ?>')] = '<?php echo addslashes($_SESSION['W_EVENT_TITLE']); ?> Event Date';
   
   var dates = $('#datepicker1, #datepicker2').datepicker({
       minDate: new Date(<?php echo $dates[0]; ?>, <?php echo $dates[1]; ?> - 1, 1),
       buttonImageOnly: true,
       buttonImage: "/images/icons/calendar.gif",                   
       showOn: "both",
       duration: "slow",
       onSelect: function(selectedDate) {
           var option = this.id == "datepicker1" ? "minDate" : "maxDate";
           var instance = $(this).data("datepicker");
           var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
           dates.not(this).datepicker("option", option, date);
       },
       beforeShowDay: function(newdate) {
           var Highlight = SelectedDates[newdate];
           var HighlighText = SeletedText[newdate];
           if (Highlight) {
               return [true, "Highlighted", HighlighText];
           }
           else {
               return [true, '', ''];
           }
       }
   });
   
   
   

Hi all

I'll try to keep this brief/simple and cut out any unecessary waffle.

I have a long form which administers an exam paper.  30 questions and each question has 4 answer options.

When the admin indicates which of the 4 answer options is the correct one, the textarea for that answer option has a class assigned called "correct" upon clicking the link "set as correct answer".

My code currently works fine, it changes the CSS for the textarea however if I click another answer option as correct, I need the previous "correct" class to be removed. 

By simply removing any instance of "correct" form the form is not good enough as this removes the classes from those other quetions on the form!

Therefore I have grouped each of the 4 answer options and associated them to the question ID using data-group="123" (where 123 is the question id).

I am currently using this code to look through each data-group and remove the class "correct" however it is doing it for the whole form. 

How can I make this only work for the clicked questionid?

Thanks and I hope you understand!

1. // user clicks the link to indicate that this answer option is the correct one
   
2. $('[id^="coranswer_"]').click(function(e) {             
3. var questionid = this.id.split("_")[2]; // get the unique question id
          
   $("div[data-group]").each(function(){
      $(".form-control").removeClass("correct");
   });
   
   

Hi all

Simple question I think!

I have a select list which when it changes I want to update the data attribute value of another element on my page but its just not changing.  To keep things simple, I have tried changing the data attribute value of the select list itself and nothing happens.  Here is my code:

1.     $('#purchaseform').on('change', '[id^="selprice_"]', function(){
           $(this).data("part","test");
       });
   

MY HTML:

1. <select data-part="0" name="term" class="dropdown term" id="selprice_<?php echo $subkey['classkey'];?>"></select>

When I view the DOM inspoector, nothing happens. If I add code to change the class at the smae time, the class changes but not the data attribute value!

Any thoughts?

Thanks for any advice

Hi all

Been building a website for 4 days now, all working great.  Left the office yesterday and come back this morning.

For some reason, when I hit the serach button on my form (which uses jquery ajax to find the result) I get a "TypeError s is null" error in my console.

This was working at 5pm last night, I will bet my life on it.

I am using 1.9.1 as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Has anyone got any idea why this error would suddenly start appearing?

I am so frustrated.

Thansk for reading.

Hi

I am using two plugins, one is jQuery Cycle and the other is jQuery TouchWipe.  Together they allow a user on a tablet to scroll slides left and right with a swipe action but on a desktop the users clicks Next and Previous buttons.

My knowledge of extending plugins is minimal at best but what I need is the "fx: fade" to be triggered when Next or Previous s clicked (which is currently is) but to have "fx: scrollHorz" when the users Swipes. Here is my code:

1.   // user clicks next or previous
2.         $('#content').cycle({
3.             timeout: 0,
4.             fx: 'fade', // this needs to be 'scrollHorz' for TouchWipe below
5.             next: '#next',
6.             prev: '#prev',
7.             fastOnEvent: 500
8.         });
9.        
10.         // user swipes left or right
11.         $("#content").touchwipe({
12.             wipeLeft: function() {
13.                 $("#content").cycle("next");
14.             },
15.             wipeRight: function() {
16.                 $("#content").cycle("prev");
17.             }
18.         });

How can the wipeLeft/wipeRight functions be altered to supprt this?

Thank you for any advice offered.

Hi all

I am having a problem getting this into my head and thus down in code!

I have a div with a dynamic id:

1. <div class="question" id = question_XX"></div>

Inside that DIV I have 4 other DIV's, each with a dynamic ID:

1. <div class="answerbox" id="setanswer_XX_YY"></div>

The XX and YY represents the data from my database which is assigned via PHP.

When I click the contents of one of the 4 child DIV's, I add a class called "answered" using this code:

1. $("#setanswer_"+answerid+"_"+questionid).addClass("answered");

This works fine however I need the other 3 DIV's to have the class "answered" removed (if they have it).

I am trying to do it this way but no luck:

1. $("#question_"+questionid+" > #setanswer_"+answerid+"_"+questionid).removeClass("answered");

Where am I going wrong?

Thank you for any advice.

Hi all

Got a headache with this one.

I am using this code to trigger a slide in/slide out DIV:

1.     $('#slidetigger').toggle(function() {
           $('.sideswipe').stop().animate({
               left: "620px"
           });
       }, function() {
           $('.sideswipe').stop().animate({
               right: "0"
           });
       });
   

This is my cutdown HTML:

1. <div class="sideswipe">
       <a id="slidetigger" href="#"><img src="/images/backgrounds/sidetab.png" alt=""></a>
   </div>
   
   

When I click the link to slide out, it works fine however when I click the link again to close it, nothing happens!

Any ideas?

Hi

I am doing my first jquery mobile website and I am about 2 minutes away from punching the life out of my laptop, so please help me!

I built my web page with my own styles and jquery mobile has overwritten those styles and applied loads of new styles to my page in the DOM. Investigating this, I learned I can use data-enchance="false" on specific elements within my page to prevent this from happen.  Great!

However, in this specific example I am using the Accordion to display 3 simple navigation links on the homepage and my styling has been overwritten by the enchancements for this.

The ONLY way I understand to rectifiy this is to go through the DOM line by line making a note of the styles that have been automatically applied and then creating my own style for each of them to overwrite them.

PLEASE tell me there is a better way of preventing the styles form being overwritten but keeping the Accordion functionality working?

When I apply data-enhance=false to the accordion, the javascript functionality is removed.

This has got me round the bend. Why is it so restrictive!!!

Any help would be immensely appreciated.

All I need is to be able to prevent ALL styles of jquery mobile overwriting my own styles but to still use the accordion (and/or other methods of jquery mobile).

Is that not possible?

Hi all

I am using bootstrap and want to run the msgGrowl plugin just within a page refreash rather than on a click event.

I have this code in my page but its not triggering the popup:

1.         <script language="javascript">
               $(function () {         
                   $.msgGrowl ({
                       type:     "success",
                       title:     'Header',
                       text:     'Lorem ipsum dolor sit amet, consectetur ipsum dolor sit amet, consectetur.'
                   });
               });
           </script>
   

If I change the code ot work with a click event on a button, it works fine.

Any idea whats wrong with my code above?

Thank you.

Hi all

I am using my first bootstrp template and I am adding code that I have used on many other website to create an ajax call but it does not work with what I think is jquery 1.9.1.

Here is my code:

1.     $('#loginform').on('click', '#signin', function(e){
           e.preventDefault();
           var email = $("#emailaddress");
           var pass  = $("#password");
          
           $.ajax({
               type: "POST",
               url: '/ajax/doLogin.php',
               data: { emailaddress: email, password: pass },
               success: function(data) {
                   alert("done");
               }
           });       
       });
   

And here is the error message which I am getting from the error console when I click my #signin button:

TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.

Any ideas why this is not working with 1.9.1?

Thank you.

Hi all

I have a long one page website which scrolls to the relevant DIV when the user clicks a navigation link fixed at the top of the site. When a user clicks a link, I run code to scroll the page down and set the ACTIVE state of the menu item I have just clicked (i have added that code to the bottom of this post for you to see).

This all works great but what I would live it so be able to set the active state of the link when the user simply scrolls up or down and the relevent DIV of content moves into position at the top of the brower, its associtated link gets "active".

How can I achieve this?

Thanks for any advice.

1. // when a user clicks a navigation link, we scroll to the equivalent DIV and set ACTIVE state
   
2. $('#main li').click(function(e){ 
       e.preventDefault();
       var liIndex = $(this).index();
       var contentPosTop = $('.content').eq(liIndex).position().top - 70;
       $(this).siblings().removeClass("active");
       $(this).addClass("active");
    
       $('html, body').stop().animate({
           scrollTop: contentPosTop
       }, 1500);
   });   
   
   

Hi

I have a div which contains a number of links.  When I hover over one link I run this code:

1.     $("#link1, #link2, #link3, #link4, #link5).hover(function(){
           $(this).find(".popup").fadeIn();
       },function(){
           $(this).find(".popup").fadeOut();
       });      
   

What I need this function to now do is fade out all links that are not the link that is being hovered over, and then fade them back in when I move away form the link!

If it helps, the links are all contained in a single DIV called "id='wall'"

Thanks for any advice

Hi all

I feel I am close to what I need but need that extra push to get there.

I have a button on my site which is slightly offset on the right hand side of my browser.  When a user hovers the mouse pointer over the button I need it to slide in 70px and when they mouseout, I need it to slide back to where it was.

Here is a function I have been working on but I need help getting it to work:

1. function slideDonateButton() {
       $('#donatenow').toggle(function() {
           $('#donatenow').animate({
               marginRight: "70px"
               }, 900, function() {
           });
       }, function() {
           $('#donatenow').animate({
               marginRight: "0px"
               }, 900, function() {
           });
       });
   }
   

Now, I have been using a CLICK event to trigger on this to test this and for some reaon, it takes two clicks to trigger it!  For the life of me I do not know why.  This is my CLICK code:

1.     $('#donatenow').live('click', function(e) {
           e.preventDefault();
           slideDonateButton();
       });   
   

Could someone help me get this to work when I hover over the button, i.e. it slides in and when I hover away, it slides back?

Many thanks for any advicec and help provided.

Hi all

Looked all over for an example but nothing that matches what is seemingly such a simple thing to achieve!

My code below should help explain:

1.     <section class="panel fadercontainer">
           <div class="multimicro" id="panel1">
               <h1>Box 1</h1>
           </div>
           <div class="multimicro" id="panel2">
               <h1>Box 2</h1>
           </div>
       </section>
   

When my page is displayed I need panel1 to be shown. After 5 sconds, I need panel1 to fade out and at the same time get panel2 (which has up until now been invisible) to fade in and display for 5 seconds, and so the process continues eternally!

I tried working something out myself but to no avail.  I am not a jquery/javascript expert as you can probably tell!

1.         var first = $('#panel1');
           var second = $('#panel2');
              
           function fade(first, second) {
               first.delay(400).fadeOut('slow', 0, function() {
                   second.fadeIn('slow');
                   var temp     = second;
                   second         = first;
                   first         = temp;
                   setTimeout(fade(second, first), 1000);
               });
           }
           //$(function(){
               // start the process
               fade(first, second);   
   
   

Any help is greatly appreciated.

Doug

Hi all

I am not sure if this is the corrcet place to ask but I always get helpful responses so i thought its worth a try!

I have a panel within my website which pulls out and displays customer records.  The customer table contains over 10,000 records.

I trigger the panel via a button, however the displaying of the panel and the customer records can sometimes take up to 15 seconds via a browser.

When I run the query direct on the database I get the results back within 2-3 seconds.

I am using the following JS to display the panel - could this be causing the delay:

1. function displayPrimaryContacts() {
       var url            =    "/ajaxscripts/displayPrimaryContacts.php";
       var info        =    "";
       xmlHttp            =    GetXmlHttpObject(displayPrimaryContactsDone);
       xmlHttp.open("POST", url , true);
   
       xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       xmlHttp.setRequestHeader("Content-length", info.length);
       xmlHttp.setRequestHeader("Connection", "close");
   
       xmlHttp.send(info);
   }
   
   function displayPrimaryContactsDone() {
      var output = '';
      if(xmlHttp.readyState == 4) {
         if(xmlHttp.status == 200) {
            output = xmlHttp.responseText;
            showAjaxPopup("Primary Contact Details", output, 600, 300, 1);
         }
      }
   }
   
   

Hi all

I have 3 checkboxes on my form each with a unique ID.  When I click one, I change the image accordingly (using image replacement).

I use the following code to mamage the click event of each checkbox:

1.     $("#support").live('click',function() {
          if(this.checked) {
              $(this).prev().attr("src", "/images/icons/tick-on.jpg");
          } else {
              $(this).prev().attr("src", "/images/icons/tick-off.jpg");
          }
       });    
   
2.     $("#services").live('click',function() {
          if(this.checked) {
              $(this).prev().attr("src", "/images/icons/tick-on.jpg");
          } else {
              $(this).prev().attr("src", "/images/icons/tick-off.jpg");
          }
       });    
3. $("#help").live('click',function() {
          if(this.checked) {
              $(this).prev().attr("src", "/images/icons/tick-on.jpg");
          } else {
              $(this).prev().attr("src", "/images/icons/tick-off.jpg");
          }
       });   
   
   

now there is every possibility that I need to extend the form to include many more checkboxes so is there a way of looping the code above to work with any amount of checkboxes and not having to specify the ID of the checkbox it relates to?

Thanks for reading.

Hi all

I need to build a form which has (for example) a drop down menu of Car Components to start with.  When a user chooses a component from the drop down mene, I need a new drop down menu of the same components to appear underneath.  And thus the process continues.

I do not need to filter out previous selected options from the subsequent drop down menus, it will essentially be the same drop down menu every time.

Is there anything out there that does what I need that I can refer to?

Many Thanks for reading.

Doug

P.S. I hear you thinking "why not just have a selection of checkboxes instead?"  The form needs to allow the user to select the same component multiple times on the form if they wish.  So my clients says anyway... :o(

Hi all

I hope its simple enough, I have looked around and can't find exactly what I am after. 

I have a collection of hot spots (divs) on my web page and I need them to fade in and out when viewing the page so they look like they are pulsing so to speak.  When you hover the cursor over one, the pulsing stops for that hotspot only.

Could someone provide some simple example code to help get me started?

Thanks