I created a skill progress bar for my project using HTML CSS and jquery. All things working fine but the percent counter option is not working when the animation run.
I need to count the percentage from 0 to the value along with the animation bar. Please help me. Thanks.
jQuery(function($){
$(window).scroll(function() {
var top_of_element = $(".work-process").offset().top;
var bottom_of_element = $(".work-process").offset().top + $(".work-process").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('.project-percent').each(function(){
var $this = $(this);
var percent = $this.attr('percent');
$this.css("width",percent+'%');
$({animatedValue: 0}).animate({animatedValue: percent},{
duration: 2000,
step: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
},
complete: function(){
$this.attr('percent', Math.floor(this.animatedValue) + '%');
}
});
});
}
});
});
.nb-progressbar-row {
width: 90%;
margin: 0 auto;
}
.project{
width: 60%;
margin: 0 auto;
}
.work-process h3 {
margin: 30px 0px 10px;
}
.project-bar {
height: 18px;
background: #e0e0e0;
border-radius: 30px;
}
.project-percent {
height: 18px;
background-color: #2196F3;
border-radius: 30px;
position: relative;
width: 0;
transition: 2s linear;
}
.project-percent::before {
content: attr(percent);
position: absolute;
right: 0px;
left: 0px;
padding: 1px 0px;
color: #ffffff;
font-size: 15px;
border-radius: 25px;
font-weight: bold;
width: 20px;
margin: 0px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<section class= " my-5 nb-progressbar-wrapper">
<div class="container my-5 nb-progressbar-conainer">
<div class="row nexnomic-progressbar-row">
<div class=" col work-process">
<h2 class="text-center my-5">SCROLL DOWN</h2>
<div class=" pt-5 project">
<h6>Xyzzz & ABCD</h6>
<div class="project-bar">
<div class="project-percent" percent="95"></div>
</div>
</div>
<div class="project">
<h6>Abcd-xyz</h6>
<div class="project-bar">
<div class="project-percent" percent="80"></div>
</div>
</div>
<div class="project">
<h6>ABCDYZX</h6>
<div class="project-bar">
<div class="project-percent" percent="75"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
Related
I have an array in which I put all the elements that have the class Box, then I add a new div with Vue, which is added correctly, but I try that the last div that I add appears with an opacity effect (I will change it for a better one), but the result is not the expected one.
What happens is that the new element is added, but the effect adds it to the previous one and I want that it is always in the new element that I add above all, that is to say, it would be the one of the index 0,
¿? What am I doing wrong?
html code:
<!DOCTYPE html>
<html lang="es">
<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">
<title>Preguntas en vivo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div class="mt-5 d-flex flex-column align-items-center container">
<div>
<input type="text" v-model="nuevoAutor"><br>
<input type="text" v-model="nuevaPregunta"><br>
<button #click="agregarMensaje">Agregar</button>
</div>
<div class="box" v-for="pregunta in preguntas">
{{pregunta.autor}}: {{pregunta.mensaje}}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
Vue code:
const app = new Vue({
el: "#app",
data: {
preguntas: [
],
preguntasAprobadas: [
],
nuevoAutor: "",
nuevaPregunta: "",
boxes: []
},
methods: {
agregarMensaje: function(){
this.preguntas.unshift({
autor: this.nuevoAutor,
mensaje: this.nuevaPregunta,
publicado: false
});
this.nuevaPregunta = "";
this.nuevoAutor = "";
boxes = document.querySelectorAll(".box");
this.agregarClase();
},
agregarClase: function(){
boxes[0].className += " animation";
}
}
})
css code:
.box {
width: 100%;
background-color: rgb(255, 224, 174);
border: 1px solid rgb(255, 210, 137);
padding: 20px;
margin-top: 30px;
min-height: 200px;
}
.animation {
animation: show 5s;
-webkit-animation: show 5s;
}
#keyframes show {
0% { opacity: 0; }
100% { opacity: 1; }
}
EDIT:
I have simplified it, there is only one class, the div is added, with the class box, but it loads the style to the last one, that is, the one at the bottom, and not to the last one that is added.
.box {
background-color: rgb(255, 224, 174);
border: 1px solid rgb(255, 210, 137);
padding: 20px;
margin-top: 30px;
min-height: 200px;
width: 100%;
opacity: 1;
animation: show 1s;
-webkit-animation: show 1s;
}
#keyframes show {
0% {
width: 1%;
opacity: 0;
}
100% {
width: 100%;
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="es">
<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">
<title>Preguntas en vivo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div class="mt-5 d-flex flex-column align-items-center container">
<div>
<input type="text" v-model="nuevoAutor"><br>
<input type="text" v-model="nuevaPregunta"><br>
<button #click="agregarMensaje">Agregar</button>
</div>
<div class="row box" v-for="pregunta in preguntas">
<div class="col-12">
{{pregunta.autor}}: {{pregunta.mensaje}}
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
You're looking for the vue component transition-group (see docs).
It's a component that adds css classes as the elements are added / removed / reordered, so it lets you animate them.
Here's an example:
<template>
<div id="app">
<transition-group name="fade" class="questions" mode="in-out">
<div v-for="question of questions" :key="question.id" class="item">
{{ question.msg }}
</div>
</transition-group>
<button #click="addQuestion">Add question</button>
</div>
</template>
<script>
export default {
data () {
return {
questions: [
{ id: 1, msg: 'Hey'},
{ id: 2, msg: 'there'},
{ id: 3, msg: 'General'},
{ id: 4, msg: 'Kenobi'},
],
}
},
methods: {
addQuestion () {
const newId = Math.floor(Math.random() * 1000 + 4)
const newQuestion = { id: newId, msg: 'New question' + newId }
this.questions.push(newQuestion)
}
}
}
</script>
<style>
#app {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 16px;
max-width: 300px;
margin: 0 auto;
height: 80vh;
}
.questions {
display: flex;
flex-direction: column;
gap: 8px;
}
.questions .item {
background: #fafafa;
border: 1px solid lightgray;
text-align: center;
min-width: 130px;
padding: 4px 12px;
}
// Fade animation for each item
.item.fade-enter-active {
transition: opacity 1s;
}
.item.fade-enter, .item.fade-leave-to {
opacity: 0;
}
</style>
Every time you add an item (at the beginning, at the end, in the middle, it doesn't matter), it will have this css transition applied. Same for when they are removed (see fade-leave-to class)
See example as CodePen
Basically Here is the HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
i++;
});
})
</script>
<div id="watch_list"></div>
</html>
But Whenever I Open the HTML it shows the formatting Properly But It is only Showing 1 Result Instead of all of them!!!
I've Done this With nodejs Before (With a CLI Application) Before but It Doesn't Work Now
How can I Fix This?
Should I add a Loop?
Here is the
Output
I Really Don't Have any other words because I am a novice so Please stop saying "It looks like your post is mostly code, please add some more details"
Just remove the line
i++ (6th line from end), your code will run fine. i is not defined so it is creating the error ReferenceError: i is not defined
Code snippet after removing the line i++
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieCard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
img.mal {
-webkit-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
img.mal {
pointer-events: none;
}
.movie_card.mal{
padding: 0 !important;
width: 22rem;
margin:14px;
border-radius: 10px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
}
.movie_card.mal img.mal{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 33rem;
}
.movie_info.mal{
color: #5e5c5c;
}
.movie_info.mal i.mal{
font-size: 20px;
}
.card-title.mal{
width: 80%;
height: 4rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
list.data.anime.forEach(item => {
var date = new Date(item.start_date)
var year = date.getFullYear()
console.log(item)
document.getElementById('watch_list')
.insertAdjacentHTML(
'beforeend',
`
<a href="${item.url}">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="card movie_card">
<img src="${item.image_url}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<span class="movie_info">${year}</span> </div>
</div>
</div>
</div>
</a>
`
);
});
})
</script>
<div id="watch_list"></div>
</html>
LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>
I'm having trouble getting a simple panel hide script to work. It works for MLAWebsite's panel, but when I click the MLAJournal button nothing happens? I've tried everything I can think of and looked at it for quite a bit now and can't seem to figure it out.
Relevant JQuery and HTML:
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
$("btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>
You're missing a # there.
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
put # on $("btnMLAJournal").click(function(){
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>
You have given the id btnMLAJournal to your button and calling element from id in jquery requires # with id which in your case is missing.
just add # to your id in jquery and it will work fine
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
//# is added here
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>
Sorry to ask but I have searched but coming up with nothing.
I have some divs ( I know everyone has a 'div' ) and I want to add feeds\content
See my code below, in these 'widgets' can I add things like twitter and my email and a news feed?
also not to be too picky, can I just get text only ?
How do I go about it ? Is their something
here is the html, jquery and css code...
<!doctype html>
<html lang="en">
<head>
<title>snap to grid</title>
<meta charset="utf-8">
<meta name="description" content="nothing yet">
<meta name="author" content="Pavle Stojanovic">
<link rel="stylesheet" href="snap.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".widgets" ).draggable({ grid: [ 10, 10 ] });
$( ".widgets" ).draggable({
containment: "#draggable-container",
drag: function(event){
if($('.widgets').position().left + $('.widgets').width() == $('.body-container').width()){
event.preventDefault(); //cancel the drag.
console.log('d');
}
}
});
});
</script>
</head>
<body>
<div class="body-container">
<div id="draggable-container">
<div id="widget-1" class="widgets"><p>Twitter</p></div>
<div id="widget-2" class="widgets"><p>Weather</p></div>
<div id="widget-3" class="widgets"><p>News</p></div>
<div id="widget-4" class="widgets"><p>Email</p></div>
</div>
</div>
</body>
</html>
html, body{
background-color: #2196F3;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#widget-1{
background-color: blue;
}
#widget-2{
background-color: purple;
}
#widget-3{
background-color: orange;
}
#widget-4{
background-color: green;
}
.widgets{
border-radius: 25px;
padding: 20px;
width: 150px;
height: 200px;
}
#draggable-container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
width:90%;
height:90%;
}