Page jumping to middle section in chrome or end section in the mozilla firefox browser. What can i do to avoid this error?

2018-01-14 10:04 Muskan Jain imported from Stackoverflow

Page jumping to the middle section in chrome or end section in the Mozilla Firefox browser. What can I do to avoid this error?

See also questions close to this topic

console.log looping json data but display not

I'm trying to display json data on the page, however when sending the output to html it only displays the last id.

When using console.log it loops through each id available but not on the page output itself

var username = $("#usernameinfo").text();

$.ajax({
    type: "GET",
    dataType: 'json',
    url: "<?= base_url()?>"+"account/listings/more_user_ads",
    data: {
        "username": username,
        "pid": "<?=$this->input->get('pid')?>"
    },
    success: function(res){
        for (var i = 0; i < res.length; i++){
            var output = "";
            var object = res[i];

            output = "<p>" + object.id + "</p>";
            $("#tg-authoradsslider").html(output);
            // outputs only the id of 3 which is the last id in the loop

            console.log(output);
            /* consoles.logs 
            <p>1</p>
            <p>2</p>
            <p>3</p>*/
        }
    }
});

ReactJS Form Submit keeps causing refresh of page

Learning basics of react here.

I have a simple Zipcode form I'm trying to update the Zipcode in the form component I made and in the app parent component I made.

In my onSumbit prop I call a function to update and added e.preventDefault();

but the submit button still refreshes everything and i'm pretty sure loses my data.

I commented out my onInput functions and props because I realize it's not affecting my onSubmit action but let me know if that's needed in React for some reason.

I can add more if needed. In my index I am using bootstrap4 cdn

App.js:

   import React, { Component } from 'react';
import GMap from './GMap';
import ZipCode from './ZipCode';
import './css/App.css';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {zipcode : ''};
    this.onZipCodeChange = this.onZipCodeChange.bind(this);
  }

  onZipCodeChange(e){
    e.preventDefault();
    console.log('App has detected ZipCode Change');
    const value = e.target;
    this.setState({zipcode: value});
  }

  render() {
    return (
      <div className="App">
        <header>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <a className="navbar-brand" href="#">Navbar</a>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNav">
              <ul className="navbar-nav">
                <li className="nav-item active">
                  <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Features</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Pricing</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>
          <ZipCode onSubmit={this.onZipCodeChange}  />
          <GMap />
      </div>
    );
  }
}

export default App;

ZipCode.js:

import React, { Component } from 'react';
import './css/App.css';


class ZipCode extends Component {
  constructor(props) {
      super(props);
      this.state = {zipcode: ''};
    //  this.updateZip = this.updateZip.bind(this);
      this.submitZipCode = this.submitZipCode.bind(this);
    }
    componentDidMount() {
      console.log(" ZipCode will mount");
  }

  componentWillUnmount() {
    console.log("ZipCode will unmount");
  }

  submitZipCode(e){
    e.preventDefault();
    const { value } = this.state;
    this.setState({zipcode: value});
    const { onSubmit } = this.props; //pull out to call method it is linked to
    console.log('submitting zipcode');
    onSubmit(value);
  }

  // updateZip(e){
  //   const value = e.target;
  //   this.setState({ zipcode : value });
  //   console.log('zipcode updated to: '+ this.state.zipcode.value);
  // }
  //  onInput={this.updateZip}

  render(){
    return(
      <div className="row">
        <div className="col-sm-4 col-md-4 col-lg-4">
          <form onSubmit={this.submitZipCode}>
            <label>Zip Code</label>
            <input
              type="input"
              name="zipcode"
              value={this.zipcode}
             />
            <button type="submit" className='btn btn-success'>Submit</button>
          </form>
          </div>
      </div>
    );
  }
}

export default ZipCode;

keydown event multiple key hold odd behavior

I have been running the following code using es6 babel on chrome:

window.hold = [];
window.addEventListener('keydown', (e) => {
  if (!window.hold.includes(e.key)) {
    setTimeout(() => {
      console.log("> - " + e.key);
      window.hold.push(e.key);
    }, 0);
  } else { e.preventDefault(); }
});

