I was wondering if someone here knows how or why my video play button of my new slick slider isn't working at http://starter.theshopbuilders.eu.
I figured it must be a CSS-thing, I've tried a whole bunch of things but nothing seems to work.
Maybe someone here has any idea!
You iFrame has the following CSS attributes:
.slick-slide iframe {
position: relative;
pointer-events: none;
}
pointer-events basically determines whether or not an element can be altered by the user, and in this case it's set to ignore any user interaction.
Deleting the pointer-events:none or setting it to pointer-events: auto should do the trick.
Related
Hello I am tired of the boring looking Google Chrome native html5 video player design.
It's getting worse with every time they change it.
Right now it's in a bright white which is completely unsatisfying when you ask me.
So I decided to create a little userstyle to make it dark.
This is how far I came but it's not possible for me to change the color of the little circle.
Any help is welcome.
This is my actual progress:
video::-webkit-media-controls-panel {
background-color: #161618;
}
video::-webkit-media-controls-volume-slider-container {
background-color: cyan;
}
video::-webkit-media-controls-volume-slider {
background-color: #1FB2B0;
}
video::-webkit-media-controls-timeline {
background-color: #1FB2B0;
}
Here is the jsfiddle link for it.
https://jsfiddle.net/cyc1j0nv/7/
I eventually got where I wanted to go (more or less) by applying a filter to the media controls as a whole. Of course, one could also apply filters to each pseudo-element of the controls individually.
video::-webkit-media-controls{
filter: hue-rotate(180deg) brightness(0.9);
}
<h1>Styling video controls</h1>
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>
*Note: it's up to the user to add vendor-prefixes to the CSS as required
There isn't any CSS style to change the little blue circles in the same sense as your example; they're images that are packaged into chrome. Maybe one of the css3 image filter properties would work.
There's also a small caveat to overriding these styles in general: they are internal to chrome, and are subject to change at any time. Pages that depend on them might find that they simply don't work the same way in some future version of chrome.
If you'd like media controls with a custom look on your page, then you might want to take a look at the many javascript media players that give you quite a bit more flexibility. They also work across different browsers.
I succeeded in positioning the controls in a way without overlay the original video screen by:
video::-webkit-media-controls-enclosure {
overflow:hidden;
position: absolute;
bottom:-32px
}
video::-webkit-media-controls-panel {
display: flex !important;
opacity: 1 !important;
}
hide download button by adding:
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
I have a number of divs covering a different portions of a menu on a background image on a webpage.
Within the div I hav an a href to link to another page a play a click sound
I've used a CSS trick to fill the div so that the cursor changes right across the div. See the code below
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<div id="apWelcome">
</div>
The CSS for apWelcome and to fill out the area is listed below:
#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}
a.fill-div {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
The problem is that in FF24 the click behaviour is fine but nor sound, Chrome - half-works (sound plays)- visually the page jumps down, IE does not display cursor or has no functionality.
Anyone know a workaround for this for all three browswers or a completely different method. Thank you.
read this article about sounds in html (cross browser).
the different browsers allows differnent types of sounds files.
also, you dont have to use your div as placeHolder for the a tag, you can directly call your function from the div's onclick (with cursor:poiner; you wont notice any difference)
See this Fiddle, a complete solution: http://jsfiddle.net/avrahamcool/ybxBq/
I've rebuilt the entire layout from scratch.
you can download it from here (I will keep the link alive for a week)
I dont know if it was necessary, but.. it was easier for me.
I'm using an img in BackgroundContainer and not CSS background, that way: if someone prints the page, he still sees the background.
I'm using fixed height&width for the 'Site', but all of its content is in %. so it should scale beautifully if the size of the site change.
for testing in IE, you have to run the HTML from a server (and not from the local file) - so the browser wont stop the script
I've deleted almost all your scripts, so put them back (one by one, each time make sure the page is still working in all browsers)
NOTICE that I've change some of your classes & files name, so check your scripts and CSS's accordingly (also, I rearranged the Image folder).
tested on IE10, FF, Chrome
notice the url(dummy) as background-image for the clickable elements.
good luck.
I'm working on this site: http://stdionis.org.uk/
When the site is viewed in IE 9 or below, the drop down menus on the home page appear underneath the slideshow (It's a google slideshow), however when you go to another page, the drop-downs appear on top of images.
I've set the z-index of the drop-down div to 9999, and I've tried setting the z-index of the slideshow to zero, but I can't seem to make it work.
The CMS we are using doesn't directly allow access to the HTML code of the page (don't ask...) so I can only use CSS or javascript to make changes. Hence why i can't change the doctype to make it display in standards mode.
Not looking for a clean solution necessarily, any crazy javascript hacks would be much appreciated.
try this -
.t_horizontal * { z-index: 1000 !important; }
or
.t_horizontal table { z-index: 1000 !important; }
if even not working then - try using jQuery -
$(document).ready(function(){
$('.t_horizontal *').css('z-index','1000 !important');
});
NOTE: menu is using table which is not proper way to build menu.
Have you tried:
#ctlHeaderModules {
position: relative;
z-index: 2;
}
#frm1 {
position: relative;
z-index: 1;
}
Both of these two elements are on the same level and when I inspect them in Chrome I dont see any of these properties being applied, its worth a shot.
There is also this plugin: http://archive.plugins.jquery.com/project/TopZIndex
I have the following javascript that I am using to position an element when some other event happens:
$('div.arrow').css('top', #$().offset().top - 20)
The above works but I am curious as to whether it is possible to get the same effect using pure css?
I only need to worry about modern browsers so no worries about legacy IE problems.
Should be pretty compatible:
div.arrow {
position: relative;
top: -20px;
}
If there's already a position attribute on div.arrow, you won't need to specify it again, unless it's position: static.
What is the action in particular that you want to cause this change?
The only way to effectively "action" a CSS change is the checkbox hack - but if you're looking to simply change the position of an element when something is clicked (for example) you could have the click event give a class of "active" to the element in question.
For example;
div.arrow { regular: styles here; }
div.arrow.active {
position: relative;
top: -20px;
}
To be honest though, your way is probably the most efficient already, especially if it's an onClick event.
I am adapting a website in order to make it feel native on the iPad.
This website has navigation that shows a drop-down with the sub-navigation on hover.
This works like a charm on the iPad. When you touch it the subnav, it opens and closes again when you click/touch somewhere else.
Now i have the requirement to make it close again when the navigation point is touched again.
I was thinking, i could just set the pointer-events:none on hover & active for the iPad, but this makes the sub-navigation flicker and it does not work...
i have also tried to cover the navigation point with element set with the before selector and setting its pointer events to none, but this does not work...
Any idea, how i could solve this problem using CSS only. (I can not modify the HTML nor the JS)
PS: you can reproduce this on www.macprime.ch for example... (click the main navigation on the top, and try to close the dropdown again)
edit ok i tried almost everything that was possible with CSS only. I don't think its possible. If anyone can tell me why, he/she will get the bounty reward.
You could have a second transparent element that appears above the one you tapped. That way, when the user taps again, they will be selecting the other element and the first will lose its hover status:
<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>
<style>
.blocker, .menuItem {
/* use the same position, width, height, etc */
}
.menuItem {
/* make it look pretty */
z-index: 100;
}
.blocker {
z-index: 99;
}
.menuItem:hover {
z-index: 98;
}
</style>
Of course, this will have a negative effect on the desktop, so you will want to do something like:
<style>
.blocker { display: none; }
.touchevents .blocker { display: block; }
</style>
<script>
if('ontouchstart' in document)
document.body.className += ' touchevents';
</script>
UPDATE Added onclick events to make them clickable.
You can see a working demo here: http://fiddle.jshell.net/vfkqS/6/
Unfortunately, I could not find a solution that does not require HTML or JavaScript changes, but I was able to keep them to a minimum.
You would need to make two non-CSS changes total:
Add a JavaScript mechanism for identifying if touch events are supported. See two line example above.
Add one div per menu which is clickable (onclick="void()") and has a unique identifier that can link it to the menu.
You may be able to do those two things with CSS but I'm not sure. Tablet detection would be a little sketchy in CSS and I don't think you can make something that sophisticated with a :before or :after pseudo-selector.
This is an interesting question and similar to one I've had come up recently. How do you marry a standard navigation dropdown that displays on hover with a touch event interface. Using the hover event as a trigger works really well on a desktop. In a world without hover events (tablets and smart phones), not so much.
In my case I landed on the idea of defining the behaviors: click/touch event would do the triggering, hover event would do subtle indications. For more details on this line of thinking see: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
For the issue you're trying to overcome I'm wondering if using #media queries in your CSS is a better solution...
#media (max-width: 979px) {
/*
New CSS declarations to show the sub navigation lists
in a more compact way that fits nicely on the iPad.
Something like...
*/
section.nav-overlay {
display: block;
height: 60px;
visibility: visible;
width: 979px; /* Or the max container width */
}
section.nav-overlay ul li {
float: left;
}
/*
Etc. etc. with the additional exceptions.
You get the idea.
*/
}
By doing this you would create more of a native interface on the iPad. However, if going this route is off the table, something like what Brian has above is better. Just wanted to give you an alternative.
Set pointer-events: none on the active state:
nav#mainnavi > ul > li > a:active {
pointer-events: none
}