How can i replace text in html using jquery?

Question

Im working with UIKit Css Framework for a website, in that for responsive mobile width, i have to increase the ratio of slideshow element when page is opened on specfic width(such as upon width of 640px or less). The HTML Code is like below :

<div class="slider-responsive uk-position-relative uk-visible-toggle uk-light" tabindex="-1"  uk-slideshow="ratio: 7:3;animation:push"

Upon the width of 640px and less I want to change the value of "ratio:7:3" to "ratio:7:6", how to achieve this in javascript or jquery ?

@ArunprasanthKV where does it say OP can't use bootstrap? But they are already using a different framework so it wouldn't make much sense to include another similar library on top. — ADyson, Feb 13 '19 at 11:25
Anyway, Sarvesh...what research and/or coding have you done so far? What issue are you facing? Try [here](https://www.google.com/search?q=jquery+detect+media+width&rlz=1C1GCEU_enGB821GB821&oq=jquery+detect+med&aqs=chrome.5.0j69i57j0l4.8295j0j4&sourceid=chrome&ie=UTF-8) as a starting point. — ADyson, Feb 13 '19 at 11:26
@ADyson agreeing, but by using bootstrap its easy to crate responsive designes, or else they might have to use media query or something slimier — Arunprasanth K V, Feb 13 '19 at 11:27
You can find what you're looking for here: https://stackoverflow.com/questions/4886319/replace-text-in-html-page-with-jquery — Shant, Feb 13 '19 at 11:28
@Shant Sorry but 1) that doesn't cover the first part of the problem (detecting a change of width) and 2) that's a terrible way to solve the issue of changing the text. The values are inside data-attributes, so those attributes can be targeted precisely using the [correct function](https://api.jquery.com/data/) instead of generic string manipulation. — ADyson, Feb 13 '19 at 11:31
@ADyson Buddy i tried using media queries earlier , but it was causing various height related problems, the whole thing is that the current ratio of slideshow images is perfect i.e "ratio:7:3" for desktops, but when viewed on mobile it is too much smaller, also by using media queries i have to cater for every possible width there, UIKit offers the better solution for height as ratio but i need to manipulate it with changing screen size.. — , Feb 13 '19 at 11:35
@Wimanicesir sorry that's true, you're correct. But `.attr()` would do the job instead. String replacement still isn't necessary (per Shant's suggestion) — ADyson, Feb 13 '19 at 11:36
@SarveshPatil perhaps there's some other reason for that...you didn't show that code so I can't help you fix it. But basically you need to detect the width first. Changing the ratio afterwards is just a trivial matter of adjusting an attribute value. If you can show your attempted code and explain precisely what problem you faced then we can help you improve it. That's how this site works normally, not by just asking for a solution from nothing (although in simple cases you might get one, but normally we expect to try and solve a specific issue in existing code). — ADyson, Feb 13 '19 at 11:40
The "Wimanicesir" is right. for more info take a look at this: https://stackoverflow.com/questions/20964241/change-attribute-from-a-div-when-window-size-change — Shant, Feb 13 '19 at 11:51

score 1 · Accepted Answer · answered Feb 13 '19 at 11:33

1

I guess this is what you want.

$(window).on('resize', function() {
  var width = $(window).outerWidth();

  if (width < 600) {
    $(".slider-responsive").attr("uk-slideshow", "ratio: 7:3;animation:push");
  } else {
    $(".slider-responsive").attr("uk-slideshow", "ratio: 7:6;animation:push");
  }

});

answered Feb 13 '19 at 11:33

Wimanicesir

4,606
2
11
30

will this work if the window is first loaded at the smaller width, without being resized afterwards? I think you may need something to detect the width before rendering the slideshow, as well. – ADyson Feb 13 '19 at 11:38
@Wimanicesir this solution works & yet ADyson is also true on the query of window being resized afterwards, im researching and trying to sort out every time the window is resized the functions should be called...thank you from heart for all those who engaged in this question and helped me..i will update solution once it is done. – Feb 13 '19 at 11:55
Yes indeed i forget that. But it is the same coded that has to run once on init. Anyway, you're welcome and sorry that so much people disliked your question, try adding a lot more code next time even though it doesn't work at all. Good luck! – Wimanicesir Feb 13 '19 at 13:55

How can i replace text in html using jquery?

1 Answers1