Docs

[Christian]

As posted previously, your map shows up in Cornerstone and in the live page on my end.

Thanks.

[arthurdupuy]

Hello ?

[arthurdupuy]

Sorry Christian !

Thank you for you’re answer. I really don’t understand, I trying on several laptop, cleaning cache etc. nothing work

[Rad]

Hi there,

Please add this custom javascript too,

jQuery( function($) {

$('a[href="#"][class^="read_more_"]').on('click', function(){

console.log('Triggered');

setTimeout( function(){ $(window).trigger('resize'); }, 2000 );

} );

} );

Then please change this existing code,

(function($){ 
  $(document).ready(function(){							/*prepa boutton hover*/
$('a.read_more_prepa').hover(function() {
    	$('.prepa_font').css("color", "#08203B");
    $('.repere_prepa').addClass("hexagon_prepa_hover").removeclass("hexagon_prepa");
}, function() {
    $('.repere_prepa').removeClass("hexagon_prepa_hover").addClass("hexagon_prepa");
    $('.prepa_font').css("color", "#FFFFFF");

});
});
})(jQuery);  

to this

(function($){ 
  $(document).ready(function(){							/*prepa boutton hover*/
$('a.read_more_prepa').hover(function() {
    	$('.prepa_font').css("color", "#08203B");
    $('.repere_prepa').addClass("hexagon_prepa_hover").removeClass("hexagon_prepa");
}, function() {
    $('.repere_prepa').removeClass("hexagon_prepa_hover").addClass("hexagon_prepa");
    $('.prepa_font').css("color", "#FFFFFF");

});
});
})(jQuery);  

Thanks!

[arthurdupuy]

Thank you for your answer Rad. It smelt good but it still doesn’t work…

One not :
It seems their is no difference between your code and mine. 1re your sure that there is no modification to do on my Java ?

Thanks again for your help and waiting for your help !

[Rad]

Hi there,

Yes, there is a difference. Check this code .removeclass("hexagon_prepa"); and this code .removeClass("hexagon_prepa"); and compare them. This will not fix the map, but we’re trying to narrow it down what causing it. The first step is minimizing the errors.

And seems that there are many instances of removeclass, please change them to removeClass.

Thanks!

[arthurdupuy]

I have always removeClass and addClasse with capital C if it is that you mean.

But maps still not loading…

[Rad]

Hi,

Nope, you didn’t change them all. The code is long one, and you just changed some of it.

Please use Chrome developer tool’s console to see if there are still remnants of removeclass.

I also noticed that some links are changed, please change this code

jQuery( function($) {

$('a[href="#"][class^="read_more_"]').on('click', function(){

console.log('Triggered');

setTimeout( function(){ $(window).trigger('resize'); }, 2000 );

} );

} );

to this

jQuery( function($) {

$('.page-id-2608 #x-section-3 a[href="#"]').on('click', function(){

console.log('Triggered');

setTimeout( function(){ $(window).trigger('resize'); }, 2000 );

} );

} );

Thanks!

[arthurdupuy]

So sorry Rad to forget some capitale C.

I did what you tell me to do. It still not working as you can see…

[Rad]

Hi there,

I can still see them, I went ahead and fixed removeClass(). I also changed the code to this

jQuery( function($) {

$('.page-id-2608 #x-section-3 a[href="#"]').on('click', function(){

console.log('Triggered');

setTimeout( function(){ window.dispatchEvent(new Event('resize')); }, 2000 );

} );

} );

Because jQuery’s trigger(“resize”) is not working. Something is blocking it, could be from your custom code or plugin.

The 2000 is 2 seconds delay since your toggles and content have animation. Map works on a container with fixed dimension upon load, and animation has varying size.

And the main issue why the maps aren’t displaying is because of the custom code, you hide them and the map needs a dimension while loading. Hidden container means 0px width and 0px height. The custom codes should be modified to make it compatible with the map.

Thanks!

[arthurdupuy]

Ok, Thank you Rad. So what I have to do to make the toggle immediate ?
Do you have a solution ?

[Rad]

Hi there,

It lies within your custom code, the solution is to rework everything in it. It’s quite long and I can’t cover that kind of custom code. But my recommendation is instead of hiding the content, use the Class name toggle to hide and display them.

Example,

.hide_content {
height: 0;
width: 100%;
overflow: hidden;
}

Then

.toggleClass('hide_content');

Do not use display: none;, the width will result to 0px.

Thanks!

[arthurdupuy]

Thanks a lot !

I have found the solution with your orientation !

Have a good day

[Christopher]

You’re welcome.
Have a nice day too.

[Author]

Posts