I'm trying to make it so that one of the tabs on my portfolio website creates a drop down menu. I was able to make it so that when people click on the picture, it makes a dropdown menu. However, I also wanted the same thing to happen when they click on the text as well. So my problem is that I have two buttons with different classes that I want to have the same function. I thought I could do that with the javascript I have now, but it doesn't seem to work. Here's a link to a porotype I created https://iancoffman.com/digitalart2.html. The code should be viewable publicly.
What am I doing wrong?
What code are you using for your drop down menu that you want to show when clicking? You could use basic JavaScript to trigger the same function when you click each item.
A basic function example would be:
<script>
function myFunction() {
document.getElementById("menu").style.display = "block";
}
</script>
You could attach this function to a div that contains both the text and image like:
<div onclick="myFunction()">
<p>Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings">
</div>
<div id="menu" style="display:none;">Dropdown Menu</div>
Or you could add this function to each item if they are not connected:
<p onclick="myFunction()">Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings" onclick="myFunction()">
<div id="menu" style="display:none;">Dropdown Menu</div>
Not sure what exactly you are trying for but this might get you started with the concept.
Related
I've never tried Javascript before and looked around, but the tutorials I've found would take me weeks to figure out (attention/focus issues + I don't even know what words I want to search for) and none of the solutions I've searched for solved it, and I don't know enough to extrapolate it from other answers.
Can someone give me an example of this code (from w3School) extended to also toggle more dropdown menus? It has to be usable with keyboard like this one is.
Currently it's only handling the menu with an ID of "dropperso" and can open the Personal menu, I need the "openMenu" function to also react to the ID "dropsites" and be able to open the Other Sites menu. A note that the button and affected ID-having div are siblings.
No JQuery please.
JS:
function openMenu() {
document.getElementById("dropperso").classList.toggle("dropopen");
}
HTML:
<div class="dropdown">
<button onclick="openMenu()" class="drophover">Other Sites</button>
<div id="dropsites" class="dropdown-content">
A link
</div>
</div>
<div class="dropdown">
<button onclick="openMenu()" class="drophover">Personal</button>
<div id="dropperso" class="dropdown-content" style="right: 0;">
A link
A link
</div>
</div>
All that the .dropopen css class does is change the display of .dropdown-content from none to block.
I tried to search for my specific problem and all I found was either way beyond my ability to understand, "use JQuery" (I'm limited and can't use JQuery), or "use this other code (that doesn't work for mine)".
It works if I just copy the whole thing and make one function for each menu, but I get the feeling that's kinda bad spaghetti coding, and I can't compress this on my own without an example that works to learn from.
I'd be VERY grateful if you could solve that for me so I can use that later, and even MORE grateful if you could either explain how you made it work or link to the specific parts of documentation that explain what you're using.
If you want to toggle them all with one click use querySelectors to get all the dropdown menus and toggle each of them like this :
const dropdownMenus = document.querySelectorAll(".dropdown-content")
for(const menu of dropdownMenus){
menu.classList.toggle("dropopen")
}
but if you want to toggle each of them with same function and not writing a function for each menu you can do like this :
JS :
function openMenu(id) {
document.getElementById(id).classList.toggle("dropopen");
}
HTML :
<div class="dropdown">
<button onclick="openMenu('dropsites')" class="drophover">Other Sites</button>
<div id="dropsites" class="dropdown-content">
A link
</div>
</div>
<div class="dropdown">
<button onclick="openMenu('dropperso')" class="drophover">Personal</button>
<div id="dropperso" class="dropdown-content" style="right: 0;">
A link
A link
</div>
</div>
function openMenu(id) {
document.getElementById(id).classList.toggle("dropopen");
}
<button onclick="openMenu('dropsites')" class="drophover">Personal</button>
<button onclick="openMenu('dropperso')" class="drophover">Personal</button>
<div class="drop-down flex-row-AI-center" data-dropdown>
<button class="drop-btn" data-dropdownBtn>Categories</button>
<div class="dropdown-content flex-col" data-dropdown-content>
Action
Adventure
Anime
Comedy
Thriller
Fantasy
</div>
</div>
</div>
You have to give all the dropdown same ids/class/dataset-attributes
function toggleDropDown(e) {
const isDropdownBtn = e.target.matches('[data-dropdownBtn]');
//as long as user clicking inside of dropdown it won't close
if (!isDropdownBtn && e.target.closest('[data-dropdown]') != null) return;
let currDropdown;
if (isDropdownBtn) {
currDropdown = e.target.closest('[data-dropdown]');
currDropdown.classList.add('active');
}
document.querySelectorAll('[data-dropdown-content].active').forEach(dropdowm => {
if(currDropdown === dropdowm) return
dropdowm.classList.remove('active')
})
}
I am a beginner in Javascript and I am not absolutely sure how to put together the function what I try to achieve.
So, I have a HTML5 page and I must stick to my ID structure as different functions are tied to IDs.
My problem is I have an id within an id (It must stay an ID, it cannot be swapped with class)
E.G.
<div id="outterid">
CLICK ME
<div id="innerid">
<p>Hello World</p>
</div>
</div
Where, <div id=outterid"> pops up as a tooltip (My other javascript takes care of that function. And within that the link CLICK ME and the hidden <div id=innerid">.
So when you click CLICK ME, <div id=innerid">becomes visible. (Note: <div id="outterid"> is visible, while you are clicking)
So I need to achieve the href="#innerid" through javascript, because at the moment simply href=""
E.G.
CLICK ME
does not work, because the #innerid within the #outterid.
Also, the 'CLICK ME' link has to be triggered by onmouseover="this.click();". So, the link clicked when the mouse hovers over it.
I hope I managed to clearly explain what is my problem and what result I am looking for.
Thanks for your help in advance.
Are you talking here about scrolling to the relevant div (e.g. #innerid)? In which case I don't think your problem has anything to do with javascript, but rather you've missed the a off of <href="#innerid">CLICK ME</a>... I've tried replicating your problem in JSFiddle and with CLICK ME it scrolls to the correct div regardless of if it's in a nested outer div or not.
It's not clear exactly what you're after here but i've had a shot. This example will display the #innerid div when you click on the anchor tag. Hopefully this will help you.
function myFunction(href) {
var id = href.split('#')[1];
document.getElementById(id).style.display = 'block';
}
#innerid { display:none; }
<a onclick="myFunction(this.href)" href="#innerid">CLICK ME</a>
<div id="outterid">
<div id="innerid">
<p>Hello World</p>
</div>
</div
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
I have a specific goal in mind.
Please reference this page: http://cubancomplex.kodingen.com/test/MM/dashboard1.html
On the very bottom right, there is a <div> with two buttons on each side. The <div> currently has one google chart contained inside.
The goal is for a user to be able to use those two buttons to switch between charts for approximately eight cities.
I am not familiar with javascript or jQuery so I would appreciate any assistance! How should I go about achieving this?
Here is the code for that section:
<div id="footer">
<div class="markerNavLeft" title="Prev" id="prevMarker">‹</div>
<div id="markers">
<div id="chart">
<div id="auckland_chart_div"></div>
</div>
</div>
<div class="markerNavRight" title="Next" id="nextMarker">›</div>
</div>
Based on my experience, there's 2 option that you can use..
you can place your charts in your div id="chart". The first one add a class to mark it as a selected one (e.g. selected), of course the other is hidden… Please add a same class for all of the chart(e.g. chart-detail). Then, you can use
var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected");
for the previous button, you can use .previous function.
You can use ajax ( .ajax function or .load function). Mark each chart with an ID so, you know what's the next or previous chart (within php).
I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.
You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>
This would work:
document.getElementById('one').className = 'a';
you could get the element by id with:
document.getElementById("one")