jquery remove a div and re arrange the following ones with animation - javascript

I have a grid of cards with a button to remove each one of them with an animation. I chose to reduce the width to 0 so that the cards to the right (on the same row) slide to the left and occupy the removed card spot.
What I would like to achieve is to animate the first element of the following row into the last position of the row above (the one that had the card removed).
The best example I can provide is the home page of the Vivaldi browser, where you can remove a speed dial widget and the following ones animate to their new positions.
This example in CodePen is what I have so far.
$(document).ready(function() {
const content = $('#inner-content');
let listCourses = '';
let courses = [
{ title: 'html' },
{ title: 'css' },
{ title: 'javascript' },
{ title: 'python' },
{ title: 'react' },
{ title: 'node' },
{ title: 'angular' },
{ title: 'SEO' },
{ title: 'UX/UI' },
{ title: 'jQuery' },
{ title: 'SQL' },
{ title: 'noSql' }
]
courses.forEach((course) => {
let newCourse = `
<div class="course-container">
<div class="inner-container">
<h2>${course.title}</h2>
<button class="courses-control"> Remove </button>
</div>
</div>
`;
listCourses += newCourse;
});
content.html(listCourses);
$('.courses-control').on('click', function(e){
$(this)
.parents('.course-container').animate({
'width': '0px',
'padding': '12px 0px',
'opacity': '0'}, function() {
$(this).remove();
});
})
});
* {
box-sizing: border-box;
}
body { font-family: 'lato'; }
#inner-content {
display: flex;
flex-wrap: wrap;
}
.centered {
max-width: 960px;
margin: auto;
}
.course-container {
width: 25%;
padding: 12px;
overflow: hidden;
}
.inner-container {
overflow: hidden;
text-align: center;
border: 1px solid gray;
border-radius: 6px;
padding: 12px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Courses</h1>
<div id="inner-content" class="centered">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

change the forEach loop to have an index and give each button an id:
courses.forEach((course, index) => {
let newCourse = `
<div class="course-container">
<div class="inner-container">
<h2>${course.title}</h2>
<button id="${index}" class="courses-control"> Remove </button>
</div>
</div>
`;
listCourses += newCourse;
});
Then in the click function after this:
$(this)
.parents('.course-container').animate({
'width': '0px',
'padding': '12px 0px',
'opacity': '0'
}, function () {
$(this).remove();
});
add this:
$(`#${Number(this.id) + 4}`).parents('.course-container').animate({
'margin-top': '-100px',
'z-index': '1',
'opacity': '0'
}, 500, function () {
$(this).css({ 'margin': '0px', 'opacity': '1' });
});
Try it out and tell me what you think...

Related

popover hover not triggering on dynamic images

I have a div with multiple images with each image having a popover with content attached to it and it works fine. The problem I'm having is I wanted to trigger the image popover by hover and the method I'm using right now works fine for static images but When I dynamically add images to the main div and hover on that image a popover won't trigger. How can I adjust my code so that it also supports any dynamically added elements? Any help is appreciated. Thanks in advance.
To replicate click on the append button and scroll to the far right and hover on the newly added image, that image won't trigger a popover on hover but the other static ones do.
function appendImg() {
$('.infoBar').append('<div class="imgWrap"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
$('.infoBarPopoverContent').append('<p>Popover stuff...</p>')
return $('.infoBarPopoverContent').html();
}
}
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
button {
position: absolute;
top: 0%;
left: 0%;
}
.infoBar {
display: flex;
flex-direction: row;
position: absolute;
top: 30%;
max-width: 95%;
height: 160px;
margin: auto;
column-gap: 25px;
background-color: green;
overflow-x: auto;
}
.infoBar .imgWrap {
height: 100%;
cursor: pointer;
}
.infoBar .imgWrap img {
height: 100%;
cursor: pointer;
}
.infoBarPopoverContent {
display: none;
}
.popover .popover-body {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button onclick='appendImg()'>Click to append img</button>
<div class="infoBar" id="infoBar">
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
</div>
<div class="infoBarPopoverContent"></div>
From what I have understood from your code is that you have to attach the event listener after the dynamic append like this
First wrap up the event listener inside the function, then call the function after the append
function appendImg() {
$('.infoBar').append('<div class="imgWrap"><img
src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
addEvent();
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
$('.infoBarPopoverContent').append('<p>Popover stuff...</p>')
return $('.infoBarPopoverContent').html();
}
}
function addEvent(){
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
}
addEvent()
https://jsbin.com/rumabifiqo/edit?output

GrapesJs -- How to save throught PHP

I use Xampp to try GrapesJS, I downloaded GrapesJS from github then copied the rources to my HTDOCS folder, grap my Browser then hit Localhost :) it works, something like Web Builder appear and works as well, but how can I save the Edited Website using PHP ?,
I use intact INDEX.HTML found from GrapesJs github, only change it name to INDEX.PHP to work with PHP, so this is the codes I've been using
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GrapesJS</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
<script src="dist/grapes.min.js"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden;">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
</div>
</div>
<style>
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
color:rgba(255,255,255,0.75);
font: caption;
font-weight: 100;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: { autoload: 0 },
styleManager : {
sectors: [{
name: 'General',
open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
},{
name: 'Flex',
open: false,
buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
},{
name: 'Dimension',
open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
},{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
},{
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
}
],
},
});
editor.BlockManager.add('testBlock', {
label: 'Block',
attributes: { class:'gjs-fonts gjs-f-b1' },
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})
</script>
</body>
</html>
thanks for your help
This way worked for me.
First added a Save button to grapesjs panel.
editor.Panels.addButton('options',
[{
id: 'save-db',
className: 'fas fa-save',
command: 'save-db',
attributes: {
title: 'Save Changes'
}
}]
);
Then added a command for save button.
editor.Commands.add('save-db', {
run: function(editor, sender) {
sender && sender.set('active', 0); // turn off the button
editor.store();
//storing values to variables
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
$.post("save.php", {
//you can get value in post by calling this name
"htmldata": htmldata,
"cssdata": cssdata,
success: function(data) {
alert(data);
console.log("Success");
},
});
}
});
In save.php
$editor_html_content = $_POST['htmldata'];
$editor_css_content = $_POST['cssdata'];
editor.on('component:add', options => {
var html = editor.getHtml();
var css = editor.getCss();
function create () {
$.ajax({
url:base_url+"/savepagedata.php",
type: "post",
data: {html_data: html , css_data:css },
success:function(result){
console.log(result);
}
});
}
});

