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.
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.
I want to make an eye which watches to mouse cursor. The pupil of eye should't leaving the "eye" border
I've created some sandbox, which shows example of HTML markup, but I don 't have a formula to make this animation works https://codesandbox.io/s/hardcore-butterfly-grwkz
Check this
i have to type any thing to post this
The base of our challenge consisted of HTML and CSS which constructed the Alien body.
Divs were used to create individual parts of the Alien including the monster, body, ears, mouth, tooth, and eye.
<div class="ufo">
<div class="monster" style="color: #7cb342">
<div class="body">
<div class="ear"></div>
<div class="ear"></div>
<div class="vampi-mouth">
<div class="vampi-tooth"></div>
</div>
</div>
<div class="eye-lid">
<div class="eyes">
<div class="eye"></div>
</div>
</div>
</div>
</div>
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
I currently have a layout made of multiple rows, with 4 columns each. Each column contains a "card" displaying some basic information.
When the user clicks on one of the cards, I want it to make a flip effect to show its back, which contains more detailed information, as well as animate the div to go above everything else, centered, and bigger so I can display a lot more text, and everything without breaking the layout (as a Bootstrap modal would display).
The flip effect is working, but I am now struggling with making the div kind of converting itself into a modal, a.k.a centering itself and zooming in, without scaling the text so I can fit in there more information.
Here is my HTML code:
<div class="row">
<div class="col s12 m3 center-align flip-container">
<div class="flipper">
<div class="front">
<div class="card-panel teal" style="position:relative;">
FRONT CARD TEXT
</div>
</div>
<div class="back">
BACK OF THE CARD WITH A LOT MORE TEXT, IMAGES AND STUFF
</div>
</div>
</div>
</div>
Any help is greatly appreciated !
Maybe you want check bootstrap, have modals. Else, you need a CSS that make look like modal and with jQuery only add or remove a class.
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");
});