I'm trying to change the default [title] usage from jQuery UI tooltip to [data-title].
<script>
$(function () {
$(document).tooltip({
track: true,
items: "[data-title]",
content: function () {
return ( ( $( this ).prop( 'data-title' ).replace( '|', '<br />' ) ) );
}
});
});
</script>
<span class="class blade" data-title="Tooltip title"></span>
This works perfectly if I remove the data-, but with it nothing displays.
You can use the data() api to read the data-* attribute
$(function () {
$(document).tooltip({
track: true,
items: "[data-title]",
content: function () {
return $(this).data('title').replace('|', '<br />');
}
});
});
Demo: Fiddle
Do not use prop() in these circumstances.
You are trying to fetch the value of an HTML attribute, not a DOM property, so use attr() instead:
return $(this).attr("data-title").replace("|", "<br />");
data- attributes, unlike most other HTML attributes, do not have DOM property equivalents.
Related
In a plugin, we're using a button & text input to trigger the wpLink modal. All works well, until we hit a template that removes the main content editor and relies only on metaboxes for the page content.
The error we're getting is this.textarea is undefined. The code we're using is:
$( 'body' ).on( 'click', '.pluginxyz-add-link', function( event ) {
wpActiveEditor = true;
wpLink.open();
return false;
});
So I assume there is some dependency to the main editor. I can't find explicit info/documentation around this.. anyone have a suggestion about making this work without the main editor?
Actually, I just figured this out. In our code, the ONLY sibling text input is always where the value will go.
$( 'body' ).on( 'click', '.pluginxyz-add-link', function( event ) {
clickedEle = $( this );
textBoxID = $( clickedEle ).siblings( 'input[type=text]' ).attr( 'id' );
wpActiveEditor = true;
wpLink.open( textBoxID);
return false;
});
I have a header.php, that appears in every single page on my blog, with a navbar that looks like this:
<nav>
<ul>
<li>Logistics</li>
<li>Contact</li>
</ul>
</nav>
But when I click the anchor tag linking to #contact, which is located in page with id 5, as you can see by the php code, nothing happens. I tried using a slash (/#contact) but I keep getting the same behavior. Isn't this the correct way of linking to a specific id on another page?
EDIT: I also have some smooth scrolling code (below) which I think may be related to my issue.
<script>
$( document ).ready( function () {
// Add smooth scrolling to all links
$( "a" ).on( 'click', function ( event ) {
// Make sure this.hash has a value before overriding default behavior
if ( this.hash !== "" ) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$( 'html, body' ).animate( {
scrollTop: $( hash ).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
} );
} // End if
} );
} );
</script>
Thanks!
You have a javascript error.
<script>
$( document ).ready( function () {
// Add smooth scrolling to all links
$( "a" ).on( 'click', function ( event ) {
// Make sure this.hash has a value before overriding default behavior
if ( this.hash !== "" ) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$( 'html, body' ).animate( {
scrollTop: $( hash ).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
} );
} // End if
} );
} );
</script>
Here is the problem. On the home page you have a div with id #contato. On the other pages it is not there.
$( 'html, body' ).animate( {
scrollTop: $( hash ).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
} );
Your hash var's value is "#contato", but when js tries to get it's offset you recieve an error saying that it's impossible to read property top of 'undefined'. So, you can try to remove that part of the script from the other pages and only keep it on home. This should work like a charm. If you have any question, please ask.
LE: I'd recommend this method for smooth scroll (I didn't tested it for your case, but it always worked for me)
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
use
<?php echo get_page_link(5)."#contact"; ?>
instead of get permalink function
I am using Reactive-Table to display data saved in my Meteor app as shown from the code below, in each row of the table there is a link to edit the document related to this row. I am trying using the edit link 'click event' to capture the _id of the document related to the row being selected but can't seem to get the _id, can someone please check my code and let me know what I am missing / doing wrong here and how to capture the _id? Thanks
customerslist.html
<template name="customerslist">
<div class="customerslist">
<div class="page-header">
<h1>Customers List</h1>
</div>
<div>
{{> reactiveTable class="table table-bordered table-hover" collection=customersCollection settings=settings}}
</div>
</div>
</template>
customerslist.js
Template.customerslist.helpers({
customersCollection: function () {
return Customers.find({},{sort: {title: 1}});
},
settings: function () {
return {
rowsPerPage: 10,
showFilter: true,
showColumnToggles: false,
fields: [
{ key: 'name', label: 'Customer Name' },
{ key: 'email', label: 'Email' },
{ key: 'phone', label: 'Phone' },
{ key: '_id', label: 'Action', sortByValue: false, fn: function(_id){ return new Spacebars.SafeString('<a name="' + _id +'" class="edtlnk" target="_blank" href="' + _id + '/edit"> Edit </a>'); } }
]
};
}
});
Template.customerslist.customers = function () {
return Customers.find({},{sort: {title: 1}});
};
Template.customerslist.events({
'click .edtlnk': function(e) {
var cust = this;
event.preventDefault();
console.log('Customer ID: '+cust._id);
}
});
The way the package sets up data contexts, this will only be set to the customer object if the event selector matches the tr element. That makes event.currentTarget the tr, but event.target is still the edit link.
You could try something like this:
Template.customerslist.events({
'click .customerslist tr': function(e) {
if ($(e.target).hasClass('edtlnk')) {
var cust = this;
e.preventDefault();
console.log('Customer ID: '+cust._id);
}
}
});
I don't know Meteor though I am starting to play around with it so I don't care about up or down votes at all but learning the answer your question.
I found the Event Maps docs which I am sure you saw as well:
https://docs.meteor.com/#/full/eventmaps
This was listed in the doc:
{
'click p': function (event) {
var paragraph = event.currentTarget; // always a P
var clickedElement = event.target; // could be the P or a child element
}
}
If a selector matches multiple elements that an event bubbles to, it will be called multiple times, for example in the case of 'click
div' or 'click *'. If no selector is given, the handler will only be called once, on the original target element.
The following properties and methods are available on the event object passed to handlers:
type String
The event's type, such as "click", "blur" or "keypress".
target DOM Element
The element that originated the event.
currentTarget DOM Element
The element currently handling the event. This is the element that matched the selector in the event map. For events that bubble, it may be target or an ancestor of target, and its value changes as the event bubbles.
It seems to me that since target and currentTarget are DOM elements can't you get what you need from those or are you referring to the _id available in Meteor on an insert callback?
Hi i have options page for my theme i used color picker jquery plugin in my options page as show in image below.
i want when i change the color from color picker automatically show the color value code within the text field.how can do this?
this is the code within my options page related to appearing the color picker and text field
function to register the options setting
function YPE_register_settings_sections_fields() {
register_setting (
'YPE_header_option_group',
'YPE_header_option_name',
'YPE_sanitize_validate_callback'
);
add_settings_section (
'YPE_header_section',
'Header Section',
'YPE_header_section_callback',
'YPE_menu_page_options'
);
add_settings_field (
'YPE_header_bg',
'Header Background',
'YPE_header_bg_callback',
'YPE_menu_page_options',
'YPE_header_section'
);
}
add_action('admin_init', 'YPE_register_settings_sections_fields');
function to appear the text field and color picker
function YPE_header_bg_callback() {
$YPE_options = get_option('YPE_header_option_name');
$YPE_header_bg = isset($YPE_options['YPE_header_bg']) ? $YPE_options['YPE_header_bg'] : '';
?>
<div class="input-group color-picker">
<input class="form-control" style="width:80px;" name="YPE_header_option_name[YPE_header_bg]" id="<?php echo 'YPE_header_bg'; ?>" type="text" value="<?php echo $YPE_header_bg; ?>" />
<span class="input-group-btn">
<div id="colorSelector">
<div nam style="background-color: #0000ff">
</div>
</div>
</span>
</div>
<script>
$("#colorSelector").ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
});
</script>
<?php
}
This is my console JavaScript error if you can read errors and help me for solving my problem
There are several issues in your code...
WordPress uses jQuery in noConflict() mode, so you need to use jQuery and not $.
There is a missing a closing curly brace } after the onChange function.
There is no need for return false; in your onShow and onHide functions.
Add code to your onChange function to assign the hex value to your #YPE_header_bg input element.
Example code:
<script>
jQuery("#colorSelector").ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
jQuery(colpkr).fadeIn(500);
},
onHide: function (colpkr) {
jQuery(colpkr).fadeOut(500);
},
onChange: function (hsb, hex, rgb) {
jQuery('#colorSelector div').css('backgroundColor', '#' + hex);
jQuery('#YPE_header_bg').val('#' + hex);
}
});
</script>
You need to simply add this line of code on your onChange method and I assume your color input box id is YPE_header_bg:
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
$('#YPE_header_bg').val('#' + hex);
I have a server side method that can take long time. I decided to display a loading process modal and for that I used this tutorial. It works fine, but my problem is the following.
I'm using jQuery UI/Tab on the same page and it contains two tabs. On postback all UI loses styles. As I understood, the problem is in UpdatePanel, and the solutions suggested is to use the function pageLoad(). But it solved my problem partially, because the last selected tab is not persisted on postback.
It worked fine before implementing the loading model process and I used the following :
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
Is there any solution for this?
I have a similar problem and I sorted out using the following:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
//here you need to add the jquery functions related to the tabs, as well as other jquery code you may have
//i.e.
$(function () {
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
}
Hope this helps,
UPDATE: Probably, for your specific case, it would be something like this:
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_lazyload);
load_lazyload();
}
function load_lazyload() {
$(function() {
$("#tabs").tabs({
show: function() {
var sel = $('#tabs').tabs('option', 'selected');
$("#<%= hidLastTab.ClientID %>").val(sel);
$( "#tabs" ).tabs( "option", "disabled", [<%= hidDisTab.Value %>] );
},
selected: <%= hidLastTab.Value %>
});
});
}
You need to register a ClientSideScript that selects the current tab in whatever event/method that is being executed during the postback.