How To Create a Fullscreen Search Box

JDW · April 2, 2019, 6:55am

I’ve been talking in this thread about how to implement search inside the Navigation bar, but I thought it best to break this related discussion into a new thread. Specifically, I wish to hear from you Blocs experts out there (including @Pealco) about how to implement a fullscreen search box as described here:

Adding the CSS and JS is easily done by way of Page Settings > Add Code > Header. I don’t have questions about that. What eludes me is how to create the “HTML” part as described in the above URL. For example, I know how to create a DIV in Blocs, but what about the “span class” mentioned in the above example?

I want to make my search bar fullscreen because I am not satisfied with what’s required to make the search bar appear over and above the navigation links. Specifically, I want to use Blocs to edit my menus, not hack around in code to edit them! That’s what led me to the above URL, wondering how to make a search bar fullscreen.

My plan is to add a magnifying glass icon to the right of my navigation bar atop the page. Clicking that magnifier icon should open a full screen search bar. When I have that implemented, I will then try to tie that search bar to Google Custom Search, which is what I use right now for search on my existing MADE IN FREEWAY non-responsive websites. I think Google Custom Search is a much better solution than Lucas’ New bric - Search because his method doesn’t involve automatic indexing, which poses a problem for large websites.

I look forward to hearing your ideas on how to implement a fullscreen search box in Blocs 3.2.1, as per the link I provided above.

Thank you!

Pealco · April 2, 2019, 9:46am

Hello @JDW, when I was looking for a solution for you yesterday, I create what you ask, and I didn’t send you because was not what your looking for.

There is the solution I found:

https://blocs.webtekpc.pt/exemples/jdw1/

JDW · April 2, 2019, 9:52am

Any hope of getting the Blocs document for that?

Pealco · April 2, 2019, 9:55am

There is the HTML code (Add a HTML CODE BRIC and add this code inside it):

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container bloc-no-padding">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Full Screen Search</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#search">Search</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>


<div id="search">
    <button type="button" class="close">×</button>
    <form>
        <input type="search" value="" placeholder="type keyword(s) here">
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
</div>

Then add this files to the preferences of the page:
Sources.zip (2.7 KB)

Pealco · April 2, 2019, 10:22am

@JDW
I think you edit your post after my answer, or I did´t see the exemple you give.
So there is the steps you need to to to implement the exemple in Blocs.

For exemple when you choose the nav Bar on the left:

Then go to the right side and select: “Include Content Area”
Then in your nav bar it will open a new place:

image1438×102 9.98 KB
In that place insert a Code Widget:

image1438×396 59.4 KB
Inside that Code Widget (press it twice where it sais “Custom HTML herea” or press the button on the right side “Edit Code” and will open a code editor, then delete all that it have inside):

image1228×484 27.7 KB

And add the following code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #bbb;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
</style>



<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<button class="openBtn" onclick="openSearch()">Open Search Box</button>

<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>

There is the exemple working:

https://blocs.webtekpc.pt/exemples/jdw2/

JDW · April 3, 2019, 2:23am

@Pealco

Thank you for your help, but can you help me just a little more? Here is my documented with the code added:

Archive.zip (38.3 KB)

Open that document in Blocs 3.2.1 and then Preview in Blocs. Note the button to the right of the Navibar that says “Search.” Can you change that “Search” button to instead be a gray colored magnifying glass icon?

Pealco · April 3, 2019, 11:04am

Hello @JDW, Use this code instead:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

