I am really struggling with this one- spent about 4 hours on it last night. I know it is something simple and I just csant see it. Anyhow, I am developing a local copy of an Omega subtheme. I am trying to have one page use some simple JS to change the color of a block when it is hovered. I originally had it using CSS3 transitions, but I would like to use JS- and I am not good at JS.
I believe my problem is how I have the JS enclosed, but I have gone through this with tons of different code snippets and cant get it to work.
My template.php code is:
<?php
/* Add Google JS to all pages */
function the_dill_design_preprocess_html(&$variables) {
drupal_add_js('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', 'external');
}
/* Add JS to a specific PAGE (Node, NID 3) */
function the_dill_design_preprocess_node(&$variables) {
$node = $variables['node'];
if (!empty($node) && $node->nid == '3') {
drupal_add_js(drupal_get_path('theme', 'the_dill_design') .'/js/fadein.js', 'file');
}
}
?>I know this works when I view page source, I see Google's JS library. I also see my fadein.js.
My fadein.js contains code:
(function($) {
alert("Hello!");
$("#region-content").hover(function() { // mouseenter
$(this).toggleClass('.changeColor');})
}) (jQuery);The alert works and pops up, but I cannot get the other code to work.
I have tried:
jQuery(document).ready(function() {
$("div.st-content").hover(function() { // mouseenter
$(this).addClass("hover2");
}, function() { // mouseleave
$(this).removeClass("hover2");});
});As well to no result. I have tried not closing it in either jQuery() or (function($) and that does not work either. I have been over the drupal_add_js page and all of the comments as well, and worked with most of them.
Thanks in advance!
Comments
JS
I also tried various fadein() with no success- its like my theme does not see any JS beyond the alert. And I have tried to remove the alert as well- nothing. Here is my block structure that I am working it.
The block id is #block-block-3
<div class="st-content"><h2>Text</h2>
<div class="subtitle">Text <span>Text</span> Text <span>Text</span>Text</div>
<div class="artbody">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>
And here is the CSS:
#block-block-3 {width: 48%;
float: left;
padding: 5px 5px 5px 5px;
margin-left: 6px;
margin-bottom: 5px;
border: thin solid #000;
background-color: #1A1A1A
Add weight to drupal_add_js
A js file loaded after yours could be overriding the hover on that selector. See if it works on a different selector first and if so push your js file down the load list.
www.community-technology.com
How do I change that?
I am having difficulty changing the location, which further leads me to believe I have something wrong. I have added an array to my drupal_add_js and tried it both with the weight at 1 and at 25 and the order of my JS does not change when I view source. Here is my JS
I modified JS to change the color of logo-image background and I got nothing. Its like the JS is totally stripped. The JS that I added to my info file for font does work. Looking at the list below see anything wrong?
src="http://localhost/TheDillDesignTwo/misc/jquery.js?v=1.4.4"
src="http://localhost/TheDillDesignTwo/misc/jquery.once.js?v=1.2"
src="http://localhost/TheDillDesignTwo/misc/drupal.js?me9xym"
src="http://localhost/TheDillDesignTwo/misc/ui/jquery.ui.core.min.js?v=1.8.7"
src="http://localhost/TheDillDesignTwo/misc/ui/jquery.ui.widget.min.js?v=1.8.7"
src="http://localhost/TheDillDesignTwo/misc/jquery.cookie.js?v=1.0"
src="http://localhost/TheDillDesignTwo/misc/jquery.form.js?v=2.52"
src="http://localhost/TheDillDesignTwo/misc/ui/jquery.ui.mouse.min.js?v=1.8.7"
src="http://localhost/TheDillDesignTwo/misc/ui/jquery.ui.draggable.min.js?v=1.8.7"
src="http://localhost/TheDillDesignTwo/misc/ui/jquery.ui.resizable.min.js?v=1.8.7"
src="http://localhost/TheDillDesignTwo/modules/contextual/contextual.js?v=1.0"
src="http://localhost/TheDillDesignTwo/misc/ajax.js?v=7.16"
src="http://localhost/TheDillDesignTwo/misc/progress.js?v=7.16"
src="http://localhost/TheDillDesignTwo/sites/all/modules/devel_themer/devel_themer.js?me9xym"
src="http://localhost/TheDillDesignTwo/sites/all/modules/devel/krumo/krumo.js?me9xym"
src="http://localhost/TheDillDesignTwo/sites/all/modules/devel/devel_krumo_path.js?me9xym"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
src="http://localhost/TheDillDesignTwo/modules/toolbar/toolbar.js?me9xym"
src="http://localhost/TheDillDesignTwo/sites/all/themes/the_dill_design/js/fadein.js?me9xym"
src="http://localhost/TheDillDesignTwo/sites/all/themes/omega/omega/js/jquery.formalize.js?me9xym"
src="http://localhost/TheDillDesignTwo/sites/all/themes/omega/omega/js/omega-mediaqueries.js?me9xym"
src="http://localhost/TheDillDesignTwo/sites/all/themes/omega/alpha/js/alpha-debug.js?me9xym"
src="http://localhost/TheDillDesignTwo/sites/all/themes/the_dill_design/js/open-sans.js?me9xym"
Any more suggestions on how to ensure I am not being over written?
Maybe someone will know what
Maybe someone will know what this means...
When I FireBug and breakpoint my script:
(function($) {alert("Hello!");
$(".LOGO-IMAGE").hover(function() { // mouseenter
$(this).toggleClass('.changeColor');})
}) (jQuery);
The first breakpoint that gets a hit is
}) (jQuery);Then
alert("Hello!");And on down to my mouseover.