Home / user-109595

EMCode's questions

Martin Hope
EMCode
Asked: 2022-07-29 22:49:10 +0800 CST
  • 2

If I have this list of elements, and I want to hide only the first one, with CSS it would be like this:

li{
background: yellow;
border: 1px solid;
margin: 10px;
display: block;
}

li:first-child {
display: none;
}
<li><a href="#">PRIMERO</a></li>
<li><a href="#">SEGUNDO</a></li>
<li><a href="#">TERCERO</a></li>

The problem occurs when the list is dynamic: it could be 0, 1, 2 or more elements, in my front I don't have how to count them.

li{
background: yellow;
border: 1px solid;
margin: 10px;
display: block;
}

li:first-child {
display: none;
}
<li><a href="#">UNICO</a></li>

How do I manage to create a CSS conditional with javascript? Only apply first:child if there is more than 1 element, otherwise the display would be block.

javascript
Martin Hope
EMCode
Asked: 2022-07-16 17:25:25 +0800 CST
  • 3

With the following SQL statement

SELECT * FROM table ORDER BY fecha DESC

I get these results:

Title Date
Item A 2022-02-16
Item B 2022-01-15
Item C 2022-01-30

What I need is that this query omits the first result ( Item A ), but the operator does not work for me, LIKEnor does any event with the date, this is because the results could be any, and the ORDER BYcan change dynamically (it could be ASCor DESC) .

That's why I only need to skip the first result or row of that statement SELECT, and display the results starting from the second row, like so:

Title Date
Item B 2022-01-15
Item C 2022-01-30

Is this possible? I was reviewing the function MODbut its use is not very clear to me.

mysql
Martin Hope
EMCode
Asked: 2021-11-13 14:07:40 +0800 CST
  • 3

Following this tutorial , in which the same form is shown, but divided into three steps:

How do I get those requiredfrom the first step to respect each other?

That they are not clickable siguiente(to go to the 2nd step), but rather validate that they are empty.

Following a comment on the same post, it is recommended to make the following script:

 jQuery(".next").click(function() {
     current_step = jQuery(this).parent();
     var inputs = current_step.find("input")
     var countFails = 0;

     /**aqui busca si hay informacion el validationMesagge, el cual solo esta lleno cuando el campo esta mal diligenciado*/
     for (var i = 0; i < inputs.length; i++) {
       if (inputs[i].validationMessage != "Esperalee") {
         countFails++;
       }
     }
     /*solo vamos a pasar al siguiente cuando ningun input tenga error*/
     if (countFails == 0) {
       next_step = jQuery(this).parent().next();
       next_step.show();
       current_step.hide();
       setProgressBar(++current);
     }
   });

But it still ignores the require and only validates at the end when I submit.

I share the executable snippet below, thank you for your attention.

jQuery(".next").click(function() {
  current_step = jQuery(this).parent();
  var inputs = current_step.find("input")
  var countFails = 0;

  /**aqui busca si hay informacion el validationMesagge, el cual solo esta lleno cuando el campo esta mal diligenciado*/
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].validationMessage != "Esperalee") {
      countFails++;
    }
  }
  /*solo vamos a pasar al siguiente cuando ningun input tenga error*/
  if (countFails == 0) {
    next_step = jQuery(this).parent().next();
    next_step.show();
    current_step.hide();
    setProgressBar(++current);
  }
});



/* Script para mostrar u ocultar segun el paso a paso */

$(document).ready(function() {
  var current = 1,
    current_step, next_step, steps;
  steps = $("fieldset").length;
  $(".next").click(function() {
    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();
    setProgressBar(++current);
  });
  $(".previous").click(function() {
    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();
    setProgressBar(--current);
  });
  setProgressBar(current);
  // Change progress bar action
  function setProgressBar(curStep) {
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width", percent + "%")
      .html(percent + "%");
  }
});
#regiration_form fieldset:not(:first-of-type) {
  display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="container">
  <h1>Registro de usuarios paso a paso</h1>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <form id="regiration_form" action="action.php" method="post">
    <fieldset>
      <h2>Paso 1: Crear su cuenta</h2>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" name="data[email]" placeholder="Email" required>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" required>
      </div>
      <input type="button" name="data[password]" class="next btn btn-info" value="Siguiente" />
    </fieldset>
    <fieldset>
      <h2> Paso 2: Agregar detalles personales</h2>
      <div class="form-group">
        <label for="fName">Nombres</label>
        <input type="text" class="form-control" name="data[fName]" id="fName" placeholder="Nombres" required>
      </div>
      <div class="form-group">
        <label for="lName">Apellidos</label>
        <input type="text" class="form-control" name="data[lName]" id="lName" placeholder="Apellidos" required>
      </div>
      <input type="button" name="previous" class="previous btn btn-default" value="Previo" />
      <input type="button" name="next" class="next btn btn-info" value="Siguiente" />
    </fieldset>
    <fieldset>
      <h2>Paso 3: Información de contacto</h2>
      <div class="form-group">
        <label for="mob">Numero Celular</label>
        <input type="text" class="form-control" id="mob" name="data[mob]" placeholder="Numero Celular" required>
      </div>
      <div class="form-group">
        <label for="address">Direccion</label>
        <textarea class="form-control" name="data[address]" placeholder="Direccion" required></textarea>
      </div>
      <input type="button" name="previous" class="previous btn btn-default" value="Previo" />
      <input type="submit" name="submit" class="submit btn btn-success" value="Enviar" id="submit_data" />
    </fieldset>
  </form>
