I have a problem with this website
http://www.Ghitulescu.de/beta/index.html
on an iPhone or at small browser windows: the navbar collapse as expected at smaller screen-widths, expands then when clicked on the navbar-toggle BUT when I am choosing one of the navbar-menu-items, the navbar remains like this (and covers more than the half of the iPhone-screen) until I click on the navbar-toggle again.
Could you please give me a hint?
Thank you!
Kind regards,
Vlad
That's how Bootstrap is designed.
If you would like it do that, add the following code to your site (Tested on Win7 Chrome 32):
$('ul.navbar-nav').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
Related
Table.vue contains Row.vue and Form.vue inside.
Wanted behavior:
Row of the table will say the component comes from Row.vue
I was right-clicking the Row and went on "View page source", "inspect" and explored, but I couldn't find the answer.
Any solutions?
Also it would be awesome if there's a tool that helps with what I explained above with visual like this: instead of margin, border and such. It would be like Table.vue, Row.vue, etc...
I'm sorry it's not clear to me what you're trying to achieve, but there is a browser-based tool that might help you with debugging. It is compatible with both v2 and v3 and can be installed on firefox or chromium-based browsers
https://devtools.vuejs.org/
use this icon to target the component
Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.
First, im not really experienced with javascript or jquery, usually the plugins or very very simple code by hand (as you are about to see).
Wat i want is done many times, but for some reason i cannot get it to work like i would.
I have several problems.
I use the .animation to slide 2 divs in and out (2 divs next to each other, and i want them to slide in and out of the screen (like the iphone homescreen for example).
Now the problem is the animation does not work as intended, instead of sliding away div1 WHILE sliding in div2 along side of div1, div1 disapears/shrinks (sliding up and left) instead of "sliding outside of the screen" and then div2 shows up afterwards. (so the slide effect is not working and the divs hide and show seperatly instead of sliding like a iphone screen).
Now the thing is i have recreated the setup and tried on there, and it works as intended as shown here: http://jsfiddle.net/dkeulen/2fHbz/
So that is how i want it to work, but it does not do so as show here: (NOTE: its work in progress) http://jsfiddle.net/dkeulen/gQ9aE/2/
(Black square on the right center is the button you need to click).
I could post all the html and css and jquery here but its quite the amount to post...
If anything els is needed i can provide it ofcourse.
As code this is the part i use for the sliding:
$('.btnr').click(function(){
$('#hosting').animate({'width' : '0px'}, 100).hide(600);
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
$('.btnl').click(function(){
$('#hosting').animate({'width' : '100%'}, 600).show(400);
$('#inexchange').animate({'width' : '0px'}, 600).hide(600);
$('.btnl').fadeOut(600);
$('.btnr').fadeIn(600);
});
I hope anyone can help me out on what goes wrong and what i must do about it, thanks in advance!.
it's better to specify a jsfiddle for us to see it in action
I think your problem is that the hide() and show() doesn't stack in the same animation queue
so one way of solving this is using promise ex.
$('.btnr').click(function(){
promise1 = $('#hosting').animate({'width' : '0px'}, 100).promise();
$.when(promise1).then(
function(){
$('#hosting').hide();
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
});
the same goes for the other button.
check this simple fiddle I made to demonstrate how it's working
http://jsfiddle.net/artmees/BCTxH/
I recently by accident found an issue I have with a web application I have made entirely with dojo.
I have a TabContainer and a toolbar with buttons and each button adds a Tab in the TabContainer.
Each of these new Tabs has as children, created programmatically, one or more of the following BorderContainers, ContePanes, Editors, FilteringSelects, Uploader and Buttons. I should point out that I do not have parseonLoad: true byt false and I call manually the parsers.parse when required. I should point out that in the ContentPanes in the content attribute I put also declarative filteringSelects and ValidationTexts and Uploader I hope that is not a problem.
Everything is working great in all browsers even in IE9 besides one thing in Firefox 12.
When I create many new tabs and the ScrollingTabController gets created (The left/right and dropdown arrows of the tabstrip) when I use the ScrollingTabControllerMenuButton (the down arrow at the far right) the TabContainer behaves wrongly and eventually freezes. Firebug shows weird errors when I select different tabs via this menu of the tab strip. Errors of the buttons that I have in these tabs, weird errors mentioning StackController or ScrollingTabController
[ e.g.
button is undefined
if(this._selectedTab === button.domNode){ StackController.js (line 222) ]
different each time...
This weird behavior only happens in Firefox. IE9 and Chrome do not have any issue at all!
Could anyone have an idea on what might be the problem? Is it a known bug? Is it a problem that I have many widgets in each Tab ?
It seems that it is indeed a browser specific bug and as I was told it should be fixed in the following releases
I first reported it to the dojo community and from there they reported it to the Firefox team
http://bugs.dojotoolkit.org/ticket/15496
I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be.
The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?
I tried downloading the jqtouch plugin and then attaching .touch([...]) to all calls to slider() and rangeslider(), but that didn't work.
UPDATE: I found this "patch" on the jQuery UI website
http://bugs.jqueryui.com/ticket/4143
that says it facilitates slider on iPhone, but now for another question: how do I incorporate this "patch" into my code? Do I just include it at the beginning of the code like a plugin?
This library seems to offer what you're looking for:
https://github.com/furf/jquery-ui-touch-punch#readme
It also has some example use code (simply add the plugin):
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#widget').draggable();
</script>
Just wanted to add some new info about this. Touch-punch will work fine for Ipads and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch)
The fix is quite simple, just add the following CSS-rules to the .ui-slider-handle:
-ms-touch-action: none;
touch-action: none;
Hope this helps
As #dazbradbury suggested, the touchpunch library can help translate the mouse events to touch events. The parameters in .draggable() limit the movement of the slider so it can't be moved beyond its slider parent.
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({
axis: "x",
containment: "parent"
});
</script>
EDIT: If you are already using a Jquery UI slider, you only need to include the touchpunch library. Do not call .draggable() for the .ui-slider-handle because it will overwrite the existing functionality.
I had the same problem. I developed an elaborate slider UI building on jQuery UI's slider only to realize it doesn't work at all on mobile. I tried the suggestions listed here but since I have a custom solution that's only based on jQuery UI Slider, it did not work.
Just use noUiSlider.
It does all the elaborate features (and much more) as the one I built on top of jQuery UI slider. It works beautifully on mobile devices and is easy to style too.