window.addEventListener('keyup', (e) => {
  setTimeout(() => {
    console.log("< - " + e.key);
    window.hold.splice(window.hold.indexOf(e.key), 1);
    e.preventDefault();
  }, 0);
});

If I hold ASDZ on the keyboard, it doesn't log the Z, but if I hold ASDK, it logs everything as it should, does anyone know why this is happening?

Bootstrap form input field that requires at least one element to be selected?

I have form where I would like to create input field(s) for account type. This is little tricky since there might be only one account type but can be two as well. In other words when first, last name is entered then they have to choose either User or Staff for account type or they can pick both. Once they select either or both then additional fields will show int he form. My question is what is the best option to approach that would require user to select at least one account type but at the same time allow them to choose two as well if they need to? Also I use HTML5 validation for this purpose, so if they choose only one the other gonna be hidden. Those hidden form fields should not be required but now I don't have a way to prevent that. Here is example:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group">
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#user-account">User Account</button>
  </div>
  <div id="user-account" class="collapse">
    <div class="form-group required">
      <input type="text" class="form-control" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
    </div>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#staff-account">Staff Account</button>
  </div>
  <div id="staff-account" class="collapse">
    <div class="form-group required">
      <div class="input-group">
        <input type="text" class="form-control" name="frm_position" id="frm_position" placeholder="Choose Position" required>
      </div>
    </div>
  </div>
  <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</form>

So buttons for User and Staff account are actually separate fields in my database and I have to save values for example 1 or 0 if they have entered User information or Staff. Also if I try to submit the form with only Staff information for example I can't since User form fields are hidden but still required. How that can be fixed so only visible fields are required?

JQGrid Search Dialog: text input resizes when selecting column from droplist

I'm using jqGrid's search dialog box and resizing the text input in the beforeShowSearch and afterRedraw events as per this Stack Overflow post.

That works great on the initial load and reset, however, as mentioned in the comments of that post's answer, the text input resizes its width to default when a new value is chosen from the column droplist. How does one maintain the width of the text input upon selection of a new droplist item?
tinymce fullscreen issue with jquery dialog
TinyMCE in fullscreen is not going full screen to the window, it gets cutoff inside the jquery dialog.

I've tried changing z-index but no luck.

Also tried this but didn't work:
```
.ui-dialog { 
  -webkit-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}
```
Before fullscreen:

In fullscreen mode:
customize carousel help required

I need suggestions in building below UI. It's a carousel like structure where active over is highlighted in green and we can still see next overs disabled or gray color.

I have researched for this for ex. Can I make use of any carousel to fit this design but can't seem to come to any conclusion. Thought of slider also but did not see that fitting this design.

Guys, do you have any suggestion or pointers to get me started here. I do not need code; just want a startup point. So far I am stuck with carousel or slider. I understand this might not be most constructive question on SO but any pointers will be highly appreciated.

Side menu toggle transition effect?

I'm designing an app with Phonegap, which allows me to code with HTML5, CSS3 and JS. I created a toggle menu that when clicked shows and hides itself. This was accomplished by adding a "display: none" and "display: inline-block" property. I have read the others posts that reply to how to add transition to such property. My issue is that I'm totally lost as in where I need to add the CSS property, because I have my .css file and a script tag in my HTML file. Any thoughts please? :)

Here is my code:

/* This script is written in my HTML file inside a <script> tag*/

/* My JS */
            function openSlideMenu() {
                $('#side-menu').css({"display": "inline-block"});
            }

            function closeSlideMenu() {

                $('#side-menu').css('display','none');

            }

        $(document).ready(function() {

        });

        app.initialize();