</div>

javascript
Martin Hope
EMCode
Asked: 2020-02-13 14:17:55 +0800 CST
  • 3

This question is based on this answer.

Thanks to user @Roberto , I was able to modify the following code that makes a nested query to four tables in a database:

SELECT ft.pages_id, 
       ft.data AS titulo, 
       fb.data AS body, 
       fi.data AS imagen, 
       pg.name AS link 
FROM   field_title ft 
       JOIN field_body fb 
         ON ft.pages_id = fb.pages_id 
       JOIN field_images fi 
         ON fi.pages_id = ft.pages_id 
       JOIN pages pg 
         ON pg.id = pg.id 
WHERE  ( ft.pages_id = 1062 ) 
       AND ( pg.id = 1062 ) 
       AND ( fi.created = (SELECT Min(fi2.created) 
                           FROM   field_images fi2 
                           WHERE  fi2.pages_id = ft.pages_id) );

What this does is bring the records corresponding to an ID (1062 in this case). It works well.

What I am doing now is passing those records to a card element of Bootstrap, I realized that with only 1 template of these cards , if the SQL query brings up two rows ( ) or more, the templates of said cardrow are automatically created , that is it's great.

Thinking about it, what I want is that the SQL query brings me the last three records (for example) of a specific table, but depending on the ID field.

The table has this structure:

pages_id      data
------------------------------
1060          Juan Carlos
1062          Ana Maria
1063          Jose Eduardo
1064          Juan Camilo
1068          Mario Andres

The SQL query should return the ID's 1063 , 1064and 1068.

To achieve this, I tried with ORDER BYand LIMIT, like this:

SELECT ft.pages_id, 
       ft.data AS titulo, 
       fb.data AS body, 
       fi.data AS imagen, 
       pg.name AS link 
FROM   field_title ft 
       JOIN field_body fb 
         ON ft.pages_id = fb.pages_id 
       JOIN field_images fi 
         ON fi.pages_id = ft.pages_id 
       JOIN pages pg 
         ON pg.id = pg.id 
WHERE  ( fi.created = (SELECT Min(fi2.created) 
                       FROM   field_images fi2 
                       WHERE  fi2.pages_id = ft.pages_id) ) 
ORDER  BY ft.pages_id DESC 
LIMIT  3;

The problem is that this query brings me the last record (1068) repeated three times.

Is there something wrong with the query?

In this Fiddle you can see the SQL command window and do tests .

Thank you

mysql
Martin Hope
EMCode
Asked: 2020-02-11 11:41:40 +0800 CST
  • 5

I have a small test database with three tables .

Basically it is teacher data:

  • The field_title table brings the names of the teachers
  • The field_body table brings a description of your work experience
  • The field_images table brings in images like college degrees, eg.

They all have a common identifier field which is pages_id .

These are the tables:

field_title

pages_id      data
------------------------------
1060          Juan Carlos
1062          Ana Maria
1063          Jose Eduardo
1064          Juan Camilo
1068          Mario Andres

field_body

pages_id      data
------------------------------
1060          So, Jonathan, how was the pull-out? You act like y...
1062          Seitan art party dolore farm-to-table, slow-carb n...
1063          Yard maroon hulk cable wench tack furl bilge rat c...
1064          Está la cosa muy malar jarl aute incididunt. Tempo...
1068          No! Hoc non credant? Gus habet cameras ubique plac...

field_images

pages_id      data
------------------------------
1060          prfilepicture.png
1062          cierreimg.png
1062          enero.png
1063          boletin.png
1064          fondoblanco.png
1068          hv-44.png
1068          image.png
1068          profile.png
1068          otros.png

What I want to do is bring with a query this data per record: the name of the teacher, his biography and his image(s).

This is what I tried, so that it would bring the first result for example.

SELECT * FROM field_title, field_body, field_images
WHERE pages_id = '1060';

Then I realized that I can use INNER JOIN on multiple tables, by doing this:

SELECT * FROM field_title, field_body, field_images
JOIN data ON ALL TABLES
WHERE pages_id = '1060';

But I don't quite understand how it works.

The expected result would be something like this, in the first case:

Juan Carlos
So, Jonathan, how was the pull-out? You act like y...
prfilepicture.png

Thanks for your time and help!

html
Martin Hope
EMCode
Asked: 2020-01-24 05:32:55 +0800 CST
  • 5

This question is based on this answer .

Good day,

I'm working with the JsCalendar GramThanos calendar , at the time I needed to add dynamic events inside the calendar, with the help of the user @fredyfx it was achieved as follows:

//Agregando elementos de manera dinamica:
var pepito = new Date(2020, 0, 23);
var juana = new Date(2020, 0, 24);
var luis = new Date(2020, 0, 25);
var diana = new Date(2020, 0, 26);

cargarMensaje(pepito, "Pepito Perez - Ingeniero");
cargarMensaje(juana, "Juana Diaz - Profesora");
cargarMensaje(luis, "Luis Lopez - Médico");
cargarMensaje(diana, "Diana Jiménez - Científica");

