VueJs 2.0 - When press spacebar add/activate CSS Class - javascript

A beginner question and not sure if vuejs can do this.
If you press a spacebar I want to add a css class. In this case to show the div
In this code I try something but that didn't work
<div #keyup.space:class="show" tabindex="0" >test</div>
https://jsfiddle.net/j7zoa2du/

The below example only works if the div (or any other element you want to add the #keyup) has the focus. If you want to trigger the events globally, it's worth checking out this package: https://www.npmjs.com/package/vue-global-events.
Once you added the package to your project, you could add this to your template section:
<GlobalEvents #keyup.space="activeClass=!activeClass"/>
to toggle the active class or set it to true alternatively.

its should be like this
<div #keyup.space="activeClass=true" :class="{'mycls':activeClass}" tabindex="0" >test</div>
and in the data you should have
data(){
return{
activeClass:false
//some other data you have
}
},
this will add the class mycls to div when spacebar is pressed (on the div)

Related

Apply class to neighbor div when div gets class

I have a div containing all my content, and then I have a div containing pop-up windows. So basically something like this:
<div class="content">
Some content
</div>
<div class="popup-wrapper">
Popup content
</div>
Then at some point a class is added to the popup-wrapper due to some button click, that in Angular would look something like:
<button (click)="popup = !popup">Click me</button>
<div class="popup-wrapper" [ngClass]="popup ? 'is-active' : ''">
Popup content
</div>
My question is: Are there some way (CSS wise. JS would probably also do if no other alternative is available) that when popup-wrapper has the class is-active I can also target content as well ?
The issue for me not just putting the same JS into the content div, i.e. [ngClass]="popup ? 'is-active' : ''" is because there are several instances that can activate a popup, and other popup wrappers as well. So if I were to do this I would have to go through every page that has this kind of popup-wrapper, and paste similar code into every content div, but with different state names.
So I just thought it would be much easier, if I could target the content div whenever the popup-wrapper div had the is-active class.
For my understanding, you'll need something like that:
function anyName () {
let x = document.getElementByClassName('is-active');
if (x === true) {
// do something
}
}
Depending on what ever you want to do next, you can either go for an identifier like your div's className ('content') or you try to target it by its position, like 'previousElementSibling'

Hide Div if other Div has HTML "hidden" attribute in it

I'm really new to Jquery, JavaScript, Html
In our WordPress shop, there's an alert message that only appears if the user is below his set "Order Minimum Total".
i've looked in the source code and i saw that when the message is not visible on the page, the DIV "wcc-validation" has "hidden" added in its Class.
That's a copy of the code <div class="wcc-validation hidden" id="wcc-validation">
What we need is for our SideCart button to be set "display:none", whenever wcc-validation message appears on the screen (doesn't have the Class attribute of "hidden")
Whenever wcc-validation message disappears and gets the Class Attribute "Hidden" - make the SideCart button appear on the screen. (display:block?)
I've researched a bit and realized this cant be done with CSS,
I dont mind adding JS/Jquery snippets to make it work, but couldn't figure out how to spot a DIV that has a "hidden" Class attribute in it - and apply the show/hide on the sidecart button from that.
thanks a lot.
adam
you can check for the class 'hidden' if it is available for the 'wcc-validation', Like the following snippet:
jQuery(document).ready(function($){
if($('#wcc-validation').hasClass('hidden')){
$('.to_hide').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcc-validation hidden" id="wcc-validation">
<div class="to_hide">to hide based on hidden class</div>
You can check the value like this.
function checkValue(){
let ele = document.getElementById('wcc-validation')
if (ele.value) {
do what you want. change css, style etc
}
}

Javascript - Paste specific text to textarea on button click

I new in Javascript. I'm working on my Django project and I want to add some buttons like img button. Here is example:
So when user will click img button in textarea will be added this text :
<img src="[YOUR IMAGE]">
Thanks for help.
If i understand your question correctly you have to call a function in javascript to write to your specified element and on your image you use a onclick.
something like:
onclick="document.location=this.id+'.html'
Sample:
$(function(){
var $display = $('#display');
$display.val(0);
$(document).on('click', 'button.number', function(){
if($display.val() != 0) {
$display.val($display.val() + $(this).val());
} else {
$display.val($(this).val());
}
});
});
JS Fiddle Link: http://jsfiddle.net/qohdjovu/
This was probably already answered here: Using jQuery to click the button and display the value of the button
Script function was made by: #R. Canser Yanbakan
You need more than an image if you're not aware of it already. I suggest using Glyphicons for that purpose, will simplify everything and will be more lightweight.
Say we use the fontawesome glyphs.
Create a bar above text area where you'll hold your controls,
<section>
<i id="control-bold" class="fa fa-bold" aria-hidden="true"></i>
<i id="control-italic" class="fa fa-italic" aria-hidden="true"></i>
</section>
<textarea id="textarea"></textarea>
For simplicity I used ids on the button control elements, and will use JQuery to listen to click events to make it even more simple.
$("#control-bold").click(function(){
// Bold was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
$("#control-italic").click(function(){
// Italic was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
Note this is a simple & basic example to get you started. Glyphicons and JQuery are only my suggestion for this question.
If you are looking for a way to change your button style, I will suggest you to use CSS instead of <img> HTML tag.
a CSS class/id for unselected button with the default background-image
a CSS class/id which override background-image or selected buttons
And you will add/remove classes using javascript element.classList.add('.selected') or element.classList.remove('.selected')

Change css value between two styles on click of same button using javascript

I have an image upon which I want to bring a text on clicking the image. I applied the css display property to none and on click I changed it to block. Now again on clicking I want to change the display to none. How can I do that?
js:-
function showTerms(data){
document.getElementById(data).style.display = 'block';
}
html:-
<div style="display: none;" id="text1111" class="offer_text size-12">
<div class="TC">
<div class="condition">Terms & Condition</div>
</div>
<p></p>
<div><br></div>
<div>- The coupon code is valid for one time use per user account.<br></div>
<p></p>
You can achieve this with a toggle function, like so:
function toggleTerms(data){
document.getElementById(data).style.display = (document.getElementById(data).style.display == 'block' ? 'none': 'block');
}
Generally speaking, do not modify CSS directly in JavaScript (there are of course exceptions, but in this case you shouldn't).
Instead, define a CSS class like so:
.shown {display: block}
Then your JavaScript can be as simple as:
function showTerms(data) {
document.getElementById(data).classList.toggle("shown");
}
* If support for old browsers is needed, you'll need something a little more advanced to check if the class is on and toggle it manually.

knockout.js visibility not working when css style is applied

I have an issue where knockout.js 2.0 isn't showing my item when a CSS style is applied to it. It won't update the display with the style applied to it. If it is off it works.
CSS
.success { display:none }
HTML
<div data-bind="visible: site.signUp.success()" class="success">
Thanks for signining up. You will recieve an email from us in the near future.
</div>
JS
app.viewModel.site.signUp.success(true);
In the period of time before Knockout.js applies bindings, you can prevent the initial rendering/flashing effect by setting the default display style to none.
<div style="display: none" data-bind="visible: site.signUp.success">
Thanks for signining up. You will recieve an email from us in the near future.
</div>
I created a fiddle that shows how you can use the css binding in Knockout to do this. http://jsfiddle.net/johnpapa/vwcfT/
Here is the HTML:
Success Flag: <input type="checkbox" data-bind="checked:site.signUp.success"></input>
<div data-bind="visible: site.signUp.success" >
Thanks for signining up. You will recieve an email from us in the near future.
</div>
<br/><br/>
<span data-bind="text:site.signUp.success"></span>
<div data-bind="css: { success: site.signUp.success}" >
Thanks for signining up. You will recieve an email from us in the near future.
</div>
The first DIV in the example just uses the visible binding, since you dont really need a css class to do this. The second DIV in the example binds to a css class named "success" if the site.signUp.success observable is true. This is more verbose than the first, but could be useful if you needed your css class to do more than just set visibility.
Hope this helps.
Here is the javascript:
var viewModel = {
site: {
signUp: {
success: ko.observable(true)
}
}
};
ko.applyBindings(viewModel);
That's because the success style is defined as display:none, which is equivalent to visible = false. Your CSS class is cancelling out your site.signUp.success() call.
If you want your DIV to show up only when site.signUp.success() == true, just do this:
<div data-bind="visible: site.signUp.success">
Thanks for signining up. You will recieve an email from us in the near future.
</div>
It might be a bit late but I found the following useful. Instead of fixing every element with a visibility control, just wrap a div around all your pre-hidden elements as follow:
<div style="display:none" data-bind="visible: true">
Some pre-hidden elements
<div data-bind="visible: myVisibleFoo">...</div>
<div data-bind="visible: myVisibleBar">...</div>
Other pre-hidden elements
...
</div>
The whole section of elements is hidden initially and is only shown after KO has applied bindings. I usually wrap the whole page with it to avoid any flashing problem.
Just run into this myself; I can see why the did it this way, but it is handy to set a default visibility of none on late loaded elements on the page so they don't flash as scripts are loaded. The nicest way I could find of doing this was just to create a simple custom binding:
ko.bindingHandlers.forceVisible = {
update:
function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
{
if(ko.unwrap(f_valueaccessor()))
el.style.display = 'inherit';
else
el.style.display = 'none';
}
};
You have to be a little bit careful when setting up your styles; if you are using a div and your CSS sets it to display:inline-block then this code will not work - it will have block display when the inherit is applied. This simple solution was fine for my use case, however.

Categories