Incompatible scripts

JavaScript
1

To get a css menu (from this website) fully working I had to remove defer=“defer” from the link to jquery.

The previous remote js links (in <head>) were:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js" defer="defer"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

and in this way the css menu didn’t work fully (I mean, not giving the hamburger menu in mobile screens).

Now, with this new code:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

the css works.

I had to remove this little script as well:

//jquery gradient text BEGIN
$(document).ready(function() {
	$('.gold').gradienttext({
		colors: ['#E0CA7F', '#E0CA7F', '#9A7733', '#CEA146'],
		style: 'vertical',
		shadow: true,
		shadow_color: '#000000',
		shadow_offset_x: 1,
		shadow_blur: 2
	});
});
//gradient text END
//-->

This was really necessary?
But the main question is: removing defer=“defer” may cause some damage.?

Thank you all.

2

In that situation, were errors being thrown in the console?

I don’t tend to use jQuery, but my initial thought is that it would be preferable to run with the latest version — that’s if it is just a small fix to make that work.

I am also going to presume that the gradient text plug-in is not compatible with the older jquery.

1 Like
3

I don’t think that defer would be affecting anything there.

Here’s some details about how defer works.
Speed up Google Maps(and everything else) with async & defer

1 Like
4

Probably you’re right. Thanks!

5

I see. Thank you!

6

I use this tag

<script defer src="[./js/drag_n_drop.js](https://code.jquery.com/jquery-latest.min.js)"></script>
7

Sorry posted before checking.
I use the defer attribute as follows

<script defer src="https://code.jquery.com/jquery-latest.min.js"></script>
1 Like
8

See post #3. Can you tell us how it will help?

9

I tried this code, but the result was the same as defer="defer"

10

For clarification, using defer="defer" is for XHTML compatibility because XHTML requires properly formatted attributes with both a name and a value.

HTML can get away with only having the attribute name of defer instead.

3 Likes
11

Again, if you take out version 1.8.2 and just go with the latest jquery, what errors are being thrown in regards to the menu not working.

As I understand the menu is heavily CSS, with only a small js script. Maybe that script can be modernised to get it working? Just a thought.

Edit: I could be wrong here, but all I can see defer is doing is over-riding one version of jquery with an other. It’s my understanding that you have to explicitly set variables with noconflict to run more than one version/instance. As per above there maybe a simpler solution.

1 Like
12

I believe that browser.msie doesn’t work from jquery version 1.9 onwards.

OFF-TOPIC: At the risk of being shot down in flames I wonder why you are looking at a menu from 11 years ago (according to the article date) as a good example for today? It uses code for IE6 !! and contains a detection routine for the ipad that won’t work for today’s ipads I believe. Also there is no keyboard support for navigating the menu and the menu should really should be detecting touch only rather than trying to detect mobile or at least have something in place to allow mobile to work.

It’s extremely difficult to develop a fully accessible hover drop down menu even for the most experienced developers. This article gives a good rundown on the techniques needed and problems to overcome.

3 Likes
13

I don’t know: new or old, that drop-down menu works…
I love it because of its simple code and because of the very

as said @rpg_digital
The previous release was even css only.

14

I have to say I am with @PaulOB on this.

Did you check out the css only article that Paul gave in his off-topic post.

Albeit the css-only idea is solid, I don’t think it makes a whole lot of sense to run with what is a very out-dated script.

I’m sure Paul can share his wisdom with you in the css section of this site, and guide you in the right direction with more modern methods.

Edit: And just to add, the bonus is that you can then run with just one version of jquery, the latest version, and get back to using your gradient plug-in.

2 Likes
15

It doesn’t work for me as I use the keyboard (hand problems with a mouse) :slight_smile:

However don’t let me drag this off topic as I just thought it worth pointing out :slight_smile: If you want to try and add a little bit of help for keyboard users we could probably do something using :focus-within but that would be a question for the CSS forum instead :slight_smile:

3 Likes
16

Thank you: I will see (I know very few things about scss).

2 Likes
17

@web148 I can be a bit forthright with my responses. Paul’s response here maybe a somewhere in the middle solution, which could be a possibility :slight_smile:

1 Like
18

Just for fun I removed all the ie6 css, all the prefixes as they are not needed these days and all the IE6 specific JS. You can then just use the latest jQuery and all that does is provide the slide toggle for the hamburger.

I also added basic support for keyboard navigation in modern browsers using :focus:within. Small changes that have large effects. :slight_smile: You were using a menu that supports IE6 (approximately 1 user) and then excluding all keyboard users (probably 20 million world wide) :slight_smile: (with the caveat that 99% of all statistics are made up on the spot ;))

Note that there is no proper support for touch devices. All the original code did was change to a hamburger based on screen size which is nonsense as there’s a whole range of ipads and surface devices all using touch at larger screens than that.

However they still may be usable after a fashion but I am unable to test but that is what you already had anyway.

2 Likes
19

Thank you very much. I will try and let you know.

EDIT

This evening I tried your new code. But I cannot get the hamburger menu on small screen :shushing_face:.
If you have already an idea why, please tell me :slightly_smiling_face:. Any way tomorrow I will do further attempts.

1 Like
20

I put it in the html where it should have been from the start :slight_smile:

<nav id="menu-wrap">
  <div id="menu-trigger">Menu</div>
  <ul id="menu">

It was pointless to add it with JS :slight_smile:

2 Likes