#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0

    Help needed with CSS, jQuery


    Hello,

    I am someone who generally involved with completely different things, but at the moment has to deal with JavaScript, CSS and all that web stuff which i frankly hate .

    I am porting Google maps solution to HERE.

    With Google I have the following code which manages the appearance of InfoWindows.

    .gm-style-iw {
    width: 400px !important;
    top: 15px !important;
    left: 0px !important;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 2px 2px 10px 10px;
    }

    #iw-container {
    width: 400px;
    margin-bottom: 10px;
    overflow-x: hidden;
    }

    #iw-container .iw-title {
    width: 400px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 400;
    background-color: #48b5e9;
    color: white;
    padding: 10px;
    margin: 0;
    border-radius: 2px 2px 0 0;
    }

    #iw-container .iw-content {
    width: 400px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 15px 5px 20px 15px;

    /*
    overflow-x: hidden;
    max-height: 140px;
    overflow-y: scroll;
    */
    }

    .iw-subTitle {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
    }

    .iw-bottom-gradient {
    width: 400px;
    position: absolute;
    height: 25px;
    bottom: 10px;
    right: 18px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    }

    #iw-wrap {
    width:395px;
    margin:0 auto;
    }

    #iw-left_col {
    float:left;
    width:255px;
    }

    #iw-right_col {
    float:left;
    width:140px;
    }

    function FormatInfoWindow(AInfoWindow)
    {
    google.maps.event.addListener(AInfoWindow, 'domready', function ()
    {
    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    /* Since this div is in a position prior to .gm-div style-iw.
    * We use jQuery and create a iwBackground variable,
    * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css(
    {
    'display': 'none'
    });

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css(
    {
    'display': 'none'
    });

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css(
    {
    left: '133px'
    });

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children(':nth-child(1)').attr('style', function (i, s)
    {
    return s + 'left: 87px !important;'
    });

    // Moves the arrow 76px to the left margin.
    iwBackground.children(':nth-child(3)').attr('style', function (i, s)
    {
    return s + 'left: 87px !important;'
    });

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css(
    {
    'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px',
    'z-index': '1'
    });

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css(
    {
    opacity: '1',
    right: '38px',
    top: '3px',
    border: '7px solid #48b5e9',
    'border-radius': '13px',
    'box-shadow': '0 0 5px #3990B9'
    });

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if ($('.iw-content').height() < 140)
    {
    $('.iw-bottom-gradient').css(
    {
    display: 'none'
    });
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function ()
    {
    $(this).css(
    {
    opacity: '1'
    });
    });

    });
    }

    With HERE, it seems that .gm-style-iw is replaced with .H_ib_body, but there is no domready event.

    How do i apply the code in domready handler to the HERE's InfoBubble?

    Thanx a million!
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,914
    Rep Power
    9646
    Why are you doing all that CSS work in Javascript?

    It's CSS. Put it in your stylesheet, not your code.

    Comments on this post

    • Paul-Ninja agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    Originally Posted by requinix
    Why are you doing all that CSS work in Javascript?

    It's CSS. Put it in your stylesheet, not your code.
    Most probably because i know JavaScript slightly better than CSS, which i dont know at all and can hardly comprehend.

    I tried removing box-shadow to get rid of the shadow, it did not work at all.
  6. #4
  7. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,914
    Rep Power
    9646
    There's a fair bit of CSS at the top of your post. You can see the syntax, it's not that difficult to understand. But there will be a couple things you'll have to find the markup for.

    Is this page somewhere I can see?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    Originally Posted by requinix
    Why are you doing all that CSS work in Javascript?
    Actually, this CSS has to be applied on "run-time", to correct the position and other properties of the InfoWindow after it is displayed. Thats why, i think...
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    Originally Posted by requinix
    Is this page somewhere I can see?
    Unfortunately it is on the intranet site, not accessible outside. I can email, if you wish...Thank you.
  12. #7
  13. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,914
    Rep Power
    9646
    Originally Posted by admctfdotcom
    Actually, this CSS has to be applied on "run-time", to correct the position and other properties of the InfoWindow after it is displayed. Thats why, i think...
    The .iw-bottom-gradient does have that special logic, but everything else is more or less normal.

    The "more or less" is because of the .prev/next/parent() jQuery functions. CSS can do the "next sibling" element, and even children, but it can't do parents or previous elements.
    Code:
    var iwBackground = iwOuter.prev();
    It'd be really nice if you didn't need this. Can you look at the rendered markup to see what element comes before the .gm-style-iw? Surely it has a class or some other attribute that CSS could target?

    Same for
    Code:
    iwOuter.parent().parent()
    Code:
    var iwCloseBtn = iwOuter.next();
    Also take a look for
    Code:
    iwBackground.children(':nth-child(3)').find('div').children()
    which can be replicated in CSS but it would be nice not to have to.

    If you can find something for those three (or four) then that solves your problem. Otherwise you'll have to look through the HERE docs to see if there's some event you can tap into.

    But... HERE doesn't look like it's based on Google Maps. All that work inside the callback might be useless since the InfoBubble markup may be completely different. Given the particular changes the Javascript currently wants to apply to the window, it might be better to start this part from scratch and find a new way to apply similar changes. I don't see events for InfoBubble - in fact I don't see any docs for it at all - so the pure CSS approach should be the first thing you try.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    Thank you.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    Okay, i was able to make some progress with it.

    Now two questions:

    1. How do i get rid of this excessive right margin after the "title"?
    2. How to move closing X a bit to the left and down, so that white X is placed on title color?



    .H_ib {
    width: 400px !important;
    /*
    top: 15px !important;
    left: 0px !important;
    */
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 2px 2px 10px 10px;
    }


    .H_ib_body {
    width: 400px !important;
    /*
    top: 15px !important;
    left: 0px !important;
    */
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 2px 2px 10px 10px;
    }

    .H_ib_close {
    opacity: 1;
    right: -25px;
    top: -15px;
    border: 7px solid #48b5e9;
    border-radius: 13px;
    box-shadow: 0 0 5px #3990B9;
    }

    .H_ib_content {
    }

    .H_ib_tail {
    }

    #iw-container {
    width: 400px;
    margin-bottom: 10px;
    overflow-x: hidden;
    }

    #iw-container .iw-title {
    width: 400px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 400;
    background-color: #48b5e9;
    color: white;
    padding: 10px;
    margin: 0;
    border-radius: 2px 2px 0 0;
    overflow-x: hidden;
    }

    #iw-container .iw-content {
    background-color: white;
    color: black;
    width: 400px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 15px 5px 20px 15px;
    }

    .iw-subTitle {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
    }

    .iw-bottom-gradient {
    width: 400px;
    position: absolute;
    height: 25px;
    bottom: 10px;
    right: 18px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    }

    #iw-wrap {
    width:395px;
    margin:0 auto;
    }

    #iw-left_col {
    float:left;
    width:255px;
    }

    #iw-right_col {
    float:left;
    width:140px;
    }

    Thank you.

    function CreateRouteInfoWindowContent(ARoute, AIncludeStopDetailLink)
    {
    var vContent;
    var vStopsArray = ARoute.stopList.split('|');
    var vStopsContent = '<div id="iw-wrap">';
    var vStopDetails = [];

    for(var i = 0; i < vStopsArray.length; i++) {
    //alert(vStopsArray[i]);
    vStopDetails = vStopsArray[i].split('^');
    if (vStopDetails.length == 2) {
    vStopsContent += '<div id="iw-left_col">' + vStopDetails[0] + '</div>';
    vStopsContent += '<div id="iw-right_col">' + vStopDetails[1] + '</div>';
    }
    else {
    vStopsContent += '<div id="iw-left_col">' + vStopArray[i] + '</div>';

    }
    }

    vStopsContent += '</div>';

    vContent =
    '<div id="iw-container">' +
    ' <div class="iw-title">' + ARoute.driverName + '</div>' +
    ' <div class="iw-content">' +
    ' <span class="iw-subTitle">' +
    ' Status: ' + ARoute.statusName + '<br>' +
    ' Truck: ' + ARoute.truckName + '<br>' +
    ' Hub: ' + ARoute.hubName +
    ' </span><br/>' +
    ' Last GPS: ' + ARoute.timeStamp + '</br></br>' +
    vStopsContent;

    vContent += ' <div style="clear: both;"></div>'; //needed to ensure that "View stops" link is at bottom

    if (AIncludeStopDetailLink == true)
    {
    vContent += ' <div>&nbsp;<br/><a href="' + ARoute.id +'">View stops for route ' + ARoute.door + '</a></div>'; //needed to add &nbsp in order to get <br/> to work at beginning of div
    }

    vContent +=
    ' <div class="iw-bottom-gradient"></div>' +
    ' </div>' +
    '</div>';

    return vContent;
    }
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    Also, if the InfoWindow can not be shown entirely on top - can i adjust the map downward so it shows the InfoWindow in full?
  20. #11
  21. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,914
    Rep Power
    9646
    1. In general, when you're working with block-level elements (like a heading) you don't want to give them an explicit width. The width should be set on the containing element. To create empty space between the heading and container, you apply padding to the container, or a margin to the container's child elements, or a padding to the heading (all three do different things).
    So first step is to get rid of that explicit width.

    2. I see you have applied some positioning to the close button. Have you tried adjusting those values? Note that left/right/top/bottom values are positive to move into the element and negative to move out of it - so a right:-25px moves it 25px outside the edge. That's assuming there's a position:absolute on it somewhere I can't see.
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    Originally Posted by requinix
    1. In general, when you're working with block-level elements (like a heading) you don't want to give them an explicit width. The width should be set on the containing element. To create empty space between the heading and container, you apply padding to the container, or a margin to the container's child elements, or a padding to the heading (all three do different things).
    So first step is to get rid of that explicit width.
    I removed width: 400px; everywhere but the very top .H_ib, it does not affect display at all.

    Originally Posted by requinix
    2. I see you have applied some positioning to the close button. Have you tried adjusting those values? Note that left/right/top/bottom values are positive to move into the element and negative to move out of it - so a right:-25px moves it 25px outside the edge. That's assuming there's a position:absolute on it somewhere I can't see.
    There is no position setting on close element.

    .H_ib_close {
    opacity: 1;
    right: -25px;
    top: -15px;
    border: 7px solid #48b5e9;
    border-radius: 13px;
    box-shadow: 0 0 5px #3990B9;
    }
  24. #13
  25. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,914
    Rep Power
    9646
    Are you familiar with your browser's DOM inspection tools? They all have one. With Chrome, you can right-click any element on the page, hit Inspect Element, and a tool appears at the bottom that lets you see the page markup as well as CSS being applied and where it's coming from. Firefox and IE/Edge have something similar. Take a few minutes to get familiar with it, and/or Google how to use it.

    Use the tool to look at your header. You should be able to see what the width of the element is and any padding or margin associated with it. Then look at the container it's in and see what sorts of padding it might have. And possibly its container. Some combination of them will be able to explain why the header is not the full width of the window. You should also be able to edit CSS right on the page with the tool so you can test changes immediately.

    Then look at the close button. I don't know what the markup is for it since it appears to be part of the window, but you should be able to see its CSS and what is causing it to be positioned the way it is. You would then make your own changes to (likely) override whatever defaults it's getting from HERE's own styling.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    14
    Rep Power
    0
    This runs inside IE ActiveX control, i cant see anything like Inspect Element there.

    Here is the HTML which is being rendered

    <div class="H_ib">
    <div class="H_ib_body">
    <div class="H_ib_close">
    <svg xmlns="http://www.w3.org/2000/svg" class="H_icon" viewBox="0 0 12 22" version="1.1"><path d="M 9.01 17 L 6.04 14 L 3 17 L 0.03 14.1 L 3 11 L 0.096 8.17 L 3.07 5.15 L 6.04 8.07 L 8.95 5.15 L 11.9 8.17 L 9.01 11 L 12 14.1 L 9.01 17" /></svg>
    </div>
    <div class="H_ib_content">
    <div id="iw-container">
    <div class="iw-title">LDriver, Ed</div>
    <div class="iw-content"> <span class="iw-subTitle"> Status: On Time<br> Truck: JERRY<br> Hub: Jacksonville </span><br> Last GPS: 02/01 09:45 PM<br><br>
    <div id="iw-wrap">
    <div id="iw-left_col">1. MORRIS</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">2. FOWLER</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">3. DIETZ</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">4. SOARES</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">5. GILLIS</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">6. BLISS</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">7. ENGLAND</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">8. JADEJA</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">9. DEGRADO</div><div id="iw-right_col">Pending</div>
    <div id="iw-left_col">10. KUSHNER</div><div id="iw-right_col">Pending</div>
    </div>
    <div style="clear: both;">
    </div>
    <div>&nbsp;<br><a href="8105">View stops for route 012</a></div>
    <div class="iw-bottom-gradient"></div>
    </div>
    </div>
    </div>
    </div>
    <div class="H_ib_tail"></div>
    </div>

    Here is the CSS...I tried removing every padding i see there, and adding paddings in outer elements...with no sign of positive result.

    Why on Earth it is adding this margin on the right?

    .H_ib {
    width: 400px !important;
    /*
    top: 15px !important;
    left: 0px !important;
    */
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 2px 2px 10px 10px;
    }

    .H_ib_body {
    /*
    width: 400px !important;
    top: 15px !important;
    left: 0px !important;
    */

    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 2px 2px 10px 10px;
    }

    .H_ib_close {
    position: absolute;
    opacity: 1;
    right: -15px;
    top: -5px;
    border: 7px solid #48b5e9;
    border-radius: 13px;
    box-shadow: 0 0 5px #3990B9;
    }

    .H_ib_content {
    }

    .H_ib_tail {
    }

    #iw-container {
    margin-bottom: 10px;
    }

    #iw-container .iw-title {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 400;
    background-color: #48b5e9;
    color: white;
    padding: 10px;
    margin: 0;
    border-radius: 2px 2px 0 0;
    }

    #iw-container .iw-content {
    background-color: white;
    color: black;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 15px 5px 20px 15px;
    }

    .iw-subTitle {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
    }

    .iw-bottom-gradient {
    position: absolute;
    height: 25px;
    bottom: 10px;
    right: 18px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    }

    #iw-wrap {
    width:395px;
    margin:0 auto;
    }

    #iw-left_col {
    float:left;
    width:255px;
    }

    #iw-right_col {
    float:left;
    width:140px;
    }
  28. #15
  29. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,914
    Rep Power
    9646
    Originally Posted by admctfdotcom
    This runs inside IE ActiveX control, i cant see anything like Inspect Element there.
    All this content is being served from a website, right? Then you can point your browser to it.

    I'm not psychic. I can't see all the markup the page uses. I can't see how CSS is being applied. All I can do is tell you about how stuff tends to work and try to point you in the right direction. For all I know, the embedded browser the ActiveX control is using (likely IE's Trident) is responsible.

    You've dealt with some of the widths and offsets to no avail, therefore the problem is somewhere else. So keep looking. There is an explanation somewhere in there. When you find it, I can tell you why it was responsible, but until then I don't have a crystal ball to gaze into to find out what's wrong.

IMN logo majestic logo threadwatch logo seochat tools logo