$(document).ready(function() {
$('#<%=ddlContinents.ClientID %>').change(function() {
var element = $(this);
var totalLength = element.children().length;
if ($(this).disabled == false) { $(this).disabled = true; }
});
});
What I am trying to do is fire off the change event of the dropdownlist and on change making this dropdownlist disabled. The code is firing and everything, but it does not disable the dropdownlist.
This portion of the code is not working:
if ($(this).disabled == false) { $(this).disabled = true; } });
You should use .prop() for jQuery 1.6+ or .attr() for earlier versions of jQuery:
> jQuery 1.6:
$(document).ready(function() {
$('#<%=ddlContinents.ClientID %>').change(function() {
var element = $(this);
var totalLength = element.children().length;
if (!$(this).prop("disabled")) {
$(this).prop("disabled", true);
}
});
});
< jQuery 1.6:
$(document).ready(function() {
$('#<%=ddlContinents.ClientID %>').change(function() {
var element = $(this);
var totalLength = element.children().length;
if (!$(this).attr("disabled")) {
$(this).attr("disabled", "disabled");
}
});
});
if (!$(this).attr("disabled")) { $(this).attr("disabled","disabled"); }
If you want to enable it later on, you gotta do:
$(this).removeAttr("disabled");
I know this post is old..This might help if anyone stuck with disabling dropdown on dropdown chnage function
if ($(this).attr('disabled', false))
{ $(this).attr('disabled', true);
}
Related
Please help!!!! I'm including a link to a page with a menu I would like to use for a site I'm building. I can't seem to figure out how to get the ".menu-outer" to reposition itself after I click on a link in the nav. I've tried all sorts of combinations of code but to no available. Could anyone be of any assistance?
http://cssdeck.com/labs/css-side-menu
The Menu has a hover effect that moves the menu back and forth, but I would also like the links to allow the menu to retract once a page link is clicked.
Thank You
You never mentioned using Javascript but here is a version that uses it to close the menu once and item is clicked (Note: from the url below a slight change to the css):
var menu = document.querySelector('.menu-outer');
var links = document.querySelectorAll('nav ul li a');
var addClass = function(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
removeClass(element, className);
element.className = (element.className + ' ' + className).replace(/^\s/, '');
}
};
var removeClass = function(element, className) {
if (className.indexOf('*') !== -1) {
var aryClasses = element.className.split(' ');
for (var i = 0; i < aryClasses.length; i++) {
if (aryClasses[i].indexOf(className.replace('*', '')) !== -1) {
element.removeClass(aryClasses[i]);
}
}
} else {
if (element.classList) {
element.classList.remove(className);
} else {
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
};
var open = function() {
console.log('opening');
addClass(menu, 'active');
};
var close = function() {
console.log('closing');
removeClass(menu, 'active');
};
if (menu) {
menu.addEventListener('mouseover', open, false);
menu.addEventListener('mouseout', close, false);
for (var l = 0; l < links.length; l++) {
var link = links[l];
link.addEventListener('click', close, false);
}
}
jQuery would be something like:
$('body').on('click', 'nav ul li a', function() {
$('.menu-outer').removeClass('active');
});
$('body').on('mouseover', '.menu-outer', function() {
$(this).addClass('active');
});
$('body').on('mouseout', '.menu-outer', function() {
$(this).removeClass('active');
});
http://cssdeck.com/labs/x0lpogde
I've been having issues trying to get Isotope to render properly.
I've tried a few different ways to get it to work, including using the imagesLoad function, to no avail.
You can view the page here: http://wpsanjose.com/#latest-posts
If you select "ALL", you'll see the proper margins appear which is what I'm after when it first pops up.
This is the code I'm using:
(function($) {
$(window).load(function() {
//Set the isotope area
var $container = $('#isotope-wrap');
//Set our items to be filtered and how to display
$container.isotope({
itemSelector: 'article',
masonry: {
columnWidth: 1
}
});
var $filterSets = $('.options'),
$filterLinks = $filterSets.find( 'a' );
$filterLinks.click(function() {
var $this = $(this);
// don't do anything if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $filterSet = $this.parents('.options');
$filterSet.find('.selected' ).removeClass('selected');
$this.toggleClass('selected');
})
// filter items when filter link is clicked
jQuery('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
})
});
$(".entry").hover(
function() {
$(".article-outer", this).stop().animate({top: '-1000px'},{queue: false, duration: 700});
},
function() {
$(".article-outer", this).stop().animate({top: '0px'},{queue: false, duration: 700});
});
})(jQuery);
any help would be greatly appreciated!
I'm working on my application that creates tabs dynamically and fills them with partial views using ajax.
My question is: how to load css for this views? What's the best way to do it? I mean I can't load the css file on the partial view (no head) or could i?
Some code: the tabManager (a partial view loaded on the main page):
<script>
var tabTemplate = "<li class='#{color}'><a id='#{id}'href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>"; // base format for the tabs
$(document).ready(function () {
var tabs = $("#tabs").tabs(); // apply jQuery ui to tabs
$("a.menuButton").click(function () {
var urlContent = $(this).data("direction");
var label = $(this).data("label");
var idTab = $(this).data("id");
var color = $(this).data("color");
var exist = false;
var counter = 0;
$('#tabs ul li a').each(function (i) { // tab already exist o no hay que crear una tabla?
counter = counter + 1; // index counter
if (this.id == "#" + idTab) { // Tab already exist?
exist = true;
$("#tabs").tabs("option", "active", counter - 1); //activate existing element
}
});
if (idTab == "-1") { // is a clickable element?
exist = true;
}
if (exist == false) { // create new tab
addTab(idTab, label, color); // basic tab
getTabContent(idTab, urlContent); // content for new tab
var lastTab = $('#tabs >ul >li').size() - 1; // get count of tabs
$("#tabs").tabs("option", "active", lastTab); // select last created tab
}
});
function getTabContent(idT, urlC) { // ajax call to partial view
$.ajax({
url: urlC,
type: 'GET',
async: false,
success: function (result) {
$("#"+idT).html(result);
}
});
};
function addTab(idT, labT, color) { //create new tab
var label = labT,
id = idT,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label).replace(/#\{id\}/g, "#" + id).replace(/#\{color\}/g, color)),
tabContentHtml = "Cargando...";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
tabs.tabs("refresh");
}
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.bind("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
});
</script>
<div id=tabs>
<ul>
</ul>
A button example:
<li><a class="menuButton" href="#" title="Permisos" data-id="tab3" data-direction="Permiso/_Administrar" data-label="Label" data-color="blue"><img src="#Res_icons.More">Permisos</a><li>
i found my answer here: http://dean.resplace.net/blog/2012/09/jquery-load-css-with-ajax-all-browsers/
the code:
<script type="text/javascript">
$(document).ready(function () {
$("head").append("<link href='...' rel='stylesheet'>");
});
</script>
i'm trying to code a div which appears, dissapears after a while and apears when hovering..
you can see the live example at www.aedas.com - the left pane slides in, then it dissapears, and when you hover that area it will reappear.
thank you very much!
You could try something simple as this :
I am using setInterval and clearInterval for setting an interval for hiding the bar.
Important Note
id returned by the setInterval should be used by the clearInterval or the loop won't break!!
Working jsfiddle : http://jsfiddle.net/frictionless/QmLAv/
$(function() {
var showTime = 5000;
var transition = 'slow';
var target = $('.headerbar');
var flag = false;
target.slideDown(transition);
var id = setInterval(function(){hide(target);}, showTime);
var hide = function(item) {
debugger;
if(flag){
return;
}
clearInterval(id);
item.slideUp(transition);
};
target.hover(function() {
flag = true;
clearInterval(id);
$(this).show();
}, function() {
flag = false;
id = setInterval(function(){hide(target);}, showTime);
});
});
I'm trying to manually clean the HTML of a Telerik RadEditor with Javascript but I can't seem to find the correct place to store the value so that it gets saved on post back.
Here's the JS I have:
$(function () {
jQuery.fixHash = function ($html) {
// modify $html
return $html;
};
$("#adminEditingArea input[id$='SaveButton']").unbind("click").click(function () {
$("iframe[id$='_contentIframe']").trigger("save");
// call .net postback
return false;
});
});
var editorSaveEventInit = false;
function InitSaveEvent() {
if (!editorSaveEventInit) {
var $EditFrames = $("iframe[id$='_contentIframe']");
if ($EditFrames && $EditFrames.length > 0) {
$EditFrames.bind("save", function (e) {
var $thisFrame = $(this);
var thisFrameContents = $thisFrame.contents();
if (thisFrameContents) {
var telerikContentIFrame = thisFrameContents.get(0);
var $body = $("body", telerikContentIFrame);
var html = $.fixHash($body).html();
$body.html(html);
// also tried storing the modified HTML in the textarea, but it doesn't seem to save:
//$thisFrame.prev("textarea").html(encodeURIComponent("<body>" + html + "</body>"));
}
});
editorSaveEventInit = true;
}
}
};
$(window).load(function () {
InitSaveEvent();
});
Is there any way to access the Telerik RadEditor object with JavaScript (using OnClientCommandExecuted()?) so that I can access the .get_html() and .set_html(value) functions? If not, what values do I need to set before posting back?
Why don't you use custom content filters.
Ah, just discovered Telerik's built-in $find() function: http://www.telerik.com/help/aspnet-ajax/editor_getingreferencetoradeditor.html
Edit: here's the solution I came up with for my InitSaveEvent() function:
var editorSaveEventInit = false;
function InitSaveEvent() {
if (!editorSaveEventInit) {
var $EditFrames = $("iframe[id$='_contentIframe']");
if ($EditFrames && $EditFrames.length > 0) {
$EditFrames.bind("save", function (e) {
var $thisFrame = $(this);
var thisFrameContents = $thisFrame.contents();
if (thisFrameContents) {
var telerikContentIFrame = thisFrameContents.get(0);
var $body = $("body", telerikContentIFrame);
var html = $.fixHash($body).html();
// SOLUTION!
var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:eq(0)");
var editor = $find($radeditor.attr("id"));
editor.set_html(html);
// ☺
}
});
editorSaveEventInit = true;
}
}
};