Styjun

I'm thinking of a number

Can a zero nonce be safely used with AES-GCM if the key is random and never used again?

Single author papers against my advisor's will?

Should you tell Jews they are breaking a commandment?

Two different pronunciation of "понял"

Why does tar appear to skip file contents when output file is /dev/null?

Can't figure this one out.. What is the missing box?

Why does this iterative way of solving of equation work?

Stars Make Stars

How to say that you spent the night with someone, you were only sleeping and nothing else?

If A makes B more likely then B makes A more likely"

What do you call a plan that's an alternative plan in case your initial plan fails?

What would be Julian Assange's expected punishment, on the current English criminal law?

How to colour the US map with Yellow, Green, Red and Blue to minimize the number of states with the colour of Green

If I can make up priors, why can't I make up posteriors?

How do you clear the ApexPages.getMessages() collection in a test?

Blender game recording at the wrong time

Working around an AWS network ACL rule limit

I'm having difficulty getting my players to do stuff in a sandbox campaign

How to retrograde a note sequence in Finale?

Passing functions in C++

Geometric mean and geometric standard deviation

What are the performance impacts of 'functional' Rust?

Need a suitable toxic chemical for a murder plot in my novel

Why isn't my JQuery/CSS code working when I import it into my Wordpress website?

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

0

When editing the code on JSFiddle, everything works as it should but when I import it into my live Wordpress site, it doesn't do anything at all. I've triple checked that I haven't made any typos or anything like that but there really isn't anything that stands out to me. Getting super frustrated so I'm hoping someone out there can help.

Thanks in advance :)

Live site:
https://victoryposters.com/product/stadium/

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() 
 var file, img;

 if ((file = this.files[0])) 
 img = new Image();

 img.onload = function() 
 //green
 if (this.width < 1800 && this.height < 1800) 
 $('.fail').css('display', 'block');
 $('.pass').css('display', 'none');
 else 
 $('.pass').css('display', 'block');
 $('.fail').css('display', 'none');
 


 ;
 img.src = _URL.createObjectURL(file);
 

);

.pass 
 display: none;


.fail 
 display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="file" id="filecheck" />

<div class="fail">File quality is very low we can not accept this image</div>
<div class="pass">file quality is high</div>

javascript jquery html css wordpress

share|improve this question

edited Mar 22 at 7:48

Hasta Dhana

2,2312619

asked Mar 22 at 7:40

tmbo80tmbo80

82

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what is not working?
  
  – Hasta Tamang
  Mar 22 at 7:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't see display:none on pass and fail class. check if you have included css for this and place your script just before the ending body tag.
  
  – Hasta Tamang
  Mar 22 at 7:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try to add your code into this $(document).ready(function() your script ); like @marcobiedermann said .
  
  – Techno Deviser
  Mar 22 at 7:55
  
  

  
  
  
  

add a comment | 

0

When editing the code on JSFiddle, everything works as it should but when I import it into my live Wordpress site, it doesn't do anything at all. I've triple checked that I haven't made any typos or anything like that but there really isn't anything that stands out to me. Getting super frustrated so I'm hoping someone out there can help.

Thanks in advance :)

Live site:
https://victoryposters.com/product/stadium/

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() 
 var file, img;

 if ((file = this.files[0])) 
 img = new Image();

 img.onload = function() 
 //green
 if (this.width < 1800 && this.height < 1800) 
 $('.fail').css('display', 'block');
 $('.pass').css('display', 'none');
 else 
 $('.pass').css('display', 'block');
 $('.fail').css('display', 'none');
 


 ;
 img.src = _URL.createObjectURL(file);
 

);

.pass 
 display: none;


.fail 
 display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="file" id="filecheck" />

<div class="fail">File quality is very low we can not accept this image</div>
<div class="pass">file quality is high</div>

javascript jquery html css wordpress

share|improve this question

edited Mar 22 at 7:48

Hasta Dhana

2,2312619

asked Mar 22 at 7:40

tmbo80tmbo80

82

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what is not working?
  
  – Hasta Tamang
  Mar 22 at 7:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't see display:none on pass and fail class. check if you have included css for this and place your script just before the ending body tag.
  
  – Hasta Tamang
  Mar 22 at 7:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try to add your code into this $(document).ready(function() your script ); like @marcobiedermann said .
  
  – Techno Deviser
  Mar 22 at 7:55
  
  

  
  
  
  

add a comment | 

When editing the code on JSFiddle, everything works as it should but when I import it into my live Wordpress site, it doesn't do anything at all. I've triple checked that I haven't made any typos or anything like that but there really isn't anything that stands out to me. Getting super frustrated so I'm hoping someone out there can help.

Thanks in advance :)

Live site:
https://victoryposters.com/product/stadium/

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() 
 var file, img;

 if ((file = this.files[0])) 
 img = new Image();

 img.onload = function() 
 //green
 if (this.width < 1800 && this.height < 1800) 
 $('.fail').css('display', 'block');
 $('.pass').css('display', 'none');
 else 
 $('.pass').css('display', 'block');
 $('.fail').css('display', 'none');
 


 ;
 img.src = _URL.createObjectURL(file);
 

);

