I am still a relative beginner with jquery so any help is gratefully appreciated.
I took the simplemodal function and changed the positioning from fixed to absolute as I wanted the modal box to be able to be scrolled with the background page.
This is causing me a problem as somewhere (I presume in the jscript) the top position is being set so I can't override it in the external css.
Can anyone tell me how I can change the inline css for simplemodal-container?
Thanks!
The following should work:
// replace #foo with your id or element
$('#foo').modal({onShow: function (d) {
// replace '0px' with your value, or remove the property
d.container.css({position: 'absolute', top: '0px'});
}});
Note: This does not work in IE6
Related
This question is similar to this one but I still cannot come up with a suitable solution.
On my site I am trying to implement the dojo Tooltip (not dialog Box as in the link above; click here to see Tooltip documentation). I would like to be able to change the zIndex of the Tooltip to whatever I need. I can only seem to get Dojo to work if I use a CDN such as http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js or //cdnjs.cloudflare.com/ajax/libs/dojo/1.9.3/dojo.js, so trying to alter the javascript of the tooltip file for Tooltip.js did not seem to do anything. Note: Tooltip.js was included locally as:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<script src="dojo/Tooltip.js"></script>
Using info from the link at the top of the page, I was able to come up with a hack solution. Assuming the default z-index for the Dojo tooltip is 1000, I changed the z-indices of all other divs (that were previously > 1000) to z-index < 1000. This solved the problem, and now the Dojo tooltip can be seen in front of these divs (previously was behind).
Any suggestions on how to alter the zIndex property of the Dojo tooltip without altering Tooltip.js?
I would recommend to override css rule according to your requirement.
Like by default css rule on dijit tooltip is as follow:
.dijitTooltip {
position: absolute;
z-index: 2000; // You can write your desired z-index
display: block;
left: 0;
top: -10000px;
overflow: visible;
}
Or you can try via JS
dojo.query(".dijitTooltip:visible").style("z-index", 'You desired value'); // <1.6
//>1.7
require(["dojo/query","dojo/dom-style"],function(query, domStyle){
domStyle(query(".dijitTooltip:visible"), "z-index", "You desired value");
});
Not sure if I fully understand your problem. But maybe this will help in changing the z-index of a dojo object programmatically using javascript:
dijit.byId('<Dojo ID of Tooltip>').attr("style","z-index:999");
I would also stay away from altering Tooltip.js.
For dojo 1.10 you could use dom-attr to set/change the style.
The code above will then look like that:
domAttr.set("mywidgetId","style","z-index:999");
Regards, Miriam
I would recommend using dojo/dom-style for this.
domStyle.set(tooltip.domNode, "zIndex", "999");
Do notice that FireFox will not accept "z-index" as a valid css property name, see http://www.w3schools.com/jsref/dom_obj_style.asp. Always camelcase the css property name.
I can't seem to get this plugin to transition the css property 'font-size'. I get an 'unexpected token -' error whenever I try to run it. Any thoughts? Is this property not supported by Transit?
You may want to try using
'scale(x)'
I personally have had problems transitioning font-size with jquery/javascript, and scale works great.
It should work like this:
elem.transition({
height: new_height,
width: new_width,
fontSize: "100px"
});
You probably wrote font-size instead of fontSize. Or forgot to declare font-size in the CSS file.
video.js - hello, newbie here, and i'm hoping someone could tell me what code i would need to place in the video-js.css file so that the full screen button does not show ?
have tried some codes I found online, but the button still shows in all browsers.
fingers crossed!
In your css look for the block of CSS marked:
.vjs-fullscreen-control { ... }
or
.vjs-default-skin .vjs-fullscreen-control { ... }
Within that block add display:none;
instead of display:none; you can use visibility:hidden;
the advantage is that the width of your tool bar remain the same and is correctly displayed.
Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}
Edit: My concerns are for mobile websites.
Let me get right to the point. No matter what I do, outline:none; does NOT remove any default highlighting/glows from input form elements using an Ipod Touch/Iphone.
Everywhere I look, people say to use:
input:focus {
outline:none;
}
or
input {
outline:none;
}
.... and that this will remove the glow.... well it doesn't.
Another major problem is that there IS NO DEFAULT GLOW. I create a blank page with no styling and just a form input, view the page via IOS mobile, and there is no glow/outline on the input elements... it is just blank.
The only thing that works is using -webkit-appearance:none; - and that simply allows me to set a box-shadow on the input element. If I am not using the -webkit-appearance:none; - then the box shadow will not show properly.
When viewing this on a desktop browser however, the box shadows work fine even without webkit.
So my question is: why does outline:none; serve no purpose on input elements? I have seen some people say they only work on anchor tags, yet others say they work on input elements. Who is right here? Because so far, no matter what I do, outline:none; is worthless on input elements.
Here is a JSfiddle:
http://jsfiddle.net/QQGnj/4/show/
Viewing this page on iOS mobile, there is no "glow" or default styling to begin with. Where is everyone seeing the default glow behavior which requires outline:none; to work (which it doesn't)? This is driving me mad!
If you use outline:none; please add a focus style. See http://outlinenone.com/.
This feature is very helpful when a mouse isn't used. Outline provides an important accessibility feature, so please, if you must remove it, add back a style for your links focus and active states. Please help users understand where links exist.
Try with this:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Use -webkit-appearance: none;
#yourElement:focus {
-webkit-appearance: none;
}
#yourElement:hover {
-webkit-appearance: none;
}
And it will do the trick.
a, :visited{
outline: 0;
outline: none;
}
:hover, :active, :focus{
outline: 0;
outline: none;
}
removed the focused glow for me on Chrome/osx, iphone/mobile safari, firefox/osx
http://jsfiddle.net/toniehock/QQGnj/6/show
In my case in Magento2 it was a border and box-shadow, instead of these things above.
Mobile Safari apparently just doesn't have a default outline style, so you don't have to worry about it. For a guaranteed consistent look in all browsers, desktop and mobile, I would recommend setting outline: none anyways, though.