Theme views field with javascript custom code [#2776159]

I've a views displaying some fields of a content type among them there is an image field.
I want to add some custom JS annimation my image field with no result.
What i did so far:
create a MyJsFile.js in my theme (in the sub-bootstrap 3 theme .js folder)
i added this function to my js file (found here):

<?php
function MyTheme_preprocess_views_view(&$vars) {
    $view = $vars['view'];
    // Make sure it's the correct view
    if($view->name == 'event_front') {
        // add needed javascript
        drupal_add_js(drupal_get_path('theme', 'MyTheme') . '/js/MyJsFile.js');
    }
}
?>

But it's not working. When i hover over the image, nothing happend. And i can log my js file with the comment console.lo have no idea how to that with drupal.
Does anyone have any idea how to achieve this?

Comments

Comment #1

30 July 2016 at 22:43

dynahiol created an issue. See original summary.

Comment #2

silvi.addweb CreditAttribution: silvi.addweb at AddWeb Solution Pvt. Ltd. commented 1 August 2016 at 12:33

I tried as per your comment and it worked proper here. So can you please elaborate the issue in detail and give me your js code.

Further, do check js name if it is found on view source of the page.

Thanks!

Comment #3

dynahiol CreditAttribution: dynahiol commented 6 August 2016 at 13:29

Thanks for your replay tejal.patel
this is my js code:

$(document).ready(function() {
    $('img-front-js').load(function() {
        $(this).data('height', this.height);
        console.log("The script was started succesfull");
    }).bind('mouseenter mouseleave', function(e) {
        $(this).stop().animate({
            height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
        });
    });
}

The preprocess_views function was added to my template.php file. I can't see the js file name on the browser when checking for js file.

Comment #4

silvi.addweb CreditAttribution: silvi.addweb at AddWeb Solution Pvt. Ltd. commented 8 August 2016 at 14:03

@dynahiol, That works fine from my end but you can check the following different ways incase of a minute miss. :)

1. Please check the below code, does that incorporates 'if condition'.

<?php
function MyTheme_preprocess_views_view(&$vars) {
    $view = $vars['view'];
    // Make sure it's the correct view
    if($view->name == 'event_front') {
        print('comes_in');
        exit;
        // add needed javascript
        drupal_add_js(drupal_get_path('theme', 'MyTheme') . '/js/MyJsFile.js');
    }
}
?>

2. Please call js using inline code:

drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',
    array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)
);

3. In your js code. You are using .load() function as per my understanding in jquery selectopr is "Id" or "Class" so you need to set prefix "#" or ".".

I hope it helps you.

Thanks!

Comment #5

dynahiol CreditAttribution: dynahiol commented 12 August 2016 at 15:37

@tejal.patel thanks for your help. I've change my code accordingly. And the MyTheme_preprocess_views_view function is working fine.
But i still can't get my js to run. I've tried several code. But still no convincing result. I also found out that my view name was wrong.
This funtion is working.

function MyTheme_preprocess_views_view(&$vars) {
    $view = $vars['view'];
    // Make sure it's the correct view
    if($view->name == 'front') {
        //print('comes_in'); 
        //exit;
        // add needed javascript
        drupal_add_js(drupal_get_path('theme', 'MyTheme') . '/js/MyJsFile.js');
    }
}

But the js file is still not being call (i've change the selector too). Check out the codes below:

drupal_add_js('jQuery(document).ready(function () {           
	$('.imgFrontJs').load(function() {
        $(this).data('height', this.height);
    }).bind('mouseenter mouseleave', function(e) {
        $(this).stop().animate({
            height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
        });
    });
    
});', 
    array('type' => 'inline', 'scope' => 'footer', 'weight' => 5) 
);

drupal_add_js('jQuery(document).ready(function () {
	$('.imgFrontJs').load(function() {
        $(this).data('height', this.height);
    }).bind('mouseenter mouseleave', function(e) {
        $(this).stop().animate({
            height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
        });
    });
});', 'inline');

Found here
Both js code are not working. Do have any idea why?