function cargarMensaje(fecha, mensaje) {
  var id = jsCalendar.tools.dateToString(fecha, date_format, "es");
  // If no events, create list
  if (!events.hasOwnProperty(id)) {
    // Select date
    calendar.select(current);
    // Create list
    events[id] = [];
  }
  events[id].push({
    name: mensaje
  });
  // Refresh events: Mostramos los eventos del día actual.
  showEvents(current);
}

Now the need arises for those lines of text or entries to recognize HTML code, for example:

cargarMensaje(pepito, "<b>Pepito Perez</b> - <i>Ingeniero</i>");

Bold should be applied to the name and an italic to the profession, but these values ​​are not being taken and the information displayed on the screen is textual the line:

<b>Pepito Perez</b> - <i>Ingeniero</i>

I tried at the time with jQuery making use of $.parseHTML(mensaje);and then replacing events[id].push({name : mensaje});withevents[id].push({name : nuevoMensaje});

But I got the events with the text[object text]

I share the complete code below, the events are on January 23 to 26.

Thank you very much

// Get elements
var elements = {
  // Calendar element
  calendar: document.getElementById("events-calendar"),
  // Input element
  events: document.getElementById("events")
}

// Create the calendar
elements.calendar.className = "clean-theme";
var calendar = jsCalendar.new(elements.calendar);

// Create events elements
elements.title = document.createElement("div");
elements.title.className = "title";
elements.events.appendChild(elements.title);
elements.subtitle = document.createElement("div");
elements.subtitle.className = "subtitle";
elements.events.appendChild(elements.subtitle);
elements.list = document.createElement("div");
elements.list.className = "list";
elements.events.appendChild(elements.list);
elements.actions = document.createElement("div");
elements.actions.className = "action";
elements.events.appendChild(elements.actions);
elements.addButton = document.createElement("input");
elements.addButton.type = "button";
elements.addButton.value = "Add";
elements.actions.appendChild(elements.addButton);

var events = {};
var date_format = "DD/MM/YYYY";
var current = null;

var showEvents = function(date) {
  // Date string
  var id = jsCalendar.tools.dateToString(date, date_format, "es");
  // Set date
  current = new Date(date.getTime());
  // Set title
  elements.title.textContent = id;
  // Clear old events
  elements.list.innerHTML = "";
  // Add events on list
  if (events.hasOwnProperty(id) && events[id].length) {
    // Number of events
    elements.subtitle.textContent = events[id].length + " " + ((events[id].length > 1) ? "events" : "event");

    var div;
    var close;
    // For each event
    for (var i = 0; i < events[id].length; i++) {
      div = document.createElement("div");
      div.className = "event-item";
      div.textContent = (i + 1) + ". " + events[id][i].name;
      elements.list.appendChild(div);
      close = document.createElement("div");
      close.className = "close";
      close.textContent = "×";
      div.appendChild(close);
      close.addEventListener("click", (function(date, index) {
        return function() {
          removeEvent(date, index);
        }
      })(date, i), false);
    }
  } else {
    elements.subtitle.textContent = "No events";
  }
};

// Show current date events
showEvents(new Date());

// Add events
calendar.onDateClick(function(event, date) {
  // Update calendar date
  calendar.set(date);
  // Show events
  showEvents(date);
});



//Agregando elementos de manera dinamica:
var pepito = new Date(2020, 0, 23);
var juana = new Date(2020, 0, 24);
var luis = new Date(2020, 0, 25);
var diana = new Date(2020, 0, 26);

cargarMensaje(pepito, "Pepito Perez - Ingeniero");
cargarMensaje(juana, "Juana Diaz - Profesora");
cargarMensaje(luis, "Luis Lopez - Médico");
cargarMensaje(diana, "Diana Jiménez - Científica");

function cargarMensaje(fecha, mensaje) {
  var id = jsCalendar.tools.dateToString(fecha, date_format, "es");
  // If no events, create list
  if (!events.hasOwnProperty(id)) {
    // Select date
    calendar.select(current);
    // Create list
    events[id] = [];
  }
  events[id].push({
    name: mensaje
  });
  // Refresh events: Mostramos los eventos del día actual.
  showEvents(current);
}
html,
body {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.description {
  text-align: center;
  padding-bottom: 40px;
}

.jsCalendar.clean-theme tbody td.jsCalendar-previous,
.jsCalendar.clean-theme tbody td.jsCalendar-next {
  color: #000;
  opacity: 0.2;
}

#wrapper {
  margin: 0 auto;
  width: 800px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

#wrapper .jsCalendar table {
  box-shadow: none;
}

.clear {
  clear: both;
}

#events-calendar {
  float: left;
}

#events {
  float: left;
  width: 435px;
  margin: 10px 20px 10px 5px;
}

#events .title {
  padding: 5px 0px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

#events .subtitle {
  padding: 5px 0px;
  font-size: 14px;
  text-align: center;
  color: #888;
}

#events .list {
  height: 250px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

#events .list .event-item {
  line-height: 24px;
  min-height: 24px;
  padding: 2px 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#events .list .event-item .close {
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #000;
  border-radius: 8px;
  height: 14px;
  width: 14px;
  line-height: 12px;
  text-align: center;
  float: right;
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 0px;
  margin: 5px;
  display: block;
  overflow: hidden;
  background: #F44336;
  cursor: pointer;
}

