So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!
Related
I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.
here is the code:
$(function()
{
$('.sign1').click(function(){
$(this).addClass('good');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6 menu-item">
<div class="front">
<img class="center-block sign1" src="images/sign1.png">
</div>
</div>
</div>
</div>
</div>
It's supposed to add the class 'good' when clicking the image with class 'sign1'
but that never happens.
what's wrong with my code please?
you code works fine if you remove the link <a> surrounding the <img> element.
after jquery adds the good class to the image, the click even bubbles up to its parent <a> and this directs the browser to the new address: main.html.
so you won't have the time to see the change i suppose.
You can code like below
var targetImg = document.getElementsByTagName("img");
targetImg.classList.add("mystyle");
I am having trouble with a little site I have been working on; I want a sort of "stream" container that holds "cards" of "content," where this "content" is some "text" as well as some "stats."
This is the HTML I currently have:
<div id="stream">
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
</div>
Eventually, I want users to be able to prepend "cards" to this "stream" as well.
Now, however, I am trying to implement some jQuery function to hide the "stats" of a card until it is clicked on. So after setting display to none in CSS of the stats, I made this in a javascript file:
$(document).ready(function(){
$("#stream, div.card").click(function() {
$(this).find($("div.stats")).show();
});
});
It sort of works; the stats of a card are hidden until I click on a card. When I click on a card, however, all the cards' stats divs are shown.
I was hoping to somehow make it that the specific card clicked is also the (only) one that gets shown. Obviously, the current way I am doing this opens all of them as jQuery I have selects all the cards at once; how can I remedy this?
Again, I apologize if this question has been asked; I could not seem to find something similar, and I really want this to work . . .
P.S. I tried to search for this particular instance; alot of suggestions were to just give divs ids, but this feels inconvenient when I eventually want users to prepend cards?
Your selector ->
"#stream, div.card"
was basically asking for all #stream and all div.card..
But what you really meant was, find all div.card inside #stream. and this would be, (aka without the ,).
"#stream div.card"
Also you jquery find doesn't require you to convert into a jquery object, so find("div.stats") will do the trick.
Im using something similar on the frontend to the following code:
<div class="slide_toggle">
<div class="slide_up">
<p>Title 1</p>
</div>
</div>
<div class="slide_toggle">
<div class="slide_up">
<p>Title 2</p>
</div>
</div>
<div class="slide_toggle">
<div class="slide_up">
<p>Title 3</p>
</div>
</div>
So basically what i aim to achieve is have the "slide_up" divs slide up on hovering the "slide_toggle" using jQuery. So far im using the following jQuery which would work perfectly for one instance however i want each instance to work individually without having to process the jquery over again referring to different classes (i.e. slide_toggle1. slide_toggle2 etcetc
$(".slide_toggle").hover(function () {
$(".slide_up").slideToggle("fast");
});
Just a small change to make it local to that parent is all you need, otherwise all the .slide_up elements will slide
$(".slide_toggle").hover(function () {
$(".slide_up", this).slideToggle("fast");
});
kindly take a look at my HTML code below:
<div class="accordion">
<ul>
<li class="box1">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box2">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box3">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
</ul>
</div>
Basically it's an accordion powered by a jQuery plugin. It has 3 boxes and depending on which box the user is hovering on, I wish to have the inner divs (normal, expanded, hidden) shown or hidden. Here are the scenarios:
On default, all div.normal will be shown by default, div.expanded and div.hidden will be hidden.
When user hovers on li.box1 for example, its div.expanded will be shown and div.normal and div.hidden will be hidden. For li.box2 and li.box3 then however, only div.hidden will be shown respectively, the rest of the divs will be hidden.
I have begun with the code but I don't think it's going anywhere. (I am a designer, you see.)
It sounds complicated but I know it can be easily done via jQuery, to anyone who can help, I'd really appreciate it.
UPDATE:
Here's what I've done so far.
$(document).ready(function () {
$(".accordion li").hover(function () {
$(this).siblings().children(".normal").hide();
$(this).siblings()..children(".hidden").delay(700).show();
$(this).children(".expanded").delay(700).show();
}, function () {
$(this).siblings().children(".normal").delay(700).fadeIn("fast");
$(this).siblings().children(".hidden").fadeOut("fast");
$(this).children(".expanded").fadeOut("fast");
});
});
You can initially hide divs by using style='display:none'
for hover event;
$("li.box1").hover(function(){
$(this).find('.expanded').show();
$(this).find('.hidden').show();
$(this).find('.normal').hide();
});
$(document).ready(function(){
$('.expanded').hide();
$('.box1').hover(function(){
$('.expanded').show();
});
});
This is how you can hide and show DOM elements in jQuery. Please get that set according to the way you want it to be.