I have this code (see jsfiddle below)
<script type='text/javascript'>
https://jsfiddle.net/mA8hj/ and would like to know how to edit the javascript in a way that by clicking the links in the fiddle, the text displayed fades slowly to another text when clicking another link. (Something like you'd use in CSS by adding -ms-transition: .2s;).
Thanks!
Try to pass "slow"/"fast"/"medium"/any delay in milliseconds as a parameter to show,
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).stop().show("slow");
});
DEMO
Or by using .fadeIn()
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).css("opacity",0).stop().fadeIn("slow");
});
Use a CSS class and CSS transitions instead, and use jQuery only to add/remove this class .show:
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').removeClass("show");
$('#answer' + numb).addClass("show");
});
#answer,
#answer1,
#answer2,
#answer3,
#answer4 {
position: absolute;
opacity: 0;
transition-duration: 0.4s;
}
#answer.show,
#answer1.show,
#answer2.show,
#answer3.show,
#answer4.show {
position: absolute;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
<div class="clear" class="question"></div>
<div id="answer1">1</div>
<div id="answer2">2</div>
<div id="answer3">3</div>
<div id="answer4">4</div>
<div class="new_member_box_display show" id="answer">Text will appear here when one of the tabs above is clicked</div>
https://jsfiddle.net/mA8hj/94/
Related
I have this link:
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg"></div>
I need to change background-image url from another class with data-url on hover event.
I try this right now but doesn't work:
var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');
jQuery('.wp-show-posts-inner').on('mouseover',function() {
jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});
});
This script get me this result:
element.style {
background-image: url((unknown));
}
i need this:
<div class="bg" style="background-image: url(http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg);"></div>
any advice? thanks
Your syntax is wrong for getting attr data-src, use this
var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');
jQuery('.wp-show-posts-inner').on('mouseover',function() {
jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});
});
jQuery('.wp-show-posts-inner').on('mouseleave',function() {
jQuery('.home-banner .bg').css({'background-image': "url()"});
});
.bg{height:100px;width:100px;}
.wp-show-posts-inner{height:100px;width:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-banner">
<div class="bg">
</div>
</div>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner (Hover on me)</div>
You code has three problem.
You should use selector before using .attr(). So use $(this).attr('data-src')
In end of second parameter of .css() there is additional ' that should removed
css background-image property should wrapped into url()
So you code should change to
$('.wp-show-posts-inner').hover(function() {
$('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});
$('.wp-show-posts-inner').hover(function() {
$('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});
.bg {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner</div>
<div class="home-banner">
<div class="bg">bg</div>
</div>
This is my JS
$('.normal-box').click(function(){
//unique row id
var id = $(this).data('row-id');
//its index according to the content array
var index = $(this).data('index');
//which card does this row belong to
var card_name = $(this).data('id');
var card;
console.log(id) //el id de noten es de por si "link last_updated" concatenado
switch(card_name){
case "noten" : card = Unidos.CardManager.getCard(card_name); break;
case "nachricht" : card = Unidos.CardManager.getCard(card_name); break;
default : return false;
}
card.resetPriorityWhenClickedOn(id);
});
My HTML
<script id="nachricht_card_row_template" type="text/html">
<div class="normal-box" data-row-id="{{id}}">
<div class="img-box">
{{#if channel.image}}
<img src="{{channel.image}}" vspace="3">
{{/if}}
</div>
<div class="subtitle-box" id="nachrichten-subtitle-box">
<span class="options-title" id="title-text">{{channel.name}}</span>
</div>
<div class="side-text-box">
<span class="side-text">{{formatDate datetime}}</span>
</div>
<div class="small-text">
<div class="normal-text"><span class="text-formating">{{text}}</span></div>
</div>
</div>
</script>
My CSS
.normal-box{ /*Container of other tiny boxes*/
height: 70px;
border-bottom: 1px solid;
border-bottom-color: gainsboro;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s ease 0.3s;
}
.normal-box.show{
opacity: 1;
}
As you can see, I want to select the $('.normal-box) , but I´ve got another function which adds a class which is .normal-box show... With the code above I can only make the .normal-box elements work, not the .normal-box show... This is what I mean with the .normal-box show clases:
I have already tried this:
$('.normal-box, .normal-box show)
$('.normal-box, .show)
$('.normal-box.normal-box show)
$('.normal-box.show)
None of them work. Any help would be appreciated
Normally, $('.normal-box') will match any element which has a class normal-box unless the elements are added dynamically then you need to use event-delegation like this:
$(document).on('click', '.normal-box', function(){
//Your code here
});
I hope this will help.
Try this
$('.normal-box.show');
This jsfiddle example can explain more or less what I mean
Click here
This is my actual code
JS
loadMore : function(){
var limit = initial_rows+1; //initial_rows begin being 2
var number_of_rows_to_append = initial_rows+2; // 4
$card.css('height', $card.find('.title-box').height() + number_of_rows_to_append * 70); //update card height
for(var i = initial_rows; i<=limit; i++){
$(template(content[i])).appendTo($contentJQuery);
}
$contentJQuery.find('.normal-box').slice(-2).addClass('show');
initial_rows+=2;
}
},
CSS
.normal-box{ /*Container of other tiny boxes*/
height: 70px;
border-bottom: 1px solid;
border-bottom-color: gainsboro;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s ease 0.5s;
}
.normal-box.show{
opacity: 1;
}
HTML
<div class="card">
<div class="content">
<div class="normal-box">
</div>
<div class="normal-box">
</div>
<div class="normal-box">
</div>
<div class="normal-box">
</div>
</div>
</div>
Basically there is a function which creates the card and appends only 2 normal-boxes at the beginning(there opacity is set to 1 automatically). When loadMore() function is triggered 2 more rows have to be appended with the opacity transition as shown in the jsfiddle example(in my case the rows appear, in the jsfiddle they disappear). The transition consists in the card getting bigger(thats why card height gets updated) with a blank space, then the 2 last normal-boxes appear with transition
The problem is that in my case the last row appears without transition and the penultimate appears with transition, no idea why. Any help will be appreciated
Updated Fiddle:
Perhaps this is what you intended:
revised jsFiddle
$('.btn').on('click', function(){
$('li').each(function(){
var txt = $(this).text().slice(0,-2); //or .slice(-1) ?
$(this).text(txt).addClass('change');
});
});
I Want to show div on click with slideup effect using javascript(not jquery).
Here is my HTML code:-
<div class="title-box">show text</div>
<div class="box"><span class="activity-title">our regions bla bla</span></div>
Kindly advise me asap.
The question states that the solution needs to be done with pure JavaScript as opposed to jQuery, but it does not preclude the use of CSS. I would argue that CSS is the best approach because the slide effect is presentational.
See http://jsfiddle.net/L9s13nhf/
<html><head>
<style type="text/css">
#d {
height: 100px;
width: 100px;
border: 1px solid red;
margin-top: -200px;
transition: margin-top 2s;
}
#d.shown {
margin-top: 100px;
}
</style>
</head>
<body>
<button id="b">Toggle slide</button>
<div id="d">Weeeeeeee</div>
<script type="text/javascript">
var b = document.getElementById('b');
var d = document.getElementById('d');
b.addEventListener('click', function() {
d.classList.toggle('shown');
});
</script>
</body></html>
The basic algorithm is to add a class to the element you want to slide in/out whenever some button or link is clicked (I'd also argue that a button is more semantically appropriate here than an anchor tag which is more for linking web pages).
The CSS kicks in automatically and updates the margin-top of the sliding element to be visible on-screen. The transition property of the element tells the browser to animate the margin-top property for two seconds.
You can try below code:
Working Demo
document.getElementById('bar').onclick = (function()
{
var that, interval, step = 20,
id = document.getElementById('foo'),
handler = function()
{
that = that || this;
that.onclick = null;
id = document.getElementById('foo');
interval =setInterval (function()
{
id.style.top = (parseInt(id.style.top, 10) + step)+ 'px';
if (id.style.top === '0px' || id.style.top === '400px')
{
that.onclick = handler;
clearInterval(interval);
if (id.style.top === '400px')
{
id.style.display = 'none';
}
step *= -1;
}
else
{
id.style.display = 'block';
}
},100);
};
return handler;
}());
You can refer following below:
<div class="title-box">
show text
</div>
<div class="box" id="slidedown_demo" style="width:100px; height:80px; background:#ccc; text-align:center;">
<span class="activity-title">our regions bla bla</span>
</div>
I've a simple problem with jQuery, checkout this: http://jsfiddle.net/4Q5uQ/
How to fadeIn() the box after the fadeOut() effect is completed?
I think you want two things:
The fading <div>s should be in the same place so they don't move around.
You want to fade out the visible <div> and then fade in the other <div>.
The first can be done by wrapping the two <div>s in a relatively positioned <div> and then absolutely positioning the inner <div>s:
<div class="wrapper">
<div id="div_1" data="1" class="box">
test_1
</div>
<div id="div_2" data="2" class="box">
test_2
</div>
</div>
And:
div.wrapper {
position: relative;
}
div.box {
/* ... */
position: absolute;
top: 0;
left: 0;
right: 0;
}
The second is just a matter of adding :visible to your fadeOut selector:
$(".box:visible").fadeOut(1000, ...
Updated fiddle: http://jsfiddle.net/ambiguous/jAP2b/
Following code may be your need: http://jsfiddle.net/4Q5uQ/5/
$(document).ready(function() {
$("a").click(function() {
var fin = $(this).attr('fin');
var fout = $(this).attr('fout');
$("#div_" + fout).show();
$("#div_" + fin).hide();
$(".box[data=" + fout + "]").fadeOut(4000, function() {
$(".box[data=" + fin + "]").fadeIn(4000);
});
});
});