Trying to use these jQuery methods to show a description on hover of the image it describes.... It will sort of work if I dont set description display to none, in which case the doc starts with all descriptions showing, but then will show and hide them (all of them) as I mouseover and mouseout. But I want the descriptions to be hidden until the first mouseover. I'm also having an issue matching the image/description hovers to each instance. I am new at OOP, but I think that would come in handy here. Anyway, any tips are appreciated!
Here's my code:
$('.image').mouseover(function() {
$('.description').show();
})
$('.image').mouseout(function() {
$('.description').hide();
})
.col-lg-3 h2 {
font-size: 1.1em;
color: black;
font-family: 'Arial';
margin-left: .1em;
font-weight: 500;
display: none;
}
.col-lg-3 p {
font-size: .9em;
margin-left: .2em;
margin-top: -.3em;
font-weight: 400;
display: none;
<div class="col-lg-3 project1">
<a class = "image" href="" target="_blank"> <img width="100%" height="100%" src="" alt=""></a>
<div class = "description">
<h2> </h2>
<p> </p>
</div>
If I want this to only work on the instances of image/description pairs, I should probably add some .this stuff too, no?
Don't use mouseout and mouseover. There are lots of things which you've to consider when you are using these functions.. I will suggest you to use hover function..
$('.image').hover(function() { $('.description').show(); }, function() { $('.description').hide(); });
1st parameter is the function which executes on mouseover and 2nd function executes at mouse out.
checkout below solution
JS PART: change jQuery selector
$('.image').mouseover(function() {
$('.description *', $(this).parent()).show();
})
$('.image').mouseout(function() {
$('.description *', $(this).parent()).hide();
})
CSS PART: no change
.col-lg-3 h2 {
font-size: 1.1em;
color: black;
font-family: 'Arial';
margin-left: .1em;
font-weight: 500;
display: none;
}
.col-lg-3 p {
font-size: .9em;
margin-left: .2em;
margin-top: -.3em;
font-weight: 400;
display: none;
}
HTML PART: add proper ending </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 ye">
<a class = "image" href="targethere" target="_blank"> <img width="10%" height="10%" src="http://srdtu.org/assets/img/events/quiz-.jpg.jpg" alt="quiz"></a>
<div class = "description">
<h2> quiz </h2>
<p> a quote guessing game </p>
</div>
</div>
Related
My assignment is to show and hide a <div> using DOM. There are multiple h2 but only one has an id and I am not allowed to add id's or classes. How can I make only one div show and hide. The id for the h2 with the div I need to show is info.
Here is a snippet of my code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 20px;
padding: 10px;
}
section {
margin-bottom: 50px;
}
footer p {
border-top: 1px solid #000;
padding: 10px;
}
#info div:first-of-type {
display: none;
}
#info div.more {
display: block;
}
#info h2 {
cursor: pointer;
}
<body>
<section>
<figure>
<img s src="https://media.swansonvitamins.com/images/items/250/JR187.png" alt="Photo of Curcumin 95">
</figure>
<ul>
<li>Curcumin 95 protects against oxidative damage</li>
<li>Delivers 95% curcuminoids</li>
</ul>
</section>
<section id="info">
<h2>Show More...</h2>
<div>
<p>Other Ingredients: Cellulose, magnesium stearate (vegetable source) and silicon dioxide. Capsule consists of hydroxypropylmethylcellulose.
</p>
<p>Usage: Take 1 capsule per day with food or as directed by your qualified healthcare professional</p>
<p>Note: ...</p>
</div>
<h2>Our Guarantee</h2>
<div>
<p>Our lab evaluates...</p>
</div>
var h2List = document.querySelectorAll('#info h2')
h2List.forEach(h2 => {
h2.addEventListener('click', () => h2.nextSibling.classList.toggle('more'))
})
I think this is you want
I think...u have to make onclick event in h2 tag... then include script code
$(this).css('display' , 'block')
I have a wordpress site with this image boxes
each box is an event, this events have tags ,also reflectes in a class, what i need to do is all the elements with an specific class ("free" in this case) to have a little non clickable button or a text with a background that says "Free" in the upper corner of the box, no, this boxes are generated with a plugin and its just a shortcode, so i cannot directly change the html, so i tried doing it with just css and javascript
This is a single Event with the tag (named "tag-gratis")
<article id="post-9072" class="regular post-9072 post type-post status-
publish format-standard has-post-thumbnail category-eventos185 tag-
culturales tag-fuera-del-barrio tag-gratis">
<div class="inner-wrap animated">
<div class="post-content">
<div class="content-inner">
<span
class="post-featured-img" style="background-image:
url(https://vivirenuevacba.com/wp-content/uploads/2019/01/genaro_perez_7-
800x589.jpg);"></span>
<div class="article-content-
wrap">
<span class="meta-
category"><a class="eventos185"
href="https://vivirenuevacba.com/category/eventos185/">EVENTOS</a></span>
<div class="post-
header">
<h3
class="title">
<a href="https://vivirenuevacba.com/museo-genaro-perez/">
Museo Genaro Pérez
</a>
</h3>
<span
class="meta-author"><span>By</span> <a
href="https://vivirenuevacba.com/author/Vics/" title="Entradas de Vics"
rel="author">Vics</a></span> <span class="meta-category">| EVENTOS</span>
</div><!--/post-header-->
</div><!--article-content-wrap-
->
</div><!--/content-inner-->
</div><!--/post-content-->
</div><!--/inner-wrap-->
</article><!--/article-->
Here is a simple button that i did with css
.button {
margin-top: 20px;
line-height: 60px;
font-weight: bold;
padding: 0 40px;
background: salmon;
border: none;
}
and here is my javascript
document.addEventListener('DOMContentLoaded', function() {
$(function() {
$('.tag-gratis').each(function() {
var button = document.createElement("button");
button.innerHTML = "GRATIS";
var body = document.getElementsByClassName(".tag-gratis");
body.appendChild(button);
});
});
});
</script>
Now the button doesnt appear and i just get a
"Uncaught TypeError: body.appendChild is not a function"
I don't think there is any need to use JavaScript here. A simple pseudo element would suffice.
.tag-gratis {
position: relative;
}
.tag-gratis img {
width: 100%;
}
.tag-gratis::after {
content: "FREE";
position: absolute;
top: 20px;
right: 20px;
padding: 5px 10px;
background: salmon;
color: white;
}
<article class="tag-gratis">
<img src="//placehold.it/300x150">
</article>
Since document.getElementsByClassName is a collection you need to pass the index to get th element
Try this
document.getElementsByClassName(".tag-gratis")
I asked a similar question for iOS NSAttributedString but since it's not possible with that, I am looking for a way to achieve this via HTML, CSS and javascript if needed.
I know CSS has "drop cap" using first-letter. Example: https://codepen.io/tutsplus/pen/GZxjEM
However, I need to do it for entire words and not just first-letter.
In the following picture, notice how "Strength" is the biggest and then "is not something" and "you have, rather" share the same line as "Strength".
NOTE: My problem isn't how to format the first word - it's how to have 2 lines share the first line. Notice how "Strength" is the biggest and then "is not something" and "you have, rather" share the same line as "Strength". How to make them share the same line? Similar to how drop-caps lets you have multiple lines be shared with the first letter.
I need to achieve a similar look with HTML, CSS and JS. If drop cap is not possible for this, is there any other way I can achieve this?
NOTE: Since my text will be variable, I can't use an image/photoshop etc.
EDIT: From suggestions, CSS Flexbox might be able to achieve this. I need to figure out how to place my words in the boxes:
<div>
<div style="float: left; font-size: 4em; background-color:grey;">
STRENGTH
</div>
<div style="float: left; padding-left: 10px; background-color:yellow;">
<div>
<span style="font-size: 2em;">is not</span><span style="font-size: 1em;"> something</span>
</div>
<div>
you have, rather
</div>
</div>
</div>
<div style="clear: both; font-size: 2em;">
something that reveals itself
</div>
<div style="font-size: 4em;">
when you need it.
</div>
<div style="font-size: 1em;">
#myHASHTAG
</div>
Here is a structure you can use, with Flexbox
.inner {
display: flex;
align-items: flex-end;
}
.inner > div:nth-child(1) {
font-size: 60px;
text-transform: uppercase;
}
.inner2 {
padding: 0 0 15px 10px;
}
.inner2 div:nth-child(-n+2) {
display: inline-block;
}
.inner2 > div:nth-child(1) {
font-size: 20px;
text-transform: uppercase;
}
.wrapper > div:nth-child(2) {
font-size: 28px;
text-transform: uppercase;
}
.wrapper > div:nth-child(3) {
font-size: 50px;
text-transform: uppercase;
}
<div class="wrapper">
<div class="inner">
<div>Strength</div>
<div class="inner2">
<div>is not</div>
<div>something</div>
<div>you have, rather</div>
</div>
</div>
<div>something that reveals itself</div>
<div>when you need it</div>
</div>
Try this:
<div>
<div style="float: left; width: 20%;">
Big Text
</div>
<div style="float: left; width: 70%;">
<div>
small text first line
</div>
<div>
small tex second line
</div>
</div>
</div>
<div style="clear: both;">
the rest of the text
</div>
I write an example for you and try to make it like the photo u share, hope it can be usefull for you :
HTML :
<span class="bigText">Strength </span>
<span class="mediumText">is not
<span class="smallText">something </span>
</span>
<span class="subLine">you have, rather</span>
css :
.bigText{
font-size:80px;
text-transform: uppercase;// use capitalize for make first word uppercase
}
.mediumText{
font-size:30px;
text-transform: uppercase;
position: absolute;
top:35px
}
.smallText{
font-size:20px;
}
.subLine{
font-size:20px;
}
https://jsfiddle.net/emilvr/6o2fpf9t/1/
I am trying to make a toggle like menu for showing different pieces of information, however my attempt is not working.
What I am looking for is if the user clicks on any of the titles (A, B or C) the description will fadeIn. That is why I tried using the closest() method to get the description associated with the title. Then when the user clicks on a different title, for the current one to close and the other open.
Does anyone see what I am doing wrong?
$(".service-list-title").on("click", function(event) {
$(this).closest('.service-list-description').fadeIn(300).siblings().closest('.service-list-description').fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The issue with your code is that you're using closest(), which looks for parent elements, instead of next() or siblings() which searches for elements at the same level.
However you can make the logic much simpler by attaching the event handler to the .service-list element and using find() to get the required element to fadeToggle(). You can then select all the other .service-list-description elements and call fadeOut() to hide them. Try this:
$(".service-list").on("click", function(event) {
var $target = $(this).find('.service-list-description').fadeToggle(300);
$('.service-list-description').not($target).fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The function below should do what you ask for:
$(".service-list-title").on("click", function(event) {
$('.service-list-description').fadeOut(300); // Close any that's open
$(this).siblings('.service-list-description').fadeIn(300); // Open new
});
Fiddle: https://jsfiddle.net/beekvang/oro9ue3k/
i have some issue i'm new in javascript and can't handle with multilevel nested blocks: I need to open nested block using toogle and mootools. I found some examples like accorodion, but i need toogle effect on nested blocks.
Can you help me?
Thanks.
1) here example that i found on jquery, i need the same but on mootools
$('.nested-accordion').find('.comment').slideUp();
$('.nested-accordion').find('h3').click(function(){
$(this).next('.comment').slideToggle(100);
$(this).toggleClass('selected');
});
* {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 1em;
font-family: Calibri, Arial, sans-serif;
}
.container {
margin: 0 auto;
width: 80%;
}
.nested-accordion {
margin-top: 0.5em;
cursor: pointer;
}
.nested-accordion h3 {
padding: 0 0.5em;
}
.nested-accordion .comment {
line-height: 1.5;
padding: 0.5em;
}
.nested-accordion h3 {
color: #47a3da;
}
.nested-accordion h3:before {
content: "+";
padding-right: 0.25em;
color: #becbd2;
font-size: 1.5em;
font-weight: 500;
font-family: "Lucida Console", Monaco, monospace;
position: relative;
right: 0;
}
.nested-accordion h3.selected {
background: #47a3da;
color: #fff;
}
.nested-accordion h3.selected:before {
content: "-";
}
.nested-accordion .comment {
color: #768e9d;
border: 0.063em solid #47a3da;
border-top: none;
}
.nested-accordion a {
text-decoration: none;
color: #47a3da;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a comment
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a another content which is really long and pointless but keeps on going and it technically a run-on sentence but here is a link to google to distract you -> <a href='http://google.com' target='_blank'>link</a>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
One Mootools function I like is Reveal.
This can reveal up/down or left/right.
element.toggle() will snap to the opposite state (if open, will close without animating, etc). Otherwise, element.reveal() or element.dissolve() will open / close.
In your case, you would want something like:
var container = document.getElement('.container');
Array.each(container.getElements('.comment'), function(comment){
comment.set('reveal', {duration: 250}).toggle();
if(comment.getPrevious('h3')){
comment.getPrevious('h3').addEvent('click', function(e){
var comment = e.target.getNext('.comment');
if(comment.getStyle('display')==='block'){
e.target.getNext('.comment').dissolve();
}else{
e.target.getNext('.comment').reveal();
}
});
}
});
I am using Mootools long hand methods here (avoiding dollar) so that you can play nice with other frameworks (like jQuery).
The Mootools docs are pretty good, but may take some trial and error ;)
Mootools Reveal
Here is an example with your HTML / CSS:
JSFiddle Example
I hope this helps!