I code this page, a tab with sliding capability : here
I really like the effect, but when you vien a long tab (let say specification), and we go to a smalll one (download) reclicking on a large one force the user to scroll down again...
Is it possible to jquery something that tell the page to stay scroll down at the max after the tab pressed ?
I'm doing something like this with the jQuery UI tabs, you can modify it for whatever layout:
//Tab panel height matching
$(".ui-tabs-panel").each(function() {
if ($(this).height() + 30 > $(this).parents(".subTabsC").height()) {
$(this).parents(".subTabsC").height($(this).height() + 30);
}
});
I have the whole tab content wrapped in a <div class="subTabsC">. The 30 pixels in my case is to account for the tabs and the border, adjust to whatever you need.
Yes. OnLoad you could iterate through all the tabs, find the tallest and set the container's height to that value and remove whatever's doing the smooth resizing.
It means some of the smaller things might look a little lost, but you'd not be resizing the page (which annoys me too).
couldn't you just add "return false" at the end of your function? this would prevent it from "refreshing" the page when you click the anchor link....I could be wrong...I'm just starting to learn jquery and javascript.
Related
I'm spending some time writing HTML and CSS, and am using the developer tools in Firefox 53. Specifically, the "HTML/DOM/CSS Inspector".
When you move the mouse over a chunk of HTML in the Inspector window, the corresponding rendered HTML element on the page is highlighted. Plus, there are some helpful grid lines and color overlays and whatnot also drawn over the page, all of which was a good decision on the part of the Mozilla developers. It shows how random divs and other elements might be overlapping, is great for showing where margins are collapsing, etc.
However, when I move the mouse off the HTML tree, all that useful highlighting and overlays vanish. Is there a way to get that highlighting/overlay to "stick"? For example, until I click on another HTML element, or reload the page, or... actively take some action other than simply moving my mouse?
Note that right-clicking the Inspector and selecting the ":hover" menu entry is most emphatically not what I'm looking for. I want to change the mouseover behavior of the Inspector, not that of the page.
(Now I'm going to pour another shot of whiskey and resume fighting with the Rules/Computed-versus-"browser styles" controls. Those were... not as well designed.)
The general highlighter can't be toggled to stay on the page, it only reacts on hovering the nodes.
Only some other highlighters are sticky, like the one for elements matching a specific CSS selector or the CSS grid highlighter, both located within the Rules side panel:
The CSS selector matching highlighter is currently (as of Firefox 53) the one that comes nearest to what you're looking for, though it's missing the grid lines.
Furthermore, there is already a request for adding a sticky element highlighter in Mozilla's bug tracker.
As visible in the image, i have a "Hide" button. On click of the Hide button i want the left panel to be hidden and the right panel to cover 100% of the screen. On doing so, the "hide" button will change to show where the panel comes back to its original position.
For doing the same
xtype:'toolbar',
docked:'top',
items:[
{
cls:'hide',
xtype:'button',
text:"Hide",
iconMask:true,
ui:'back',
id:'hide',
handler:function () {
var viewWidth = Ext.Viewport.getWindowWidth();
alert(viewWidth);
desiredWidth = Math.min(viewWidth, 400) - 10;
Ext.fly('protocol').setStyle('width', desiredWidth); ;
}
},
I tried the above code to change the width of the panel dynamically but Ext.fly doesn seem to work.
What could be the solution to this?
Any help is appreciated.
A highlight of the left panel will be appreciated.
However, just looking at your image and I am making an assumption here.
If all you want to hide is the left panel containing the following
Then perhaps, what you can do is to do a jQuery toggle after declaring the LEFT and RIGHT panels within a "DIV" html
tag for example. See link below.
jQuery API for toggle
Also, if you're using a Javascript library or tool to build this, then you might want to get the source of the Javascript and dive into that.
From my experience, it is a lot easier to write a Javascript function on your own rather than to use something ready built.
Ext.getCmp('workItemPanel').hide();
worked well for me.
I have a sliding carousel of items, each of which includes its own like button. I want the like buttons to have comments; that is, when the user clicks Like, he should be presented with a prompt to leave a comment (http://developers.facebook.com/blog/post/397/). I'm starting to doubt that these goals are compatible and would like to hear if anyone has already achieved it.
The comments on the Like buttons are wider than the items in the carousel, and correctly overflow onto other carousel items. However, some of these items are outside the clipping box, since the carousel items are necessarily inside a div with overflow: hidden (otherwise we wouldn't achieve the effect of the items scrolling into existence upon paging). Because of this, if I click Like on the rightmost item currently visible, the comments prompt that appears will be partially outside the clipping box and thus partially visible.
It appears to me the only possible hope of allowing the comments prompt to overflow the carousel container is to place the prompt outside the container in the dom. This way, assuming we can visually position the prompt next to its Like button where it belongs, it's no longer constrained by the container. This seems within possible, since at the time of this writing the comment prompt is implemented as a separate iframe from the button itself; i.e., this XFBML:
<fb:like width="450"></fb:like>
yields (approximately) this HTML:
<iframe src="facebook.com/like_button.php"></iframe>
<iframe src="facebook.com/comments_widget.php"></iframe>
But if I try to move the comments iframe in the dom, it instantly and permanently becomes empty. Even if I could find a way to detach certain events and prevent this, it shows that an intricate solution is called for, and one which Facebook can break at any time in the future with changes to their implementation. Thus, I can't move the comments in the dom, and thus, the prompt is always in danger of being clipped. Facebook says this on the subject:
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.
Clearly in the case of a carousel it's not possible to remove overflow: hidden. Has anyone found a way around this, or should I give up and spend my time elsewhere?
Thanks
I'm writing a Silverlight+XNA game and when the user has something in their clipboard they can see less of the screen. I'd really like to be able to not show this clipbaord but I can't see any way (though it does seem to go away after some amount of time)
I've tried an empty string and Clipboard.SetText(null) but that throws an exception.
Unfortunately, there is no way to either clear the clipboard from code or influence the display of the SIP beyond setting an InputScope.
The best you can do for now is to update your design to allow for the amount of space which the SIP may use. :(
While more complicated, you could create your own text input keys as buttons, and instead of using a textbox, use buttons templated to look like textblocks, with background as you show above, and all... When the user taps the "button" that is a "textblock", you set a flag that says which textblock the keypad buttons send their numbers to.
Or, if the only spot you are sending inputs to (as it appears now that I look at your UI again), there is no need for the button template as the input space, or the flag. Just create buttons for user to tap for input, and send that input to the textblock that appears to be where your answer is. You could make the buttons whatever size you want, that way, as well, so you control how much of the screen is visible. Another thing you could do is make the buttons semi-transparent, so you could have even more background image showing.
Another thought - send the buttons all to the same event handler (except the backspace button), and have the code for that event handler look like this:
{
Button btn = sender as Button;
textblock.Text += btn.Content;
}
Sometimes I need to inspect elements that are only showing up on a page if you put mouse over some area. The problem is that if you start moving mouse towards firebug console in order to see the changes, mouse-out event is triggered and all changes I am trying to inspect disappear. How to deal with such cases?
Basically I am looking for something that would either:
Switch to firebug console without moving a mouse (using keyboard shortcuts maybe? But I can't figure out how to use firebug with keyboard only)
Have an ability to "freeze" the page so your mouse movements don't trigger any events anymore.
Thanks.
HTML Tooltip (Firebug)
Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.
HTML Tooltip (Firefox developer tools)
Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element
This feature can also be accessed from the popup menu in the HTML view.
If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:
JQuery Tooltip
Open the console and enter jQuery('.css-class').trigger('mouseover')
Regular Javascript Tooltip
Open the console and enter document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
The style panel in Firebug has a dropdown menu where you can choose the :active or :hover state.
You can also start the debugger on a timer. Enter this command into the console:
setTimeout(function(){ debugger; }, 10000);
This will give you 10 seconds to use the mouse and make the page look the way you want in order to inspect it. When the debugger starts, the page will freeze, and you'll be able to explore the elements in the developer tool tab, without the DOM changing or responding to any additional mouse events.
I think you can also do this :
Choose Firebugs Inspect mode
Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.
Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console
Worked for me anyway!
For Jquery UI tooltip I finally set up a long delay for the hiding of the element so I have time to inspect it before it's deleted. For example, I used this to inspect the tooltip:
$( document ).tooltip({ hide: {duration: 100000 } });
instead of:
$( document ).tooltip();
You could insert a breakpoint at the start of the mouseout event handler. Its code won't be executed until you allow it to continue, and you can use the DOM inspector and so forth while execution is stopped.
Firebug's hotkey for inspecting elements is Ctrl + Shift + C (Windows/Linux).
Go here for a list of all Firebug keyboard shortcuts.
For the bootstrap tooltip:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
While selecting :hover in the CSS menu might be nice if you only want to inspect some CSS code, it doesn't work if whatever you want to inspect is changed using JavaScript.
A simple hack in this case is to open Firebug in a different window (top right corner of the Firebug bar) than move your mouse at the desired location and drag and drop something from there out of the browser window. Now you can inspect whatever in the Firebug window. Just don't move your mouse back into the browser window.
For Javascript events such as Mouse over.
Open Firebug/Inspect an element.
Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
Put your mouse over the element and don't move it from this point forward.
Use your ↑/↓ arrow keys to manoeuvre in Firebug.
Use your ←/→ arrow keys to expand/contract code with + or -.
Double tap Tab to get to the CSS pane.
Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
Hold Shift and double tap Tab to get back to the HTML pane.
I'd like to chip in with my preferred method. Putting this little snippet in your console allows you to start the debugger at any time with a simple keypress on your keyboard (F8 is used in this example)
document.addEventListener("keydown", (event) => {if (event.key == 'F8') {debugger}});
You can also use a keycode if you prefer:
document.addEventListener("keydown", (event) => {if (event.keyCode == 119) {debugger}});
I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.
Open console:
If you have javascript based tooltip, find applicable elements in console with appropriate selector. like below and confirm you able to find appropriate element with selectors.
$('your selector')
Write above javascript and Press enter. you will have list of elements.
Now e.g. If library added event on mouseenter enter following script:
$('your selector').mouseenter()
Press enter.
This way you can simulate mouse movement events without actual mouse. and can use actual mouse pointer to investigate thing in debugger tool.
This is an extremely old question by now, but I've found an answer that directly answers the "freeze the browser" portion of the question.
Control + Alt + B. This is "break on mutate". Which means, when you are hovering over an element with firebug engaged (Control + Shift + C), that when the HTML attributes would change, instead they hit a breakpoint, allowing you to easily navigate around to examine for paths, etc.