I want to hide the text First Text only, using (opacity:0) when I mouse over the topblock.
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
But I When i use following jQuery code i am getting child DIV text also First Text Inner Text
$(".topblock").on("mouseenter",function(){
console.log($(this).text());
$(this).css({"opacity":"0"})
}).on("mouseleave",function(){
});
To do what you require without amending the HTML structure will be exceptionally difficult as you would need to amend the textNode holding the First text value directly.
Instead it would be far simpler to just amend your HTML to wrap that text in another element, such as a span, and perform the operations on that element. Try this:
<div class="topblock">
<span>First Text</span>
<div class="block">
Inner Text
</div>
</div>
$(".topblock").on("hover",function(){
$(this).find('span').toggle();
});
You can't just hide a part of a block. You can put First text in a span and hide the span when your mouse enter the topblock block
Impossible to do using opacity, but you could accomplish it by setting the color to match the background color on hover.
Here's how to achieve the effect while hovering .topblock except when hovering its .block child. Note the use of CSS !important:
$('.topblock').hover(
function() {
$(this).addClass('white');
},
function() {
$(this).removeClass('white');
});
$('.block').hover(
function() {
$('.topblock').addClass('black');
},
function() {
$('.topblock').removeClass('black');
});
.topblock .block, .black {
color: black !important;
}
.white {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
Related
I'm trying to make a toggle which works, but every element I click on creates a stack of these showed elements. Instead I'm trying to hide everything and display only element that I clicked on. Now I can only hide it when I click on the same element twice, which is not what I want. I want to click on one and hide previous ones that were showing.
.totalpoll-choice-image-2 is a bunch of images that always has to be shown. They are what the user clicks on to display hidden description under each image. That description shows up when I click on .totalpoll-choice-image-2. There are 5 images with that class. The next image I click on, I want to hide the previous description box.
My code:
jQuery(document).ready(function() {
var element = document.getElementsByClassName("totalpoll-choice-image-2");
var elements = Array.prototype.slice.call(Array.from( element ) );
console.log(elements);
jQuery(element).each(function(item) {
jQuery(this).unbind('click').click(function(e) {
e.stopPropagation();
var id = jQuery(this).attr("data-id");
console.log(this);
//jQuery("#" + id).css({"display": 'block !important'});
//document.getElementById(id).style.setProperty( 'display', 'block', 'important' );
var descriptionContainer = document.getElementById(id);
var thiss = jQuery(this);
console.log(thiss);
console.log(jQuery(descriptionContainer).not(thiss).hide());
jQuery(descriptionContainer).toggleClass("show");
});
})
})
You can attach event handlers to a group of DOM elements at once with jQuery. So in this case, mixing vanilla JS with jQuery isn't doing you any favors - though it is possible.
I threw together this little example of what it sounds like you're going for.
The script itself is very simple (shown below). The classes and IDs are different, but the idea should be the same:
// Assign click handlers to all items at once
$('.img').click(function(e){
// Turn off all the texts
$('.stuff').hide();
// Show the one you want
$('#' + $(e.target).data('id')).show();
})
https://codepen.io/meltingchocolate/pen/NyzKMp
You may also note that I extracted the ID from the data-id attribute using the .data() method, and attached the event listener with the .click() method. This is the typical way to apply event handlers across a group of jQuery objects.
From what I understood based on your comments you want to show only description of image that has been clicked.
Here is my solution
$('.container').on('click', 'img', function() {
$(this).closest('.container').find('.image-description').addClass('hidden');
$(this).siblings('p').removeClass('hidden');
});
https://jsfiddle.net/rtsj6r41/
Also please mind your jquery version, because unbind() is deprecated since 3.0
You can use event delegation so that you only add your event handler once to the parent of your images. This is usually the best method for keeping work the browser has to do down. Adding and removing classes is a clean method for show and hide, because you can see what is happening by looking at your html along with other benefits like being easily able to check if an item is visible with .hasClass().
jsfiddle: https://jsfiddle.net/0yL5zuab/17/
EXAMPLE HTML
< div class="main" >
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="clear">
</div>
</div>
EXAMPLE CSS
.image-parent{
height: 100px;
width: 200px;
float: left;
margin: 5px;
}
.image-parent .image{
background: blue;
height: 50%;
width: 100%;
}
.image-descr{
display: none;
height: 50%;
width: 100%;
}
.show-descr{
display: block;
}
.clear{
clear: both;
}
EXAMPLE JQUERY
$(".main").on("click", ".image-parent", ShowDescription);
function ShowDescription(e) {
var $parent = $(e.target).parent(".image-parent");
var $desc = $parent.find(".image-descr");
$(".image-descr").removeClass("show-descr");
$desc.addClass("show-descr");
}
I have a series of div's that get loaded dynamically. There ID is set when the page loads, and they all have the same class of "pp-post". When the user hovers over an item with class="pp-post" the 'p' items within that become visible.
I want to add a different animation for each of these 'p' tags when they become visible.
I have minimal experience with JQuery so I am wondering how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags.
As for the animations not sure yet what to use but it could be JQuery animations or maybe use animations.css and add a class to the p tags when visible.
HTML:
<div id="{post_id}" class="pp-post">
<div id="{post_id}" class="pp-post-item">
<p id="{post_id}" class="pp-post-title"></p>
<p id="{post_id}" class="pp-arrow-down"></p>
</div>
</div>
CSS:
.pp-post-title {
visibility: hidden;
}
.pp-arrow-down {
visibility: hidden;
}
.pp-post-item:hover > p {
visibility: visible;
}
how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags
You can use $(this) to get the hovered pp-post.
The code will look like
$('.pp-post').hover(function(){
$(this).animate({
//animation code
});
});
To make p tag visible,
$('pp-post').hover(function(){
$(this).find('p').animate({
//animation code
});
});
Instead of animation function, you can also use certain specific functions like fadeIn
Sample snippet
$(document).ready(function() {
$('.pp-post').hover(function() {
$(this).find('p').fadeIn(2000);
});
});
.pp-post p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
I am wanting to add a red asterisk for my required fields. So far I have tried using this:
.required-field::before {
content: "*";
color: red;
float: right;
}
<div class="required-field">Issued By:</div>
<input type="text" id="issuedBy">
But the problem is it keeps putting the asterisk too far right. I want it to be right next to the text "Status:" and "Issued By:". I tried removing the float attribute, but it then places the red asterisk in front of the text.
Rather than ::before use ::after and remove the float: right.
::before places a pseudoelement before the element you're selecting. ::after will place it after, so rather than putting the asterisk before the element you want and moving it with a float/position you can just place it after naturally.
The reason the asterisk was moved too far to the right is because floating moves the element to the right side of the parent container (not always the parent element, let me know if you want me to elaborate). So by floating right you were telling it to move to the far right of the label container which means just to the left of the text boxes, and not to the right of the label text.
https://jsfiddle.net/h4depmdf/1/
.required-field::after {
content: "*";
color: red;
}
Hey you are floating the asterisk to right
instead use
.required-field::after {
content: "*";
color: red;
margin-left:2px
}
You are using pseudo ::before selector which is placing the content before the element. Use pseudo ::after to place it after the element.
.required-field::before {
content: "*";
color: red;
}
<html>
<form id="nonUsSafety" method="post">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Status:<span class="required-field"></span></div>
<div class="divTableCell"><input type="text" id="statusNonUs"></div>
</div>
<div class="divTableRow">
<div class="divTableCell">Issued By:<span class="required-field"></span></div>
<div class="divTableCell"><input type="text" id="issuedBy"></div>
</div>
</div>
</div>
</form>
</html>
i need help getting this to work, tried everything google had to offer.. but still stuck. what i need it to do is load the value of (div id="availablecredits") to (div id="beta") on click. can any body help me out?
onclick="javascript:document.getElementById('beta').value=(javascript:document.getElementById('availablecredits').value)"
i also tried onclick="javascript:document.getElementById('beta').value=('#availablecredits')"
The property value is common for input elements like <input>, <select>, <textarea> and <button>
I think what you want is to copy a content of a <div> element to another div. If it's the case, use innerHTML instead of value.
Here is a snippet, just click on the gray area.
#div-two {
min-height: 20px;
background: #CCC;
}
<div id="div-one">
Hello this is #div-one
</div>
<div id="div-two" onclick="document.getElementById('div-two').innerHTML=document.getElementById('div-one').innerHTML"></div>
SNIPPET #2
You've defined a third <div> which you use as trigger but you can't click it if it's not visible, because it's height is 0. Specify some text inside it, then it's visible and the JS part work. Take a look at the snippet.
#getCredits {
background: #CCC;
}
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits" onclick="document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML">Click here to get available credits</div>
SNIPPET #3 - jQuery
$('#getCredits').click(function() {
$("#beta").html($('#availablecredits').html());
});;
#getCredits {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
Simple javascript function, change the ids in the function call to those of the elements in question.
<script>
function set_value( src,tgt ){
document.getElementById( tgt ).innerHTML=document.getElementById( src ).innerHTML;
}
</script>
<style>.p5{ display:block; padding:1rem; margin:1rem; border:1px solid black;}</style>
<div class='p5' id='src_div' onclick="set_value('src_div','tgt_div')">Weebles wobble but they don't fall down!</div>
<div class='p5' id='tgt_div'></div>
Or you can use a link to set the value
you should try to avoid writing inline event.try this:
<style>
#getCredits {
background: #CCC;
}
</style>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
<script>
document.getElementById('getCredits').addEventListener("click",function(){
document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML;
});
</script>
Why inline css and javascript are bad:http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
The .val() method is sometimes useful:
var input = $("#Input").val();
Need an advanced javascript toggle function.
(I have no experience with writing my own js and hope someone can help me).
When clicking on an img then make an other div from height=0 to height=auto (animated).
I have duplicated the code so the toggle need to show - hide only the childs/parent div and not troggle all divs with the 'i-more' class.
I made a fiddle to show what I want to do:
EXAMPLE IN FIDDLE HERE >
HTML:
<div class="i-holder">
<div class="i-left">
<img class="i-one" src="http://placehold.it/200x120.jpg" />
<div class="i-more">
<img src="http://placehold.it/200x120.jpg" />
<img src="http://placehold.it/200x120.jpg" />
<img src="http://placehold.it/200x120.jpg" />
</div>
</div>
<div class="i-right">
<h2>Header here</h2>
<p>Text here text here text here text here text here text here text here...</p>
<img class="i-btn-more" src="http://placehold.it/40x30.jpg" alt="read more" />
<div class="i-more">
<p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
<p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
Show less
</div>
</div>
<div class="clear"></div>
<div>
<h2>More stuff like above here...</h2>
<p>A duplicate from above.</p>
<p>when click on the i-btn-more only that text and thumb will be visible and not all divs with that same class.</p>
</div>
</div>
CSS:
.i-more{height:0; overflow:hidden;}
.i-holder{width:600px; margin:20px; position:relative;}
.i-left img{display:block; margin-bottom:10px;}
.i-left{float:left; width:200px; background:#fc1; min-height:130px; }
.i-right{float:right; width:320px; padding:0 50px 10px 10px; background:#6d1; min-height:130px; }
.i-btn-more{position:absolute; cursor:pointer; margin:-40px 0 0 330px;}
.i-more{clear:both;}
.clear{clear:both;}
Have your styles in a classes, for example to toggle display:
.shown{
display:block;
}
.hidden{
display:none;
}
Then you just have to find what element you want with a jQuery selector.
So:
$('.i-btn-more').click(function(){
$('.classToHide').toggleClass('shown').toggleClass('hidden');
});
Make sure it starts with either the .show class if it is showing or the .hidden class if it is hidden by default. Then the toggleClass function will turn the class on and off; and therefore, the styling.
To select somethings and not certain of those something, use the jQuery .not() function to filter a selector. For example $('.more').not('p').toggleClass('hidden'); will toggle the class hidden for all things with the class .more except <p> paragraphs.
$('.i-btn-more, .i-btn-less').on('click', function (e) {
e.preventDefault();
$(this).parents('.i-holder').find('.i-more').toggleClass('shown hidden');
});
or this code:
;(function() {
'use strict';
$(function() {
var $containers = $('.i-holder');
$containers.each(function() {
var $container = $(this),
$more = $container.find('.i-more'),
$handlers = $container.find('.i-btn-more, .i-btn-less');
$handlers.on('click', function() {
$more.toggleClass('shown hidden');
e.preventDefault();
});
});
});
})(jQuery);