www.webdeveloper.com
Results 1 to 4 of 4

Thread: Need help on this code

  1. #1
    Join Date
    May 2014
    Posts
    2

    Need help on this code

    I have a little problem, im building a nav bar that only shows when scrolled down 300 pixels, the problem here is that i have an input text on the nav which is not working properly, for example when i type to write on it , it doesn write anything but when i move a bit the scroll it shows the text inside, anyone can say me whats wrong on it?
    HTML Code:
    <div class="nav" style="width:100%; display:none; margin-top:-400px; height:70px; box-shadow:1px 1px 1px #e2e1e2; position:fixed; z-index:999; background-color:white;">
                    <img src="images/artiiseconb.png" style="margin-top:12px; margin-left:-1175px;" />
                    <form method="POST" style="margin-top:-29px; ">
                    <input type="text" placeholder="Search" style="background-image:url('images/searchb2.png'); color:white; text-indent:20px; width:193px; background-color:transparent; height:28px;" />
                    </form>
            </div>
    
    <script>
        function slider() {
         if (document.body.scrollTop > 300) //Show the slider after scrolling down 100px
                $('.nav').show();
         else
                 $('.nav').hide();
        }
    
        $(window).scroll(function () {
            slider();
        });
    
        $(document).ready(function () {
            slider();
    
    </script>
        });

  2. #2
    Join Date
    May 2014
    Posts
    1,020
    Well... for starters letting jQuery handle the show/hide could have a lot to do with it, as would the static style inlined in the markup, incomplete/inaccessible form design, oddball use of a negative margin, image in the markup that given that negative margin probably has no business in a IMG tag, the use of placeholder instead of label...

    You've got a laundry list of how not to build a form -- and then you're throwing scripting at it?

    I'd have to see the page it's going into, but really this seems more like CSS' job than JavaScripts...

    NOT that hiding something important like a search until the page has scrolled has ANY business being done on a website... it's the type of goofy "gee ain't it neat" scripttardery that just makes the page harder for visitors to use -- no matter how "cool" or "pretty" the result.

    Gimme a few and I'll toss together a demo of how I'd handle that on a site -- NOT that I'd actually PUT that on a site.
    Last edited by deathshadow; 05-25-2014 at 06:56 PM.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    May 2014
    Posts
    1,020
    ... and this is how I'd go about it:
    http://www.cutcodedown.com/for_other.../template.html

    as with all my examples the directory:
    http://www.cutcodedown.com/for_others/gongas19

    is wide open for easy access to the gooey bits and pieces. I made the form use PROPER markup for a search form:

    Code:
    	<form method="post" id="topSearch">
    		<fieldset>
    			<label for="topSearchText">Search:</label>
    			<input type="text" name="q" id="topSearchText" />
    			<input type="submit" class="submit" value="go" />
    		</fieldset>
    	</form>
    It does NOT start out hidden or positioned as scripting off you'd still want it to show; unwritten rule of JavaScript, "if you can't make a working page without JavaScript FIRST, you have no business adding scripting to it." The same really applies to fancy CSS effects.

    The script starts out with an anonymous function so other scripts won't clash with it. I added some simple class manipulating functions to make things easier without that fat bloated idiotic jQuery nonsense. The script should be loaded BEFORE </body> to make changes before rendering starts and to load faster.

    The script adds the class "topSearchScripted" BEFORE onload so positioning can start and it's slid off the top of the screen. I added a more robust top calculation to the onscroll event since what you had would not work in anything but Gecko and Webkit based browsers. Instead of triggering a scripted animation, I simply do a class swap to let CSS do the real grunt-work. You just add or remove the "topSearchScrolled" class to set position:top to zero, then let CSS3 handle the animations. IE9 and earlier don't get the animation but still show/hide the menu bar, OH WELL.

    IE6 it doesn't work at all since there is no position:fixed, so I used @cc_on and jscript version detection to return from the anonymous function prematurely -- so legacy IE gets the non-scripted version... on real versions; the 'emulation' modes in IE 9/10/11 do not report jScript versions properly.

    Hope this helps.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    2
    Quote Originally Posted by deathshadow View Post
    ... and this is how I'd go about it:
    http://www.cutcodedown.com/for_other.../template.html

    as with all my examples the directory:
    http://www.cutcodedown.com/for_others/gongas19

    is wide open for easy access to the gooey bits and pieces. I made the form use PROPER markup for a search form:

    Code:
    	<form method="post" id="topSearch">
    		<fieldset>
    			<label for="topSearchText">Search:</label>
    			<input type="text" name="q" id="topSearchText" />
    			<input type="submit" class="submit" value="go" />
    		</fieldset>
    	</form>
    It does NOT start out hidden or positioned as scripting off you'd still want it to show; unwritten rule of JavaScript, "if you can't make a working page without JavaScript FIRST, you have no business adding scripting to it." The same really applies to fancy CSS effects.

    The script starts out with an anonymous function so other scripts won't clash with it. I added some simple class manipulating functions to make things easier without that fat bloated idiotic jQuery nonsense. The script should be loaded BEFORE </body> to make changes before rendering starts and to load faster.

    The script adds the class "topSearchScripted" BEFORE onload so positioning can start and it's slid off the top of the screen. I added a more robust top calculation to the onscroll event since what you had would not work in anything but Gecko and Webkit based browsers. Instead of triggering a scripted animation, I simply do a class swap to let CSS do the real grunt-work. You just add or remove the "topSearchScrolled" class to set position:top to zero, then let CSS3 handle the animations. IE9 and earlier don't get the animation but still show/hide the menu bar, OH WELL.

    IE6 it doesn't work at all since there is no position:fixed, so I used @cc_on and jscript version detection to return from the anonymous function prematurely -- so legacy IE gets the non-scripted version... on real versions; the 'emulation' modes in IE 9/10/11 do not report jScript versions properly.

    Hope this helps.
    This is my main code since the body tag

    HTML Code:
    <body style="background-color:white;">
    
    
    
    
    <!-- Start Container-->
    <div id="cont" style="margin:0 auto;  overflow:hidden; left: 0; right: 0;">
    
    
    <!-- Video -->
     <video autoplay loop poster="polina.jpg" id="bgvid2">
    <source src="teste.webm" type="video/webm">
    <source src="teste.mp4" type="video/mp4">
    </video>
    <!-- Video -->
    
    <!-- Shadow of video -->
    <div style="position:absolute; background-color:black;  width:100%; height:400px; z-index:1; opacity:0.3; "></div>
    <!-- Shadow of video -->
    
    <!-- Logo -->
    <img src="images/artiilogo.png" style="position:fixed; z-index:3; position:fixed; margin-left:50px; margin-top:30px;" />
    <!-- Logo -->
    
       <!-- Signup button -->
      <div class="mid-wrapper" style="left:0; right:0;  text-align: center; position:absolute; z-index:3; ">
        <p class="m" style="margin-top:230px;  z-index:3; ">Discover art all over the world.</p><br/>
          <form method="POST">
           <button class="signupz" style="" ></button>
          </form>
      </div>
      <!-- Signup button -->
    
    <!-- Sign in button -->
    <div class="signubuton-wrapper" style="margin-left:1210px; margin-top:41px;">
    <form method="POST">
    <button class="signin" ></button>
    </form>
    </div>
    <!-- Sign in button -->
    
    <!-- Start White part  -->
    <div id="white-wrapper" style="background-color:#f6f5f6; margin-top:400px;  z-index:4;  width:100%; height:800px;">
    
    <!-- Start Nav -->
    <div class="nav" style="width:100%; margin-top:-400px; display:none; height:70px; box-shadow:1px 1px 1px #e2e1e2; position:fixed; z-index:999; background-color:white;">
      <img src="images/artiiseconb.png" style="margin-top:12px; margin-left:50px;" />
      <form method="POST" style="margin-top:-28px; margin-left:500px; ">
           	 	<input class="searchi" />
    		</form>
    	</div>
    </div>
    <!-- End Nav -->
    
    </div>
    <!-- End White part  -->
    
    </div>
    <!-- End Container-->
    
    <script>
    myVid=document.getElementById("bgvid2");
    myVid.muted=true;
    
    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 320) {
            $(".nav").show();
        } else {
            $('.nav').hide();
        }
    });
    
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles