I have this code:
function getArea (){
var area1 = document.getElementById('first');
var area2 = document.getElementById('adart');
if (area1.style.display.match("none") && area2.style.display.match("none"))
{
area1.style.display = 'block';
}
else
{
area1.style.display = 'none';
}
}
function getArea1 (){
var addArticle = document.getElementById('adart');
var area1 = document.getElementById('first');
if (addArticle.style.display.match("none") && area1.style.display.match("none"))
{
addArticle.style.display = 'block';
}
else
{
addArticle.style.display = 'none';
}
}
Now, in my html page:
I have two text areas and two buttons.
Each button "activates" a different text area.
All that my code does is to make the property 'display' in each text area to be "block" or "none", also, to make sure that if one text is already visible, the others will not.
The problem is that the first button "edit article" is not working until I click on the second button "add article". The second button works properly.
Any thoughts?
Related
i have a list of products in my web page whose details are shown in modal popup.
I tried using the custom tag of statcounter as shown on their site [http://statcounter.com/support/knowledge-base/276/] but it works only for one product category. I am using the same modal body to show different products.
following is the codesnippet :
var sc_project = $##$##;
var sc_invisible = 0;
var sc_security = "$#*$*##$";
var _statcounter = _statcounter || [];
//function to push custom statcounter for products_of_interest
function _productStatCounter(product_of_interest) {
_statcounter.push({ "tags": { "data-project": product_of_interest } });
}
// jquery to push projects based on click
$(".portfolio-link").click(function () {
test_product = ($(this).attr("href"));
if(test_product !== undefined){
product_of_interest = ($(this).attr("data-project"));
_productStatCounter(product_of_interest);
} else {
return;
}
});
I used jquery to push the product_of_interest based on click of the product but statcounter is showing info about only one product not all the products. Since my product web app is a single page so i have used modal-body for showing different products on a popup screen. Is there any way to use statcounter on popups ?
The following worked for me. My window's hash changes when I open a modal and I was able to push the tags to statcounter on hash change.
<script type="text/javascript">
var sc_project = ******;
var sc_invisible = 1;
var sc_click_stat = 2; /*track anchor links*/
var sc_security = '******';
var _statcounter = _statcounter || [];
_statcounter.push({ tags: { page: 'homepage' } }); /*optional*/
window.onhashchange = locationHashChanged;
function locationHashChanged() {
var modalName = window.location.hash;
_statcounter.push({ tags: { project: modalName } });
_statcounter.record_pageview();
}
</script>
I'm new with Kendo UI PanelBar. I would like to expand the panelbar using javacript when the user click on a button. Thanks for your help.
#(Html.Kendo().PanelBar()
.Name("TestBar")
.Items(panelbar =>
{
panelbar.Add().Text("Additional Information")
.Content(#<text>#Html.Partial("Req") </text>);
})
)
Please try with the below code snippet. Call below funciton in your button click event.
<script>
function ExpandItemInPanelBar(){
var panelBar = $("#TestBar").data("kendoPanelBar");
// I have set 0 in 'eq(0)' so it will expand first item you can change it as per your code
panelBar.select(panelBar.element.children("li").eq(0));
var item = panelBar.select();
panelBar.expand(item);
}
</script>
Let me know if any concern.
Update 1:
//Check any item is expanded in panelbar
if(panelBar.element.children("li").hasClass("k-state-active") == true)
{
alert('items(s) expanded');
}
//Check every item is expanded or not in panelbar
items = panelBar.element.children("li");
for(var i = 0 ; i < items.Length; i++)
{
if($(items[i].hasClass('k-state-active'))
{
alert('this item is expanded');
}
}
I want to write a ckeditor plugin that adds a checkbox to the toolbar.
When an img element is selected, the checkbox should reflect whether the image has a certain class or not.
When something else than an image is selected, the checkbox should be
disabled, or maybe invisible.
When I check or uncheck the checkbox, the class should be added/removed to/from the img.
In other words, I want to add something else than a button to the toolbar (those that are added with editor.ui.addButton), and that something should be a checkbox.
How do I do that?
I managed to do it anyway, using editor.ui.add and editor.ui.addHandler. Here is a screenshot:
plugin.js:
CKEDITOR.plugins.add('add_zoomable_to_image',
{
init: function( editor )
{
var disabled_span_color = "#cccccc";
var enabled_span_color = "#000000";
var cb;
var span;
var html =
"<div style='height: 25px; display: inline-block'>" +
"<div style='margin: 5px'><input class='add_zoomable_cb' type='checkbox' disabled='disabled'>" +
"<span class='add_zoomable_span' style='color: " + disabled_span_color + "'> Add zoomable to image</span>" +
"</div>" +
"</div>";
editor.ui.add('add_zoomable_to_image', "zoomable_button", {});
editor.ui.addHandler("zoomable_button",
{
create: function ()
{
return {
render: function (editor, output)
{
output.push(html);
return {};
}
};
}
});
editor.on("selectionChange", function()
{
var sel = editor.getSelection();
var ranges = sel.getRanges();
if (ranges.length == 1)
{
var el = sel.getStartElement();
if (el.is('img'))
{
enable_input();
if (el.hasClass('zoomable'))
check_cb();
else
uncheck_cb();
}
else
disable_input();
}
else
disable_input();
});
editor.on("instanceReady", function ()
{
cb = $('.add_zoomable_cb');
span = $('.add_zoomable_span');
cb.change(function()
{
var element = editor.getSelection().getStartElement();
if (cb.is(':checked'))
element.addClass('zoomable');
else
element.removeClass('zoomable');
});
});
function enable_input()
{
cb.removeAttr('disabled');
span.css('color', enabled_span_color);
}
function disable_input()
{
uncheck_cb();
cb.attr('disabled', 'disabled');
span.css('color', disabled_span_color);
}
function check_cb()
{
cb.attr('checked', 'checked');
}
function uncheck_cb()
{
cb.removeAttr('checked');
}
}
});
CKEditor doesn't include the option to add a checkbox to the toolbar, so your first step is to look at their code and extend it to add the checkbox.
Then look at how other buttons work to modify the content and detect when the selection in the editor changes to reflect its new state, and apply those ideas to your checkbox.
I have a wordpress theme in which i have to create a page that has a movie that goes loop.
it has 3 menu points which change the div text without reloading the page.
So far no problem.
Click here – put it in content box 2
But when im on a different page and i click for example the second link, it should go to the video page and change the text to the second one.
How can i do this?
Is there a way to do that with?
url/wordpressname/#1
Found a Solution: i found a solution here: http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html
which i changed to fit my needs:
jQuery(document).ready(function($) {
var $mainContent = $("#text"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
//location.hash = this.pathname;
//return false;
});
$("#searchform").submit(function(e) {
location.hash = '?s=' + $("#s").val();
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
if (url=="1") {
$mainContent.html('<p>Text1</>');
}
if (url=="2") {
$mainContent.html('<p>Text2</>');
}
if (url=="3") {
$mainContent.html('<p>Text3</>');
}
if (url=="4") {
$mainContent.html('<p>Text4</>');
}
// url = url + "#content";
//$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
//$mainContent.animate({opacity: "1"});
//});
});
$(window).trigger('hashchange');
});
Dialog windows for CKEditor by default appear in the middle of the page but if the page is an iframe with a big height the dialogs appear way down the page.
Is it possible to configure CKEditor to position the dialogs in a different quadrant of the page? For example top middle?
Yes, the link MDaubs gives will guide you to do what you want.
I've had to do this in the past and the following snippet will demonstrate a solution for your problem:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x,0); // Top center
}
})
You can place this in the config file or the ready function for jQuery.
The solution by zaf works in that it helps to position the dialog, but I've found it to produce a bunch of side effects as to how the dialog functions (failing to display the URL of the image in the image dialog is one example).
It turned out that the original onShow() method that is being overridden returns a meaningful value that we should keep. This could be due to a plugin or something, but here's the code that ultimately worked for me:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
var result = onShow.call(this);
this.move(this.getPosition().x, $(e.editor.container.$).position().top);
return result;
}
});
This may be way you're looking for:
Programatically set the position of CKEditor's dialogs
I just had the same issue as Yehonatan and found this question really fast via Google. But after using the answer provided by zaf I still didn't get a dialog to appear in the proper position when the editor is loaded within an iframe.
In stead of the position() method I used the offset() method to place a dialog right under the toolbar. Together with the response of jonespm I came to this code that seems to work very good, also with existing dialogs.
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x, jQuery(this.getParentEditor().container.$).offset().top);
if (typeof onShow !== 'undefined' && typeof onShow.call === 'function')
{
return onShow.call(this);
}
}
});
Hopefully this code can help others with the same issue as me.
Correct syntax is:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
if (dialogName == 'image2') {
dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) {
return function() {
original.call(this);
CKEDITOR.tools.setTimeout( function() {
/*do anything: this.move(this.getPosition().x, $(e.editor.container.$).position().top);*/
}, 0);
}
});
}
});