jQuery Forum

Hey,

Does anyone else know a fix for this behaviour?

http://imgur.com/a/idVmX

If you see the screenshots, on the 4 inch iPhone 5 display the address bar does not hide.

I'm having an issue using the jquery mobile themeroller.

I created a theme using the themeroller, downloaded it, and added it to my project as instructed. Unfortunately, something has obviously gone wrong in the process.

Here's an imgur gallery with a screencap of the result and of my code: http://imgur.com/a/GyOZj

And here's the themeroller link: http://jquerymobile.com/themeroller/?ver=1.2.0&style_id=20121130-101

Any help would be appreciated, thanks.

Hey Guys,

I'm struggling with something here.

I have some elements that are loaded by ajax into the page (appended to an existing list) and I want to interact with them the same way I would with the existing elements. I have been trying to use on() to achieve this as I understand that is the correct method. Unfortunately what I have below doesn't work. When I click on the newly loaded ajax content that has the .removeDeal class, nothing happens. Only the list items there on the page load work properly.

 (The event function below is the one I want to be able to bind to the ajax loaded elements as well as the existing elements)

1. $('.removeDeal').on("click", function() {
           var removeID = ($(this).parent().attr('id')).replace('record_','');
           var data = {
               step: 'remove',
               id: removeID
           };
           $.ajax({
               type: 'POST',
               url: 'ajax/pastDealsProcess.php',
               data: data,
               success: function(data) {
                   if ($("#"+data).length > 0){
                       $("#"+data).fadeTo(400,1);
                       $("#"+data).children(':first-child').children(':first-child').prop('disabled', false);
                       $("#"+data).children(':first-child').children(':first-child').prop('checked', false);
                       $("#record_"+removeID).fadeOut(400, function() {
                           $(this).remove();
                       });
                   }
               },
               error: function() {
                   alert('Error, please try again');
               }
           });
       });

Hey guys,

I have a demo up here (Link) so you can look at all the html and javascript involved.

Problem:
The problem I'm having is that at the moment, when you hover over a link (other than home) and then move the mouse anywhere else on the screen (except over the home link) the home link isn't reverting to the white text color.

I tried to resolve the problem by changing the following piece of code (look in the "example.js" file linked to from the page to view full code)

1. if (status == "off")
2. {
3.       $(this).stop().animate({ color: linkcol },500);
4. }

I added an extra line

1. if (status == "off")
2. {
3.       $(this).stop().animate({ color: linkcol },500);
4.       $(".current_page_item_two a").stop().animate({ color: whitecol },500);
5. }

This line was intended to set the link inside the current_page_item_two element back to white when no link is hovered over (when the slider returns to the home link).

However, looking at the demo here (Link), you can see that this creates some horrible glitches in the nav (wiggle the mouse about over the links to see what I mean, I end up causing some issue where the white rollover animations don't work at all)

Hi Guys!

I am currently working on a design located here:
http://nathanmarks.co.uk/cbio1/

You should be able to view all the html/javascript/css files there (viewing source etc).

Basically, I am trying to make it so the image slider you see at the top of the page can be rotated using your hands on an iPad or iPhone. I found this plugin here: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library  which allows you to do just that! However, I am having problems integrating it properly.

I was trying to use the rotate function in the master.js file on wiping but I can't seem to get it working at all. In fact, when I try to implement it I end up breaking the current ability to click the dots to rotate my slider, only the automatic rotation ends up working.

Clearly I am doing something wrong.

Any help would be fantastic!

Thanks

Nathan

Hi Guys,

I am having a problem with the next() function. I am trying to point to the next <a href> element here but the next() function isn't working since I have an <li> in the way! How can I get around this?

Here is my code:

1. <ul class="pagingthing">
                               <li>
                                   <a href="#" rel="1">1</a>
                               </li>
                               <li>
                                   <a href="#" rel="2">2</a>
                               </li>
                               <li>
                                   <a href="#" rel="3">3</a>
                               </li>
                               <li>
                                   <a href="#" rel="4">4</a>
                               </li>
                               <li>
                                   <a href="#" rel="5">5</a>
                               </li>
                           </ul>
   

When the page loads, it gives the first <a href> tag the class "active" with this line:

1. $("ul.pagingthing a:first").addClass("active");

So then we end up with this:

1. <ul class="pagingthing">
                               <li>
                                   <a href="#"  class="active" rel="1">1</a>
                               </li>
                               <li>
                                   <a href="#" rel="2">2</a>
                               </li>
                               <li>
                                   <a href="#" rel="3">3</a>
                               </li>
                               <li>
                                   <a href="#" rel="4">4</a>
                               </li>
                               <li>
                                   <a href="#" rel="5">5</a>
                               </li>
                           </ul>

Mission accomplished!

Now I want this rotating function to be able to select the next <a href> tag after that one. I am trying to use the following line:

1. $active = $('ul.pagingthing a.active').next();
   

Unfortuantely, that won't give me what I want because of the <li> elements!!! When I remove my <li> tags it works fine, but I need them there for design purposes!!


Any help would be appreciated, I am really stuck :(