/* Style buttons */
.btn {
  background-color: DodgerBlue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #bbb;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
</style>



<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<button class="btn"><i class="fa fa-search" onclick="openSearch()"></i></button>

<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>

I create the code like this so you can understand what you can customize in the button.
You can change the aspect of the button from line 11 to 24

JDW · April 4, 2019, 12:54am

I am humbled and eternally grateful for your kind help, @Pealco. But I’m still not getting it to work right because I needed to edit your code (I hate code!) in order to eliminate the blue background. I don’t want the background because it doesn’t match the navi links. In other words, I want the icon to look and rollover exactly like the navi links do. So I changed the code a bit, and it’s almost perfect except that when I mouseover the icon vanishes, despite the fact I wrote “color: #ffffff” as the hover color! I tried “#FFF” too but that doesn’t work either. Here’s my updated document:

Navi Test Page 2.bloc.zip (35.7 KB)

Could you please open and preview that document in Blocs and then tell me why the mouseover/hover color is not white?

Thank you!

Pealco · April 4, 2019, 1:22am

@JDW is 2:19 in Portugal, and i’m Replying from iPad, as I don’t have laptop with me right now. First in the morning I will send you the code, ok?
If you can just send me the color codes you want for normal, and the color code you want for Hoover.
Or if you want anything else, just let me know and I put it in the code as well.
I like to help, but thank you for your nice words.

JDW · April 4, 2019, 1:42am

Wow! Get some sleep!

The color codes I used are correct, I’m pretty sure. That’s why I’m confused the rollover color is black! Could this be yet another bug in Blocs 3.2.1??!!

Here’s my modified code:

/* Style buttons */
.btn {
  background-color: none /* No background */
  border: none; /* No borders */
  color: #C0C0C0; /* Gray text */
  padding: 4px 0px; /* Some padding */
  font-size: 18px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Mouse-over */
.btn:hover {
  color: #ffffff
}

Again, it looks fine in the normal state, but when I mouseover, the icon turns black. It should be white (#ffffff). I even tried #FFF but it’s still black on mouseover.

Creative · April 4, 2019, 1:45am

@JDW, think of a span as a div inside a div. It will inherit all the rules of the outer div unless those same rules are applied in a different way inside the span. In addition, you can create different rules to affect only what’s within the span tag. (hence the reason for a span tag). Give your span a class name, as shown in the example you linked to and you can create a class in Blocs and style as usual. You can style any class name in your project. That can include classes you’ve created/embedded into HTML widgets, classes that are part of Bootstrap 4 and classes added another way. If you know the class name, you can target it and affect it using the Blocs class manager. Hope that helps.

PS: Another thing you may want to look into is attaching an external CSS stylesheet to your project. I’ve become accustomed to doing that with every project, because there’s always things I can’t reach with Blocs. One reason for that is that if you’re trying to override a Bootstrap class for example, you’ll need to write CSS and apply the ‘!important’ rule in order to accomplish that. I also use the external CSS to affect targeted ID’s and Classes at breakpoints not offered natively inside Blocs. Another example of why you’ll want to use an external CSS is for things like z-index and positioning (ie: ‘absolute’, ‘fixed’ or ‘relative’) You can’t get at these within Blocs.) z-index becomes crucial when you start doing things like overlapping Blocs such as for floating text or images over another bloc, or creating multiple headers.

Finally, I’d highly recommend getting familiar with the ‘Inspect Element’ tool in Chrome (and similar ones in other browsers). It allows you to inspect any element on a page and determine it’s id’s and class names, so you can target them with CSS. There are plenty of YouTube videos covering that. I hope I didn’t cover more than you were wanting to know in response to your post, but those are some things that just occured to me as I answered your post and things I thought you may find helpful, either for this current behavior you’re trying to achieve, or something in the future. Good luck!

JDW · April 4, 2019, 2:14am

Thank you for the detailed tips. I must say though that I’ve built websites since 1999 exclusively using SoftPress Freeway, and I’ve yet to become a web coder. Blocs appeals to me like Freeway did back in 1999 by targeting people “who don’t see the world as code.” Indeed, if I must deal with a lot of code, I might as well become a web coder and do everything in BBEDIT. (Some people do just that, even to this very day.) But to me, code consumes my mind to such an extent that it’s a cup of ice cold water poured over my creativity. I use only one side of my brain at a time. Coding is Left, creative design is Right. I want to focus on the Right brain when it comes to web design.

I see you are savvy on this topic of code, so let’s talk specifics. Please download my Blocs 3.2.1 document below, preview in Blocs 3.2.1, then mouseover the little magnifying glass icon at the right of the navibar, and then, if you can, please explain why it turns black even though the code specifies white (#ffffff).

Navi Test Page 2.bloc.zip (35.7 KB)

Thanks!

Creative · April 4, 2019, 5:53pm

I downloaded it but it was missing 4 resources. I tried previewing it anyway but it wouldn’t preview without any resources. Not sure why. If you want to update and resend, I’ll try again…

Pealco · April 4, 2019, 8:40pm

Hello @JDW, is only missing a important thing… the important word itself.

/* Style buttons */
.btn {
  background-color: none /* No background */
  border: none; /* No borders */
  color: #C0C0C0; /* Gray text */
  padding: 4px 0px; /* Some padding */
  font-size: 18px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Mouse-over */
.btn:hover {
      color: #ffffff !important;
}

JDW · April 5, 2019, 12:15am

I’ve added a feature request to Wish List that addresses that bothersome problem.

Oh how I hate and despise web code! This is a prime example of why I hate it. That “!important” is not always necessary to add in the CSS, yet it is this time. I just added it, along with the semi-colon, and it works. (It doesn’t work with only the semi-colon added.)

I consider a GUI more powerful than code hacks because a GUI doesn’t rely on (1) a full understanding of code, or (2) a good memory that must remember all the little intricacies of code. I wish I could just use the Blocs GUI to add a Navigation Block that had a logo on the left and a magnifier at the far right and it would JustWORK™.

Anyway, thank you @Pealco for reminding me of how important “important!;” is in code. THANK YOU!

Pealco · April 5, 2019, 12:25am

No problem, and sorry for the delay on my answer but today it was a bit difficult.

JDW · April 10, 2019, 7:03am

@Pealco

I can’t understand how to use 2 Code Widgets properly. You see, I need two widgets to display my Search Icon across all the breakpoints. Here’s my Blocs 3.2.2 document:

Archive.zip (107.1 KB)

Everything looks great in the LG breakpoint. My menu system looks good, works fine, and the search icon looks good and works fine. But I am pulling out my hair trying to get all that content to display properly in the other breakpoints.

As you can see in my document, “Bloc #main-navi” contains 2 Rows. The top Row displays in LG, and the lower Row only displays in the other breakpoints (MD, SM, XS). I want a search icon to appear in all the breakpoints, which means I must use more than 1 code widget. PROBLEM#1: I want to make the search icon larger in the MD and SM breakpoint, but when I change font size, that size affects the LG breakpoint too! So I’m pulling out my hair about how to fix this. Would you know?

PROBLEM#2: The Search Icon only works in LG for some reason. When I click it in the other breakpoints the search field does not display. Do you know how to fix that?

Thank you.

Pealco · April 10, 2019, 11:54am

Hello @JDW, I create an alternative to your contents, and I think everything is fixed now… try it.
The problem was: even when the contents are hidden they are there, so there is a problem with duplicated content.

Archive.zip (101.4 KB)

JDW · April 11, 2019, 1:18am

The icon is still the same size in all breakpoints, so PROBLEM#1 (in my previous post) is not solved, but I will live with it because I still have so much more work to do fixing my dropdown in all the smaller screen breakpoints (it’s hell, actually). You fixed PROBLEM#2 perfectly though! Thank you for your kindness. I really appreciate it!

@Pealco You have been a huge help to me in this forum. You also have been kind to me in other threads when people were giving me a verbal beating. I hope there is a time I can return the favor. For now I will teach you your first word in Japanese …

ありがとう！= arigatou! (pronounced “ah-ree-gah-toh”) = Thank you!

Those Japanese characters are called “Hiragana” and there are 46 of them. If only Japanese were that simple! But it’s not. There are Kanji too (Chinese characters) – about 2100 of them! You can actually transform the hiragana word ありがとう into Kanji: 有り難う. It means the same and reads the same.

Sorry for being off-topic, but sometimes it is fun to talk about language.
Take care, my friend!

–James

Pealco · April 11, 2019, 9:33am

Hello @JDW
I think you can change the code of the button to achieve what you saying by this way:

.btn {
  background-color: none /* No background */
  border: none; /* No borders */
  color: #C0C0C0; /* Gray text */
  padding: 1px 0px; /* Some padding */
  font-size: 2vh;  /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

Change that part of code in the widget.
So in the end you change px to vh and then adjust according your needs:

vh is equal to 1/100 of the viewport height. So for example if the height of the browser is 900px , 1vh is equivalent to 9px and, similarly, if the viewport width is 750px , 1vw is equivalent to 7.5px .
But as you working inside a widget/column the size of the browser you have to change to the size of the working area you are working.

Thank you for my first word… I just don’t know how to write it…

Do you thing this answer deserve another word?