I don't know why my javascript code is not toggling on firefox developers tools, and that's my code:
const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
const mobile_menu = document.querySelector('.header .nav-bar .nav-list .menu');
const header = document.querySelector('.header-container')
hamburger.addEventListener('click',() => {
hamburger.classList.toggle('active');
});
Maybe you can check, if your element is clicked or not with console.log()
hamburger.addEventListener('click', function(){
console.log("test")
})
I suggest you not to use arrow function in addEventListener, because of 'this' problem in arrow function
When you open developer tools in Firefox, on the left hand side of the menu there are tab header for "inspect", "console", network" and so on.
On the right hand side of the same menu bar, there is an icon of a framed document that shows "Select an iframe as the currently targeted document" when you hover over it. Click the icon and select the iframe containing the .header-container element.
Assuming the correct nested elements have been set up in HTML, the posted code now runs if you paste it after the script input prompt and press enter, and you can click the hamburger icon to toggle its active cf class.
Use of the const declaration in the pasted script prevents it being run more than once without reloading the page, which is a good thing - an even number of anonymous listeners that each toggle active would not affect the class list of the hamburger element.
FWIW, some HTML that can be used to show the code in the post "just works" when run in the Firefox console:
<style>
div { margin: 0.5rem; margin-left: 2rem; border: thin solid maroon;}
.active {background-color: yellow;}
</style>
<div class="header-container">
.header-container
<div class="header">
.header
<div class="nav-bar">
.nav-bar
<div class="nav-list">
.nav-list
<div class="hamburger">
.hamburger
</div>
<div class="menu">
.menu
</div>
(nav-list)
</div>
(nav-bar)
</div>
(header)
</div>
(header-container)
</div>
However, if the hamburger menu structure is inside an iframe element it needs to be selected first to prevent generating an error that hamburger is null.
Related
In the code below is a website with a star rating bar. Stars can be clicked. But when I open the chrome developer console to see the javascript code, there are no button tags. Are the 5 stars considered buttons?
Isn't there supposed to be a click event listener?
When I click on a star it turns blue. How can this work?
And which part of the code is exactly the button? Is it this line?
<i class="svi-star ratingicon-full"></i>
<div class="subject-answer">
<div class="ratingbar-container" steps="5">
<div class="ratingbar-wrap" style="height: 40px; font-size: 38px;">
<div class="rating" rel="1">
<i class="svi-star ratingicon-full"></i>
<i class="svi-star-o ratingicon-outline">
</i>
</div>
<div class="rating" rel="2">
<div class="rating" rel="3">
<div class="rating" rel="4">
<div class="rating" rel="5">
</div>
<div class="input-wrapper">...</div>
</div>
</div>
(I just can not copy and paste, I have to buy another coffee first to get a new code to be able to open this website, but I hope the code part I just typed is enough for now)
On the left is the webpage with the rating bar, on the right is the corresponding javascript code (chrome dev console):
![on the left is the webpage with the rating bar, on the right is the corresponding javacode (chrome dev console)][1]
You can have click event on every html element there is. Therefore anything can be a button.
document.querySelector('.div').onclick = () => {
console.log('clicked on a div');
}
document.querySelector('.span').onclick = () => {
console.log('clicked on a span');
}
.div {
background-color: red;
width: 100px;
height: 100px;
}
.span {
background-color: blue;
color: white;
}
<div class="div">
<span class="span">this is a clickable span</span>
</div>
It's possible to create things which are not buttons which can still be clicked (any element can have a click event listener added to it), and in this case, it appears that the website has some italic elements with no contents and some styling with such associated JavaScript.
Best practice is to use semantic HTML which, in this case, would be <button> elements (or possibly <input type="radio">) as these come with all sorts of affordances (which are particularly useful for accessibility purposes as they allow, for example, an arthritic user who can't operate a mouse to navigate with the Tab key or a blind user to access the content with a screen reader).
Note that depending on your geographical location, your audience's geographical location, and the type of service your website offers: You may be legally required to ensure it is accessible.
every HTML element can have an event listener called onClick, it can be a <div> that you can click, it can be <span>, in this case, it's a <i>.
Everything is normal don't worry ;)
Make sure to add the css {cursor: pointer;} so when you hover it will show the hand :)
Comment for more UX questions.
I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.
I'm running into a snag on a simple .hasClass .addClass concept. I have a full page layout that matches my media devices viewport. When you scroll or click on the nav it jumps to the next corresponding div by way of the transference of a active class.
What I'm hoping to do is addClass to the active divs img inside it to apply an animation into the page. For some reason though, this is just not working out for me. As the active class transfers the img doesn't update with it.
Thoughts?
if ( $('.section').hasClass('active') ) {
$('.active img').addClass('slideUp');
}
.section { min-height: 200px; background:rgba(0,0,0,0.15); padding: 15px; }
.active img { background:rgba(0,0,0,1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section active" id="section0">
<img src="http://www.smashbros.com/images/character/kirby/main.png">
</div>
<div class="section" id="section1">
<img src="https://kirby.nintendo.com/planet-robobot/assets/img/home/copy-kirby.png">
</div>
From your last comment, just add the slideUp class at the same time as you add the active class (basically on the click listener for the nav)
I have a situation where clicking on an image will direct the user to a certain link, but pressing a button that is shown within an image will run a javascript method instead. However, I cannot prevent the page from redirecting to the certain link when the button is pressed (the javascript method is also run when the button is clicked).
I have found out that button cannot be nested within an anchor element, and tried to wrap the button within a form as well, but no luck.
Does anyone know a way around such problem?
the basic logic in code looks like this
<a href="an item description link">
<img src="an item image"/>
<form style="display: inline" action="html_form_action.asp" method="get">
<button type="button" id="add-btn" class="add-cart" onclick="quick_add()">+</button>
</form>
</a>
Thanks in advance for any help!
A straightforward way that validates would be just superimposing the button over the link. This requires the link and the button to be in the same containing element, and for both of them to use position: absolute:
HTML
<div class="box">
<a href="http://example.com">
<img src="http://placehold.it/300x200">
</a>
<button>AAAAA</button>
</div>
CSS
.box {
box-sizing: content-box;
width: 300px;
height: 200px;
border: thin solid black;
}
.box > a {
display: block;
position: absolute;
}
.box > button {
position: absolute;
}
See it in action on CodePen: http://codepen.io/millimoose/pen/avYLjQ
The button will automatically be stacked over the preceding link. (This is specified behaviour.) And it will handle clicks before they can be passed to elements underneath is.
That said, this solution has a few downsides. You'll have to give a fixed size to the container; it can't be sized automatically to fit its contents, because its contents are outside of the rendering flow. This also means they won't automatically fill their parent box unless you set their size explicitly again.
I have this example jsfiddle
HTML
<div class="container_he">
<div class="header_he"><span>Expand</span>
</div>
<div class="content_he">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
Javascript
$(".header_he").click(function () {
$header_he = $(this);
//getting the next element
$content_he = $header_he.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content_he.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header_he.text(function () {
//change text based on condition
return $content_he.is(":visible") ? "Collapse" : "Expand";
});
});
});
CSS
.container_he {
width:100%;
border:1px solid #d3d3d3;
}
.container_he div {
width:100%;
}
.container_he .header_he {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container_he .content_he {
display: none;
padding : 5px;
}
There it works perfectly. But when I wanted to launch in my website it won't expand to any click on it.
Here is my website link. http://darbs.ecotechno.lv/en/products
What could cause this error ? Some other div elements prevent from expanding?
Thanks
You are trying to include the fancybox and application script at the top of your page and as you haven't included jQuery Library before this it is crashing the scripts and therefore nothing will work.
You need to add the following to your page before the other 2 scripts:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
A good tip would be to use a decent browser like chrome and press f12. You will be able to access the js console and it will give you a list of any errors that are occuring
First fix your fancybox error - TypeError: $(...).fancybox is not a function. This might also cause the problem
I have found $(...).fancybox is not a function when viewing your site. That causes script to break