How to add the img-responsive class in javascript


Tags: javascript,jquery,html,css,angularjs

Problem :

I am trying to make a responsive slider for mobile version. Site was developed using angular JS. When I am trying to integrate the JQuery sliders, total site was distubing because of Bootstrap CSS file. So, in that part I founded a plain Javascript code. And in this how to make those images responsive. Below I am adding the code.

    <head>
    <script type="text/javascript">
    var slideimages = new Array() // create new array to preload images
    slideimages[0] = new Image() // create new instance of image object
    slideimages[0].src = "images/slide/1.jpg" // set image object src property to an image's src, preloading that image in the process
    slideimages[1] = new Image()
    slideimages[1].src = "images/slide/2.jpg"
    slideimages[2] = new Image()
    slideimages[2].src = "images/slide/2.jpg"
    </script>
    </head>
    <body>
    <a href="javascript:slidelink()"><img src="firstcar.gif" id="slide" width=100 height=56 /></a>

<script type="text/javascript">

//variable that will increment through the images
var step = 0
var whichimage = 0

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 whichimage = step
 if (step<2)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

function slidelink(){
 if (whichimage == 0)
  window.location = "#"
 else if (whichimage == 1)
  window.location = "#"
 else if (whichimage == 2)
  window.location = "#"
}

slideit()

</script>


Solution :

Previous answers are correct but you have to use $ for jQuery:

$(slideimages[0]).addClass("img-responsive");

WIthout jQuery:

slideimages[0].className += "img-responsive";

    CSS Howto..

    How do I use CSS to give a section a background that doesn't scroll with the page?

    CSS how to deal with a lot of sprite without having to create a new css class

    How to load chosen alternative css as default css? [closed]

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    CSS Flex Box — flex-wrap:wrap; How to style a specific line?

    How can i make these tabs Responsive

    CSS & HTML & JQuery - How to display a div OVER other divs and set to them a shady background

    how to show product info after image in bigger zoom levels

    How style DIV when the id inclue strings in php?

    How do I add custom fonts? [duplicate]

    How to think to get all content inline (HTML & CSS)

    how to dynamically append tr element with css to a table

    How to disable border on the second last child of div in CSS?

    How to combine the two same css selector into one?

    How to make letters in SVG to be animatable individually?

    How to center and span table heading (row)

    How can I use CSS to make a multi-select box but have the label appear on top instead of to the left?

    How can give third child div within one parent div

    How to set custom fonts in JavaFX Scene Builder using CSS

    How to create a right border that's only 70% of its actual size?

    How can I convert a CSS stylesheet to inlined CSS styles? [closed]

    How to choose font different font-weight? use bolder one or just font-weight?

    How to vertical align the text inside a div in responsive layout

    In firefox, how to change color of text in a treecell using javascript

    How to set a timer for CSS animation-timing-function?

    How to make text appear when input box is active

    How do you scroll the page content over a cover image (like medium.com)?

    How do I position a Silverlight Control

    How to apply css class to uploaded image? [closed]

    How to create a top-footer and footer using foundation, just like foundation website