#events .action {
  text-align: right;
}

#events .action input {
  padding: 0px 5px;
  font-size: 12px;
  margin: 10px 5px;
  border: 1px solid #999999;
  height: 28px;
  line-height: 28px;
  width: 120px;
  background: #f8f8f8;
  color: black;
  cursor: pointer;
  transition: all 0.2s;
}

#events .action input:hover {
  background: #eee;
  border: 1px solid #000;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
<script src="https://gramthanos.github.io/jsCalendar/js/jsCalendar.min.js"></script>
<link href="https://gramthanos.github.io/jsCalendar/css/jsCalendar.min.css" rel="stylesheet" />
<link href="https://gramthanos.github.io/jsCalendar/css/themes/jsCalendar.clean.min.css" rel="stylesheet" />
<div id="wrapper">
  <!-- Calendar element -->
  <div id="events-calendar"></div>
  <!-- Events -->
  <div id="events"></div>
  <!-- Clear -->
  <div class="clear"></div>
</div>
<div class="clear"></div>

javascript
Martin Hope
EMCode
Asked: 2020-12-08 08:33:44 +0800 CST
  • 5

Well, I can't vertically center a content using CSS Grid, with Flexbox I had no problems, I'm just starting with CSS Grid. This is what I have tried:

Use the classic method with transformand translateY:

.body {
  height: 100%;
}

.grid {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

I also tried using a container that wraps the grid like so:

.container {
  align-items: center;
  justify-content: center;
  height: 100%;
}

But none of this has worked for me.

What I want is to center the divwith class .gridrelative to the height of the device where the page loads (that's why I added the 100vhto body).

I share my code:

* {
  box-sizing: border-box;
}

body {
  color: white;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  align-items: center;
  margin: 2rem!important;
}

.grid {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: [inicio-contenido] 1fr [fin-contenido];
  grid-template-rows: auto [inicio-contenido] auto [fin-contenido];
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: 4fr [inicio-contenido] 4fr [fin-contenido];
  }
  header {
    grid-column: 1 / 3;
  }
  aside {
    grid-column: 1;
    grid-row: 2;
  }
  footer {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

article {
  grid-column: inicio-contenido;
  grid-row: inicio-contenido;
}

header,
aside,
article,
footer {
  background: #333;
  padding: 2rem;
  border-radius: .4rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<body>

  <div class="grid">
    <header>Header</header>
    <aside>Aside</aside>
    <article>
      <h1>Mi título</h1>
      <p>Contenido cool</p>
    </article>
    <footer>Footer</footer>
  </div>

</body>

PS: For some reason, here in the snippet it is taking my styles first normalize.cssand not mine, I had to add the !importantbody for this reason.

I attach an image of what I want to achieve: Side A is what I currently have, side B is how I want it to be, centered depending on the height of the browser.

Example image

html
Martin Hope
EMCode
Asked: 2020-08-23 12:05:56 +0800 CST
  • 14

I have two <input type="text">and I need both to be centered as if they were one, let me explain:

There are two fields, one for name and one for last name, if I introduce for example "JUAN DIAZ", this text (which would be two input) is visually centered in the yellow container, it is not exact, but it gives the appearance.

The problem is when the first name or last name do not have the same length, as I show in this image:

example with three different names

Is there a way to do it only with CSS, to center the text of both inputs as if they were one? You could also opt for JS. The only thing is that there must always be two (2) inputcentered. It would be something like Excel's "combine and center" function, just to give an example.

This is the problem code:

input {
  border: none;
  background: transparent;
  text-transform: uppercase;
  font-weight: bold;
  width: 150px;
}

.contenedor {
  background-color: gray;
  width: 350px;
  padding: 4rem;
}

.centrar {
  background-color: yellow;
  padding: 1rem;
  margin: 0 auto;
  text-align: center
}

.nombre {
  text-align: right;
}

.apellido {
  text-align: left;
}
<div class="contenedor">

  <div class="centrar">
    <input class="nombre" type="text" /> <input class="apellido" type="text" />

  </div>
 <div>

Thank you for your comments.

javascript
Martin Hope
EMCode
Asked: 2020-03-13 07:58:37 +0800 CST
  • 3

How do I add the spinner inside the input submit?

What I want is to place it on the left side of the text, I thought it was something simple, but I've been thinking about it for a long time (literally lol) and I can't include it.

The function of the submit is to send the login data from a simple login form.

input[type="submit"] {
  background: #d81921;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  width: 200px;
  border: none;
  border-radius: .5rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<input type="submit" name="Enviar" value="Ingresar"><span class="spinner-border" role="status"></span>

css
Martin Hope
EMCode
Asked: 2020-03-09 10:40:30 +0800 CST
  • 1

I'm working on a snippet I found on Codepen , I made some very small changes to it. I would like the input text that works as a Search Engine to always remain fixed in the top position of the list when scrolling.

In this way, if the user wants to search for a data, it is always present and does not have to scroll to the beginning of the list.

Working on the snippet you can see for yourself.

var myApp = angular.module('myApp', ['ngRoute'])

  //ng-route config
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'default.html',
      })
      .when('/contact-info/:contact_index', {
        templateUrl: 'contact_info.html',
        controller: 'contactInfoCtrl'
      })
      .when('/add', {
        templateUrl: 'contact_form.html',
        controller: 'addContactCtrl'
      })
      .when('/edit/:contact_index', {
        templateUrl: 'contact_form.html',
        controller: 'editContactCtrl'
      })
      .otherwise({
        redirectTo: '/home'
      });
  })

  // controllers
  .controller('navCtrl', function($scope) {
    $scope.nav = {
      navItems: ['home', 'add'],
      selectedIndex: 0,
      navClick: function($index) {
        $scope.nav.selectedIndex = $index;
      }
    };
  })

  .controller('homeCtrl', function($scope, ContactService) {
    $scope.contacts = ContactService.getContacts();

    $scope.removeContact = function(item) {
      var index = $scope.contacts.indexOf(item);
      $scope.contacts.splice(index, 1);
      $scope.removed = 'Contact successfully removed.';
    };

  })

  .controller('contactInfoCtrl', function($scope, $routeParams) {
    var index = $routeParams.contact_index;
    $scope.currentContact = $scope.contacts[index];
  })

  .controller('addContactCtrl', function($scope, $location) {
    //needed to show the correct button on the contact form
    $scope.path = $location.path();

    $scope.addContact = function() {
      var contact = $scope.currentContact;
      contact.id = $scope.contacts.length;
      $scope.contacts.push(contact);
    };

  })

  .controller('editContactCtrl', function($scope, $routeParams) {
    $scope.index = $routeParams.contact_index;
    $scope.currentContact = $scope.contacts[$scope.index];
  })

  // directives
  .directive('contact', function() {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: 'contact.html'
    }
  })

  // services
  .factory('ContactService', [function() {
    var factory = {};

    factory.getContacts = function() {
      return contactList;
    }

    // contact list, usually would be a separate database
    var contactList = [

      {
        id: 0,
        name: 'Pablo',
        phone: 'Teléfono: 1456789',
        regional: 'Centro'
      },
      {
        id: 1,
        name: 'Luis',
        phone: 'Teléfono: 14589',
        regional: 'Sur'
      },
      {
        id: 2,
        name: 'Maria',
        phone: 'Teléfono: 1785789',
        regional: 'Norte'
      },
      {
        id: 3,
        name: 'Adriana',
        phone: 'Teléfono: 144419',
        regional: 'Centro'
      },
      {
        id: 4,
        name: 'Carmen',
        phone: 'Teléfono: 7896789',
        regional: 'Norte'
      },
      {
        id: 5,
        name: 'Juan',
        phone: 'Teléfono: 057789',
        regional: 'Centro'
      },
      {
        id: 6,
        name: 'Mario',
        phone: 'Teléfono: 1459',
        regional: 'Sur'
      },
      {
        id: 7,
        name: 'Alejandra',
        phone: 'Teléfono: 14524789',
        regional: 'Centro'
      },
      {
        id: 8,
        name: 'Jhon',
        phone: 'Teléfono: 6969',
        regional: 'Centro'
      },
      {
        id: 9,
        name: 'Maduro',
        phone: 'Teléfono: 666',
        regional: 'Venezuela'
      },
      {
        id: 10,
        name: 'Donald',
        phone: 'Teléfono: 9898',
        regional: 'iunaites'
      },


    ];

    return factory;
  }]);