.side-nav {
	box-sizing: border-box;
	z-index: 6000;
	position: absolute;
	height: 100vh;
	width: 70%;
	background-color: #7b66db;
    background-image: -moz-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: -webkit-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: linear-gradient(135deg, #7b66db 0%, #9673fb 100%);
    -webkit-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	-moz-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
}

<!-- MY IMAGES WON'T SHOW BECAUSE I HAVE THEM IN MY LOCAL FILES. THE IMAGE THAT SHOULD SHOW IS AN "X" ICON FOR CLOSE. -->

<!-- Side Nav Menu -->
        <div class="side-nav" id="side-menu">
            <div class="top-bar">
  
                <div class="vpay-logo-div">
                    <a href="#">
                        <img src="img/vpay-logo.png" class="vpay-logo" alt="Brand Logo">
                    </a>
                </div>
                <div class="close-icon-div">
                    <a href="#" class="btn-close" onclick="closeSlideMenu()">              
                      <img src="img/close-icon.png" class="close-icon-nav" alt="Close Icon">
                    </a>
                </div>
            </div>
            <nav>
                <ul>
                  <li>List item</li>
                </ul>
            </nav>
        </div>
        <!-- /Side Nav Menu -->

Letter 'b' rendering as UTF-8 Control in Chrome
I am grabbing an authenticated user name:
```
var username = '<%= System.Web.HttpContext.Current.User.Identity.Name %>'
```
And simply assigning it to an element:
```
$('#displayname').val(username.substring(5).toLowerCase());
```
When the username starts with a 'b', it renders as a white rectangle, like a UTF-8 control:

Character Table

Here is an example:

What is this?

Pseudo element on ul element not working in IE11

I have a menu set up with a pseudo element serving as the background color. The pseudo element was needed because while the menu itself isn't full-width, the background needed to be so. I've set up what I thought was a pretty simple element.

Here's my html with comments

<div class="primary-menu">
  <nav class="menu-primary-menu-container">
    <ul id="menu-primary-menu" class="menu">
      <li id="menu-item-7031" class="first-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7031">
        //hovering this li triggers the sub-menu visibility, the pseudo element is also lined up to this element
        <a href="#">Solutions</a>
        <ul class="sub-menu">
          //pseudo element should show up here
          <li id="menu-item-8916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8916"><a href="#">Solutions Overview</a></li>
          <li id="menu-item-7787" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7787"><a href="#">Data Lake</a></li>
          <li id="menu-item-7541" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7541"><a href="#">Real-Time Analytics</a></li>
          <li id="menu-item-7540" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7540"><a href="#">Cloud Data Integration</a>
            <ul class="sub-menu">
              <li id="menu-item-7854" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7854"><a href="#">Data Integration into Azure</a>
                <ul class="sub-menu">
                  <li id="menu-item-8393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8393"><a href="#">Azure FAQ</a></li>
                  <li id="menu-item-8394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8394"><a href="#">Getting Started with Azure</a></li>
                </ul>
              </li>
              <li id="menu-item-7853" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7853"><a href="#">Data Integration into AWS</a>
                <ul class="sub-menu">
                  <li id="menu-item-11470" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11470"><a href="#">Getting Started with AWS</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

And the relevant CSS

@media (min-width: 768px)
  .primary-menu .menu-primary-menu-container #menu-primary-menu > li {
    margin: 0 15px;
    position: relative;
  }
}

  .primary-menu #menu-primary-menu > li > .sub-menu:before {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    content: "";
    display: block;
    height: 470px;
    position: absolute;
    top: -1rem;
    width: calc(100vw + 1400px);
    z-index: -1;
  }

In IE11 the pseudo element's properties are all crossed out and being applied to the .sub-menu ul that the before element should spawn from. I've added a display: block; property per the suggestion here, but that didn't help my problem.

This is what shows up in IE11 when I inspect the element.

I have a working code pen here which also displays the issue.

Responsive list layout with padding from elements without fixed element inside

I have a list of dynamic items, some of them may have an icon on top of it, some of them not. I need padding from top inside elements that don't have the icon. Width of items is fixed, and icon height is fixed too. So the "grid" may contain different columns count depending on screen width. Something like this: Is it possible to make such kind of layouts? How to do it?

<div class="container">
  <div class="item">
    <div class="dynamic-content-1">
    </div>
  </div>

  <div class="item item_with-icon">
    <div class="icon"></div>
    <div class="dynamic-content-2">
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-1">
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-1">
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-2">
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-1">
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-3">
    </div>
  </div>

  <div class="item">
    <div class="dynamic-content-2">
    </div>
  </div>

  <div class="item item_with-icon">
    <div class="icon"></div>
    <div class="dynamic-content-1">
    </div>
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 300px;
  padding-top: 30px;
  border: 1px solid #000;
}

