How to change class in jquery element?

  • Hello,

    I’ve customized UI slider on my site. Here is my HTML.

    <div id="ei-slider" class="ei-slider">
<div class="ei-slider-loading" style="display:none;">Loading</div>
<ul class="ei-slider-large"></ul>
<ul class="ei-slider-thumbs" style="max-width: 450px; width: 100%; display: block;">
<li class="ei-slider-element" style="max-width:150px; width: 33%; left: 0px;">Current</li>
<li style= "max-width:150px; width: 33%;"> Image 1 </li>
<li style= "max-width:150px; width: 33%;"> Image 2 </li>
</ul>
</div>

    What I need to do is change the max-width:450px to 1150px which is on my fourth line.
    <ul class="ei-slider-thumbs" style="max-width: 450px; width: 100%; display: block;">

    Actually it’s inbuild css. So I tried to change class by this script but didn’t work.

    <script type="text/javascript">
  $("ul.ei-slider-thumbs").attr('class', 'mylength');
</script>

    CSS:
    .mylength{max-width: 1150px; width:100%; display:block;}

    • This topic was modified 8 years, 6 months ago by Jan Dembowski. Reason: Moving to Hacks
Viewing 4 replies - 1 through 4 (of 4 total)

  • The reason your class with modified max-width did not work is because the inline CSS replaces it. Suggest changing your CSS to:`
    .mylength{max-width: 1150px !important; width:100%; display:block;}`
    I am not sure if it will work in this situation, the “!important” tells the browser that this setting is not to be changed, it does in the normal “cascade”, not sure if it will stop the inline css here.

    Otherwise you could use a filter to change the output of the plugin.

    As a last resort you could hack the plugin. If you do this be sure to keep track of your changes so that you can reinstate them when the plugin gets updated.

    Thread Starter jklyn

    (@jklyn)

    No RossMitchell it didn’t work. Isn’t there any other way?

    So it seems that adding ” ! important” does not work. As I said the next things to try are:

    – Otherwise you could use a filter to change the output of the plugin.

    – As a last resort you could hack the plugin. If you do this be sure to keep track of your changes so that you can reinstate them when the plugin gets updated.

    These are the only other ways I scan see.

    Moderator bcworkz

    (@bcworkz)

    Using a filter is usually a good approach, but I’ve often noticed that when we see inline attribute styling like this, it’s placed there by script, which of course is applied after server output, so using a filter may not help.

    Your idea of using script to change the attribute is a good idea, but your script might have a few issues. First, be sure jQuery is loaded on this page. It likely is, assuming the slider itself is using it. If so, try changing the $ shortcut in your script to jQuery. This is because the jQuery normally loaded from the WP install runs in noConflict mode where the $ shortcut is invalid.

    You’re going to want to change the actual style attribute instead of adding a class. Adding a class will not override the attribute style, as you’ve discovered. As long as your script runs after whatever else is setting the style, it should work.

    The one other thing you might run into is the slider may continually overwrite the style as part of its normal behavior. If this happens, your only recourse is to hack the plugin, as Ross points out.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to change class in jquery element?’ is closed to new replies.

Tags