1

I want to redirect users to another page, if the CSS properties on an element do not match.

Currently, this works: 

<div id="mydoom">
    myDoom
</div>

<style>
    #mydoom {
        position: relative;
        font-size: 25px;
        color: red;
        visibility: hidden;
        display:none;
    }
</style>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $(function() {
        if (
            $("#mydoom").css('visibility') == 'hidden' && // See if the visibility is hidden.
            $("#mydoom").css('position') == 'relative' && // See if the position relative.
            $("#mydoom").css('display') == 'none' && // See if the display is set to none.
            $("#mydoom").css('font-size') == '25px' // See if the font-size is 25px.
       ) {
           //do nothing
       } else {
           window.location.replace("http://example.com");
       }
   });
})
//]]>
</script>

It worked and redirect the page if I change any of that CSS properties to some other value, if i change position:relative to position:absolute then the page redirect to example.

However, when I try to check the padding property, it doesn't redirect.

For example:

<div id="mydoom">
    myDoom
</div>

<style>
    #mydoom {
        position: relative;
        padding: 12px;
        color: red;
        visibility: hidden;
        display:none;
    }
</style>

<script type='text/javascript'>
//<![CDATA[
    $(document).ready(function() {
        $(function() {
            if (
                $("#mydoom").css('visibility') == 'hidden' && // See if the visibility is hidden.
                $("#mydoom").css('position') == 'relative' && // See if the position is relative.
                $("#mydoom").css('display') == 'none' && // See if the display is set to none.
                $("#mydoom").css('padding') == '5px' // See if padding is 5px.
          ) {
              //do nothing
          } else {
             window.location.replace("http://example.com");
          }
     });
 })
//]]>
</script>

Now you see, I put padding property and set it to 5px in JavaScript but write 12px in CSS, now the page should be redirected but it cannot.

Why does the padding property does not work ?

Steve
  • 9,335
  • 10
  • 49
  • 81
Jane Cross
  • 11
  • 1
  • 1
    Possible duplicate of [jQuery How to Get Element's Margin and Padding?](http://stackoverflow.com/questions/7420434/jquery-how-to-get-elements-margin-and-padding) – Steve Feb 12 '16 at 00:02
  • @Steve can you make the script for me, i dont know more about javascript, how to make it possible, i check that post but nothing to found to work...how to make my existing script to work with padding ... – Jane Cross Feb 12 '16 at 00:05
  • Unfortunately, SO is not a script writing service. Take a look at the accepted answer on the linked question to see how to get an element's padding in jQuery. (Hint: you need to get a direction's padding, not the `padding` shorthand) – Steve Feb 12 '16 at 00:06
  • Possible duplicate of [get element padding value using javascript](http://stackoverflow.com/questions/5227909/get-element-padding-value-using-javascript) –  Feb 12 '16 at 00:08
  • @Steve i also tried padding-left but it also not work..can you please share the code with me. thanks – Jane Cross Feb 12 '16 at 00:08
  • Try this : https://jsfiddle.net/DinoMyte/w3j3fyx9/ . The padding property itself recognizes the top,right,bottom,left values. So in order to get a specific value for comparison, you need to specify the direction. Also , $(document).ready( and $(function() are same thing, so you do not need both of them – DinoMyte Feb 12 '16 at 00:11
  • @DinoMyte glad it worked if we set direction, however, there is another problem. it does not work with color property: try color property, i set in css color:red and set also in javascript but does not it worked why ? – Jane Cross Feb 12 '16 at 00:32
  • It's because the css attribute in jquery would give you relevant rgb of a color , so rgb(255,0,0) == "red" would fail. Here's from the documentation "CSS color values that are logically but not textually equal, " - http://api.jquery.com/css/ – DinoMyte Feb 12 '16 at 00:37
  • @DinoMyte and why the display:block does not work ? it worked only if we use it in separate javascript to add only the display block property, but it does not work with that multiples..if you remove the display:none or change it to display: block it will not work, test it. – Jane Cross Feb 12 '16 at 01:05

1 Answers1

0

I may be wrong, but pretty sure in JQuery the shorthand for 'padding' is not always accepted. Something more appropriate would be to ask for 'padding-top', 'padding-right'... and so on. I will test it and get back here.

Josh
  • 19
  • 1