simple/other front-end technology or framework similar to the below website animation

2019-11-14 04:09 usercd imported from Stackoverflow

see the site example below. How can i achieve this kind of animation using css, javascript or jquery. zoom in/zoom out events.

https://us.pg.com/

can you give me an example.

thanks.

See also questions close to this topic

Why is react-to-print printing the entire UI only when using chrome on IPad

ReacToPrint is able to print the specific react component I want to print on browsers on the desktop and on the IPad safari works as well. However, when printing the react component using chrome on the IPad the entire UI is printed.

I checked the console and there were no errors present.

I also checked that the ref returned to the content property is referring to the react component that needs to be printed.

I am not sure why ReactToPrint defaults to printing the entire UI on chrome on the IPad, I was wondering if someone else also ran into this issue.
What's the best way to insert a base64 image to MySQL database via cors? (MySQL+Express+React+Node stack)

I am capturing a base64 image into React state and would like to insert it to mySQL database so i can utilise this as the profile picture later on. I am currently using fetch to insert data within the MERN stack (MySQL+Express+React+Node) but it generates 400 bad request when I try insert the image with {mode : 'no-cors'} and header missing error when not using 'no-cors'.
Angular decimal pipe dots formatting
I'm using Angular(4) decimal pipe but the dots is showing with numbers that have more than 4 digits, but with 4 digits the dot is not showing.

Example:
```
<td>USD {{amount| number: '1.2-2'}} </td>
```
14314,23123 returns 14.314,23

but

7157,11123 returns 7157,11 instead of 7.157,11

Is there any way of fixing it without making a custom pipe?
Is there a function in javascript, that allows to add a card when i press a button

Screenshot_1, A table with three dropdowns

As i mentioned in the heading, I'm developing a website, that contains three elements, which are placed inside a table and i have a button, when i click that button the entire form has to be added one by one.

Is there any answers that could help me to solve

Thank you

Send files from Flask to HTML for JavaScript processing

I'm trying to load an xml/musicxml file in Flask and an audio file, save them on the server and send them to complete.html where they should be processed by javascript through the id when the page is loaded.

Flask code:

from flask import Flask, render_template, request, jsonify, send_from_directory
from werkzeug.utils import secure_filename
import AlignmentTest as at

UPLOAD_FOLDER = './instance/uploads'
ALLOWED_EXTENSIONS = {'mp3' , 'wav', 'xml', 'musicxml'}

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
CORS(app)
cors = CORS(app, resources={r"/uploads/*": {"origins": "http://localhost:8888"}, r"/download/*": {"origins": "*"}})


@app.route('/', methods = ['POST', 'GET'])
def upload_form():

    if request.method == 'POST':
        xml = request.files['file1'] #Files I need to reload in complete.html
        audio = request.files['file2']

        #Validation and process files
        pathAudio, pathNewMidi, pathNewMpos = ProcessFiles(xml, audio)

        filexml = secure_filename(xml.filename)
        fileaudio = secure_filename(audio.filename)
        return render_template('complete.html', xml_file = filexml, audio_file = fileaudio)

    return render_template('upload.html')


@app.route('/uploads/<filename>')
def send_audio(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

@app.route('/uploads/<filename>')
def send_xml(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

Here is upload.html, where I load XML and audio files:

    <div id="medbts">
        <h2>Select file(s) to upload</h2>
            <form method="post" action="/" enctype="multipart/form-data">
                <label><span id="abclbl">XML: </span><div id="abcfile">
                       <input type="file" name="file1" multiple="true" id="fknp" accept=".abc,.xml, .musicxml, .js" tabindex="1"/></div></label>
                <label id="medlbl">Sound: <div id="mediafile">
                       <input type="file" name="file2" multiple="true" id="mknp" accept="audio/*, video/*" tabindex="2"/></div></label>

                <p>
                    <input type="submit" value="Submit">
                </p>                
             </form>
    </div>

They are processed and you should send them back to complete.html to be recognized by ID in html and processed automatically by javascript, however, that does not happen. Here is the HTML code for complete.html:

<div id="buttons">
    <div style="height: 5px;"></div>
    <div id="medbts">
        <label>
            <span id="abclbl">Midi: </span>
            <div id="abcfile">
                <input type="file" id="fknp" accept=".abc,.xml,.js" tabindex="1" src="{{ url_for('send_xml', filename = xml_file)}}"/>
                "{{ url_for('send_xml', filename = xml_file)}}"
            </div>
        </label>
        <label id="medlbl">Sound: 
            <div id="mediafile">
                <input type="file" id="mknp" accept="audio/*, video/*" tabindex="2" 
                src="{{ url_for('send_audio', filename = audio_file)}}"/>
                "{{ url_for('send_audio', filename = audio_file)}}"
            </div>
        </label>
    <div>
</div>

I used SRC to try to load the values even though that doesn't work. The file path is displayed correctly.

Thanks.

Webpack index.css and image in css loading

I have the following Webpack configuration :

    /**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const babelConfig = require('./babel.config.js');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
// Remove this line once the following warning goes away (it was meant for webpack loader authors not users):
// 'DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic,
// see https://github.com/webpack/loader-utils/issues/56 parseQuery() will be replaced with getOptions()
// in the next major version of loader-utils.'
process.noDeprecation = true;

// Get static theme, override antd less variables
const pkgPath = path.resolve('package.json');
const pkg = fs.existsSync(pkgPath) ? require(pkgPath) : {};
let theme = {};
if (process.env.THEME) {
  if (pkg.theme && typeof(pkg.theme) === 'string') {
    let cfgPath = pkg.theme;
    // relative path
    if (cfgPath.charAt(0) === '.') {
      cfgPath = path.resolve(__dirname, '../../', cfgPath);
    }
    const lessTheme = require(cfgPath);
    theme = lessTheme[process.env.THEME];
  } else if (pkg.theme && typeof(pkg.theme) === 'object') {
    theme = pkg.theme;
  }
}

const extractStyles = new MiniCssExtractPlugin({
  filename: process.env.NODE_ENV === 'production' ? '[name].[hash].css' : '[name].css',
  chunkFilename: process.env.NODE_ENV === 'production' ? '[id].[hash].css' : '[id].css',
  disable: process.env.NODE_ENV === 'production' ? false : true,
})

const publicPath = '/';

module.exports = (options) => ({
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: options.entry,
  output: Object.assign({ // Compile into js/build.js
    path: path.resolve(process.cwd(), 'build'),
    publicPath,
  }, options.output), // Merge with env dependent settings
  externals: [

  ],
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/, // Transform all .js files required somewhere with Babel
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: Object.assign({
            babelrc: false,
            cacheDirectory: true
          }, babelConfig)
        },
      },
      {
        test: /\.(js|ts|tsx)$/,
        include: path.resolve(__dirname, '../../../node_modules/react-monaco-editor'),
        use:
        {
          loader: 'babel-loader',
          options: Object.assign({
            babelrc: false,
            cacheDirectory: true
          }, babelConfig)
        }
      },
      {
        // Preprocess our own .css files
        // This is the place to add your own loaders (e.g. sass/less etc.)
        // for a list of loaders, see https://webpack.js.org/loaders/#styling
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader'
        ],
      },
      {
        // Preprocess our own .scss files
        test: /\.(sass|scss)$/,
        exclude: /node_modules/,
        use: [
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        // Preprocess our common .scss files
        test: /\.(sass|scss)$/,
        include: [
          path.resolve(__dirname, '../../node_modules/stargate-common-gate')
        ],
        use: [
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        // Preprocess our own .less files
        test: /\.less$/,
        exclude: /node_modules/,
        use: [
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        // Preprocess 3rd party .css files located in node_modules
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        // Preprocess antd 3rd party .less files located in node_modules/antd/dist
        test: /\.less$/,
        include: path.resolve(__dirname,'../../../node_modules/antd'),
        use: [
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`,
        ],
      },
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: "json-loader",
        type: 'javascript/auto',
      },
      {
        test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
        use: 'file-loader',
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'file-loader',

        },
          {
            loader: 'image-webpack-loader',
            options: {
              progressive: true,
              optimizationLevel: 7,
              interlaced: false,
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: 'html-loader',
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
          },
        },
      }
    ],
  },
  plugins: options.plugins.concat([
    new CaseSensitivePathsPlugin(),
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch',
    }),
    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
      '__DEV__': false,
    }),
    new webpack.NamedModulesPlugin(),
    extractStyles,
    new MonacoWebpackPlugin(
      {
        languages: ['typescript', 'html', 'json', 'javascript']
      }
    )
  ]),
  resolve: {
    modules: ['app', 'node_modules',path.resolve(__dirname,'../../../','gates') ].concat(options.resolve.modules),
    extensions: [
      '.ts',
      '.tsx',
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
    alias: {
      moment$: 'moment/moment.js',
      nexus: path.resolve(__dirname,'../../../','nexus'),
      'common-gate': path.resolve(__dirname,'../../','gates','common-gate'),
    }
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
});

This configuration extends production configuration:

/**
 * DEVELOPMENT WEBPACK CONFIGURATION
 */

const path = require('path');
const fs = require('fs');
const glob = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const logger = require('../../server/logger');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
const DtsBundlePlugin = require('../helpers/dtsBundlePlugin');
const dependencyHandlers = require('../helpers/dependencyHandlers');
const packageSort = require('../helpers/packageSort');
const WebpackRequireFrom = require("webpack-require-from");

var plugins = [
  new HtmlWebpackPlugin({
    inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
    template: 'app/index.html',
    favicon: 'app/images/favicon.ico',
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: true,
      keepClosingSlash: true,
      minifyJS: false,
      minifyCSS: true,
      minifyURLs: true,
    },
    chunksSortMode: packageSort(['polyfill', 'webpackHotReload', 'augment', 'config', 'bootstrap', 'gates', 'app'])
  }),
  new CircularDependencyPlugin({
    exclude: /a\.js|node_modules/, // exclude node_modules
    failOnError: true, // show a warning when there is a circular dependency
  }),
  new WebpackRequireFrom({ methodName: 'getChunkURL' }),
];

if (process.env.NODE_ENV === 'development') {
  plugins.push(
    new DtsBundlePlugin('nexus', 'build/**/*.d.ts', '../node_modules/@types/stargate-nexus/index.d.ts'));
}


if (dllPlugin) {
  glob.sync(`${dllPlugin.path}/*.dll.js`).forEach((dllPath) => {
    plugins.push(
      new AddAssetHtmlPlugin({
        filepath: dllPath,
        includeSourcemap: false,
      })
    );
  });
}

const pluginConfigs = [];

module.exports = require('./webpack.base.babel')({

  entry: {
    polyfill : 'eventsource-polyfill', // Necessary for hot reloading with IE
    augment : path.join(process.cwd(), 'app/augment.js'),
    config : path.join(process.cwd(), 'app/config.js'),
    bootstrap : path.join(process.cwd(), 'app/bootstrap.js'), // Start with js/bootstrap.js
    app : path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
  },

  // Don't use hashes in dev mode for better performance
  output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },

  resolve : {
    modules : [],
  },

  // Add development plugins
  plugins: dependencyHandlers(dllPlugin).concat(plugins), // eslint-disable-line no-use-before-define

  // Emit a source map for easier debugging
  // See https://webpack.js.org/configuration/devtool/#devtool
  devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map',

  performance: {
    hints: false,
  },
});

I have index.html as root and also I have index.css with some custom CSS. The first thing I need to do is to configure the Webpack to link index.css to index.html file. Basically Webpack should attach two CSS files: my index.css and CSS compiled from saas.

The second issue that there is an image used in the CSS file as a background. Images are stored in the app/images folder.

image import in CSS is not working. what's wrong with Webpack config?

Flex is not making items responsive

I am using highcharts inside Flex to make it responsive across all screen sizes but its not becoming responsive for mobile screens. Below is my code in reactJs and issue is replicated at https://codesandbox.io/s/highcharts-react-demo-s31oo

  <div>
   <Box display="flex" flexWrap="wrap" flexDirection="row">
   <Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
     <LineChart
       chartData={ChartData}
     />
    </Box>
    <Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
     <LineChart
       chartData={ChartData2}
     />
    </Box>            
    </Box>
  </div>

What's wrong in my design?

CSS word-spacing doesn't work in Wordpress menu links
CSS word-spacing has no effect when used on my tags inside the wordpress menu bar. But in Dev Tools it appears to be applied properly to the element.
```
.main-navigation .main-menu > li > a {
    color: white;
    font-weight: normal;
    font-family: maiandra_gd_regular, verdana, sans-serif;
    margin: 0;
    word-spacing: 0.1em;
}
```
This is the target website: www.viayoga.ch

Thank you dearly for your help!

Related questions

simple/other front-end technology or framework similar to the below website animation

See also questions close to this topic