I need to hide the follow button on Twitter card using :
<blockquote width="581" height="250" class="twitter-tweet"><p></p></blockquote></div>
How do you hide the follow button on a card ?
Thanks
The twitter widget expands into an iframe, so you would have to wait until it is fully loaded. Afterwards you could either fully remove the button or hide it. You will need a little JavaScript. The problem is that you would have to wait until it is loaded. I don't know how to catch when the tweet is fully loaded so I will be checking for the button every 100 milliseconds until it appears. You could of course change that to fit your needs.
JS:
window.setTimeout(removeButton, 100);
function removeButton() {
var iframe = document.querySelector('iframe.twitter-tweet');
if(iframe == undefined) {
window.setTimeout(removeButton, 100);
return;
}
var button = iframe.contentDocument.querySelector('.follow-button.profile');
if(button == undefined) {
window.setTimeout(removeButton, 100);
return;
}
//Hide
button.style.display = 'none';
//Or remove
button.parentNode.removeChild(button); //Note: Not using button.remove() because of compatibility
}
This of course right now only works for one single tweet. If you wanted to remove multiple Follow buttons, you would have to modify this script a little bit.
Related
It is showing warning that 'keymanweb.setKeyboardForControl' cannot set keyboard on iframes.
I want to manually set specific language of keyman on iframe element.
Please help me out to achieve the same.
While keymanweb.setKeyboardForControl cannot be used with iframes, you should be able to use a controlfocused event event to select a keyboard on entry to the control:
keyman.addEventListener('controlfocused', function(eventProperties) {
if(eventProperties.target == myIframe) {
keyman.setActiveKeyboard(...);
}
return true;
});
so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.
I'm using jquery plugin token input for my dropdowns on this page
http://www.connectweb.com.au/search.aspx
It works fine in firefox in that I can click the arrow and the dropdown opens with the contents and allows me to scroll up and down using the scrollbar. However in IE and Chrome I cannot seem to scroll by moving the scroll bar up and down. Its some css somewhere but I'm struggling to find out what..any css experts out there want to take a quick look? would be appreciated : -)
thanks
​Hello please take a look at the https://github.com/loopj/jquery-tokeninput/issues/130
The issue happens to be with the the way IE handles scroll bars versus chrome or firefox. The solution is to modify the inputtoken.js file as mentioned in the forum.
Here is the basic outline.
Declare a variable to hold the state
Check of the variable in the .blur event of the input_box
Add .mouseover, .mouseout to .dropdown
// 1. Keep track of mouse being over dropdown
var mouseOverDD;
// 2. IF the blur function
var input_box = $("<input type=\"text\" autocomplete=\"off\">")
.blur(function () {
if (!mouseOverDD) {
hide_dropdown();
$(this).val("");
}
})
// 3. Add over/out events
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide()
.mouseover(function(){
mouseOverDD = true;
})
.mouseout(function(){
mouseOverDD = false;
});
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.
I use a ASP.NET Menu control with Orientation=Horizontal. It is kind of irritating that the popout menus appear on mouseover, which causes it to show by accident if you move the mouse over the menu when you want to click on something right below the menu. Then the menu popout hides the element you actually wanted to click on!
Is it possible to change the functionality so that the popout requires a mouse click instead of mouseover?
Well, I found a solution myself (kind of a hack...).
This solution requires use of AJAX to capture the menu item onclick postback event, so it can be picked up client side in javascript before doing the actual postback when you click the menu item.
First, I override these functions that is defined by the Menu control
to ignore the menu popout in the mouseover event:
var activeMenuItem = null;
function Menu_HoverStatic(item) {
// Register the active item to be able to access it from AJAX
// initialize postback event
activeMenuItem = item
// Apply the style formatting on mouseover (colors etc).
// This was also called in the original Menu_HoverStatic function.
Menu_HoverRoot(item);
}
function Menu_Unhover(item) {
activeMenuItem = null; // This is the only difference to the original
var node = (item.tagName.toLowerCase() == "td") ?
item:
item.cells[0];
var nodeTable = WebForm_GetElementByTagName(node, "table");
if (nodeTable.hoverClass) {
WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass);
}
node = nodeTable.rows[0].cells[0].childNodes[0];
if (node.hoverHyperLinkClass) {
WebForm_RemoveClassName(node, node.hoverHyperLinkClass);
}
Menu_Collapse(node);
}
// Then I added a renamed copy of the original `Menu_HoverStatic` function:
function Menu_ClickStatic() {
// Pick up the active menu item that is set in the
// overridden Menu_HoverStatic function.
// In the original, the item was input parameter.
var item = activeMenuItem;
// The rest is identical to the original Menu_HoverStatic.
var node = Menu_HoverRoot(item);
var data = Menu_GetData(item);
if (!data) return;
__disappearAfter = data.disappearAfter;
Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
}
Then I snap up the onclick postback event in AJAX that is triggered by the menu. This must be done to cancel the onclick postback and display the menu popout instead.
// Get the Page Request Manager that provides all the .NET
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Register postback event for asyncronous AJAX postbacks
if (prm) prm.add_initializeRequest(InitializePostback);
function InitializePostback(sender, args) {
var element = args.get_postBackElement();
//Check if the postback element is the menu
if (element.id == 'myMenu') {
// Name of the menu element that triggered is the postback argument
var postbackArguments = document.getElementById('__EVENTARGUMENT');
if (postbackArguments)
// Check on the menu item name to pick up only the menu items that shall
// trigger the popout (not the items that does an actual command).
if (postbackArguments.value == 'MenuTopItem1'
|| postbackArguments.value == 'MenuTopItem2'
|| postbackArguments.value == 'MenuTopItem3') {
// Abort and cancel the postback
prm.abortPostBack();
args.set_cancel(true);
Menu_ClickStatic(); // Call my own copy of the original function
return;
}
}
}
Note:
I found out the details about these functions by using the script viewer in Firebug.
The soluton provided above doesn't work in everone's case. One can also try this out, it worked in my solution-
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
});
3 Steps:
Stop the current hovering effects:
On page load (or on ready), write following line: $('#Menu1').find('ul .level2').css('display','none');
Once you do that, it'll stop the hovering effect of that menu. But once you do that, then you would only be able to open the submenu by making it display block, so for that I wrote following lines, onclick of an image inside the menu: $('#Menu1').find('ul .level2').css('display','block');
Open the menu on click of an element: I don't think need to explain it. Just make menu display block on click of the identified element.
Close the opened menu: 2 ways to do it: First; Use property Disapperafter as below:
Second: Write below code to close it onclick of anywhere else on the screen:
$('body').click(function(evnt) {
if($(evnt.target).parents('table#menu').length == 0)
{
$('#MenuInvitePatient').find('ul .level2').css('display','none');
return;
}
else
{
return;
}
});