#ignorar {
  opacity: 0.1;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="jumbotron" id="ignorar">
  <div class="container">
    <h1>Listado de Contactos</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui nisl. Aliquam dignissim, eros a semper pharetra, dui libero tempor enim, et blandit libero odio eu ante. Ut maximus, lectus at vulputate malesuada, ex velit posuere leo, non
      gravida sapien purus in nulla.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>

<div class="global-wrapper" ng-app="myApp">

  <div class="container" style="padding: 30px 50px 30px 50px;">
    <div class="row panel panel-primary" ng-controller="homeCtrl">
      <div class="panel-heading">

      </div>


      <!--     contact list   	 -->
      <div class="col-xs-5 panel-body scrollbar" id="style-2" style="overflow: auto; max-height: 400px;">
        <ul class="list-group">
          <li class="list-group-item">
            <input class="form-control" placeholder="Búsqueda" type="text" ng-model="searchText"><br>
            <contact class="list-group-item" ng-repeat="contact in contacts | orderBy: 'name' | filter: searchText "></contact>
          </li>
        </ul>
      </div>

      <!--   ng-view below       -->
      <div class="col-xs-7">
        <div class="list-group panel-body">
          <div ng-view></div>
        </div>
      </div>

    </div>

  </div>

  <!--  html templates used by angular, usually in separate files -->
  <script type="text/ng-template" id="default.html">
    <div class="alert alert-success text-center" ng-class="{hidden : !removed}"> {{removed}}</div>
    <div class="list-group-item text-center">Seleccione un contacto para ver su información</div>
  </script>

  <!-- 	template for displaying a contacts info	 -->
  <script type="text/ng-template" id="contact_info.html">
    <div class="list-group-item">
      <h3 class="text-center">{{currentContact.name}}</h3>
      <hr><br>

      <p>{{currentContact.phone}}</p>
      <p>{{currentContact.email}}</p>
      <p>{{currentContact.cargo}}</a>
      </p>
      <p>{{currentContact.dependencia}}</p>
      <p>{{currentContact.regional}}</p>

    </div>
  </script>


  <!--      template used for the ng-repeat in the contact list        -->
  <script type="text/ng-template" id="contact.html">
    <a ng-href="#/contact-info/{{contacts.indexOf(contact)}}">
        {{contact.name}}
      </a>
  </script>
