I have a question about when mouse over a picture from a slider show, the sound (which is very short, just like a bing) will play. In normal case, I know how to use html, css and javascript to do it. I have a sound example here: https://freesound.org/people/Timbre/sounds/232210/
and let's say, the class in Drupal page.tpl.php is called picture. As I am new to Drupal, how should I make this function work by only using javascript or jquery? Any comments?
For Drupal you should add your scripts with drupal_add_js(). You can add either a file or inline js and set a number of options such as if it should appear on every page and if it should be added to the footer or header and if it requires jQuery.
You could create a js file with something like this inside:
jQuery(document).ready(function($) {
var mySound = document.createElement('audio');
mySound.setAttribute('src', '/path/to/my/sound.mp3');
//play the sound when the visitor moves the mouse over
//an element with the class 'picture'.
$('.picture').mouseover(function() {
mySound.play();
});
});
Then in your theme or module, you could use hook_page_alter to add your js:
drupal_add_js(
'/path/to/js/script.js',
array(
'type' => 'file',
'scope' => 'footer',
'group' => JS_THEME, //or JS_DEFAULT if module
'every_page' => false,
'requires_jquery' => true,
)
);
You could wrap that in some sort of if statement to only load it on the page(s) you need it.
Hope that helps!
Related
I m using gem 'ckeditor', github: 'galetahub/ckeditor' with rails admin.
I want when I post article on the homepage, images associated with article's description should be automatic responsive. I have one folder in
assets/Javascript/ckeditor
, and I posted this piece of code in this folder, but it seems not working too. please help me out. thanks in advance.
If you want inserted images in a CKEditor to be responsive you can use the following code. It creates a htmlfilter for the
image tag that replaces inline "width" and "style" definitions with
their corresponding attributes and add's (in this example) the
Bootstrap "img-responsive" class.
I believe CKEDITOR does not add the img-responsive class to those images. You can check this by adding an image with CKEDITOR and then check if the html on the page has the img-responsive class added.
The function CKEDITOR.on() the event 'instanceReady' will execute the code to add the 'img-responsive' class to the image element el
The fact is, I believe you should put a breakpoint inside that code and test if it is actually executing
CKEDITOR.on('instanceReady', function (ev) { // etc.. etc.. });
because this are the instruction on how to adapt ckeditor with turbolinks
Create a file app/assets/javascripts/init_ckeditor.coffee
var ready = function() {
CKEDITOR.on('instanceReady', function (ev) { // code });
}
$(document).ready(ready)
$(document).on('page:load', ready)
Make sure the file is loaded from your app/assets/javascripts/application.js
CKEDITOR is the API entry point. The entire CKEditor code runs under this object.
The documentation of the .on() jquery method can help you understand better why that call is not executing, basically the .on() method trigger the js code in the function(){}, when that event is triggered.
The event is instanceReady and this is the info from the API
instanceReady( evt )
Event fired when a CKEDITOR instance is created, fully initialized and ready for interaction.
Parameters
evt : CKEDITOR.eventInfo
editor : CKEDITOR.editor
The editor instance that has been created.
Method 1
Add this in your CSS file:
img {
max-width: 100%;
height: auto !important;
}
Method 2
Use Enhanced Image plugin to replace the default image widget.
Method 3
Use the snippet in your link, but remember to replace the img-responsvie to img-fluid if you use Bootstrap 4.
hey guys i am very new to js and jquery in genenral and i was just going throught the plugin code of a gallery plugin , i can across the function called _loadevents , that had the following content , see below :
this.$navPrev.on('click.gallery', function (event) {
});
this.$navNext.on('click.gallery', function (event) {
});
this.$wrapper.on('webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function (event) {
});
now $navPrev , $navNext , and $wrapper are obviously some HTML element , now my question is about another method i came across in the same plugin , look below :
destroy: function () {
// console.log('inside destroy');
this.$navPrev.off('.gallery');
this.$navNext.off('.gallery');
this.$wrapper.off('.gallery');
}
now i see that if this function is called all the event handlers will be taken off. now , can somebody tell me what is the necessacity of such a function , does it improve a plugins efficiency ? how or when does such a function get used and is it a common practice to write e destroy function for events in plugins ?
Thank you.
Alex-z .
Destroy functions in plugins enable a developer to reset or remove a plugin from an element, restoring the element to before the plugin was initialised. This is useful if, for example, you have a gallery plugin that works and looks fantastic on desktop, but you don't want it on mobile. You can listen to resize event on window and if the window size is smaller than e.g. 710px then destroy the plugin. This will remove all the added events, undo any DOM manipulation, and restore the html elements back to how they were before the plugin was first initialised (turn-wise, if the window size is larger than 710px then initialise the plugin).
They are generally considered good practice.
I want to add a Jquery plugin to a view. However, I don't want to add via the .info file, as I don't want it on every page. I also don't want to add it to the header of the view or create a view.tpl.php file.
This page shows how to add Java Script to a Node via template.php. Is there anyway to do something similar to add Java Script to a View via the template.php file?
Here is an example for Daniel Wehner's answer. It assumes your view is called 'blog', and your display id is 'page_1'. This code goes into template.php. Remember to clear the template cache after adding new functions to template.php.
/**
* Implements hook_preprocess_views_view().
*/
function THEMENAME_preprocess_views_view(&$vars) {
$view = $vars['view'];
// Load the blog.js javascript file when showing the Blog view's page display.
if ($view->name == 'blog' && $view->current_display == 'page_1') {
global $theme;
drupal_add_js(drupal_get_path('theme', $theme) . '/js/blog.js', 'theme', 'footer', FALSE, TRUE, FALSE);
}
}
You can use the hook hook_preprocess_views_view
How can I hide the play button that's in the center of the video screen in JW Player?
I'm using version 5.4 of the player and I am embedding it using their own 'JW Embedder' technique.
I've tried the following with no luck:
jwplayer("myPlayer").setup({
file: 'myMediaFile.mp4',
image: 'myPosterFile.jpg',
controlbar: 'bottom',
icons: false
});
I've read somewhere that this may have been removed with version 5.0 and must now be done with a skin. But, I also read that it returned in version 5.1 ... ?
I came acros the same problem and the solution was to set:
'controlbar': "none"
Also, I'm using JW Player 5.5.
Ley me know if it worked out.
You are looking for the "display" plugin. Hide as needed.
jwplayer().getPlugin("display").hide();
Add this to your onPause and maybe to your onReady event if you are not using autoplay:
jwplayer().getPlugin("controlbar").hide();
so it looks like this:
jwplayer("container").setup({
events: {
onPause: function(event){
jwplayer().getPlugin("controlbar").hide();
}
}
})
Reference:
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
Check the Plugins section.
Your code should work with JWplayer 5.10 if you put everything between ' '
jwplayer("myPlayer").setup({
'file': 'myMediaFile.mp4',
'image': 'myPosterFile.jpg',
'controlbar': 'bottom',
icons: 'false'
});
For JW Player v6 - HTML5 player:
You can hide the play button in center of screen in the with CSS:
.jwplayer .jwdisplayIcon {
display: none !important;
}
Or to hide the play button in control bar:
.jwplay {
display: none;
}
It seems to be that the 'icons: false' option does work, but not with the HTML 5 version of the player. Hopefully they'll get this taken care of with any versions later than JW 5.4.
You can write a flash plugin using the Flex SDK. I have written a base class that inherits from Sprite to handle this.
import flash.display.Sprite;
import flash.display.DisplayObject;
import com.longtailvideo.jwplayer.player.IPlayer;
import com.longtailvideo.jwplayer.view.components.ComponentButton;
import com.longtailvideo.jwplayer.view.interfaces.IControlbarComponent;
public class ExtendedPlugin extends Sprite
{
protected var _player:IPlayer;
public function ExtendedPlugin()
{
}
public function hideControlbarButton(buttonName:String):void {
var controlbar:IControlbarComponent = _player.controls.controlbar;
var button:DisplayObject = controlbar.getButton(buttonName);
button.height = 0;
button.width = 0;
}
}
Then you can write your plugin by inheriting from this class.
public class MyPlugin extends ExtendedPlugin implements IPlugin
{
public function initPlugin(player:IPlayer, config:PluginConfig):void
{
_player = player;
}
}
If you wanted to hide the play and pause buttons for example you would do the following:
hideControlbarButton("play");
hideControlbarButton("pause");
You will need the correct library imports for this as well. You will then also need to reference the SWF in the jwplayer parameters.
I achieved this by adding 'icons: false' to config. However, JWplayer API reference suggests adding 'controls: false', so try this as well. Here is a working example: http://www.longtailvideo.com/support/jw-player/29241/a-chromeless-player/
It's probably quite easy to do with a skin. You can modify an existing skin downloaded from longtail. They're just zip files
Here's the documentation : http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins
Basically you'd just delete the 'playIcon.png' from the skin zip file in the 'display' directory. It will just not show the icon then - because it doesn't exist!
You'll probably have to delete 'background.png' also - or you'll just get a blank square.
Here is the situation I came up with:
The idea is to disable the controls completely then re-enable them when on user click.
var jwHandle = jwplayer(videoID).setup(videoConfig);//Set b/c of internal reasons
//Then when configuring
autoplay : "false",
controls : "false", //disable the controls(including play icon)
events : {
onDisplayClick : function(event){
//re-enable controls
jwHandle.setControls(true);
//play the video
jwHandle.play();
}
}
});
Using version 6.10. Other answers above did not work for me, probably because of version changes. The only other way I found is to change a skin.xml play icon to a transparent image however more involved process and falls more towards side of "hacking".
Hi
im trying to put all my js in external js file, for the header for my site be more light.
So in my header i have this script, wich work well :
ddaccordion.init({
headerclass: "p7ABtrig", //Shared CSS class name of headers group
contentclass: "p7ABcontent", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [<?= $set_expand_index?>], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
But when i try to move this script inside this external js like inside :
<script src="scripts/external-script.js"></script>
it doesnt launch anymore.
I cannot find a way to launch it from an external js file ?
This must be really newbie question :) but im really new to jquery.
Thank you for your help.
Thanks EMMERICH. I find why it wasn't working its coz my external script was loading before my global ddaccordion script, i switch it i put the ddaccordion first and after i load the external js with ddaccordion init inside it now all is ok. Really thanks :) you great.