jQuery UI Slider to find id on document ready? - javascript

I have the situation to prepopulate stored value from hidden element in jquery ui slider based on its id as like below,
jQuery(function(){
if(jQuery("input[name=color_overlay_nav_bar]").val() != ''){
jQuery(".slider_global_style_overlay ").slider({
create: function(event, ui) {
console.log(jQuery(this).attr('id'));
if(jQuery(this).attr('id') == 'nav_overlay_id'){
value:jQuery("input[name=color_overlay_nav_bar]").val();
}
}
});
}
});
Here input[name=color_overlay_nav_bar] has the opacity value, this needs to pre populate based on slider id.I have used Create event on document ready function to find id
But still i could not get it. something i missed here. What i done wrong on this.Kindly advice.
Thanks,
Dinesh

Sorry, my english is so bad. HEHEHE
You can't use "value" in "create" like this.
try this...
$(function(){
if($("input[name=color_overlay_nav_bar]").val() != '')
{
$(".slider_global_style_overlay ").slider
({
create: function(event, ui)
{
if($(this).attr('id') == 'nav_overlay_id'){
$(this).slider("value", $("input[name=color_overlay_nav_bar]").val());
}
}
})
}
});
OR
try this AFTER your the slide instance
if($("input[name=color_overlay_nav_bar]").val() != '')
{
$("#nav_overlay_id").slider("value", $("input[name=color_overlay_nav_bar]").val());
}

Related

Read value of localStorage on body load or document ready

