Map shadow

[AlexGole]

Hi all,

I am looking to add some show between the west and east panels (JQuery UI layout). I tried adding box-shadow: inset but dont get any positive results except in Firebug when I change the SVG map-gc.

End result should look like this:

As I have it, only the header box-shadow shows:

[RiyasDeen · Accepted solution]

Hi Alex,

Is this what you are after?

Edit fiddle - JSFiddle

[AlexGole]

Riyas,

This is exactly what I am after. The only problem with this is that I am using JQuery UI Layout not dojo. the box-shadow: inset.... works great for this layout too but when I add the map to the center pane then the map it self hides the inset shadow. Playing around with Firefox, I saw that it could work if I add some css to "map.gc" SVG...

Now when adding some code "box-shadow: inset....!important" in my script, it does not do anything. Any idea?

By the way I really like the shadow you added to the slider!

Alex

[RiyasDeen]

Hi ALex,

My knowledge on JQuery Layout is limited. If you look at my code.

Below span tag

<span id="shadow" style="height: 100%; width: 100%;"></span>

And below CSS style are the one's which is creating the map shadow.

#shadow {
         -moz-box-shadow:    inset 0 0 10px #000000;
         -webkit-box-shadow: inset 0 0 10px #000000;
         box-shadow:         inset 0 0 10px #000000;
  z-index: 10000;
  background: transparent;
  position: absolute;
  left: 0px;
  top: 0px;
}

The span tag is placed within the map container, as long as you place the span tag inside your map container div and have the CSS class you should get the shadow.

[AlexGole]

It is not working with JQuery layout UI but it looks great in dojo. Thank you for sharing! I will need to find a fix in Jquery.

[AlexGole]

Riyas and anyone else encountering the same issue as mine,

I found the solution to my problem. It seems like it is one of the issues that exist when working with dojo and JQuery at the same time. The fix is the following:

CSS:

svg#map_gc {

     box-shadow: inset 0 0 20px black;

}

Thank you,

Alex