.pass 
 display: none;


.fail 
 display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="file" id="filecheck" />

<div class="fail">File quality is very low we can not accept this image</div>
<div class="pass">file quality is high</div>

javascript jquery html css wordpress

share|improve this question

edited Mar 22 at 7:48

Hasta Dhana

2,2312619

asked Mar 22 at 7:40

tmbo80tmbo80

82

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() 
 var file, img;

 if ((file = this.files[0])) 
 img = new Image();

 img.onload = function() 
 //green
 if (this.width < 1800 && this.height < 1800) 
 $('.fail').css('display', 'block');
 $('.pass').css('display', 'none');
 else 
 $('.pass').css('display', 'block');
 $('.fail').css('display', 'none');
 


 ;
 img.src = _URL.createObjectURL(file);
 

);

.pass 
 display: none;


.fail 
 display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="file" id="filecheck" />

<div class="fail">File quality is very low we can not accept this image</div>
<div class="pass">file quality is high</div>

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() 
 var file, img;

 if ((file = this.files[0])) 
 img = new Image();

 img.onload = function() 
 //green
 if (this.width < 1800 && this.height < 1800) 
 $('.fail').css('display', 'block');
 $('.pass').css('display', 'none');
 else 
 $('.pass').css('display', 'block');
 $('.fail').css('display', 'none');
 


 ;
 img.src = _URL.createObjectURL(file);
 

);

.pass 
 display: none;


.fail 
 display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="file" id="filecheck" />

<div class="fail">File quality is very low we can not accept this image</div>
<div class="pass">file quality is high</div>

var _URL = window.URL || window.webkitURL;

$("#filecheck").change(function() 
 var file, img;

 if ((file = this.files[0])) 
 img = new Image();

 img.onload = function() 
 //green
 if (this.width < 1800 && this.height < 1800) 
 $('.fail').css('display', 'block');
 $('.pass').css('display', 'none');
 else 
 $('.pass').css('display', 'block');
 $('.fail').css('display', 'none');
 


 ;
 img.src = _URL.createObjectURL(file);
 

);

.pass 
 display: none;


.fail 
 display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="file" id="filecheck" />

<div class="fail">File quality is very low we can not accept this image</div>
<div class="pass">file quality is high</div>

share|improve this question

edited Mar 22 at 7:48

Hasta Dhana

2,2312619

asked Mar 22 at 7:40

tmbo80tmbo80

82

share|improve this question

edited Mar 22 at 7:48

Hasta Dhana

2,2312619

asked Mar 22 at 7:40

tmbo80tmbo80

82

edited Mar 22 at 7:48

Hasta Dhana

2,2312619

edited Mar 22 at 7:48

Hasta Dhana

2,2312619

asked Mar 22 at 7:40

tmbo80tmbo80

82

asked Mar 22 at 7:40

tmbo80tmbo80

82

1 Answer
1

active

oldest

votes

0

The issue is that you put your JavaScript inside the <head> tag. This means it tries to execute your code before it even encounters your DOM (HTML elements you try to query).
So it tries to execute it on something which does not exist at that moment of time.
Either wrap your entire code into

$(document).ready(function() … )

or even better, put it before the closing <body> tag.
In any case, I also suggest to move it to an external file

share|improve this answer

answered Mar 22 at 7:46

marcobiedermannmarcobiedermann

974815

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55294927%2fwhy-isnt-my-jquery-css-code-working-when-i-import-it-into-my-wordpress-website%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

The issue is that you put your JavaScript inside the <head> tag. This means it tries to execute your code before it even encounters your DOM (HTML elements you try to query).
So it tries to execute it on something which does not exist at that moment of time.
Either wrap your entire code into

$(document).ready(function() … )

or even better, put it before the closing <body> tag.
In any case, I also suggest to move it to an external file

share|improve this answer

answered Mar 22 at 7:46

marcobiedermannmarcobiedermann

974815

add a comment | 

0

The issue is that you put your JavaScript inside the <head> tag. This means it tries to execute your code before it even encounters your DOM (HTML elements you try to query).
So it tries to execute it on something which does not exist at that moment of time.
Either wrap your entire code into

$(document).ready(function() … )

or even better, put it before the closing <body> tag.
In any case, I also suggest to move it to an external file

share|improve this answer

answered Mar 22 at 7:46

marcobiedermannmarcobiedermann

974815

add a comment | 

The issue is that you put your JavaScript inside the <head> tag. This means it tries to execute your code before it even encounters your DOM (HTML elements you try to query).
So it tries to execute it on something which does not exist at that moment of time.
Either wrap your entire code into

$(document).ready(function() … )

or even better, put it before the closing <body> tag.
In any case, I also suggest to move it to an external file

share|improve this answer

answered Mar 22 at 7:46

marcobiedermannmarcobiedermann

974815

$(document).ready(function() … )

share|improve this answer

answered Mar 22 at 7:46

marcobiedermannmarcobiedermann

974815

answered Mar 22 at 7:46

marcobiedermannmarcobiedermann

974815

answered Mar 22 at 7:46

marcobiedermannmarcobiedermann

974815