I have a wordpress page where I want to display a featured image on the header of the homepage, but no other pages. I set up a script to read whether the body tag contains the "home" class and display an image based on that. The code looks like this:
<script>
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
</script>
What's wrong with this script?
Try to wrap your code into function fired on DOM ready:
<script>
$(function() {
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
</script>
More info
jQuery needs to know when to start the function. Start it after the document is ready.
$(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
Did you include jQuery library in your header section? Also some times $ symbol may conflict in wordpress, write full jQuery term when initialize jQuery this way:
jQuery(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
Related
I have a web application which uses MVC layouts, all of my views inherits from this page, in layout page I am using a jquery plug in (iCheck), now I have a page which also inherits from my layout but I don't want this page to use that plugin, in layout I have this script:
<script>
$(function() {
$('input').iCheck();
});
</script>
Now Is there any way to tell jQuery not use this plugin in that page?
The better approach instead of relying in viewbags and other server side codes is to use class in the elements as it's more clear what's the intention of the code.
Here's an example.
<input class="not-icheck" value="I'm a rebel!" />
...
<script>
$(function()
{
$('input:not(.not-icheck)').iCheck();
});
</script>
One way is this:
In layout replace the script code with this:
#{
bool? dontICheck = ViewBag.dontICheck;
}
if(!dontICheck.getValueOrDefault()){
<script>
$(function() {
$('input').iCheck();
});
</script>
}
This means iCheck will work at default. If you dont want it to work add this line into the view's action method which you dont want to use iCheck:
ViewBag.dontICheck = true;
A simple method is to add a class where you do not want this applied, eg:
<input class='noicheck' ...
then apply this in your selector:
$("input:not(.noicheck)").iCheck();
This will then work across your entire site without needing page-by-page changes or any changes to your viewmodel / viewbag etc and will still allow some controls to have this check applied.
I assume that your page has some specific class for styling (for example "special-page").
You can use that to identify that you are on that page and not to init jQuery plugin.
replace
$('input').iCheck();
with
if(!$(".special-page").length){
$('input').iCheck();
}
Replace the current script block you have with:
#if (IsSectionDefined("iCheck")) {
RenderSection("iCheck");
}
else {
<script>
$(function() {
$('input').iCheck();
});
</script>
}
Then in the view that you don't want this run, add:
#section iCheck {}
By defining the section, the layout will include the contents of the section, rather than the default code (your iCheck script), which will just be empty because nothing was provided within the curly brackets.
On one of my previous pages I use
<script src="/js/wireEvent.js"></script>
<body onload="wireEvent();" >
Basically, wireEvent() displays an image on top of the page whenever the mouse goes out of the browser.
However, now I cannot add this function directly to the body of my page, so what is the proper way to add it? Will it be right if I add
<script>
window.onload = wireEvent;
</script>
or I enclose the whole function in
$( document ).ready
and only include the function's file to my html?
The code below executes only after all your images load completely. So you can try this:
$(document).on('load', function(){
wireEvent();
});
You can just do:
$(function(){
//jQuery code here
});
I have a script in my custom meta-boxes and wish to use jQuery, the problem is that the admin page loads my script before it loads jQuery, rendering my script useless, when I inspect the page it looks like this:
jQuery(document).ready(function($) {
// use $
});
<!DOCTYPE html>
and then the rest of the document loads, with header and all that sweet jazz. Is there anyway I can get my <script>jquery here</script> load AFTER my jQuery gets loaded?
you have to insert your script into this way:
function load_custom_scripts()
{
wp_enqueue_script('custom_script', 'COMPLETE_PATH_TO_YOUR_SCRIPT');
}
do_action ( 'admin_enqueue_scripts', 'load_custom_scripts' );
I suggest you to put all of your custom scripts in a separate JS file and then load to the WP.
Right, you cannot use jQuery until it has loaded..
But you can use plain JS:
window.addEventListener('load', function() {
// $ should be available
}, false);
Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js
I'm trying to change the content of the portfolio section of my website. I have a div called .portfolio_box, which contains a small preview of the project (each project div also has a different id). When you click on this div (.portfolio_box) I want the content of the content div (#main_content) to go away and be replaced with the corresponding content.
I found the following tutorial and adjusted the script to my needs:
<script type="text/javascript">
$(document).ready(function()
{
$("#thomasschoof_old").click(function()
{
/*hide( 'fast', function()
{
$('#main_content').load(thomasschoof_old.html,'',showNewContent);
} );
var toLoad = $(this).attr('href')+' #main_content'; */
$('#main_content').hide('fast',loadContent);
$('#page').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
});
function loadContent()
{
$('#main_content').load('thomasschoof_old.html #project','',showNewContent)
}
function showNewContent()
{
$('#main_content').show('normal',hideLoader);
}
function hideLoader()
{
$('#load').fadeOut('normal');
}
return false;
});
</script>
But when I click on the div #thomasschoof_old nothing happens. I don't know a lot about jQuery or Javascript (just getting into it) and I really can't get it figured out.
You can view the web page here: http://jowannes.com/thomasschoof/portfolio.html
I hope somebody can help me, Thanks in advance!
Thomas
Your problem is, that you wrote your JS code inside scripts tags that are used to load an external script file (jQuery). You script just wont ge executed that way.
src: This attribute specifies the URI of an external script; this can
be used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
From: https://developer.mozilla.org/en-US/docs/HTML/Element/Script
Set up a separate script tag for you code or include it from a second external script-file and see what happens.