setInterval working only once when changing style in VueJs - javascript

i was trying to run this simple code which starts the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below), here is the html :
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="exercise">
<!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
<div>
<button #click="startEffect">Start Effect</button>
<div id="effect" :class="effectClasses"></div>
</div>
here is the CSS :
#effect {
width: 100px;
height: 100px;
border: 1px solid black;
}
.highlight {
background-color: red;
width: 200px !important;
}
.shrink {
background-color: gray;
width: 50px !important;
}
and this is the JS file :
new Vue({
el: '#exercise',
data: {
effectClasses :{
highlight:false,
shrink:true}
},
methods: {
startEffect: function() {
var vm = this;
setInterval(function(){
console.log('higlight 1:'+ vm.effectClasses.highlight);
vm.effectClasses.highlight = !vm.effectClasses.highlight; console.log('higlight 2 :'+ vm.effectClasses.highlight);
console.log('shrink 1 :' + vm.effectClasses.shrink);
vm.effectClasses.shrink = !vm.effectClasses.shrink;
console.log('shrink 2 :' +vm.effectClasses.shrink);
}, 1000);
}
}
});
the console logs are working fine but the style doesn't change every 1 second, which is weird

Related

Animation from one div to another div on click Vuejs

Hi all sorry for the poor English. I have very little experience using javaScript/ES6.
I am new to Vuejs I have a button in which if I click, it should start an animation of a bordered box from one div to another div which is fixed.
click button
<v-btn icon #click="doSomething()">
<v-icon>mdi-content-save-outline</v-icon>
</v-btn>
div which have to animate or can be used some animation from JS is fine as well.
<div id="divAnimation" style="border:1px solid #000000; width:50px; height:50px;"></div>
show when clicked and hide when reaced the fixed dive
Place where it should animate to.
<div id="animationReached" style="position:fixed;top:10%;left:0">I am Fixed</div>
You can achieve using jquery to add the classname when you click the button,
Here use the sample code,
Style
.mystyle
{padding: 25px; background-color: coral; color: white; font-size: 25px; box-sizing: border-box;}
Html Code
<button id="myDIV" onclick="myFunction()">Button Default</button>
Script
function myFunction() {
var element, name, arr;
element = document.getElementById("myDIV");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
205/5000
I don't know if I understand your question well, but I think you want to toggle CSS settings on the click of a button, right? If so, look at these two examples changing by class and inline style (I think with Jquery it's not cool):
`
<template>
<div>
<button #click="changeStyle()">alternate 01 </button>
<div :style="styleDiv">
<span>
<h1>text 01</h1>
</span>
</div>
<div :class="styleDiv2">
<span>
<h1>text 02</h1>
</span>
</div>
</div>
</template>
<script>
export default {
data(){
return{
on: false,
styleOn:{
backgroundColor: 'green',
width: '100%',
height: '100%'
},
styleOff:{
backgroundColor: 'gray',
width: '50%',
height: '50%'
}
}
},
methods:{
changeStyle(){
this.on = !this.on
}
},
computed:{
styleDiv(){
return this.on ? this.styleOn : this.styleOff
},
styleDiv2(){
return this.on ? 'styleOn' : 'styleOff'
}
}
}
</script>
<style>
.styleOn{
background-color: green;
width: 100%;
height: 100%;
}
.styleOff{
background-color: gray;
width: 50%;
height: 50%;
}
</style>
`

click button to reactivate autohidden-div not working, fiddle Jquery

