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!
Related
I'm trying to change the font class name after clicking the link with Javascript and jQuery.
The button example:
<a class='pe-1' onclick='change(this, 24)'><i class='bx bx-bookmark'></i></a>
If I try this way below will change the class from the link instead of the class from the font...
Function example 1:
function change(button, id) {
var changeButton = $(button);
changeButton.removeClass("bx-bookmark").addClass("bxs-bookmark");
}
Unfortunately doing the basic way (like my example below) doesn't really work for me since is going to change the value from all posts instead of just that one post.
Function example 2:
function change(button, id) {
var changeButton = $(button);
$(".bx").removeClass("bx-bookmark").addClass("bxs-bookmark");
}
What I'm missing?
You would generally use $(this).find('bx').removeClass("bx-bookmark").addClass("bxs-bookmark"); to find the child within the link clicked
Here's a way you could do it without the onclick attribute in the html
and I even made it a toggle :-)
<a class='pe-1'><i class='bx bx-bookmark'></i></a>
$(document).ready(function() {
// on any .pe-1 click
$('.pe-1').click(function(){
// find the child with the class .bx
target = $(this).find('.bx');
// if it has class bx-bookmark
if (target.hasClass('bx-bookmark')){
// remove it and add bxs-bookmark
target
.removeClass("bx-bookmark")
.addClass("bxs-bookmark");
}else{
// we assume it has bxs-bookmark already
// so swap it back
target
.removeClass("bxs-bookmark")
.addClass("bx-bookmark");
};
});
});
I wasn't sure what id was for so I removed it. If that's important just let me know what it's for and I'll figure out a solution.
Hope this helps!
I have a DIV that needs to be displayed/hide whenever i hover a menu item.
Here it is my website: Website
The Blug light section should be displayed only when I hover the Photo Booths menu on the header.
I have tried the following code on JSFiddle which it works but when i use it on my site it doesn't work
<script>
let test = document.getElementByClassName(".menu-item.menu-item-7912");
test.addEventListener("mouseover", function( event ) {
document.getElementById('test2').style.display = 'none';
});
test.addEventListener("mouseleave", function( event ) {
document.getElementById('mega-menu-customized').style.display = 'block';
});
</script>
I have tried using getElementByClassName but without success. Any ideas of how to make it work?
Are you getting DOM node in test variable, one problem I can see in your code is:
let test = document.getElementsByClassName(".menu-item.menu-item-7912");
Should be:
let test = document.getElementsByClassName("menu-item, menu-item-7912");
We do not use dot before class name and multiple classes can be separated by comma like:
let test = document.getElementsByClassName("class1, class2, class3");
Your issue is in the header element. On scroll, the style property of the document header is changing. Look:
sorry for the bad quality, upload size is maxed at 2MB
Without getting into too much detail, one thing that I see is that the height of the header is being reduced to only contain the main header. When the larger blue subheader is visible, part of that is because the style.height of the header is made to be much larger. Additionally, the first child of the header is a div with id 7905, and that seems to be what you need to target to modify the opacity of the larger blue header. You need to target that div:
const blueBannerContainer = document.getElementById('7905')
But your event handlers will also need to account for the height of the header element. display: block won't really help you here.
Ok, I will try explain my question.
I need to add class ".active" into already existing class ".jobs", when URL have hashtag same as ID, inside tag with class ".jobs".
Here is working code just for one compare:
$(document).ready(function() {
var hashVal = window.location.hash.split("#")[1];
if(hashVal == 'programmer') {
$("#programmer").addClass('active');
}
});
In practice:
Someone will come to website www.domain.tld/jobs#programmer then I need compare "#programmer" from ULR with all existing IDs in all <div> tags, which also have class ".jobs", and if there will be someone with class="jobs" and also id="programmer", I need to add into this <div> tag class "active".
Is there a way to make jQuery code more variable? Like without having add comparison for each ID name? and also I need to move browser windows on position, where div with that ID it is.
var hashVal = window.location.hash.split("#")[1];
if($('#'+hashVal).hasClass('jobs')) $('#'+hashVal).addClass('active');
I have added an onclick function to a div here:
<script type="text/javascript">
document.getElementById("fab").onclick = function() {
location.href = 'http://your.url.here';
}
</script>
When you hover over the div, it doesnt show the URL in the bottom left of the browser like an anchor tag does (see picture): http://i.stack.imgur.com/iGLHS.png
Is there any way to make the browser show the link, when it has been added with javascript?
Add the title attribute to your element:
<div id="fab" title="http://your.url.here'></div>
Actually this is different than the popup you're seeing, but it might be as close as you can get.
As #Benten points out, you'd have to set window.status, which isn't allowed by most modern browsers.
I don't think you can directly access the property that you are looking for any more. Usually it's ignored. See this: http://www.w3schools.com/jsref/prop_win_status.asp . I'd say the other answer is your best bet.
I think something different. I hope i didnt understand it wrong. If you add -a- element as parent to your -div- it acts like what you want.
var element = document.getElementById("fab");
var aa = document.createElement("a");
aa.setAttribute('href', 'http://www.google.com');
var parent = element.parentNode;
parent.insertBefore(aa, element);
aa.appendChild(element);
please let me know if i understand it wrong?
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