The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make a search Image actually work

View previous topic View next topic Go down

Solved How to make a search Image actually work

Post by Zed is Not Dead on October 5th 2015, 4:03 am

I want to make this image right here



Actually work like a search bar, I know it requires coding, mind helping me out?

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to make a search Image actually work

Post by Hagoromo Otsutsuki on October 5th 2015, 5:55 am


Hagoromo Otsutsuki
Forumember

Male Posts : 514
Reputation : 21
Language : English
Location : Heaven

http://naruto-omniverse.forumotion.com/

Back to top Go down

Solved Re: How to make a search Image actually work

Post by Ange Tuteur on October 5th 2015, 10:52 am

Hi @Zed is Not Dead,

That should be pretty easy, just need the magnifying glass and search image. Where would you want it inserted, though ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make a search Image actually work

Post by Zed is Not Dead on October 5th 2015, 11:23 am

on the nav bar the overall nav bar will look like this


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to make a search Image actually work

Post by Ange Tuteur on October 5th 2015, 12:20 pm

Oh I see, add the following CSS to your stylesheet :
Code:
#navbar-search {
  position:relative;
  display:inline-block;
  opacity:1;
}
#nav-search-box, #nav-search-button { position:absolute }
#nav-search-form { display:inline }


#nav-search-box {
  color:#FFF;
  background:transparent;
  border:1px solid transparent;
  border-radius:9px;
  top:17px;
  left:14px;
  width:172px;
  height:20px;
  padding:3px;
}

#nav-search-button {
  background:transparent;
  border:1px solid transparent;
  width:100px;
  height:40px;
  top:12px;
  right:16px;
}


Then go to Modules > JavaScript codes management and create a new script with the following settings.

Placement : In all the pages
Code:
$(function() {
  var search = document.getElementById('i_icon_mini_search'), form;

  if (search) {
    form = document.createElement('FORM');
    search = search.parentNode;
    search.id = 'navbar-search';
    search.onclick = function(e) { e.preventDefault() };

    form.method = 'get';
    form.action = '/search';
    form.id = 'nav-search-form';
    form.innerHTML = '<input id="nav-search-box" type="text" name="search_keywords"/><input id="nav-search-button" type="submit" value="" onclick="this.parentNode.submit();"/>';

    search.appendChild(form);
  }
});

It should add a transparent input and button over the navbar image.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make a search Image actually work

Post by Zed is Not Dead on October 5th 2015, 8:38 pm

thanks! this is solved

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to make a search Image actually work

Post by Ange Tuteur on October 5th 2015, 9:48 pm

You're welcome ^^

Topic archived

Have a great day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum