When I hard refresh the page in middle section, then paroller js transform: translateY(); css not working properly on div <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical">, after that when i scroll this its working fine.. I want that this should be work fine on first hard refresh... when We wo simple refresh of page this also woke fine, but when we see middle of page then do hard refresh Ctrl+F5 transform: translateY(); css not working properly.
Source url: https://tgomilar.github.io/paroller.js/
Source demo url: https://www.jquery-az.com/jquery/demo.php?ex=145.0_2
After hard refresh this incorrect css added: (On middle of the page, without scroll)
transform: translateY(318px);
After scroll: (Correct css apply):
transform: translateY(-16px);
Here is my below code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div style="height:400px;"></div>
<div class="row">
<div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical">
<div class="card">
<img class="card-img-top" src="https://lorempixel.com/400/200/abstract/3" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card vertical</h4>
<p class="card-text">
<code>data-paroller-factor="0.4" data-paroller-type="foreground"
data-paroller-direction="vertical"</code>
</p>
</div>
</div>
</div>
<div class="col col-6">
<div class="card">
<img class="card-img-top" src="https://lorempixel.com/400/200/abstract/3" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card vertical</h4>
<p class="card-text">
<code></code>
</p>
</div>
</div>
</div>
</div>
<div style="height:400px;"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.jquery-az.com/jquery/js/paroller/jquery.paroller.js"></script>
<script>
$('[data-paroller-factor]').paroller();
$(function () {
$(window).paroller();
});
$( document ).ready(function() {
$('.paroller').paroller({
factor: 0.4,
type: 'foreground'
});
});
</script>
</body>
</html>
I found solution which is best:
Use latest file of js for "jquery.paroller.min.js"
Download js and Replace this:
https://github.com/tgomilar/paroller.js/releases/tag/v1.4.6
Related
I am trying to use coreui for a project im starting but for somereasson it dosent work I tried using the template the site gives and I cant get it to work. Am I doing something wrong or am I forgeting something?
`
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CoreUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/css/coreui.min.css">
<title>Hello, world!</title>
</head>
<body class="app">
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col">
1/2
</div>
<div class="col">
1/2
</div>
</div>
<div class="row">
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, Bootstrap, then CoreUI -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/js/coreui.min.js"></script>
</body>
</html>
`
I tried following the tutorial on the page but i couldnt get coreui to work.
I want to play same song on 2 different places in the html. I'm using wavesurfer.js to play the song. I want that same song should paly somewhere in the page as well as in the footer of the page. May be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Player</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<div class="container mt-5">
<div class="row border mt-5">
<div id="pageDiv"></div>
</div>
</div>
<footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;">
<div class="container">
<div class="row">
<p class="text-white text-center">Footer</p>
<div id="footerDiv"></div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js#5.2.0/dist/wavesurfer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var wavesurfer = WaveSurfer.create({
container: '#pageDiv , #footerDiv',
height:48,
responsive:true,
hideScrollbar:true,
waveColor: '#00000078',
progressColor: '#bbbbbb',
barRadius:4,
scrollParent: false
});
wavesurfer.load('songs/song1.mp3');
wavesurfer.on('ready', function(){
console.log('ready');
wavesurfer.play();
});
</script>
</body>
</html>
How can I play the same song on two different places. using jQuery or JavaScript?
You need to create another Instance for another audio.
const wavesurfer1 = WaveSurfer.create({
container: "#pageDiv"
});
wavesurfer1.load("sample.mp3");
const wavesurfer2 = WaveSurfer.create({
container: "#footerDiv",
});
wavesurfer2.load("sample.mp3");
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<script src="https://unpkg.com/wavesurfer.js"></script>
<div class="container mt-5">
<div class="row border mt-5">
<div id="pageDiv"></div>
</div>
</div>
<footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;">
<div class="container">
<div class="row">
<p class="text-white text-center">Footer</p>
<div id="footerDiv"></div>
</div>
</div>
</footer>
I wrote this code but the "JS" part doesn't work. I tried downloading the JS files into a folder and properly call it, this example below should be "universal" cause I'm calling the "cdn" but somehow the section "collapse" is not responding. I have several problems in the rest of the code like the hamburger menu in mobile version also is not expanding. It's obviously that the script have the problem but I can't figure that out yet.
In this example minimized I'm showing you how I managed to insert bootstrap
I'm seriously worried right now. Any ideas or suggestions?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container col-12 mt-5">
<div class="accordion w-100" id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-mdb-toggle="collapse"
data-mdb-target="#basicAccordionCollapseOne" aria-expanded="false"
aria-controls="collapseOne">
¿En cuanto tiempo voy a poder ver cambios?
</button>
</h2>
<div id="basicAccordionCollapseOne" class="accordion-collapse collapse"
aria-labelledby="headingOne" data-mdb-parent="#basicAccordion">
<div class="accordion-body">
Lorem ipsum dolor sit
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Sorry for my english
You were just implementing the accordions incorrectly. I swapped out your accordion with the example from Bootstrap's documentation, and it's working just fine now.
You are using data-mdb-target on your accordion button when you should be using data-bs-target. data-mdb-parent should be data-bs-parent as well. If you change those or just use the below snippet, the issue will be fixed.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container col-12 mt-5">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
¿En cuanto tiempo voy a poder ver cambios?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Lorem ipsum dolor sit
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
</body>
</html>
Try this bro its working
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container col-12 mt-5">
<div class="accordion w-100" id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
So i've been trying to use slick slider for my website. I have all the files in the correct folder, there is no error in my console. My images are cards are showing but these are in line vertically, and i don't know what I'm doing wrong. here is my HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palvisha Shoaib</title>
<link rel="stylesheet" type="text/css"href = "style.css">
<link rel="stylesheet" type="text/css"href = "slick.css">
<link rel="stylesheet" type="text/css"href = "slicktheme.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<div class="box6">
<section class="variable slider">
<div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div></div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
I recommend looking on this website, it has an in-depth tutorial on the slick slider. https://kenwheeler.github.io/slick/
I can see that you don't have this function in your code
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
I am using design Material Design. I choose to use used FABs in Card to display content composed of different types of objects. Now, I try to add modal bottom sheet style with it and use the floating action button as a trigger of the modal, but nothing appear below. My codes are the following below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
<a class="btn-floating btn-large halfway-fab light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$('.modal').modal();
});
</script>
jquery-2.1.1.min.js library must be added before than materialize.min.js library.
Try this code;
$(document).ready(function() {
$('.modal').modal();
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
<a class="btn-floating btn-large halfway-fab light-green accent-3" href="#modal2"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
</body>
</html>
Looks like in Materialize you reference a modal using href="#modal2" - not data-modal. Try that.
Src: http://materializecss.com/modals.html