I have a lots of articles that have 1, 2, 3 or 4 pictures. On mobile I created a carousel. All images all on the same line and I have a count that is 0. And when I press on the right button(for example) that count it will be -100 and all images will have a left: -100 and so on. The problem is that, let's say, I press on the button from one article that count will be -100. but after I go to another article and if I press again the count is not -100 and is -200. How can I reset that count when I change the article. The code is something like:
var c = 0;
$('.plus').on('click', function(){
c += 100
$(this).siblings('.num').text(c)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
<div class="minus">Minu</div>
<div class="plus">Plus
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu2</div>
<div class="plus">Plus2
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu3</div>
<div class="plus">Plus3
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu4</div>
<div class="plus">Plus4
</div><div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu5</div>
<div class="plus">Plus5
</div><div class="num">0</div>
</div>
Here's what I cooked up for you.
$('.plus').on('click', function(){
c = Number($(this).siblings('.num').text()) + 100;
$(this).siblings('.num').text(c)
});
$('.minus').on('click', function(){
c = Number($(this).siblings('.num').text()) - 100;
$(this).siblings('.num').text(c)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
<div class="minus">Minu</div>
<div class="plus">Plus</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu2</div>
<div class="plus">Plus2</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu3</div>
<div class="plus">Plus3</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu4</div>
<div class="plus">Plus4</div>
<div class="num">0</div>
</div>
<div class="article">
<div class="minus">Minu5</div>
<div class="plus">Plus5</div>
<div class="num">0</div>
</div>
The Plus button will add to the total displayed for the current article and Minus will subtract from it. Every article has it's own c value that can't be changed by a button from a different article.
I hope that's what you are looking for.
Add an on('click', function() {...}) handler to your "change the article" button. If this button is just another article's text, then give them all a common class and a common class onclick handler.
HTML...
<span class="article">Article 1</span>
<span class="article">Article 2</span>
<span class="article">Article 3</span>
jQuery...
$('.article').on('click', function() {
c = 0;
});
Related
I have many sets of div and I'm trying to copy the content of a specific span into another one and repeat the same operation for all my divs.
Here is my html code:
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
And my jQuery code is:
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere');
});
It almost works, right now what I get in my span.ContentGoesHere is: This is my content 1This is my content 2This is my content 3 - and it's the same content for all but the content needs to be specific to each div.item.
Thank you for your help.
Try The code below
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere')
.clone(true,true).contents()
.appendTo($(this).find('span.ContentGoesHere'));
});
To See The demo in jsFiddle
Click here to see Demo In JsFiddle
Try the code bellow.
$("div.item").each(function(i) {
var content = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(content);
});
If you type your function like this:
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
Then the end result will looks like this:
This is my content 1
This is my content 1
This is my content 2
This is my content 2
This is my content 3
This is my content 3
See snippet for the working code.
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
See it working
Your way
$("div.item").each(function(i) {
var targetElement = $(this).find('span.ContentGoesHere');
var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents()
sourceHtml.appendTo(targetElement);
});
Simpler way
$("div.item").each(function(i) {
var contents = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(contents);
});
In your case you need find the source and target both by $(this).find()
Just replace to .appendTo($(this).find('span.ContentGoesHere')); into your JS code and I hope it will be work.
Consider the following HTML:
<div id="members" class="main">
<section class="top">
<!-- Other Content -->
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
</div>
</div>
</div>
</div>
</section>
</div>
Is there a way in JavaScript or jQuery that I can find out the amount of pixels between the start of the #members element and the start of the .members-head element?
offset().top gives you the top position of elements.
var distance = $('.members-head').offset().top - $('#members').offset().top;
alert("Distance is : " + distance)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="members" class="main">
<section class="top">
Other Content
</section>
<section class="listing">
<div class="holder container">
<div class="row">
<div class="members-main col-sm-12">
<div class="members-head row">
fdgfdgfdgdfgdfs
</div>
</div>
</div>
</div>
</section>
</div>
Try
$('.members-head').offset().top - $('#members').offset().top
Jquery offset
If you have multiple .members-head elements inside the #members one (as I suspect), you could try $('.members-head:first'), or loop through them with .each and do $(this).offset().top - $('#members').offset().top
try this
you will get.
$('#members').offset().top - $('.members-head').offset().top
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
this is my javascript:
$(document).ready(function(){
$('.lroom ,.rroom').click(function(){
$(this).toggleClass('ROOMon');
});
$('.AC').click(function(){
$(this).toggleClass('ACon');
});
});
this my html:
<div id="main">
<div class="side">
<div class="rroom">
<div class="AC right"></div>
</div>
<div class="rroom">
<div class="AC right"></div>
</div>
<div class="rroom">
<div class="AC right"></div>
</div>
</div>
<div class="side">
<div class="lroom">
<div class="AC left"></div>
</div>
<div class="lroom">
<div class="AC left"></div>
</div>
</div>
</div>
when I press on AC div , it takes affect on the AC and on the lroom too.
I want that this will affect only the specific AC that I press.
ROOMon and ACon are calsses that changes the background-color
thanks
It's difficult to know exactly what you are looking for from your question but this might help:
Here is a fiddle: http://jsfiddle.net/mb8zksaa/
<div class="myDiv"> This is div 1 </div>
<div class="myDiv"> This is div 2 </div>
$(".myDiv").on("click", function(){
alert("Contents: " + $(this).html()) ;
});
Here's two divs, whatever one you click on will display the contents of that div on the screen
This question already has answers here:
Callback of .animate() gets called twice jquery
(2 answers)
Closed 8 years ago.
I'm creating a multi-tabbed accordion using jQuery. The "Headline 1" panel works fine but on "Headline 2" the panel runs the SlideDown() method twice. Another small problem I noticed is there being some delay in between when I click on a button/link and when the panel slides down.
You can take a look at the jsfiddle here to test and see the problem:
http://jsfiddle.net/3VzTj/1/
jQuery:
$(document).ready(function() {
var class_link, class_div, content_div;
var all_panels = $('article > div.row').not(':first-child');
$(all_panels).hide();
$('div.buttons a').click(function() {
class_link = $(this).attr('class');
class_div = class_link.match(/[^-]+$/);
content_div = $(this).closest('article').find('div.' + class_div).parent();
if ($(content_div).is(':visible')) {
$(all_panels).slideUp();
} else {
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
}
return false;
});
});
HTML:
<section class="grid-container">
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 1</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
<article>
<div class="row clearfix">
<div class="column half">
<h2>Headline 2</h2>
</div>
<div class="column opposite half buttons">
<a class="button-content1" href="#">Content 1</a>
<a class="button-content2" href="#">Content 2</a>
</div>
</div>
<div class="row clearfix">
<div class="column full content1">
<h1>Content 1</h1>
</div>
</div>
<div class="row clearfix">
<div class="column full content2">
<h1>Content 2</h1>
</div>
</div>
</article>
</section>
// replace
$(all_panels).slideUp(function() {
$(content_div).hide().slideDown();
});
//with
$(all_panels).slideUp().promise().done(function() {
$(content_div).hide().slideDown();
});