PDA

View Full Version : jQuery only works on second click



theremotedr
02-28-2016, 06:46 PM
Hi,
Here is a page as example but actually the same across my site
http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection

When looking through my menu on an iOS device I've noticed that making a selection only works on second click.
Or another way to put it an odd number.
Example.
Select Fiat nothing happens, select Fiat again and Fiat page opens.
Select Bmw nothing happens, select Porsche and Porsche page opens.

This hasn't been checked on PC as I only has access to iOS device until tomorrow.
I did make an edit to the jQuery this morning but no mater what I do I'm unable to get my two items to work.

jscheuer1
02-28-2016, 06:55 PM
Fine on PC, no idea what the trouble is on IOS.

jscheuer1
02-28-2016, 06:56 PM
I would try getting rid of the google highlight script and the animated title script.

theremotedr
02-28-2016, 08:48 PM
Fine on PC, no idea what the trouble is on IOS.

I've just checked it on the iPad and it's ok so just iPhone at fault.
This is the code that I've been playing with.

$("li:has(ul)").on({ mouseover:function()
{ $("ul", this).slideDown();
}, onmouseleave:function()
{ $("ul", this).slideUp();
}
Tomorrow I will put the original code back which will then fix this and will then explain what I'm trying to achieve etc.
Might be easier for you then to advise as opposed to fault finding.

Many thanks for your time.

jscheuer1
02-28-2016, 09:43 PM
I mention the google highlighting script because - after you fixed it, I tried it out on your site. It relies upon the document.referrer property, which is the URL of the page that sent you to (in this case) your page. In Chrome and Opera, and probably many others, the query string is stripped from that, so the information required to carry out the highlighting is not there - end result, it does nothing. Which is nowhere near as bad as what happens in IE 11 where it does get the full URL including the query string, but crashes the browser either because the page is too complex or has no valid closing tag(s) for one or more elements, or both. So, if it's a choice between not working, or crashing in most cases, I'd say it's not worth using. The animated title thing is a little less problematic. It does consume resources though, which can make a page balky, and annoying.

So I would say regardless - get rid of the recent addition of the google highlighting script, and at least think about losing the animated title.

I'll have a look at the code you just published to see if any thing jumps out at me there.

OK, that was quick:


$("li:has(ul)").on({ mouseover:function()
{ $("ul", this).slideDown();
}, onmouseleave:function()
{ $("ul", this).slideUp();
}

is incomplete, so is either missing code that explains what it's doing, or does nothing. What file on your site is it included in? If I could see the entire file, It would be clearer to me what we are dealing with.

theremotedr
02-28-2016, 10:14 PM
Ok
I don't have the old code to and until the morning.
Let's rewind to when all was fine.
Use this page as an example http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection
Part 1
On the right hand side is item selection,select item and its photo is loaded this is using on click.
Part 2
Go to Keys and Remotes,scroll down and Honda had to be clicked for the sub menu to fly out.

I decided to change the sub menu from on click to on mouse over.
The sub menu then worked great BUT the on click did not the load the photo for them item selection.
I put the code back to its original state and picture loading / sub menu working correctly again but both using on click.
I started again and it's now using the current code installed.
PC & iPad working fine but as we know on the iPhone you need to click the option from any drop down menu twice before it will load " BMW FIAT SUZUKI" etc etc.

My required goal is.
Item selection loads photo using on click.
Honda fly out sub menu using on mouse over / off mouse over.

I say on / off mouse over so when you don't wish for Honda items but just pass over the word by going down the list FIAT FORD HONDA LAND ROVER etc etc it flies out but then hides etc as you continue down the named items after Honda, with me ?

The complete jQuery is at the bottom of pretty much each page.

styxlawyer
02-28-2016, 10:49 PM
One of the likely sources of a problem with jQuery is that you are still loading two different versions of the jQuery library.

On this page http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection, there's one on line 33 and another on line 388.

theremotedr
02-28-2016, 10:55 PM
So which do do advise to edit / delete as this ain't my scene.

mlegg
02-29-2016, 12:53 AM
try to add the jquery no conflict rule on the scripts. I don't have much time to try it myself for you. Read https://api.jquery.com/jquery.noconflict/

styxlawyer
02-29-2016, 09:34 AM
As the call on line 33 loads an older version of jQuery, you could try commenting out that line.

theremotedr
02-29-2016, 10:38 AM
Hi,
Following up with last nights conversation.
1, Google search highlite has been remove.
2, Animated tab scroll has been removed.
3, Original jQuery has been replaced on all pages except this page so you can compare etc http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection
4, After the above jQuery change i can confirm all pages work on the iphone using one click except the page http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection due to the code left for you to check/edit for me.
5,The section of code below is what ive been playing with.

ORIGINAL CODE ONCLICK
$("li:has(ul)").click(function() {
$("ul", this).slideDown();
});

CHANGED FOR ONMOUSE ETC
$("li:has(ul)").on({
mouseover:function() {
$("ul", this).slideDown();
},
onmouseleave:function(){
$("ul", this).slideUp();
}
});



Thanks very much.

theremotedr
02-29-2016, 11:13 AM
I dont want to confuse this post but i will reply about the 2 version of jQuery mentioned.
Line 33 is now Line 27

This is for when you click a certain link a certain part of the page is then shown in the customers view without having to scroll the page with your finger.
It also scrolls smoothly.

<script type="text/javascript" src="js/selectionscroll/bookmarkscroll.js">

This is for the slideshow on the main index page.

<script defer src="js/flexslider/jquery.flexslider-min.js"></script>

I sort of understand what you are saying but not being fully up to speed with how to deal with it & still learning html / css i dont cant take this onboard.
As it stands ive never seen any issues when going through my site,and i do that every day for some time.
The issue with the onclick/onmouse issue etc i dont think is related to the different versions you mention as i dont see any problems.
Even though it might not be acceptable to have 2 versions im happy to let it go and just have the jQuery edit in place so the Honda flyout sub menu works from onmouse not onclick.

theremotedr
03-06-2016, 09:24 PM
Hi
jscheuer1 did you have time to check out the code to see what the issue was.

Thanks v