PDA

View Full Version : Resolved Tweak on form needed



theremotedr
05-14-2015, 11:04 PM
In my listings there is one sub menu.
It can be found by selecting Keys & Remotes / Honda

On the pc you would scroll down to Honda & select it, then a sub menu would appear to the right where you would then make the final selection.

On the iphone you would scroll down to Honda & select it but the page would the return to the top of the listings.
You would then need to finger scroll back down to Honda again where the sub menu would now be visible.
I am trying without any luck to have it work like this,select Honda,"no return to top" sub menu would appear,make final selection.

Changing the code now allows me to have the sub menu appear when selecting Honda without returning to the top.
Downside to this now is iphone has totally different Honda looking tab.
Same look on pc and now no selection possible from Honda either.

Iphone screen shots below.

http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/honda1.jpg
http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/honda2.jpg

It would be nice to have the sub menu appear on iphone when Honda selection is made.
I can easily put the code back to how it was but a fix/work around would be better,shame i cant easily fix it myself without asking for help.

Could you please check and advise.

Many Thanks.

theremotedr
05-15-2015, 11:48 PM
Any help please.

theremotedr
05-16-2015, 04:04 PM
Any one or advice to say its not possible.

jscheuer1
05-16-2015, 06:18 PM
Probably doable. However, at the moment, if I hover over the keys and remotes and scroll down to Honda, it's not a link of any kind and there's no sub menu. This is on the PC in Opera, Firefox, Chrome and IE. I checked other pages, it's the same. So that has to be made to again work as you describe before it can be fixed for iPhone. Or, did you mean another place/menu?

theremotedr
05-16-2015, 06:37 PM
Ok its now fixed.
Just to recap,
Pc is fine.
Iphone is this.
Scroll to keys & remotes,select Honda,it now scrolls to the top,you manually then scroll back down to Honda when you now see Civic,Crv,Jazz etc etc

I would like it to stop returning to the top after selecting Honda,just select Honda then see Civic,Crv,Jazz etc etc

jscheuer1
05-16-2015, 09:50 PM
Because "#" here actually means 'go to the top', first thing I would try is changing:


<a href="#">Honda</a>

to:


<a href="javascript:void(0)">Honda</a>

The page may need to be refreshed and/or the browser cache cleared, to see changes.

theremotedr
05-16-2015, 09:57 PM
I have so far put it on one link and it seems to work.
Looking here now generates 3 errors for that page.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.theremotedoctor.co.uk%2Fkaraccord.html%3Fscrollto%3Dselection&charset=%28detect+automatically%29&doctype=Inline&group=0

theremotedr
05-16-2015, 10:33 PM
Now sorted.

<a href="javascript:void(0)">Honda</a>
to
<li><a href="javascript:void(0)">Honda</a>

has done the trick and error messages have gone.

jscheuer1
05-17-2015, 12:45 AM
Looks like you have changed it back to "#" for now, at least on the main page. If you prefer that for some reason, you can keep it and add:


<script type="text/javascript">
jQuery(function($){
$('[href$="#"]').click(function(e){e.preventDefault();});
});
</script>

Anywhere after an instance of the main jQuery script is associated with the page. It will perhaps be better than the "javascript:void(0)" href idea.

Please note. You can use the "#" href with the above script, OR the "javascript:void(0)" href by itself - your choice.

The main difference I can see is that with the script and "#" href, on the PC you still have to click on Honda to see the sub menu, while with the "javascript:void(0)" href, the sub menu appears on hover of Honda on the PC.

theremotedr
05-17-2015, 09:41 AM
The index page was a mistake and has now been changed.
I am to go with the (0) option as its nice and neat.

Having now edited the pages to <li><a href="javascript:void(0)">Honda</a>
I dont get the sub menu to appear on hover, still need to click on Honda ?

Iphone is perfect where the it does not scroll back to top each time.

theremotedr
05-17-2015, 10:51 AM
Obviously something ive done as i have copied the code as shown above but i get the same result when looking on Chrome, IE & Firefox

jscheuer1
05-17-2015, 12:06 PM
Ah, I see my confusion. On the PC, if you click to see the sub menu and then hover off and it disappears, if you then hover over it later without refreshing the page, then it appears without a click. This happens regardless of the href value. Since I was working in the developer tools window, nothing I did could refreshed the page or else I would lose the changes, so that's why it seemed that "javascript:void(0)" was doing that for me.

Now I see that will happen (on PC at least) regardless of how the link is handled.

One advantage of using the scripted method though is that you will not have to change any of the other href="#" attributes in the future should other menu items get sub menus or they become problematic for any other reason(s) in iPhone.

theremotedr
05-17-2015, 12:17 PM
OK
So am i best to use (0) or (#) when reading the above ?

theremotedr
05-17-2015, 12:32 PM
Ok
Just reading it again sounds like i will change the (0) to (#) in the code.

You mention this,


<script type="text/javascript">
jQuery(function($){
$('[href$="#"]').click(function(e){e.preventDefault();});
});
</script>

Where in the Jquery code at the bottom of my page do you advise to put it ?


function replaceMainImage(imgSrc, partNumber, myContent) {
$('#content a').get(0).search = 'partNumber=' + partNumber;
$('#mainImage').attr('src', imgSrc)
$('#mainImage').addClass('img-border');
$('html, body').animate({
scrollTop: $("#mainImage").offset().top
}, 1000);
$('.tooltip').tooltipster('destroy');
$('.tooltip').tooltipster({
trigger: 'hover',
autoclose: 'false',
timer: '700',
animation: 'fade',
delay: 200,
//multiple: true,
restoration: 'current',
position: 'top',
contentAsHTML: true,
maxWidth: 300,
content: myContent,
}).hover(function() {
$(this).tooltipster('show');
}, function() {
$(this).tooltipster('hide');
}).on('click', function() {
$(this).tooltipster('show');
});
}
$(document).ready(function() {
$('.tooltip').tooltipster();
$('.sub-menu').hide();
$("li:has(ul)").click(function() {
$("ul", this).slideDown();
});
});
$(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
});
});
</script>
</body>
</html>

jscheuer1
05-17-2015, 12:53 PM
I would put it a little before that, like so (addition highlighted):


<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script type="text/javascript">
jQuery(function($){
$('[href$="#"]').click(function(e){e.preventDefault();});
});
</script>
<script defer src="js/flexslider/jquery.flexslider-min.js"></script>

<!-- fire ups - read this file! -->
<script src="js/tooltip/main.js"></script>
<script src="js/tooltip/jquery.tooltipster.min.js"></script>
<script type="text/javascript">
var url = 'http://form.jotformeu.com/form/50907214204344?partNumber=';

function replaceMainImage(imgSrc, partNumbe . . .

theremotedr
05-17-2015, 02:16 PM
Now site has been updated as shown above.

Thanks.

jscheuer1
05-17-2015, 03:14 PM
Now you can change:


<a href="javascript:void(#)">Honda</a>

all the way back to:


<a href="#">Honda</a>

By the way, I never said to use avascript:void(#)

That's invalid code and causes an error.

theremotedr
05-17-2015, 03:52 PM
<a href="#">Honda</a>
Has now been applied.

Thanks