Styjun

Why "Having chlorophyll without photosynthesis is actually very dangerous" and "like living with a bomb"?

How to format long polynomial?

Which country benefited the most from UN Security Council vetoes?

Why can't we play rap on piano?

Approximately how much travel time was saved by the opening of the Suez Canal in 1869?

Get value of a counter

Revoked SSL certificate

Important Resources for Dark Age Civilizations?

How is it possible to have an ability score that is less than 3?

Accidentally leaked the solution to an assignment, what to do now? (I'm the prof)

Two films in a tank, only one comes out with a development error – why?

Rock identification in KY

How can bays and straits be determined in a procedurally generated map?

What's the point of deactivating Num Lock on login screens?

Are astronomers waiting to see something in an image from a gravitational lens that they've already seen in an adjacent image?

What does the "remote control" for a QF-4 look like?

Are the number of citations and number of published articles the most important criteria for a tenure promotion?

A newer friend of my brother's gave him a load of baseball cards that are supposedly extremely valuable. Is this a scam?

Has there ever been an airliner design involving reducing generator load by installing solar panels?

I'm flying to France today and my passport expires in less than 2 months

Uncaught TypeError: 'set' on proxy: trap returned falsish for property Name

Was any UN Security Council vote triple-vetoed?

Do infinite dimensional systems make sense?

how to check a propriety using r studio

jquery .empty() working after two method calls only

How to manage a redirect request after a jQuery Ajax callHow to allow only numeric (0-9) in HTML inputbox using jQuery?Check if inputs are empty using jQuerySelecting and manipulating CSS pseudo-elements such as ::before and ::after using jQueryjQuery: Return data after ajax call successWhy does JavaScript only work after opening developer tools in IE once?How to make an AJAX call without jQuery?jQuery Text Resizing Plugin Only Applied to First Slide of a Bootstrap CarouselCannot display HTML stringLoad an img src as a background image for the Div it resides in with jQuery

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

1

I have written some jquery to, at a set interval, run a function that pulls the text from specifically styled divs and set the pulled text as the text for another div.

My issue is that the new text is being concatenated to the end of the old text that is supposed to be removed from the element beforehand.
This issue persists until the interval is run again, which following that occurrence only the intended text is shown.

Can you please help me show only the intended text.

Here is an example and my code

function captionUpdate() 
 //empty the div
 $('#myDiv').empty();
 // select the correct caption
 var caption = $('.wslide-slide').filter(function() 
 return $(this).css('display') === 'block'
 ).children().text();

 // put the caption into the div
 $('#myDiv').text(caption);
;

// check the webpage every half second
setInterval(function() 
 captionUpdate();
, 50);

// this is just for the snippet
let currentList = 0
$('#toggle').on('click', () => 
 currentList = (currentList + 1) % 3
 $('.wslide-slide').hide().eq(currentList).show()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Initial text</div>




<div class="wslide-content-inner">

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 1</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 2</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 3</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>


</div>
<p>
 <button id="toggle">Toggle lists</button>
</p>

javascript jquery html weebly

share|improve this question

edited Mar 21 at 23:41

A Webster

asked Mar 21 at 22:05

A WebsterA Webster

134

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  Replicating the issue in your snippet will get you a higher chance of someone being able to help you, rather than asking them to go to your website and try to dig to find where your logic is.
  
  – Taplar
  Mar 21 at 22:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried to add some screenshots but it was just confusing, since I am trying to interface with weeblys website builder I can't quite replicate that in the snippet. Also since the issue is specific to the jquery i wrote, the only logic they will need ( i assume) will be in the code I provided.
  
  – A Webster
  Mar 21 at 22:35
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Hi. I've added some sample HTML to your snippet but it all seems to work as expected. Could you please edit it to match your actual code?
  
  – Phil
  Mar 21 at 23:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hey @Phil , thanks for that addition to my snippet to make it useable. As per your instruction I have edited the snippet to make it match the code I have. Strangely enough, it seems to be working as intended... This leads me to deduce my jquery is not then the issue but instead, the way Weebly ( what im adding the jquery too) is giving me problems. Perhaps it's the method in which they change the slides. Thanks for the help.
  
  – A Webster
  Mar 21 at 23:44
  
  

  
  
  
  

add a comment | 

2

1

I have written some jquery to, at a set interval, run a function that pulls the text from specifically styled divs and set the pulled text as the text for another div.

My issue is that the new text is being concatenated to the end of the old text that is supposed to be removed from the element beforehand.
This issue persists until the interval is run again, which following that occurrence only the intended text is shown.

Can you please help me show only the intended text.

Here is an example and my code

function captionUpdate() 
 //empty the div
 $('#myDiv').empty();
 // select the correct caption
 var caption = $('.wslide-slide').filter(function() 
 return $(this).css('display') === 'block'
 ).children().text();

 // put the caption into the div
 $('#myDiv').text(caption);
;

// check the webpage every half second
setInterval(function() 
 captionUpdate();
, 50);

// this is just for the snippet
let currentList = 0
$('#toggle').on('click', () => 
 currentList = (currentList + 1) % 3
 $('.wslide-slide').hide().eq(currentList).show()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Initial text</div>




<div class="wslide-content-inner">

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 1</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 2</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 3</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>


</div>
<p>
 <button id="toggle">Toggle lists</button>
</p>

javascript jquery html weebly

share|improve this question

edited Mar 21 at 23:41

A Webster

asked Mar 21 at 22:05

A WebsterA Webster

134

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  Replicating the issue in your snippet will get you a higher chance of someone being able to help you, rather than asking them to go to your website and try to dig to find where your logic is.
  
  – Taplar
  Mar 21 at 22:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried to add some screenshots but it was just confusing, since I am trying to interface with weeblys website builder I can't quite replicate that in the snippet. Also since the issue is specific to the jquery i wrote, the only logic they will need ( i assume) will be in the code I provided.
  
  – A Webster
  Mar 21 at 22:35
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Hi. I've added some sample HTML to your snippet but it all seems to work as expected. Could you please edit it to match your actual code?
  
  – Phil
  Mar 21 at 23:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hey @Phil , thanks for that addition to my snippet to make it useable. As per your instruction I have edited the snippet to make it match the code I have. Strangely enough, it seems to be working as intended... This leads me to deduce my jquery is not then the issue but instead, the way Weebly ( what im adding the jquery too) is giving me problems. Perhaps it's the method in which they change the slides. Thanks for the help.
  
  – A Webster
  Mar 21 at 23:44
  
  

  
  
  
  

add a comment | 

I have written some jquery to, at a set interval, run a function that pulls the text from specifically styled divs and set the pulled text as the text for another div.

My issue is that the new text is being concatenated to the end of the old text that is supposed to be removed from the element beforehand.
This issue persists until the interval is run again, which following that occurrence only the intended text is shown.

Can you please help me show only the intended text.

Here is an example and my code

function captionUpdate() 
 //empty the div
 $('#myDiv').empty();
 // select the correct caption
 var caption = $('.wslide-slide').filter(function() 
 return $(this).css('display') === 'block'
 ).children().text();

 // put the caption into the div
 $('#myDiv').text(caption);
;

// check the webpage every half second
setInterval(function() 
 captionUpdate();
, 50);

// this is just for the snippet
let currentList = 0
$('#toggle').on('click', () => 
 currentList = (currentList + 1) % 3
 $('.wslide-slide').hide().eq(currentList).show()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Initial text</div>




<div class="wslide-content-inner">

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 1</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 2</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 3</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>


</div>
<p>
 <button id="toggle">Toggle lists</button>
</p>

javascript jquery html weebly

share|improve this question

edited Mar 21 at 23:41

A Webster

asked Mar 21 at 22:05

A WebsterA Webster

134

function captionUpdate() 
 //empty the div
 $('#myDiv').empty();
 // select the correct caption
 var caption = $('.wslide-slide').filter(function() 
 return $(this).css('display') === 'block'
 ).children().text();

 // put the caption into the div
 $('#myDiv').text(caption);
;

// check the webpage every half second
setInterval(function() 
 captionUpdate();
, 50);

// this is just for the snippet
let currentList = 0
$('#toggle').on('click', () => 
 currentList = (currentList + 1) % 3
 $('.wslide-slide').hide().eq(currentList).show()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Initial text</div>




<div class="wslide-content-inner">

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 1</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 2</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 3</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>


</div>
<p>
 <button id="toggle">Toggle lists</button>
</p>

function captionUpdate() 
 //empty the div
 $('#myDiv').empty();
 // select the correct caption
 var caption = $('.wslide-slide').filter(function() 
 return $(this).css('display') === 'block'
 ).children().text();

 // put the caption into the div
 $('#myDiv').text(caption);
;

// check the webpage every half second
setInterval(function() 
 captionUpdate();
, 50);

// this is just for the snippet
let currentList = 0
$('#toggle').on('click', () => 
 currentList = (currentList + 1) % 3
 $('.wslide-slide').hide().eq(currentList).show()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Initial text</div>




<div class="wslide-content-inner">

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 1</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 2</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 3</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>


</div>
<p>
 <button id="toggle">Toggle lists</button>
</p>

function captionUpdate() 
 //empty the div
 $('#myDiv').empty();
 // select the correct caption
 var caption = $('.wslide-slide').filter(function() 
 return $(this).css('display') === 'block'
 ).children().text();

 // put the caption into the div
 $('#myDiv').text(caption);
;

// check the webpage every half second
setInterval(function() 
 captionUpdate();
, 50);

// this is just for the snippet
let currentList = 0
$('#toggle').on('click', () => 
 currentList = (currentList + 1) % 3
 $('.wslide-slide').hide().eq(currentList).show()
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">Initial text</div>




<div class="wslide-content-inner">

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 1</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 2</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>

 <div class="wslide-slide" style="display: none;">
 <div class="wslide-slide-inner1">
 <div class="wslide-slide-inner2" style="width: 480px; left: -240px; top: -238px; opacity: 0;">
 <img alt="deen" src="/uploads/1/2/4/7/124777771/fb-img-1544759678252_orig.png" style="width: 480px;">
 <div style="opacity: 0.99;" class="wslide-caption wslide-caption-bottom">
 <div class="wslide-caption-text">caption 3</div>
 <div class="wslide-caption-bg"></div>
 </div>
 </div>
 </div>
 </div>


</div>
<p>
 <button id="toggle">Toggle lists</button>
</p>

share|improve this question

edited Mar 21 at 23:41

A Webster

asked Mar 21 at 22:05

A WebsterA Webster

134

share|improve this question

edited Mar 21 at 23:41

A Webster

asked Mar 21 at 22:05

A WebsterA Webster

134

asked Mar 21 at 22:05

A WebsterA Webster

134

asked Mar 21 at 22:05

A WebsterA Webster

134