Creating a Carousel in JS

Hi guys I am trying to create a Carousel using JS. I have succeeded a bit and I able to move one slide to the right side. I figure if I somehow increase the value of widthToMove variable then by clicking on right arrow button will keep pushing the slides. I tried to create a function that returns simply 1, 2, 3, and so on and multiply it with widthToMove on clicking right arrow button but I could not succeed. Any help will highly be appreciated.
Here is the html code;
var productDataWomens = [
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/dark-grey-faux-fur-longline-coat/p/619712403',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619712403.jpg',
productTitle: 'Dark Grey Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/tops/black-ribbed-long-sleeve-roll-neck-top/p/635105501',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635105501.jpg',
productTitle: 'Black Ribbed Long Sleeve Roll Neck Top',
price: '8.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/leggings/black-coated-leather-look-leggings/p/634018201',
imageSrc: 'https://media3.newlookassets.com/i/newlook/634018201.jpg',
productTitle: 'Black Coated Leather-Look Leggings',
price: '19.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/black-faux-fur-longline-coat/p/619712401',
imageSrc: 'https://media3.newlookassets.com/i/newlook/619712401.jpg',
productTitle: 'Black Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/jeans/black-high-waist-super-skinny-hallie-jeans/p/635654901',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635654901.jpg',
productTitle: 'Black High Waist Super Skinny Hallie Jeans',
price: '25.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/formal-coats/camel-revere-collar-coat/p/619653214',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619653214.jpg',
productTitle: 'Camel Revere Collar Coat',
price: '35.99',
}
]
for (i in productDataWomens) {
var node = document.createElement('LI');
node.setAttribute('class', 'carousel-list-item' + ' ' + 'current-slide');
var carouselImg = document.createElement('img');
carouselImg.setAttribute('class', 'carousel-images');
carouselImg.src = productDataWomens[i].imageSrc;
node.appendChild(carouselImg);
document.getElementById('carousel-list-id').appendChild(node);
}
const track = document.querySelector('.carousel-list-items');
console.log(track);
const slides = Array.from(track.children);
console.log(slides);
const nextButton = document.querySelector('.right-button');
const prevButton = document.querySelector('.left-button');
const slideWidth = slides[0].getBoundingClientRect().width;
nextButton.addEventListener('click', (e) => {
let currentSlide = track.querySelector('.current-slide');
console.log(currentSlide);
let widthToMove = currentSlide.clientWidth;
console.log(slides[0]);
widthToMove = widthToMove + 'px';
console.log(widthToMove);
let nextSlide = currentSlide.nextElementSibling;
console.log(nextSlide);
//const amountToMove = nextSlide.style.widthToMove;
track.style.transform = 'translateX(-' + widthToMove + ')';
currentSlide.classList.remove('current-slide');
//nextSlide.classList.add('current-slide');
});
.carousel {
display: flex;
justify-content: space-between;
/* overflow-x: hidden; */
width: 80%;
margin: 0 auto;
}
.carousel-list-items {
display: flex;
justify-content: space-between;
}
.carousel-container {
overflow-x: hidden;
}
.carousel-list {
list-style: none;
}
.carousel-images {
padding: 15px;
height: 200px;
}
.carousel-button {
position: relative;
background-color: transparent;
border: none;
cursor: pointer;
outline: 0;
}
.right-button {
right: 0;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/88ce2b0d97.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>New Look</title>
</head>
<body>
<div class="carousel">
<button class="left-button carousel-button"><i class="fas fa-chevron-left"></i></button>
<div class="carousel-container" >
<ul class="carousel-list">
<a href="" id="carousel-list-id" class="carousel-list-items">
<!-- <li class="carousel-list-item current-slide" id="carousel-list-id"></li> -->
</a>
</ul>
</div>
<button class="right-button carousel-button"><i class="fas fa-chevron-right"></i></button>
</div>
<script src="script.js"></script>
</script>
</body>
</html>
The problem with your slider is that each time you click on the next button the widthToMove variable is overwritten with currentSlide.clientWidth, what you should've done instead is:
take widthToMove variable outside the scope of the listener
on each click add the values of widthToMove and currentSlide.clientWidth and assign the sum to widthToMove
Also when your slider is "initialized", every slide has the class current-slide therefore you can't determine which slide is the current.
var productDataWomens = [
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/dark-grey-faux-fur-longline-coat/p/619712403',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619712403.jpg',
productTitle: 'Dark Grey Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/tops/black-ribbed-long-sleeve-roll-neck-top/p/635105501',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635105501.jpg',
productTitle: 'Black Ribbed Long Sleeve Roll Neck Top',
price: '8.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/leggings/black-coated-leather-look-leggings/p/634018201',
imageSrc: 'https://media3.newlookassets.com/i/newlook/634018201.jpg',
productTitle: 'Black Coated Leather-Look Leggings',
price: '19.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/black-faux-fur-longline-coat/p/619712401',
imageSrc: 'https://media3.newlookassets.com/i/newlook/619712401.jpg',
productTitle: 'Black Faux Fur Longline Coat',
price: '45.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/jeans/black-high-waist-super-skinny-hallie-jeans/p/635654901',
imageSrc: 'https://media2.newlookassets.com/i/newlook/635654901.jpg',
productTitle: 'Black High Waist Super Skinny Hallie Jeans',
price: '25.99',
},
{
productUrl:
'https://www.newlook.com/uk/womens/clothing/coats-jackets/formal-coats/camel-revere-collar-coat/p/619653214',
imageSrc: 'https://media2.newlookassets.com/i/newlook/619653214.jpg',
productTitle: 'Camel Revere Collar Coat',
price: '35.99',
}
]
for (i in productDataWomens) {
var node = document.createElement('LI');
// If it's the first slide add .current-slide
// The line below uses a turnary operator which is a short if/else statement
var currentSlide = ( i == 0 ? ' current-slide' : '' );
// Which can be rewritten to this
//var currentSlide;
//if( i == 0 ) {
// currentSlide == ' current-slide';
//} else {
// currentSlide == '';
//}
node.setAttribute('class', 'carousel-list-item' + currentSlide );
var carouselImg = document.createElement('img');
carouselImg.setAttribute('class', 'carousel-images');
carouselImg.src = productDataWomens[i].imageSrc;
node.appendChild(carouselImg);
document.getElementById('carousel-list-id').appendChild(node);
}
const track = document.querySelector('.carousel-list-items');
const nextButton = document.querySelector('.right-button');
const prevButton = document.querySelector('.left-button');
let widthToMove = 0;
nextButton.addEventListener('click', (e) => {
let currentSlide = track.querySelector('.current-slide');
let nextSlide;
if( !currentSlide.nextElementSibling ) {
nextSlide = document.querySelectorAll('.carousel-list-item')[0];
widthToMove = 0;
} else {
nextSlide = currentSlide.nextElementSibling;
widthToMove += currentSlide.clientWidth;
}
// You can use template literals to create a string with several variables/functions/expressions for speed, convenience and readability
track.style.transform = `translateX(-${widthToMove + 30}px)`;
currentSlide.classList.remove('current-slide');
// Add current-slide class to next slide
nextSlide.classList.add('current-slide');
});
.carousel {
display: flex;
justify-content: space-between;
/* overflow-x: hidden; */
width: 80%;
margin: 0 auto;
}
.carousel-list-items {
display: flex;
justify-content: space-between;
transition: all 0.3s ease-in-out 0s;
}
.carousel-container {
overflow-x: hidden;
}
.carousel-list {
list-style: none;
}
.carousel-images {
padding: 15px;
height: 200px;
}
.carousel-button {
position: relative;
background-color: transparent;
border: none;
cursor: pointer;
outline: 0;
}
.right-button {
right: 0;
margin-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/88ce2b0d97.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>New Look</title>
</head>
<body>
<div class="carousel">
<button class="left-button carousel-button"><i class="fas fa-chevron-left"></i></button>
<div class="carousel-container" >
<ul class="carousel-list">
<a href="" id="carousel-list-id" class="carousel-list-items">
<!-- <li class="carousel-list-item current-slide" id="carousel-list-id"></li> -->
</a>
</ul>
</div>
<button class="right-button carousel-button"><i class="fas fa-chevron-right"></i></button>
</div>
<script src="script.js"></script>
</script>
</body>
</html>

JQuery - Pause animation / add a next button

I've got a CodePen of what I've created (with the help of other sources) and everything looks great. I want the ability to click on the text (or the page) and pause the JQuery loop. As well as the ability to click it again to resume it. CodePen Link
If that's too hard, I would like to look at the Next button so I can manually toggle to the next line, as well as a manual toggle button to the main line of <li>#SSBASKETBALL | SUMMERSERIES.NZ</li>
The button needs to be at the bottom further down as it's part of OBS's Browser tool.
If anyone could help me out with this, please feel free. It does the job at the moment, but I would really like to incorporate it more professionally and have more control over it. Cheers!
(function($) {
$.simpleTicker = function(element, options) {
var defaults = {
speed: 800,
delay: 10000,
easing: 'swing',
effectType: 'fade'
}
var param = {
'ul': '',
'li': '',
'initList': '',
'ulWidth': '',
'liHeight': '',
'tickerHook': 'tickerHook',
'effect': {}
}
var plugin = this;
plugin.settings = {}
var $element = $(element),
element = element;
plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
param.ul = element.children('ul');
param.li = element.find('li');
param.initList = element.find('li:first');
param.ulWidth = param.ul.width();
param.liHeight = param.li.height();
element.css({
height: (param.liHeight)
});
param.li.css({
top: '0',
left: '0',
position: 'absolute'
});
switch (plugin.settings.effectType) {
case 'fade':
plugin.effect.fade();
break;
case 'roll':
plugin.effect.roll();
break;
case 'slide':
plugin.effect.slide();
break;
}
plugin.effect.exec();
}
plugin.effect = {};
plugin.effect.exec = function() {
param.initList.css(param.effect.init.css)
.animate(param.effect.init.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook);
setInterval(function() {
element.find('.' + param.tickerHook)
.animate(param.effect.start.animate, plugin.settings.speed, plugin.settings.easing)
.next()
.css(param.effect.next.css)
.animate(param.effect.next.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook)
.end()
.appendTo(param.ul)
.css(param.effect.end.css)
.removeClass(param.tickerHook);
}, plugin.settings.delay);
}
plugin.effect.fade = function() {
param.effect = {
'init': {
'css': {
display: 'block',
opacity: '0'
},
'animate': {
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
opacity: '0'
}
},
'next': {
'css': {
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
opacity: '1'
}
},
'end': {
'css': {
display: 'none',
zIndex: '98'
}
}
}
}
plugin.effect.roll = function() {
param.effect = {
'init': {
'css': {
top: '-3em',
display: 'block',
opacity: '0'
},
'animate': {
top: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
top: '3em',
opacity: '0'
}
},
'next': {
'css': {
top: '-3em',
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
top: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
}
}
plugin.effect.slide = function() {
param.effect = {
'init': {
'css': {
left: (-(200)),
display: 'block',
opacity: '0'
},
'animate': {
left: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
left: (200),
opacity: '0'
}
},
'next': {
'css': {
left: (param.ulWidth),
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
left: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
}
}
plugin.init();
}
$.fn.simpleTicker = function(options) {
return this.each(function() {
if (undefined == $(this).data('simpleTicker')) {
var plugin = new $.simpleTiecker(this, options);
$(this).data('simpleTicker', plugin);
}
});
}
})(jQuery);
$(function() {
$.simpleTicker($('#js-ticker-fade'), {
'effectType': 'fade'
});
$.simpleTicker($('#js-ticker-roll'), {
'effectType': 'roll'
});
$.simpleTicker($('#js-ticker-slide'), {
'effectType': 'slide'
});
});
#font-face {
font-family: "DharmaGothicEW01-Light";
src: url("https:https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.eot");
src: url("https:https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.woff") format("woff"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/dcc1a03cbbd06fea7e48d65ff78624ef.svg#DharmaGothicEW01-Light") format("svg");
}
#font-face {
font-family: "DharmaGothicEW01-Bold";
src: url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.eot");
src: url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.woff") format("woff"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/5c5772b491b3e1c39beb61efcd6824f7.svg#DharmaGothicEW01-Bold") format("svg");
}
* {
font-size: 32px;
word-spacing: 5px;
font-family: DharmaGothicEW01-Light;
text-align: center;
color: #000;
}
.hvhbox {
display: inline-block;
width: 50px;
border: 0px solid #000;
background: #fe3249;
text-align: center;
}
.simple-ticker {
position: relative;
text-align: center;
width: 100%;
padding: 30px;
border: 0px solid #ddd;
overflow: hidden;
}
.simple-ticker ul {
position: relative;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.simple-ticker ul li {
display: none;
width: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery simple news ticker</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section>
<div class="simple-ticker" id="js-ticker-roll">
<ul>
<li>#SSBASKETBALL | SUMMERSERIES.NZ</li>
<li>THE SUMMER SERIES 20: <span style="background: #979797; color: #fff;"> HUTT VALLEY </span> VS <span style="background: #0053a3; color: #fff;"> UPPER HUTT </span></li>
<li>THE SUMMMER SERIES IS PROUDLY SUPPORTED BY TRIPLE THREAT</li>
<li><span style="background: #0053a3; color: #fff"> UHC </span> RJ WICHMAN 13 PTS</li>
<li><span style="background: #979797; color: #fff;"> HVH </span> 25% [1/4]  3PT PERCENTAGE  20% [1/5] <span style="background: #0053a3; color: #fff;"> UHC </span></li>
<!-- <li>NEXT UP: <span style="background: #fb1414; color: #fff;"> SACRED HEART </span> VS <span style="background: #fff200; color: #000;"> WELLINGTON EAST </span></li> -->
</ul>
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="./script.js"></script>
</body>
</html>

Display-inline-block with z-index and jquery

Good morning everyone,
I seem to be having a slight problem. I want a div to overlay another div(i.e. be on top) but zIndex is not working. I suspect the cause is the display: inline-block but I need to keep it so that the webpage is displayed properly. How do I make the div overlay the other one?
Here is the jsfiddle explaining the problem:
http://jsfiddle.net/Yf7zD/
Or the code right here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/cookies.js"></script>
<style>
#gameTable {
font-size: 0;
width: 840px;
height: 240px;
margin-top: 20px;
margin-left: 78px;
position: relative;
}
.iamdroppable {
display: inline-block;
margin: 0;
padding: 0;
border: 3px solid #FFF;
}
</style>
</head>
<body style="background-color: black;">
<div id="container" style="position:relative; border: solid 3px red;">
<div id="gameTable"><p>GameTable</p>
</div>
</div>
</body>
<script>
$(document).ready(function(e) {
var myId;
for(vertical = 0; vertical < 3; vertical++) {
for(horizontal = 1; horizontal <= 12; horizontal++) { //Outer Numbers
if(vertical == 0)
myId = horizontal * 3;
else if(vertical == 1)
myId = horizontal * 3 - 1;
else
myId = horizontal * 3 - 2;
$('<div>', {//Normal numbers
class: 'iamdroppable',
id: '' + myId,
width: '62px',
height: '78px',
}).appendTo('#gameTable');
}
}
$('<div>', {//Quads
class: 'iamdroppable',
id: '1000',
top: '-100px',
width: '100px',
height: '200px',
zIndex: '1000',
position: 'absolute',
}).appendTo('#container');
});
</script>
</html>
Thanks!
var div = $('<div>', {//Quads
class: 'iamdroppable',
id: '1000',
top: '-100px',
width: '100px',
height: '200px',
zIndex: '1000',
position: 'absolute',
}).appendTo('#container');
});
$('body').append(div);
You were adding the CSS styles as attributes, they should all be within the style property:
$(document).ready(function (e) {
var myId;
for (vertical = 0; vertical < 3; vertical++) {
for (horizontal = 1; horizontal <= 12; horizontal++) { //Outer Numbers
if (vertical === 0) myId = horizontal * 3;
else if (vertical == 1) myId = horizontal * 3 - 1;
else myId = horizontal * 3 - 2;
$('<div>', { //Normal numbers
class: 'iamdroppable',
id: '' + myId,
style: 'width:62px;height:78px;'
}).appendTo('#gameTable');
}
}
$('<div>', { //Quads
class: 'iamdroppable',
id: '1000',
style: 'top:-100px;width:100px;height:200px;z-index:1000;position:absolute;'
}).appendTo('#container');
});
On another note, where you're doing this comparison: if (vertical == 0) you should use three === like this: if (vertical === 0)

Categories

Resources