This is using jQuery UI 1.12.1 and jQuery 3.1.1. To start with, I'm using this function to store the state of two tabs in localStorage in currentIdx:
$("#tabs").tabs({
active: localStorage.getItem("currentIdx"),
activate: function(event, ui) {
localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
}
});
It stores the active tab (either 1 or 0) and shows that tab on a page reload ot after a browser restart. It fires on tab change, and I can see the value of currentIdx change in the console.
I'm also using this function
function checkStorage(){
if (localStorage.getItem("currentIdx") == "1") {
$('body').addClass('yes');
} else {
$('body').addClass('no');
};
}
to check the value of currentIdx and change the body class according to the value. I have two classes in CSS, body.yes and body.no. And I use this body tag to fire checkStorage:
<body onload="checkStorage()">
and on an initial page load I see either <body onload="checkStorage()" class="not"> or <body onload="checkStorage()" class="yes"> in dev tools and the body CSS changes.
The two body classes work on an initial page load or a new window or tab, so currentIdx is being read.
But the body class doesn't change on a tab change; it does does change after I refresh the page after a tab change.
So how do I get the body class to be read all the time? I tried $(document).ready(function() but that doesn't help.
Edit
This works without having to use the onload="checkStorage() in <body>; might not be real pretty, but it works:
$(document).ready(function() {
checkStorage();
$("#tabs").tabs({
active: localStorage.getItem("currentIdx"),
activate: function(event, ui) {
localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
checkStorage();
}
});
function checkStorage(){
if (localStorage.getItem("currentIdx") == "1") {
$('body').toggleClass('sucks').addClass('yes');
} else {
$('body').removeClass('not').addClass('no');
};
}
});
Here you go with a solution
$("#tabs").tabs({
active: localStorage.getItem("currentIdx"),
activate: function(event, ui) {
localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
checkStorage();
}
});
function checkStorage(){
if (localStorage.getItem("currentIdx") == "1") {
$('body').removeClass('no').addClass('yes');
} else {
$('body').removeClass('yes').addClass('no');
}
}
Hope this will help you.

Convert jQuery to Prototype JS

I need to convert the following jQuery into Prototype JS.
jQuery("button.btn-transcript").click(function() {
tsTarget = jQuery(this).attr("data-target");
if (jQuery(this).hasClass("collapsed")) {
jQuery(tsTarget).show(200);
jQuery(this).removeClass("collapsed");
jQuery(this).attr("area-expanded","true");
} else {
jQuery(tsTarget).hide(200);
jQuery(this).addClass("collapsed");
jQuery(this).attr("area-expanded","false");
}
});
I gave it a try but I'm not too good with JS prototype. Am I heading in the right direction?
$("button.btn-transcript").on('click', 'button.btn-transcript', function(event, el)) {
transTarget = $(this).readAttribute("data-target");
function(event,el) {
if($(this).hasClassName("collapsed")) {
$("transTarget").show();
$(this).removeClassName("collapsed");
$(this).writeAttribute("area-expanded", "true");
} else {
$("transTarget").hide();
$(this).addClassName("collapsed");
$(this).writeAttribute("area-expanded", "false");
}
}
Try this:
$(document).on('click', 'button.btn-transcript', function(evt, elm) {
var tsTarget = $$(elm.readAttribute('data-target')).first();
elm.toggleClassName('collapsed');
tsTarget.toggle();
elm.writeAttribute('aria-expanded',
(elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true'));
});
It's not going to work 100% the same, because hide and show in Prototype (which are collapsed here into the one-liner toggle) are instantaneous. If you want the item to transition over 200ms the way you had written yours, you will need to use CSS transition effects.
If your button controls more than one item (if more than one element in the DOM matches what you have entered in the data-target attribute), then you would change this very slightly:
$(document).on('click', 'button.btn-transcript', function(evt, elm) {
var tsTargets = $$(elm.readAttribute('data-target'));
elm.toggleClassName('collapsed');
tsTargets.invoke('toggle');
elm.writeAttribute(
'aria-expanded',
(elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true')
);
});

Conditional fields based on select value in SiteOrigin Page Builder

I'm trying to integrate Page Builder by SiteOrigin into my plugin. I've added some custom fields under the row styles via the siteorigin_panels_row_style_fieldsfilter found here. One of the custom fields is a select. I would like fields to either be hidden or displayed when the select is at a certain value. I've enqueued the Javascript to Page Builder using the siteorigin_panel_enqueue_admin_scriptsaction as per the documentation, and have even added the panelsopen event with some test code:
jQuery( document ).ready(function($) {
$(document).on('panelsopen', function(e) {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
However, this does not seem to be working. Any help or ideas how I could solve this would be greatly appreciated!
After some research I figured this out by using the ajaxComplete() function in jQuery. This is how it works:
$(function() {
$(document).ajaxComplete(function() {
$('select[name="style[test_field]"]').bind('change', function (e) {
if( $(this).val() == 'option1' ) {
$('input[name="style[second_field]').hide(500);
$('input[name="style[third_field]').show(500);
} else {
$('input[name="style[second_field]').show(500);
$('input[name="style[third_field]').hide(500);
}
});
});
});
I hope this helps anyone trying to achieve something similar.

Fill twitter button with dynamic content

is it possible to create a twitter-button , while clicking a link? :
http://fiddle.jshell.net/gmq39/22/
I tried with:
$.getScript('http://platform.twitter.com/widgets.js');
The "button", which appear´s has no functionlaity and style´s
Anybody know´s a workaround or what do i need to inlcude? need your help.. greetings!!
Use twttr.widgets.load(); to bind the twitter functionality to a dynamically added button.
Also, to make sure you don't load the script over and over again, you could first check if the script is already loaded with something like this
function twitter() {
if ($(".twitter-follow-button").length > 0) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js');
}
}
}
$(function () {
$('body').html('Follow #MagnusEngdal')
twitter();
});
http://jsfiddle.net/23D8C/1/

CKEditor hook/event fired up on switching to/from source view

I try to convert a div tag into something I can drag and drop in CKEditor (as asked in another question).
Do you know how I can trigger the event when someone switches between source view and WYSIWYG mode?
I think this is what you are looking for:
CKEDITOR.on('instanceCreated', function(e) {
e.editor.on('mode', function(e){
// Do your stuff here
alert(e.editor.mode);
});
});
If you mean, you want to capture source mode changes , then you could try something like this:
//add this to your CKeditor’s config.js
$('textarea.cke_source').live('keyup', function() {
$(this)
.closest('.cke_wrapper')
.parent()
.parent()
.prev()
.ckeditorGet()
.fire('change');
});
This discussion might help as well: ckEditor
Hope it helps
CKEditor onChange plugin:
Get a notification (new event) whenever the content of CKEditor changes.
http://ckeditor.com/addon/onchange
I think you should write a plugin to make a fake element for the wysiwyg-view.
Ckeditor is able to recognize elements that need to be replaced with fake-elements.
I made a start for you:
(function() {
CKEDITOR.plugins.add('myPlugin', {
requires : ['fakeobjects'],
init: function(editor) {
var me = this;
var pluginName = 'myPlugin';
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
editor.addCss( // your custom css for your placeholder here
'div.myPluginElement' +
'{' +
'border: 1px solid #a9a9a9;' +
'width: 70px;' +
'height: 50px;' +
'}'
);
},
afterInit : function(editor) {
var dataProcessor = editor.dataProcessor,
dataFilter = dataProcessor && dataProcessor.dataFilter;
if (dataFilter) {
dataFilter.addRules({
elements : {
div : function(element) {
if (typeof element.attributes['class'] !== 'undefined' && element.attributes['class'].indexOf('myPluginElement') != -1)
return editor.createFakeParserElement(element, 'myPluginElement', 'div', false);
else return;
}
}
});
}
}
});
})();

Categories