Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've got a very amateur question since I am very new to coding!
I have 4 button inputs "skolefag", ""sport", "fritid", "diverse" and 4 large squares (stacked upon eachother, different colors, but you can only see the red one)
I want to switch between divs (the large squares) when i click on the different categories, so that the contents and background color of the correct/matching large square shows.
What would be the easiest technique to achieve this trough?
Sorry again and thank you in advance!
You need to use onclick attribute on you button or add a click eventListenner to it.
Then you create a function that is called by onclick="myfunction(idButton)" or by your eventListener :
function myfunction(idButton) {
document.getElementById("my-elmt-to-set-up").backgroundColor = docuement.getElementById(idbutton).backgroundColor
}
and same thing for color properties, review javascript lesson I think --> after lesson you can make some incredible interactions
Here is one solution (which I think is neat):
document.addEventListener("DOMContentLoaded", function() {
change_menu("home");
});
function change_menu(
menu_to_show
) {
['home', 'second', 'third'].forEach(function(memuee) {
document.getElementById(memuee).style.display = 'none';
});
document.getElementById(menu_to_show).style.display = 'block';
}
<div style='display: flex;font-size: 200%;'>
<div>
<div style="background:green" onclick="change_menu('home')">Home</div>
<div style="background:red" onclick="change_menu('second')">Go To Second</div>
<div style="background:blue" onclick="change_menu('third')">Go To Third</div>
</div>
<div id="home" style="background:green">
HOME PAGE
</div>
<div id="second" style="background:red">
SECOND PAGE
</div>
<div id="third" style="background:blue">
THIRD PAGE
</div>
</div>
Of course this could be further optimized by referencing "page" divs by the "button" div's ids (e.g. home_page from home_button) or grouping ids within given "wrapper" divs, using classes, etc., but I think this is the essential solution.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a long HTML file with a lot of functionalities to show and hide it.
For example, users can hide the logo, show a large title, show some blocks and all these cases can be used by various pairs.
I can have lots of these cases. I need something to test all cases (show or hide some blocks, combine some of them, etc.) without commenting on parts of my code.
By the way, the structure of the code can be changed after some variations, that's what I am trying to test.
AS it is shown in this picture, in one case it can have logo, address, contact info, and in another case it can be blank.
How can i test my web
Here are a few ways you could acomplish that.
I'm using jQuery because it's on your question's tags, but you can do this with vanilla js as well.
$(document).ready(function() {
$('.toggle-logo').click(function() {
$('.logo').toggle()
})
$('.toggle-title').click(function() {
$('.title').toggleClass('transparent')
})
$('.toggle-text').click(function() {
$('.text').fadeToggle()
})
$('.toggle-section').click(function() {
$('.section').slideToggle()
})
})
.transparent {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="logo"><img src="https://dummyimage.com/60x40/cccccc/000000?text=Logo" alt="My logo"></h1>
<h2 class="title">My heading</h2>
<p class="text">My site text</p>
<div class="section">
<p>Section</p>
</div>
<div>
<button type="button" class="toggle-logo">Toggle logo (remove space)</button>
</div>
<div>
<button type="button" class="toggle-title">Toggle title (keep space)</button>
</div>
<div>
<button type="button" class="toggle-text">Toggle text (fade and remove space)</button>
</div>
<div>
<button type="button" class="toggle-section">Toggle section (slide and remove space)</button>
</div>
there is html validator but to hear you it is sort of dynamic code so won't be so helpful, i think the only way is to try it yourself, or put it in production mode and let people reporting you the problems they find while using it... (beta page)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm playing with the following incoming HTML structure that I don't control:
<div id="someRandom1">
<div id="someRandom2">
<div id="someRandom3">
<div id="someRandom4">
...
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
And this
<p>Some more content</p>
...
</div>
</div>
</div>
<p id="additionalGarbage">Don't need this</p>
</div>
What I'm trying to accomplish is to end up with the following:
<p>Actual content</p>
<ul>
<li>This is a thing I need too</li>
</ul>
And this
<p>Some more content</p>
I don't know how many divs there will be but I do know there's only one child div and the stuff inside the last div is what I need. Logic should probably be to check for a child div, get the contents and check for a child div. If another child div, do check again or else finally return the content. Every loop I've written so far crashes Chrome so I'm obviously writing it wrong. Please advise.
EDIT: After all the comments, I'll try to make this more concise in some bullets.
There's an unknown number of nested divs. (I don't have any control of this).
The child div may or may not be the first element inside the parent div.
The html structure in the deepest div needs to be kept in tact.
Bonus: minimal lines of code.
Assuming...
you have the top level (since you said you're getting it from an API)
you only need to remove the outermost divs (by tag name)
the divs targeted for removal will be the first div among its siblings (though there may be other elements with different names around it)
...you can do this:
// Assumes you have a handle on the root level
var node = $("#someRandom1");
var div = node.children("div")
while (div.length) {
node = div.first()
div = node.children("div")
}
// now node.children will be the content
alert(node.children().map(function(i, n) { return n.nodeName }).toArray())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="someRandom1">
<p class="garbage"></p>
<div id="someRandom2">
<p class="garbage"></p>
<div id="someRandom3">
<p class="garbage"></p>
<div id="someRandom4">
...
<p>Actual content</p>
<ul></ul>
<p></p>
...
</div>
</div>
<p class="garbage"></p>
</div>
<p id="additionalGarbage"></p>
</div>
This simply starts with the outermost div, and if it has at least one div div, it traverses down to that. So you end up with node being the innermost consecutive div child and node.children holds its content nodes.
This shall do the trick:
document.getElementById( 'someRandom1' ).querySelector( ':not(div)' ).parentNode.innerHTML
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have a chat support fixed on the left of my browser, I want to show and hide it using jQuery, I already did it by using the show() and hide() function but, when I want to apply the same jQuery effect on subsequent layers it does nothing, it just applies to the first element, what I want to ask is:
What is the best way to do this, I'm learning jQuery and have done some little things with this library but I can't figure how to do this without just copy and paste the same effect, should I use a "for" method?.
I leave my code below with a JS Fiddle example so you guys can figure out what's going on:
HTML Markup:
<div id="support_left">
<div id="support_show">
<figure id="show_control">
<img src="../img/chat.png" alt="Chat" />
</figure>
<div id="show_item">
<p class="support_cyan">Chat with sales <span class="close">X</span></p>
</div>
</div>
<div id="support_show">
<figure id="show_control">
<img src="../img/call.png" alt="Call" />
</figure>
<div id="show_item">
<p class="support_orange">Chat with sales <span class="close">X</span></p>
</div>
</div>
<div id="support_show">
<figure id="show_control">
<img src="../img/mail.png" alt="Email" />
</figure>
<div id="show_item">
<p class="support_green">Chat with sales <span class="close">X</span></p>
</div>
</div>
</div>
Javascript:
$('#show_item').hide();
$('#show_control').click(function(){
$('#show_item').show();
});
$('.close').click(function(){
$('#show_item').hide();
});
Link to the JS Fiddle:
http://jsfiddle.net/45hsd6dp/
Thanks in advance.
First of all, change all your IDs to classes. IDs must be unique and how jQuery handles multiple instances of IDs is up to how individual browser/vendor decides to do with it. The behaviour is technically undefined and the browser will only select the first occurence, usually.
You will need to give your show and hide functions a context when the click event is fired. With your current script, you are telling jQuery that:
Whenever a click event is registered for any elements with the class .show_control, show ALL items that has the class .show_item.
See that there is no context in your function that is bound to the click event.
To give your event listening a context, always use $(this), which restricts the function to elements of interest:
$('.show_item').hide();
$('.show_control').click(function(){
$(this).next('.show_item').show();
});
$('.close').click(function(){
$(this).parent('.show_item').hide();
});
In layman's words, the function tells jQuery:
When .show_control is clicked it, search for it's immediate, next sibling that has the class of .show_item, and show it.
See that the statement has context, because $(this) restricts jQuery to the context of the element being clicked on. Depending on your markup, you will have to rely on various jQuery methods to transverse the DOM, such as .next(), .prev(), .parent(), .parents(), .find(), .children(), .siblings() and etc. All these functions are well-documented on the jQuery API, make sure you check that out.
See fiddle here: http://jsfiddle.net/teddyrised/45hsd6dp/6/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I would like to make a box with 3 options (2013, 2005, 2004) that are all hyperlinked to their own seperate jquery slider image galleries. I want it so that say when you click 2013, the 2013 image gallery appears and then when you click 2005, the 2005 image gallery appears instead.
I dont know if i should be using 'click event listeners' or just using html. I am new to coding and would appreciate as much help. Thanks.
Example:
jsFiddle
If you are using a thirdy part plugin to provide gallery functionality you can solve your problem this way:
create a second container box, and put the 3 different galleries into the container, but hidden.
example:
<div class="select-gallery">
<ul>
<li data="gallery1">2013</li> <!-- the data attribute links the list element to it's related gallery -->
<li data="gallery2">2005</li>
<li data="gallery3">2004</li>
</ul>
</div>
<div class="gallery-container">
<ul id="gallery1" class="is-hidden gallery">[...]</ul>
<ul id="gallery2" class="is-hidden gallery">[...]</ul>
<ul id="gallery3" class="is-hidden gallery">[...]</ul>
</div>
Then with javascript, (i'm assuming you are going to use jquery to speed up)
jQuery Framework, you can attach an event handler to the click event of the select-gallery list elements to show any of your galleries, this way:
$(document).ready(function () {
$(".select-gallery").on("click", "li", function () {
var $data = $(this).attr("data");
$(".gallery").css("display", "none");
$("#" + $data).fadeIn();
});
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to select a specific parent of every element that has a title attribute that starts with "Mod" and put them in a single var that I can then easily control.
var allMods= $('#main-element .object[title^="Mod"]').closest('.specific-parent');
$(allMods).hide();
but it only works on the first found element, I can't understand how to set the var to be every match, can someone give me a hand please?
It should work provided all of the .object[title^="Mod"] elements are within the #main-element container.
Example: Live Copy | Source
HTML:
<div id="main-element">
<div class="specific-parent">
<div class="object" title="Mod1">Mod1 - turns green</div>
</div>
<div class="specific-parent">
<div class="object" title="Mod2">Mod2 - turns green</div>
</div>
<div class="specific-parent">
<div class="object" title="Mod3">Mod3 - turns green</div>
</div>
</div>
<div>
<div class="specific-parent">
<div class="object" title="Mod4">Mod4 - does <strong>not</strong> turn green</div>
</div>
</div>
JavaScript:
$('#main-element .object[title^="Mod"]').closest(".specific-parent").css("color", "green");
Result: Only the .specific-parents of .object[title^="Mod"] elements that are within #main-element turn green.
As per the Docs:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
You probably want .parents() (note the S, .parent() also returns only ONE element)