The jquery picker and the select option works well when it is on the full-screen desktop. But when I resize the browser view, nothing shows up when I click on them.
This is the link: http://www.yiyalo.com
here is the source code: https://github.com/stephenleong/MyProject
there is nothing wrong with the JQuery. you made a mistake in using BootStrap's grid. there is a "col-md-1" in your page which expands in mobile view and covers the form controls. you need to rewrite your grid. take a look at BootStrap's Grid system
Related
I created this testpage with Bootstrap which is working perfectly. When resizing to smartphone format, the result block (visible when all radio buttons are entered) is correctly aligned BELOW the other container. On a normal screen, it is displayed next to it.
Now, when I insert the same code inside a Wordpress post the realignment for mobile phone does not work anymore. I have been hacking the theme and looking at the generated html source code of the page, but I cannot understand why it is not working correctly. It has to be something inside the header of the page, but what is not clear to me.
Any suggestions?
I'm having a problem with the TinyMCE Template selection window.
Templates is a TinyMCE plugin that (I think) uses jqueryUI to open a popup window which allows the author to select from a collection of ready-built html templates.
This is all working fine. The problem I'm having is that the popup window is too big
I've created a TinyMCE fiddle here: http://fiddle.tinymce.com/zpeaab
If you click the Template button (see image) the popup opens, but then it's not possible to click the Ok button because it's off the bottom of the page.
Is there a way to
resize the window?
make the window resizable?
I found some additional settings:
template_popup_height : 300
template_popup_width : 500
This allows me to set the jQueryUI window properties. Seems to only accept integer numbers (e.g. neither '60%' or '300px' seemed to work)
This has allowed me to at least make the window small enough to fit on the screen
I'm using a modal box to display my advertising work for my portfolio. The modals are functioning properly for the most part, but it seems like the content within the modals is blocking my navbar at the top.
Without dynamically loading the content, is there a way to make the content of the modals not interfere with the navbar? I tried giving the navbar a higher z-index, but that didn't seem to do the trick. I gave the modal content as well as the modal.backdrop a lower z-index, but nothing seems to be doing the trick.
Here is a link to the page: http://0034191.netsolhost.com/ryancurtis/advertising.html
This might by an easy fix, but I've tried everything within my skill set. I'm pretty new to bootstrap.
Don't make the dialog modal. You can still pop-up the dialog, but don't make it modal. Modal prevents the user from seeing/interacting with what lies beneath.
It's easier to see the distinction via this example from the jQueryUI dialog (a very similar system).
I'm not fluent with bootstrap, but it appears that you would make your dialog an alert rather than a model.
Note that you can mix/intermingle bootstrap with jQueryUI if you wished to do so. They both run on top of jQuery, just include both libraries.
why dont u give padding/top margin for modal?
i guess its simplest solution..
<style>
.modal {
margin-top:50px;
}
</style>
or with JS
<script>
{
$("#myModal").animate({"width":"1100px","left":"30%"},3000,'easeInCirc');
}
</script>
I'm using jQuery mobile for a project and need to react to vclick events when a popup is opened.
My problem is that the vclick event is just fired inside the popup, not on the whole page.
You can find a minimal example here.
Thanks in advance for your help!
Your code works correctly, I dont know if this was your intention but you are using popup overlay panel. Unlike normal panel in jQuery Mobile 1.3 version, popup overlay panel has an hidden div witch stretches full width and full height of the screen.
What looks like a click on a mail page is just a click on a hidden overlay div.
You can even test this, use Firefox or Chrome and take a look at a popup HTML, you will find that DIV.
In your case this DIv is a problem:
<div id="panelPopup-screen" class="ui-popup-screen in" style="height: 611px;"></div>
You can always switch to jQuery Mobile 1.3 RC1, use its panel, just make it semi transparent.
EDIT :
Found a solution for you, here's a live working jsFiddle example: http://jsfiddle.net/SC8hH/
This will fix your problem:
#panelPopup-screen {
display: none;
}
I'm using the jQueryUI (extension?) and have a simple overlay on a page. Here's what I have so far
Anyway is there any built in way to grey out the screen when the dialog is open? I know you can do this by appending another div to the page, I want to know if jQueryUI has something like this built in.
I couldn't find anything like this on the API, maybe I missed something.
You can specify options for the dialog using an object literal. One of these options is modal which will place an overlay on the screen behind the dialog. This overlay will prevent the user from clicking behind the dialog.
$('#over').dialog({modal:true});
Example: http://jsfiddle.net/vhA2w/1/
Checkout all of the available options at: http://jqueryui.com/demos/dialog/
This jsfiddle should work for you
$('#over').dialog({ modal: true });