.icon {
  height: 30px;
  background-color: red;
}

.item_with-icon {
  padding-top: 0;
}

.dynamic-content-1 {
  width: 300px;
  height: 40px;
  background-color: #5fd25f;
}

.dynamic-content-2 {
  height: 100px;
  background-color: #5fd25f;
}

Codepen

How to control the clickable area of an image? CSS
Even though the image is in the center of the page somehow I can click on the entire width of the image, which interferes with the hamburger feature of the page. Where did I go wrong?

The CSS:
```
.logo img{
  margin-left: 7.8%;
  float:left;
  user-select: none;
  position: relative;
  z-index: 1;
}

@media (max-width: 769px) {
 .logo img{
  float:none;
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
}
```

Fixed size but responsive cards boostrap3

I want to make my cards have fixed size, but they fit all types of screens.

Currently they are fixed size, but on smaller screens they are getting one over the other, I want them to fit on the screens.

1920x1080px: Here is correct, but on screens larger than this, there could be more cards per line.

1366x768px: Here it is wrong, it can be only 3 per line.

<div class="row">
    <section class="catalogos">
        <div class="catalogo">
            <div class="col-lg 3 col-md-3 col-sm-12 col-xs-12" ng-repeat="sistema in $ctrl.sistemasFavoritos | filter:search">
                <div class="panel catalogo-item">
                        <div class="media-left media-middle">
                            <div class="catalogo-item-icone-conteudo">
                                <a href="{{sistema.url}}" target="_blank">{{ sistema.nome.substring(0, 1) | uppercase}}</a>
                            </div>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a href="{{sistema.url}}" target="_blank">{{sistema.nome | uppercase}}</a>
                            </h4>
                            <p>{{sistema.descricao}}</p>
                        </div>
                        <div class="media-right">
                            <a ng-click="$ctrl.removeFavorito(sistema)" class="fa fa-star yellow"></a>
                        </div>
                </div>
            </div>
        </div>
    </section>
</div>

css:

 .catalogo-item {
    height: 100%;
    width:100%;
    max-width: 380px;
    max-height: 125px;
    min-width: 380px;
    min-height: 125px;
    padding: 10px;
}

Bootswatch change definition of nav class from block to flex?
I am following a tutorial using .net core, bootstrap and bootswatch. In the tutorial, there is this menu:
```
<ul class="nav">
    <li><a asp-controller="App" asp-action="Index">Home</a></li>
    <li><a asp-controller="App" asp-action="About">About</a></li>
    <li><a asp-controller="App" asp-action="Contact">Contact</a></li>
    <li><a asp-controller="App" asp-action="Info">Info</a></li>
</ul>
```
In bower.json, the tutorial adds bootstrap 3.3.5 and bootswatch 3.3.7. When this .net core 2 program runs, the style for nav is:
```
display: block
```
In English, the menu appears like a table with 1 column and 4 rows.

As bootstrap and bootswatch 4 are already here, I upgrade them in bower.json to 4.1.0. To my surprise, the stylr for nav is changed to:
```
display: flex
```
In English, the menu now appears as 4 columns but only 1 row.

Why does the definition of nav change? Is this a bug?

Vertical align checkbox and span inside label

I'm trying to vertically align a a span and checkbox within a label tag in all browsers.

<div class="container">
  <label class="checbox checkbox-inline">
    <input type="checkbox">
    <span>Remember Me</span>
  </label>
</div>

My CSS file

.container {
  padding: 20px;
  border: 2px solid black;
}

label span {
  font-size: 14px;
}

input[type="checkbox"] {
  position: relative;
  bottom: 1px;
}

FWIW, I'm using Bootstrap 3. It looks like Bootstrap adds 4px top margin to its checkbox, remove the top margin didn't help.

Related questions

Page jumping to middle section in chrome or end section in the mozilla firefox browser. What can i do to avoid this error?

See also questions close to this topic