</div>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js'></script>

What I tried at first was to apply position: fixed, the input occupied the entire width of the container (I fixed it by defining a width) but when scrolling on the page, the search engine did not remain fixed in its position with respect to the list but rather it does so with respect to the whole body.

I also tried to remove it from the listing wraper but then it no longer performed the search function.

In summary

That when scrolling over the list of contacts, the search box remains fixed in its position

Thank you very much.

html
Martin Hope
EMCode
Asked: 2020-02-28 07:26:16 +0800 CST
  • 7

I'm trying to allow users to change the main color ( .primary-color) of my page, choosing between preset colors.

I found this little snippet

function change(i) {

  var color = document.getElementById("color");

  color.style.backgroundColor = i;

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

#color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div id="color"></div>

There are 4 colors to choose from to apply to the fifth DIV. It works well.

But if I want to change the fifth DIV, i.e. pass the ID to a class, it doesn't work for me:

function change(i) {

  var color = document.getElementsByClassName("color");

  color.style.backgroundColor = i;

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>

Here on the site there is a similar topic but it was not entirely clear to me: What is the difference between selecting by ID or ClassName?

I don't know much about JS, could it be a typo? Thank you very much in advance

javascript
Martin Hope
EMCode
Asked: 2020-01-22 13:57:37 +0800 CST
  • 3

I know the question sounds a bit out of line, but trying many options without success ( 1 2 3 ) I turn to esSO for help.

I have my navbarin a PHP file that I call with the statement includeon all my other pages.

I make the call like this:

<head>
<style>...</style>
</head>

<body>

<?php include "include/navbar.php"; ?>
...
<script>...</script>
</body>

And my navbar.phpis like this:

<div class="navbar">
<ul>
<li>Inicio</li>

<?php if ($_SESSION["usuario"]["privilegio"] == 1){?>
<li>Admin</li> <?php }?>
</ul>
</div>

The code works fine as it is, the sentence I make to the Admin Menu is to validate if the user has permissions to see that menu or not. I request these data with PDO in a login form, but that is getting off topic.

The problem with such code is that for some reason (the menu in navbar.phpis much longer) when I load each page it messes up the CSS and the page load order.

I managed to fix the mess and crash on load by putting that navbar in a echo, like this:

<?php 
 echo
'
<div class="navbar">
<ul>
<li>Inicio</li>

<?php if ($_SESSION["usuario"]["privilegio"] == 1){?>
<li>Admin</li> <?php }?>
</ul>
</div>

'
?>

The problem is that in this way, I lose the statement in PHP, apparently it should be plain text, the strange thing is that the browser hides it, you might think that it is because it works, but it is not, because the admin menu is always shown.

How can I include such a PHP statement inside an echo?

Do you suggest another way to do it?

If you ask me if you break the site rules how:

  • Creation of minimal, complete and verifiable example
  • too wide
  • based on opinions

Please let me know, so I can rephrase my question, otherwise, if the goal is understood, I am grateful for your help.

Good day!

php
Martin Hope
EMCode
Asked: 2020-01-10 09:42:00 +0800 CST
  • 4

Checking the site, I see that this question has been asked regularly before, the solution they propose is to reverse the property with selectors > *Sources: 1 2 3

I want the filter brightnessto darken the primary color primary-colornot to affect the white text in text-whitethe section footer.

I have a web template in which there is only one primary color (applied to navbars , buttons, footers , etc) and a secondary color that will always be gray by default.

I have to change this primary color at the request of the user, I have many users, and to give a bit of variety to it primary-color, I apply CSS filters (such as saturation to "brighten" the tone a bit, or brightness to lighten or darken the tone) . I know it's not the best way and there are alternatives like LESS in CSS which I can use @variablesto define values; Unfortunately, the site is already too advanced to switch to this option (Maybe in the future with more time and knowledge I will do it).

Using these filters I just have to change the hexadecimal value in primary-colorand that's it. (I'm not being lazy, it seriously saves me too much work and time).

This is what I currently have.

.primary-color{
background-color: #4285F4;
}

.primary-color .footer-copyright{
filter: brightness(50%);
}

.text-white{
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Footer -->
  <footer class="page-footer font-small primary-color darken-3">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="mb-5 flex-center">
            <p class="text-center">Redes Sociales</p>            
          </div>
        </div>
      </div>
    </div>

    <!-- Copyright -->
    <div class="footer-copyright text-center text-white py-3 primary-color">© Copyright</div>

  </footer>

And this is how I would like it to look:

Image

html
Martin Hope
EMCode
Asked: 2020-01-09 06:59:40 +0800 CST
  • 9

I have a floating button with which I give the option to share my page, clicking on it displays the alternatives to do so.

What I want to achieve is that clicking such a button will darken the background of my site, like Bootstrap's modals do.

example gif

I guess I can achieve it with JS, but unfortunately I wouldn't know how. I am working with Bootstrap 4.

//FAB
    $(document).ready(function() {
      $('.fixed-action-btn').floatingActionButton();
    });
    
    
.primary-color{
  background-color: blue;
}
.fixed-action-btn {
  position: fixed;
  right: 3%;
  bottom: 4%;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 997;
}

.fixed-action-btn.active ul {
  visibility: visible;
  list-style-type: none;
}

.fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
  padding: 0 0 0 15px;
}

.fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul {
  text-align: right;
  right: 64px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 100%;
  left: auto;
  /*width 100% only goes to width of button container */
  width: 500px;
}

.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li {
  display: inline-block;
  margin: 7.5px 15px 0 0;
}

.fixed-action-btn.direction-right {
  padding: 0 15px 0 0;
}

.fixed-action-btn.direction-right ul {
  text-align: left;
  direction: rtl;
  left: 64px;
  right: auto;
}

.fixed-action-btn.direction-right ul li {
  margin: 7.5px 0 0 15px;
}

.fixed-action-btn.direction-bottom {
  padding: 0 0 15px 0;
}

.fixed-action-btn.direction-bottom ul {
  top: 64px;
  bottom: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.fixed-action-btn.direction-bottom ul li {
  margin: 15px 0 0 0;
}

.fixed-action-btn.toolbar {
  padding: 0;
  height: 56px;
}

.fixed-action-btn.toolbar.active > a i {
  opacity: 0;
}

.fixed-action-btn.toolbar ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.fixed-action-btn.toolbar ul li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block;
  margin: 0;
  height: 100%;
  -webkit-transition: none;
  transition: none;
}

.fixed-action-btn.toolbar ul li a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  line-height: 56px;
  z-index: 1;
}

