I'm beginning to work on Bootstrap in Yii framework and finding some difficulties in making it work the way I want to.
And have not found anything useful in the docs, although I might have missed something.
I have the navbar like this:
<?php $this->widget('bootstrap.widgets.TbNavbar', array(
'collapse'=>true, // requires bootstrap-responsive.css
'fixed'=>'none',
'brand'=>false,
'items'=>array(
array(
'class'=>'bootstrap.widgets.TbMenu',
'items'=>array(
array('label'=>'Home', 'url'=>'#', 'active'=>true),
array('label'=>'Link', 'url'=>'#'),
array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
array('label'=>'Action', 'url'=>'#'),
array('label'=>'Another action', 'url'=>'#'),
array('label'=>'Something else here', 'url'=>'#'),
'---',
array('label'=>'NAV HEADER'),
array('label'=>'Separated link', 'url'=>'#'),
array('label'=>'One more separated link', 'url'=>'#'),
)),
),
),
),
));
?>
By default submenu drop out by Click event, but I want to submenu drop out at mouseover event. How do it, please help. Thanks in advance.
Im using bootstrap with Yii for a while and submenus popups automatically. Check also this link http://www.bootply.com/60842 which shows that bootstrap submenus popups automatically on mouseover.
You will be probably overriding/missing some css/javascript files. Also check console if your page has no errors after loading.
Find bootstrap.js in the asset folder of the bootstrap extension folder.
Replace the following (rows 797- 800) :
.on('click.dropdown.data-api', clearMenus)
.on('mouseover.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('mouseover.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
to becomes
.on('click.dropdown.data-api', clearMenus)
.on('mouseover.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('mouseover.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
In order to work, you have to clean the asset folder in the main directory to generate once from the asset you've just changed.
Related
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
I am trying to remove the ability to click on an image in woocommerce's product featured images, so that you can no longer click on the image and make it bigger.
Not much skills with css so simple explanations are appreciated.
I have the product-image.php open and I know how to enter custom code into my theme.
Anyone?
Change this line inthe product-image.php
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
to
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image ), $post->ID );
and in the product-thumbnails.php file, change
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
to
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a title="%s">%s</a>', $image_title, $image ), $attachment_id, $post->ID, $image_class );
Doing the above should remove the ability to click on the image and make it bigger.
works perfectly however I'm facing one issue because of it. I set up my page so that when I click a thumbnail it replaces the product image. When I apply your rule to make the product image unclickable, then the other js doesnt work anymore. Do you have any idea how I could make both work together? The jquery Im using is
(function($){
$(document).ready(function(){
$('.thumbnails a.zoom').click(function(event){
event.preventDefault();
var thumb_url = $(this).find('img').attr('src');
$('.woocommerce-main-image img').attr('src', thumb_url );
});
});
})(jQuery);
Try this
.woocommerce-product-gallery__image {
pointer-events: none;
It works perfectly for me.
Check if your theme has a custom CSS section and just paste it there.
First of all, if you want to replace single-product.php template you have to create a new one in you own theme folder.
Example: wp-content/themes/woocommerce/single-product.php
<?php
global $product;
echo $product->get_image();
?>
Will output only img tag without link and any div's.
This might be helpful https://docs.woocommerce.com/wc-apidocs/source-class-WC_Block_Featured_Product.html#156-175
I was looking for how to disable the zoom and lightbox on product images and the following code (inserted on functions.php) helped:
add_action( 'after_setup_theme', 'remove_pgz_theme_support', 100 );
function remove_pgz_theme_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
}
This had, however, the side effect of still allowing users to click on the image, sending them to the direct link of the file. On the OceanWP theme I found this to work (insert it on your css):
img.wp-post-image {
pointer-events:none !important;
This will work for the featured image, but if you have other images in the same product gallery, those ones will still be clickable. To disable the click on those too, insert this extra code on your css:
div.woocommerce-product-gallery__image.flex-active-slide {
pointer-events:none !important;
Hope it helps you!
i know its sounds a bit crazy, but so many clients have problems with not saving their article properly.
I just wanted to use a simple method to trigger the onclick of the APPLY button inside a joomla article in edit mode.
Primarily back end editing as i have a good admin template that allows me to show clients the bare bones.
I know that by clicking apply the page reloads but thats better than nothing.
How on earth do i add do this?
I was hoping something like this would work but i dont quite know how to trigger a button that seems to reside inside a toolbar function of some sort.
I have this:
<script type="text/javascript">
$(document).ready(function() {
$('??????').trigger('click');
});
</script>
What would replace the question marks?
Also i know i would need to put a timer into the jquery code but how do i get the link below to trigger?
http://mydomain.com/administrator/index.php?option=com_content§ionid=1&task=edit&cid[]=97
In the toolbar.content.html.php file joomla has this:
class TOOLBAR_content
{
function _EDIT($edit)
{
$cid = JRequest::getVar( 'cid', array(0), '', 'array' );
$cid = intval($cid[0]);
$text = ( $edit ? JText::_( 'Edit' ) : JText::_( 'New' ) );
JToolBarHelper::title( JText::_( 'Article' ).': <small><small>[ '. $text.' ]</small></small>', 'addedit.png' );
JToolBarHelper::preview( 'index.php?option=com_content&id='.$cid.'&tmpl=component', true );
JToolBarHelper::save();
/////////////////////////////////////
JToolBarHelper::apply(); // < // THIS IS WHAT I WANT TO TRIGGER
/////////////////////////////////////
if ( $edit ) {
// for existing articles the button is renamed `close`
JToolBarHelper::cancel( 'cancel', 'Close' );
} else {
JToolBarHelper::cancel();
}
}
...... more stuff here
}
I know this might sound crazy but wouldnt it be great if autosave could happen even without a reload, but i guess that would mean posting all the data using jquery rather than the php post and reload page method.
Anyways im not expecting a miracle here but if anyone could help that would be great.
Cheers in advance
John
PS:
i just tried something like this hoping maybe it will work but it just reloads the page:
function autosave()
{
window.location = "index.php?option=com_content§ionid=<?php echo $_GET['sectionid'];?>&task=edit&cid[]=<?php echo $row->id;?>"
}
You won't be able to do it without forcing a reload unless you decide to re-write the whole of com_content with an ajax implementation.
Looking at the code you've posted I guessing Joomla! 1.5 - which by default has MooTools 1.12 or 1.2.5 (if you enabled the MooTools upgrade plugin in later versions of 1.5.x) - so more of a question but why not use that?
You will have to modify the admin template to embed the JS you need, 1.5 has few triggers and none that are really worth using in the admin screens (unless you're up for a fair bit of PHP coding)
Somewhere in the <head> tag of com_content's Article view you will need to add this:
<script type="text/javascript">
var interval = 30 //seconds
var timer = setTimeout(submitbutton('apply'),(interval * 1000));
}
</script>
Please note I haven't tried this just typed it straight into here.
Since you're on 1.5 have you tried the Simple Content Versioning extension - it has autosave functionality that appears to be what you want - and probably works whereas who knows with my code in #3.
I want to show notification on my website using Pines Notify jQuery plugin
but i dont know how to use it. Could someone please provide some example code?
This is the only link I have found for documentation:
http://sourceforge.net/apps/mediawiki/pines/index.php?title=Pines_Notify
This is pretty simple to find out.
Go to the pines notify website: http://pines.sourceforge.net/pnotify/
Click around on the buttons until you find the kind of effect you want to do yourself.
In either Chrome or Firefox w/Firebug, just right click on the button for the effect you want. You'll see an input tag, and you want the code inside the onclick="":
onclick="$.pnotify({
pnotify_title: 'Regular Notice',
pnotify_text: 'Check me out! I\'m a notice.'
});"
So if you want to call this at the end of your html doc after you've loaded jquery, you just do something like this:
// call your jquery and pines notify plugin scripts first
$.pnotify({
pnotify_title: 'Whatever the Title Is',
pnotify_text: 'This is the text of the notice!'
});
Obviously there are more options, and you can find them by either inspecting the source of the demo page, or by looking at the pines jquery plugin and finding where they define the options.
It looks like the documentation for Pines Notify is rather lacking. My advice is to look through the HTML source of the demo website. All the JavaScript is on that page (with tons of inline event handlers, yuck).
Make sure to include the appropriate files in your HTML. Then, here is some example javascript code.
function gaserror(){
var distance = Number(document.cars.distance.value);
switch( $('#listofcars :selected').text())
{
case 'Volvo':
if (distance>500)
{
$.pnotify({
title: 'Error',
text: 'You have run out of gas!',
addclass: 'custom',
type: 'error',
opacity: 0.8,
nonblock: true,
nonblock_opacity: 0.2,
sticker: false,
stack: false,
mouse_reset: false,
history:false, //prevents the yellow error history tab from appearing after error triggered
before_open: function(pnotify) {
pnotify.css({
"top": ($(window).height() / 2) - (pnotify.height() / 2),
"left": ($(window).width() / 2) - (pnotify.width() / 2)
});
}
});
}
break;}}