locked
customized Master page - searchresultui.png appears for a second and disappears RRS feed

  • Question

  • Hi,

    I have a custom master page for a publishing site.

    In the site, the "searchresultui.png" shows for a second near the search box and disappears.

    Why is the image showing up? How to hide it?

    Thanks

    Monday, March 16, 2015 3:23 PM

Answers

  • Hi Venkatzeus,

    From your code, you want to change the search image. Is it right?

    For your code, please change:

    #SearchBox .ms-srch-sb > .ms-srch-sb-searchLink img {
     display: none;
    }
    .ms-srch-sb-searchImg{
    display:inline !important;
    }

    To:

    #searchImg {
     display: none;
    }

    And change:

    var searchimagenew = document.getElementById("searchImg");
    if (searchimagenew != null) {
    searchimagenew.attributes.removeNamedItem("src");
    $('#searchImg').attr('src', '/_layouts/15/Test/Images/sitesearch.png');
    }

    To:

    $('#searchImg').attr('src', '/_layouts/15/Test/Images/sitesearch.png');
    $('#searchImg').show();

    Best Regards,

    Wendy


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by Venkatzeus Thursday, March 26, 2015 3:08 PM
    Wednesday, March 18, 2015 3:50 AM
  • Hi Venkatzeus,

    Whether you used some JavaScript code to hide the searchresultui.png.

    I suggest you use CSS code to hidden the image:

    <style>
    #searchImg
    {
    display:none;
    }
    </style>

    Best Regards,

    Wendy


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by Venkatzeus Thursday, March 26, 2015 3:08 PM
    Tuesday, March 17, 2015 7:33 AM
  • Hi Venkatzeus,

    Please create a new site collection, and edit its master page with SharePoint Designer, then only add the following code to test:

    <style type="text/css">	
    #searchImg {
     display: none;
    }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>		
    <script>
    $('#searchImg').attr('src', '/_layouts/15/Test/Images/sitesearch.png');
    $("#searchImg").show();
    
    </script>

    Best Regards,

    Wendy


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.


    Thursday, March 19, 2015 1:36 AM

All replies

  • Hi Venkatzeus,

    Whether you used some JavaScript code to hide the searchresultui.png.

    I suggest you use CSS code to hidden the image:

    <style>
    #searchImg
    {
    display:none;
    }
    </style>

    Best Regards,

    Wendy


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by Venkatzeus Thursday, March 26, 2015 3:08 PM
    Tuesday, March 17, 2015 7:33 AM
  • HI,

    Thanks for the reply.

    I need the search box with the search icon in it. Below is the data from Master page.. Could you please , if there is any issue here:

    <style type="text/css">
    	.ms-srch-sb-border
    {
    	border-bottom:#97c906 0px solid !important;
    	border-top:#97c906 0px solid !important;
    	border-left:#97c906 0px solid !important;
    	border-right:#97c906 0px solid !important;	
    	background-color:rgb(249, 248, 247) !important;
    	
    }
    .ms-srch-sb > input
    {
    	padding-top:7px !important;
    	padding-bottom:7px !important;
    	width:186px !important;
    	
    }
    
    .ms-srch-sb > .ms-srch-sb-searchLink
    {
    	height:30px !important;
    	width:30px !important;
    }
    
    #SearchBox .ms-srch-sb > .ms-srch-sb-searchLink img {
     display: none;
    }
    .ms-srch-sb-searchImg{
    display:inline !important;
    }
    </style>
    
    <td class="tdSearch" style="padding-left: 33px;">               		
    
    <div class="ms-tableCell ms-verticalAlignTop">
    <SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">
    
      <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
    	<div id="searchInputBox">
    	  <SharePoint:DelegateControl ID="DelegateControl5" runat="server" ControlId="SmallSearchInputBox" />
    	</div>
      </asp:ContentPlaceHolder>
    </SharePoint:AjaxDelta>
    </div></td>
    </tr>
    </table>
    
    
    var searchimagenew = document.getElementById("searchImg");
    if (searchimagenew != null) {
    searchimagenew.attributes.removeNamedItem("src");
    
    $('#searchImg').attr('src', '/_layouts/15/Test/Images/sitesearch.png');
    }
    
    var searchVal = $("#SearchBox input").val();
    
    var searchVal = $("#SearchBox input").val();
    searchVal = searchVal.replace("...", "");
    $("#SearchBox input").val(searchVal);
    
    $(document).ready(function () {
     $("#SearchBox input").focusout(function () {
    
    var searchVal1 = $("#SearchBox input").val();
    
    if (searchVal1 != "") {
    searchVal1 = searchVal1.replace("...", "");
    $("#SearchBox input").val(searchVal1);
    }
     else if (searchVal1 == "") {
    $("#SearchBox input").val("SEARCH");
     }
     });
    
    
     $("#SearchBox input").focusin(function () {
    
    var searchVal2 = $("#SearchBox input").val();
    
    if (searchVal2.toLowerCase() == "search") {
    $("#SearchBox input").val("");
    
    }
    
    
    });
    
    });
    </script>

    The above code is in Master page. Is the image issue because of the above code?

    How to fix this?

    Thanks

    Tuesday, March 17, 2015 8:57 AM
  • Hi Venkatzeus,

    From your code, you want to change the search image. Is it right?

    For your code, please change:

    #SearchBox .ms-srch-sb > .ms-srch-sb-searchLink img {
     display: none;
    }
    .ms-srch-sb-searchImg{
    display:inline !important;
    }

    To:

    #searchImg {
     display: none;
    }

    And change:

    var searchimagenew = document.getElementById("searchImg");
    if (searchimagenew != null) {
    searchimagenew.attributes.removeNamedItem("src");
    $('#searchImg').attr('src', '/_layouts/15/Test/Images/sitesearch.png');
    }

    To:

    $('#searchImg').attr('src', '/_layouts/15/Test/Images/sitesearch.png');
    $('#searchImg').show();

    Best Regards,

    Wendy


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    • Marked as answer by Venkatzeus Thursday, March 26, 2015 3:08 PM
    Wednesday, March 18, 2015 3:50 AM
  • Thanks for the reply.

    I updated the code as given by you, but still it is happening. I have attached the image which shows that.


    • Edited by Venkatzeus Wednesday, March 18, 2015 6:45 AM
    Wednesday, March 18, 2015 6:42 AM
  • Hi Venkatzeus,

    Please create a new site collection, and edit its master page with SharePoint Designer, then only add the following code to test:

    <style type="text/css">	
    #searchImg {
     display: none;
    }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>		
    <script>
    $('#searchImg').attr('src', '/_layouts/15/Test/Images/sitesearch.png');
    $("#searchImg").show();
    
    </script>

    Best Regards,

    Wendy


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.


    Thursday, March 19, 2015 1:36 AM