.fixed-action-btn.toolbar ul li a i {
  line-height: inherit;
}

.fixed-action-btn ul {

  right: 15%;
  text-align: center;
  position: absolute;
  bottom: 64px;
  margin: 0;
  visibility: hidden;
}

.fixed-action-btn ul li {
  margin-bottom: 15px;
}

.fixed-action-btn ul a.btn-floating {
  opacity: 0;
}

.fixed-action-btn .fab-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 40px;
  height: 40px;
  background-color: #26a69a;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  filter: saturate(8);
  border-radius: 50%;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  cursor: pointer;
  vertical-align: middle;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn-floating:hover {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
         box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

.btn-floating:before {
  border-radius: 0;
}

.btn-floating.btn-large {
  width: 56px;
  height: 56px;
  padding: 0;
}

.btn-floating.btn-large.halfway-fab {
  bottom: -28px;
}

.btn-floating.btn-large i {
  line-height: 56px;
}

.btn-floating.btn-small {
  width: 32.4px;
  height: 32.4px;
}

.btn-floating.btn-small.halfway-fab {
  bottom: -16.2px;
}

.btn-floating.btn-small i {
  line-height: 32.4px;
}

.btn-floating.halfway-fab {
  position: absolute;
  right: 24px;
  bottom: -20px;
}

.btn-floating.halfway-fab.left {
  right: auto;
  left: 24px;
}

.btn-floating i {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<body>
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large primary-color">
      <i class="large material-icons">share</i>
    </a>
    <ul>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="#" class="btn-floating primary-color"><i class="fab fa-whatsapp"></i></a></li>
    </ul>
  </div>
  </body>

javascript
Martin Hope
EMCode
Asked: 2020-12-19 08:45:32 +0800 CST
  • 5

Searching through various calendar plugins , I found one called jsCalendar by GramThanos .

Among its demos, there is a view called Date Events , which seems perfect for what I need: Greeting people who are having a birthday according to the day.

But as much as I search its official documentation , I don't see how to add one or more events to a given day.

With JS, predefined events are added with the function onclick, displayed in an alert and temporarily inserted:

// Add events
                calendar.onDateClick(function(event, date){
                    // Update calendar date
                    calendar.set(date);
                    // Show events
                    showEvents(date);
                });

                elements.addButton.addEventListener("click", function(){

 // Get event name
                    var names = ["John", "Bob", "Anna", "George", "Harry", "Jack", "Alexander"];
                    var name = prompt(
                        "Event info",
                        names[Math. floor(Math.random() * names.length)] + "'s birthday."
                    );

Can I add events manually in this plugin , or is it just visual?

Some time ago I used fullcalendar.js and I could do it by importing my Google Calendar events automatically, but if I have to do it manually I have no problem.

PS: In the Date Events example you can edit the events, I do NOT want them to be editable on the user side.

I accept any suggestion or if there are other alternatives, they are welcome.

Thanks for your time!

javascript
Martin Hope
EMCode
Asked: 2020-12-13 12:50:21 +0800 CST
  • 4

I have the following navbarwith Bootstrap 3:

.affix-top{
   transition: top 2s ease 2s;
    -webkit-transition: top 2s ease 2s;
    -moz-transition: top 2s ease 2s;
    -o-transition: top 2s ease 2s;
}

.affix {
    top: 0px;
    width: 100%;
    z-index: 999 !important;
    padding-top: 90px;
    text-align: center;   
    background-color: #fff;
    padding: 12px 0 12px 0;
    border-bottom: 3px double rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
  }

  .affix+.container-fluid {
    padding-top: 300px;
  }

.navbar {   
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    min-height: 0;
}
.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 10px 10px;
    margin-top: 10.5px;
    margin-bottom: 10.5px;
    background-color: #848484;  
    border: 1px solid transparent;
    border-radius: 5px;
}

#fh5co-header {
    padding: 20px 0 0 0;
}

#fh5co-header nav ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    zoom: 1;
    display: inline;
    text-align: center;
<head>
  <meta charset="UTF-8">
  <title>NavBar Collapse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>


  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  
<div id="fh5co-page">
  <header id="fh5co-header" role="banner">
    <div class="container" style="text-align:center;">
      <div class="header-inner">
        <a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
      </div>
    </div>
    
    
    <nav class="navbar affix" data-spy="affix" data-offset-top="165">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <i class="fas fa-bars"></i>                      
      </button>     
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="far fa-user"></i> Salir</a></li>
      </ul>
    </div>
  </div>
</nav>
   </header>
  </div>
  
 <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>  
  
</body>
  <script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>

I want to go from the menu on the left to center it (or justify it) horizontally.

Example

Some may think that I haven't tried much, but believe me, I've been trying to do it for hours but my knowledge is very basic. I tried applying the property display:inlineand then text-align:center. I also played with the property justify-contentand its values center​​, space-aroundand space-between.

I got pretty close by applying in the css:

.navbar-nav {
    float: left;
    margin: 0;
    left: 50%;
    transform: translatex(-50%);
    position: relative;

But you lose the Logout option which is the user icon. I could play by reducing the percentage, but I don't think it's the right way to think about various resolutions.

html
Martin Hope
EMCode
Asked: 2020-12-06 14:12:09 +0800 CST
  • 4

I need to center both vertically and horizontally my site's preload image. The image is inside a container position: absoluteand I applied the following properties to center it:left:50%; top:50%; margin:-50px 0 0 -50px;

But it does not work.

I should clarify that if I work with a smaller image (100px) it is centered, but I want to keep the image at a larger size, currently it is 1000px (I apply a width: 50%to better preserve the resolution)

I don't want to just adjust it with pixels, as this would be messy with various screen resolutions.

Is there something I'm doing wrong?

thanks for your help

	$(function(){
	    $("#loader-image").fadeIn(3000, function(){
	        $("#loader-image").fadeOut(1000, function(){
	            $(".loader-container").fadeOut(2000, function(){

	            });
	        });
	    });
	});
.loader-container {
			 position: fixed;
			 top:0; left:0;
			 right:0; bottom:0;
			 background: #c5161d;
			 background: -moz-radial-gradient(center, ellipse cover, #c5161d 0%, #961214 50%, #6d0d0e 100%);
			 background: -webkit-radial-gradient(center, ellipse cover, #c5161d 0%,#961214 50%,#6d0d0e 100%);
			 background: radial-gradient(ellipse at center, #c5161d 0%,#961214 50%,#6d0d0e 100%);
			 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5161d', endColorstr='#6d0d0e',GradientType=1 );
			 z-index: 999;
			 overflow: hidden;
		}
		#loader-image {
			display: none;
			position: absolute;
			left:50%; top:50%;
	    margin:-50px 0 0 -50px;
			-webkit-animation: pulse 4s ease-in-out; /* Safari 4+ */
  	 	-moz-animation:    pulse 4s ease-in-out; /* Fx 5+ */
  		-o-animation:      pulse 4s ease-in-out; /* Opera 12+ */
  		animation:         pulse 4s ease-in-out; /* IE 10+, Fx 29+ */
	}

  	@-webkit-keyframes pulse {
	    0% {-webkit-transform: scale(0.99, 0.99);}
	    100% {-webkit-transform: scale(1, 1);}
	}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader-container"><img src="https://i.imgur.com/ji756Ho.png" alt="Image" id="loader-image" width="50%"></img></div>

<div>Contenido Cool</div>

css
Martin Hope
EMCode
Asked: 2020-12-06 08:40:20 +0800 CST
  • 8

I have the following code

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 100;
}

#loader {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: url(https://i.imgur.com/QRgZIhI.png) no-repeat center 0;
  margin: -50px 0 0 -50px;
  -webkit-animation: pulse 2s ease-in-out infinite;
  /* Safari 4+ */
  -moz-animation: pulse 2s ease-in-out infinite;
  /* Fx 5+ */
  -o-animation: pulse 2s ease-in-out infinite;
  /* Opera 12+ */
  animation: pulse 2s ease-in-out infinite;
  /* IE 10+, Fx 29+ */
}
<div id="preloader">
  <div id="loader"></div>
</div>

I want the effect to be applied animation: pulseto the image, but I can't get it to work.

i tried with@keyframes 

@-webkit-keyframes pulse {
  animation: pulse 2s ease-in-out infinite } 

@-moz-keyframes pulse {
  animation: pulse 2s ease-in-out infinite } 

@-o-keyframes pulse {
  animation: pulse 2s ease-in-out infinite } 

@keyframes pulse {
  animation: pulse 2s ease-in-out infinite }

But it didn't work for me either.

At first I made an animated gif on a website that provided this service, but the quality is very poor, so I opted for this measure.

Thank you very much!

html