I want a panel to show up for five seconds after a button is clicked....
Then if the user click on the panel (uses it...) the panel continues showing up,otherwise it hides for inactivation.
So the panel can increase its lifespan if the user uses it (click or hover on it)...otherwise it just fadeOut
What am I doing wrong?
I tried to use clearTimeout but it ends up in a wierd behaviour snippet. I tried reseting with booleans the code but as well...I couldnt make it work the way is expected
let ShowPanel = 0;
$('.ShowPanel5Seconds').on("click", function() {
ShowPanel = 1;
$(".Panel").show();
setTimeout(function() {
$(".Panel").fadeOut();
}, 5000)
});
//clicking hoverin on the panel
$('.Panel,.container').on("click", function(event) {
if (1 == ShowPanel) {
$('.ShowPanel5Seconds').trigger("click");
}
});
.container{
position:relative;
width:300px;
height:300px;
border:1px solid blue;
margin:10px
}
.Panel {
display: none;
position:absolute;
top:10px;
left:10px;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="container">
<div class="Panel">I'm the panel...click me to continue living</div>
</div>
An alternative, that works as expected is to keep a timeout variable with the time left to display the div.
let timeleft = 0;
function hide_or_not() {
timeleft = timeleft - 1;
if (timeleft <= 0) {
$(".Panel").fadeOut();
}
setTimeout(hide_or_not, 1000);
}
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel").show();
if (timeleft <= 0) {
timeleft = 5;
hide_or_not();
}
});
//clicking hoverin on the panel
$('.Panel').on("click", function(event) {
timeleft = timeleft + 1;
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<scri
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
Note: The code is made to be readable, not exactly optimal.
You are overcomplicating it. Just show/extend time in one go
let panel = $('.Panel'),
panelTimer;
function showAndExtendPanel(){
panel.stop(true,true).show();
clearTimeout(panelTimer);
panelTimer = setTimeout(killPanel, 5000)
}
function killPanel(){
panel.fadeOut();
}
$('.ShowPanel5Seconds, .Panel').on("click", showAndExtendPanel);
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
You can control this by addClass, removeClass() and :not() selector
// on button click show/fadeOut the panel but not the panel with class hover
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel:not(.hover)").show();
setTimeout(function() {
$(".Panel:not(.hover)").fadeOut();
}, 5000)
});
// when hover over the panel add class hover and remove it when unhover and trigger the button click
$('.Panel:not(.hover)').hover(function(event){
$(this).addClass('hover');
} , function(){
$(this).removeClass('hover');
$('.ShowPanel5Seconds').click();
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>

"Add to favourites" button to change class and innerHTML

I need to make an "Add to favs" button that would toggle between "Add" and "Added" states. The trick is that when in "Added" state, I want it to have a hover behaviour like all red and saying "Remove from favs". BUT when you click the button for the 1st time and it changes to "Added", I don't want the 'remove' style turn on immediately.
My solution is to create 2 classes: .isChecked and .isJustPressed. The first is used to determine the button actual state and the second is used to apply the "remove from favs" hover styling only after the mouseleave event.
These classes are handled by jQuery. I am quite new to the language, so I've come up with such working solution (see below). The CSS is simplified. Well the reason I posted this is that I feel there must be a more elegant way to solve this. And besides, I don't like my jQuery code, so I'd appreciate any comments there also
$('.fav_btn').click(function(event) {
$(this).addClass('isJustPressed');
$(this).toggleClass('isChecked');
$(this).html(function() {
return $('.fav_btn').hasClass('isChecked') ? 'Added' : 'Add to favourites';
});
});
$('.fav_btn').on('mouseleave', function(event) {
if ( $(this).hasClass('isChecked')){
$('.fav_btn').removeClass('isJustPressed');
}
});
$('.fav_btn').hover(
function() {
if ($('.fav_btn').hasClass('isChecked') && !$('.fav_btn').hasClass('isJustPressed')){
$('.fav_btn').html('Remove from favourites');
}},
function(){
if ($('.fav_btn').hasClass('isChecked') && !$('.fav_btn').hasClass('isJustPressed')){
$('.fav_btn').html('Added');
}});
.fav_btn {
position: relative;
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lightblue;
}
.fav_btn:hover{
background-color: blue;
color: #fff;
}
.fav_btn.fav_btn.isChecked.isJustPressed:hover{
background-color: blue;
color: #fff;
}
.fav_btn.isChecked {
background-color: #fff;
}
.fav_btn.isChecked:hover{
background: pink;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="fav_btn">Add to fav</div>
</body>
I'm not sure if this is what you are looking for but, I rewrote your solution with more method chaining, and abstraction:
HTML:
<div class="fav_btn">Add To Favs</div>
JS:
//Moved btn text into variable so it can be changed more easily
var btn_text = {
default: "Add To Favs",
added: "Selection Added",
remove: "Remove Selection"
}
$('.fav_btn')
//set initial text and classes
.removeClass('remove added')
.html(btn_text.default)
//The click toggles the 'default' and 'added' states
.on('click', function(e) {
//Toogle the 'added' class
$(this).toggleClass('added');
//Swap the text
if ($(this).is('.added')) {
$(this).html(btn_text.added);
} else {
$(this)
.removeClass('remove added')
.html(btn_text.default)
}
})
.on('mouseover', function(){
//If it has the 'added' class...add the 'remove' text
if ($(this).is('.added')) {
$(this)
.addClass('remove')
.html(btn_text.remove)
.on('mouseout', function() {
//Get rid of the 'remove' class
$(this).removeClass('remove');
//Swap out the 'remove' text
if ($(this).is('.added')) {
$(this).html(btn_text.added);
} else {
$(this).html(btn_text.default);
}
});
}
});
CSS:
.fav_btn {
padding: 5px;
background-color:blue;
color: white;
}
.fav_btn:hover {
background-color: lightblue;
}
.fav_btn.remove:hover {
background-color: pink;
}

Second toggel should be close when i click back to the first toggle

I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle
You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example
I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>
hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)

jQuery slide animate div with toggle button works every other time instead of every time

I'm trying to get a simple side navigation bar which you can hide and unhide with a single button.
So far I have it worknig but only every other click, so click to hide works, then does nothing, next click unhides, nothing etc. Yet I have to button set to an image to change on every click, and that is working.
What I have so far is....
HTML:
<div id="navBar-control">
<a href="#" id="toggle-slide-button">
<img src="http://i.imgur.com/8BMxPsC.png" width="50px" height="50px" />
</a>
</div>
<div id="navBar">
<div class="navBtn navBtnText">
Calculator
</div>
<div class="navBtn navBtnText">
About
</div>
<div class="navBtn navBtnText">
Other Services
</div>
</div>
Script:
var state = false;
$("#toggle-slide-button").click(function () {
if (!state) {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');
state = true;
}
else {
$('#mnavBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');
state = false;
}
});
and if it matters, CSS:
#navBar{
background-color: #660000;
height: 780x;
width: 80px;
}
.navBtn{
background-color: #660000;
color: white;
width: 80px;
height: 70px;
cursor: pointer;
border-bottom: 1px solid rgba(255,255,255,.2);
opacity: 1;
font-size: 12px;
text-align: center;
}
.navBtnText {
line-height: 120px;
vertical-align: bottom;
}
.navBtn:hover{
background-color:#990000;
}
#navBar-control {
width: 50px;
height: 100%;
padding: 0 15px;
background-color: #000;
}
Fiddle of this: http://jsfiddle.net/GUjPA/91/
I have been basing this off this fiddle: http://jsfiddle.net/GUjPA/13/ This has the desired behavior only that it is on the right of the screen instead of the left. The script I'm using is exactly the same, and besides different colours and size of side bar, its essentially exactly the same.
You have a mistake here:
$('#mnavBar').animate({width: "toggle"}, 1000);
must be
$('#navBar').animate({width: "toggle"}, 1000);
http://jsfiddle.net/GUjPA/94/ here works
var state = false;
$("#toggle-slide-button").click(function () {
if (!state) {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');
state = true;
}
else {
$('#navBar').animate({width: "toggle"}, 1000);
$('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');
state = false;
}
});
try this: you had added an m to the second call to #navbar
simplified in fiddle

Categories

Resources