I've been following a guide to collapse a sidebar. I realised that I cannot use the $ because it's reserved in Svelte. Can someone guide me on how to make this work? Thanks :)
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
You should really read through/follow along with the Svelte tutorial, it might help you better understand how to overcome small challenges like this.
Toggling a class is as easy as toggling a variable and using Svelte's shorthand class directive
<script>
let active = false;
</script>
<button on:click={()=> active = !active}>
Some menu text or an icon here
</button>
<aside class:active>
I'm a sidebar
</aside>
Then you just make the styles equal to whatever tutorial you're following along with since the active class would be conditionally applied at that point.
Here's a simple REPL example.
The equivalent vanilla js code would be:
const sidebarCollapse = document.getElementById('sidebarCollapse');
const sidebar = document.getElementById('sidebar');
sidebarCollapse.onclick = () => sidebar.classList.toggle('active');
Related
I'm trying to use media queries and javascript to make a dropdown menu for my page. I have the content i want to be in the menu in a <div> marked with a class, in this case. class="other-pages". My media query has 2 classes in it: .other-pages.closed and .other-pages.open. My goal is to use javascript to change the class once the media query is active to the closed class. Then make a button i have, change the class to the open version.
So here's what I have so far.
let menuContentBase = document.getElementsByClassName('.other-pages');
let mediaQueryMax = window.matchMedia('(max-width: 1080px)');
if (mediaQueryMax.matches) {
menuContentBase.classlist.remove('.other-pages');
menuContentBase.classlist.add('other-pages.closed');
}
When I load this into my browser and look in the debugger however it says menuContentBase.classlist is undefined.
Not entirely sure what to do from here.
Thank you for any advice/recommendations you may have.
Its a simple toggle
let element = document.querySelector(".mq-value")
element.addEventListener('click', (e)=>{
e.target.classList.contains('open') ?
e.target.classList.remove('open') :
e.target.classList.add('open')
})
.open{
color:red
}
<div class="mq-value open"> toggle </div>
I think the issue is in the class name. When it comes to document.getElementsByClassName, you don't need to put . before the class name. Replae this
let menuContentBase = document.getElementsByClassName('.other-pages');
with this
let menuContentBase = document.getElementsByClassName('other-pages');
If you want further information about this, you can refer https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Also, same for classList not classlist and the L must be uppercase.
if (mediaQueryMax.matches) {
menuContentBase.classList.remove('other-pages');
menuContentBase.classList.add('other-pages.closed');
}
Try this one and let me know if it's works or not. Thank you!
this is my script coding for left side menu slide left and right. I want to convert it into angularJS, I copied it from other website and unable to understand.
<script>
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeftPush = document.getElementById('showLeftPush'),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle(this, 'active');
classie.toggle(body, 'cbp-spmenu-push-toright');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeftPush');
};
function disableOther(button) {
if (button !== 'showLeftPush') {
classie.toggle(showLeftPush, 'disabled');
}
}
</script>
I can see that this code is some sort of toggle functionality. So let me try to explain how we can convert this!
The code starts at the onclick, so in angular that will be ng-click, also in angular you can write this in the HTML like so
<button id="showLeftPush" ng-click="test=!test;" ng-init="test=false;" ng-class="{'active': test, 'disabled': test}"></button>
In the above line, I will initialize test variable to false. then ng-click will toggle this variable. Then you are toggling the active class for the button. So the angular equivalent for that will be ng-class where the test will be a boolean, if test is true, then the class will be added. I do the same thing for disabled class also.
Similarly I add the other classes to the other element like.
Body HTML:
<body ng-class="{'cbp-spmenu-push-toright': test}" ng-controller='MyController' ng-app="myApp">
Div with ID - cbp-spmenu-s1:
<div id="cbp-spmenu-s1" ng-class="{'cbp-spmenu-open': test}">left</div>
Please use this as a starting point and continue building you angular App.
I have included a demo for your reference.
JSFiddle Demo
Working on the following demo, I have got a problem about making the code work twice (or more times).
I just wanted to add more "before/after" images, but seems like the draggable bar only works on the main one, and applies the movement to the others.
Is there any solution to make it work independent from each one?
Where could be the error:
$(function(){
var $dragMe = $("#dragme");
var $beforeAfter = $("#before-after");
var $viewAfter = $(".view-after");
Draggable.create($dragMe, {
type:"left",
bounds: $beforeAfter,
onDrag:updateImages
});
DEMO: JSFIDDLE
As answered on my previous post by #Jonas Grumman, here goes the solution:
JSFIDDLE
The main problem was on executing two ID tags on the same html page.
Otherwhise was my mistake since I forgot to change it on css, so focusing only on html & javascript was an error.
So modifying the following parts, was enough:
HTML (before):
<div id="dragme"></div>
HTML (after):
<div class="dragme"></div>
Javascript (before):
var $dragMe = $("#dragme");
Javascript (after):
var $dragMe = $(".dragme");
CSS (before):
#dragme{
some css styles here
}
CSS (after):
.dragme{
some css styles here
}
Directory Structure:
index.html
--admin
----suit.css
And the part of the css file is:
#suit-left{width:200px;right:240px;margin-left:-100%}
.suit-columns{padding-left:200px;padding-right:40px;}
I want to write a javascript code in the index.html:
<button onclick="">Change CSS</button>
to change the css file like this:
#suit-left { display: none; }
.suit-columns { padding-left: 0; }
How can I do this?regards,thanks a lot
If you want the apply css on particular element by javascript, do something like this.
<button onclick="changeCss()">Change CSS</button>
UPDATE
<script>
function changeCss(){
var suitInput = document.getElementById('suit-left');
suitInput.style.display = 'none';
//UPDATED the answer
var siteCol = document.getElementsByClassName('suit-columns')[0];
siteCol.style.paddingLeft = '0';
//siteCol.style.paddingRight = '0'; //incase of want padding right 0
}
</script>
What I would recommend here is to manipulate the classes associated with the element rather than changing the class definition itself.
Here is a simple example:
.sideBar{ /* your normal rules here */ }
.sideBar.hidden { display:none; }
In order to hide your sidebar, all you'd have to do is add the hidden class name to the element.
In this way, you would define CSS rules for your sidebar when it is open, and different rules for when it is closed. Once you have those two states pre-defined, all you'll have to do is change/add/remove the class to hide/display your sidebar.
I feel like this was the main issue with your question here. The other tasks you wish to perform such as clicking on a button or actually manipulating the class attribute has been covered in many posts already. Here are some useful links for you -
Add class to given element
Using an HTML button to call a JS function
You can write the script in this way and paste below script at head block of index.html
I assume that you have knowledge of jquery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
function ChangeCss(){
$('#suit-left').css('display','none');
$('.suit-columns').css('padding-left','0');
}
<script>
<button onclick="ChangeCss();" >
Now it will help!
So basically using css function of jquery you can change css/style attributes.
I hope it will help you.
Question : Beginner Level
Code: Pure Javascript
I had created a web page in which i am rendering the main nav items via a for loop in javascript. Below the main nav i had created some content assigned each main content div with different ids.
Now i want onclick of any nav item, respective content div should be displayed. please find the jsfiddle link : http://jsfiddle.net/shabirgilkar/GKLJz/1/
May i know how to do that in pure javascript. Any help will be highly appreciated.
Provided your text inside the navigation boxes match the id of the div.contents This code should work.
Hope i helped.
old="home";
function init() {
document.getElementById('about').style.display = 'none';
document.getElementById('products').style.display = 'none';
document.getElementById('services').style.display = 'none';
document.getElementById('career').style.display = 'none';
document.getElementById('faq').style.display = 'none';
document.getElementById('contact').style.display = 'none';
var pages = document.querySelectorAll('a.box');
for(i=0;i<pages.length;i++){
pages[i].onclick=function(e){
document.getElementById(old).style.display='none';
old=e.target.innerHTML.toLowerCase();
document.getElementById(old).style.display='inline-block';
}
}
}
Ok, I updated your fiddle: http://jsfiddle.net/GKLJz/3/
The trick is that you assign ids to menu items in your array and than you call onClick function that switches css classes accordig to what you click on...
And if you want to make it pretty, use some js animation effect instead of changing classes, like jQuery slide described here
Btw you can ommit init() function entirely an just assign .hidden to other divs as default