I'm using a dialog box and a date picker but for some reason there is no close button showing the top right corner and you cannot see the arrow buttons in the date picker. The buttons are there because the border shows when you hover over them but you cannot see them at any other time. Does anyone know why this is?
Border shows means you have loaded the css correctly. But buttons are missing because the button strip image is missing.
Check your css that the image strip path is given correctly. It has to relative to the css file.
You can debug more using Firebug in Firefox, or Inspect Element in chrome.
Related
I am using the standard MVC bootstrap template and got a few issues:
1) See the screenshot below. How can I get rid of the cross from appearing in the textfield with focus?
2) The text in the date is too left aligned unlike all the other fields. I am using the bootstrap datetimepicker here.
You will have to create a custom.css class to overwrite the default bootstrap.css.and place a link reference of your custom.css below bootstrap.css
In getting rid of the cross, right click on it, navigate to inspect in your browsers context menu. Take a look at the inspector, The cross and the border color are triggered by the focus state of the Textbox. In Chrome click :hov and select :focus, this will display the css that styles the text control when it is clicked. You should find the element that styles the Cross. Simply copy the whole class into your custom.css and remove the attribute that styles the cross
For the Datapicker you need to rightclick on the date displayed go to inspect, copy the class into your custom.css and add padding-left of the desired pixels you want eg padding-left:20px;
Sample Inspector In Chrome
I've added Magnific Popup gem in my Rails web app, and have initialized it simply with
$('.box p a').magnificPopup({
type:'image'
});
in my application.js.
How do I go about modifying content of the popup window? I would like to add some hover effects on left and right side of the image displayed in popup, in such way that if I, for example, hover on the right side of the image - div container with certain image info slides in.
Thank you for any information!
image.markup option allows you to change the HTML structure of popup content - http://dimsemenov.com/plugins/magnific-popup/documentation.html#image_type
Also, you may just use "inline" type of popup, and provide all the content by yourself.
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
how can I animate only a part of an element?
I show/hide a div using jquery-ui's show method but I'd like to start/end the animation from/to a given height of the element.
My dev website can be seen here (link removed). When clicking on the 'Contact' button the contact page shows up or hides if it's already open. Since I couldn't find how to starts my animation from a given height I added a fixed button when it's closed, but when the contact button of the contact page overlaps the fixed button when it's closing...
Any help welcome!
looking for something like this??
http://jsfiddle.net/rlemon/F6Efp/8/
You can also add any fade or whatever effects. This is using a single button to animate both open and close. You could also attach a attribute to the button tag to define it's current state.
On occasion I need to click a sIFR link in order to "activate" it. I hover over it and nothing happens. I click it, then hover over it and then it works correctly. This seems to mostly happen with items that are not within the viewport when the page renders (items you have to scroll to see). Is there a fix for this?
This tends to be a problem in Firefox when you have a Flash movie with wmode set to transparent or opaque, contained in a floated element. Removing the wmode should resolve the issue.