I am still stuck on a highlighting problem in IE 7/8. I have tried applying CSS from this question, changing the onselectstart event to return false, adding the attribute unselectable="on", and anything else I could find here on SO.
Then I came across this response to this question:
Once an element is unselectable, users cannot select from within that
element. However, they are still able to select either the text or the
box of the element by dragging into it from within another element
which is not unselectable.
I have tried to work around this by cancelling various events on
myElement (ondragenter, oncontrolselect, onmouseenter,
onselectionchange...), it didn't work.
This is exactly what I am trying to do. I have a raphael canvas object that the user can drag in order to draw. However, if they leave the canvas I do not want text in "outside" elements to be highlighted. I was wondering if anybody has found a hack for the quoted problem. I'm only having this problem in IE 7/8.
use JQUERY
$('#dragelement').onMouseDown(function(){
//YOUR CODE
});
Related
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
Is there any way to make the text within an <a> tag selectable, using CSS?
I can't seem to be able to search this query for useful results on the web, "a" just finds the word "a" :)
I don't control the original creation of the document.
Are you trying to do this in a XUL document?
If so, you're probably looking for the following CSS property:
-moz-user-select: text;
I've used that on "description" elements with success but never tried on an "a" element.
You're either literally trying to just select text inside of an anchor element as a user.
OR
You're trying to use JavaScript to select text inside an anchor for the purposes of utilizing that text.
If it's the first simply select the text just at the edge outside of the anchor, if the selected character is 49% of less closer to the anchor then the browser won't select that character.
If you're trying to use JavaScript to get the text of an anchor you'll want to look at my tutorial, try selecting text and then clicking on the anchor below. That should give you some much needed direction...
http://www.jabcreations.com/blog/javascript-parentnode-of-selected-text
If none of that helps it would greatly benefit yourself as well everyone else reading your question to communicate your goal with greater clarity.
The nature of <a> is a link on HTML.So when mouse clicked on the text inside <a> the trigger of the link automatically triggered. I think it could not archive just by CSS alone. JavaScript need here
Run JavaScript Code
may let you select the text and handle click (if necessary )
I'm using Dojo GFX to do some simple drawing, but having a problem with IE 7/8 (switching browsers is not an option).
If I create a div, set up a surface and draw some rects, they draw correctly relative to the div, so far so good.
However, what I want to do is create a widget, something with an embedded 'surface' that draws based on some widget-specific data. As such, I have a widget that contains a div, and I draw into this div. When I do that, the rects I create behave as if they are responding to a float:right, appearing in order they are created and ignoring the 'x' parameter.
I assume that this behaviour is something to do with CSS, but I haven't got to the bottom of it yet. Any ideas or solutions gratefully appreciated!
Updates:
I've disabled all stylesheets and I am not using style attributes. No difference to the behaviour.
I've inspected the markup that gets generated using IE8 dev tools. Apart from the different location of the containing div, the only difference I can see is that the v:roundrect elements have no child elements when created against the widget div, but they do have empty elements like stroke when created against the div referenced by ID.
Reading back through the docs, a difference I can see that might be responsible is that the postCreate method where I am doing my drawing is manipulating a div that has not been added to the dom yet, whereas drawing on a hardcoded div is done when it does exist. Maybe the difference in rendering is something to do with this? Is there a specific lifecycle function which is appropriate to draw in for widgets?
It seems that if you are going to use Dojo GFX and draw on DOM elements that are created as part of a widget in IE7/8, you must actually do the drawing in an override of the startup() method.
Drawing in the postCreate() method causes incorrect rendering resembling a float: left.
On a radio button checked event, I hide the div by
document.getElementById("AltYukleniciDiv").style.visibility = 'hidden';
But, when I use it for an aspxTextBox, it doesn't hide it. Or when I use the ClientInstanceName instead of document.getElementById(" ")
UnvanText.SetVisible(false); this didn't work either. UnvanText is ClientInsanceName.
javascript crashes there. I put an allert after that and it never shows it. I have to do it because I hide a div, including everything in it, but it still shows the textboxes that has validation. I don't know how it is possible. Can you tell me a way to hide them all? It used to hide the div with all of its contents before I make some validation settings.
It sounds like asp.net is being 'helpful' and changing the IDs of your elements.
Give the text box the attribute ClientIdMode="Static", and it might fix it.
you can add a CssClass attribute to that text box then use it to find the element and hide it.
You can consider using jQuery, so you need to write a single line of code:
$(".MyHideClass").hide();
or set attribute style display:none
I can advice using Firebug (FF Extension) for debugging javascript