I'm working with Swiper JS. I integrated it with Wordpress, and it is working fine except for the gray linear-background overlay effect that I don't know how to remove, because it is generated by JS on-the-fly and cannot be removed by css class alone.
The code in question:
element.style {
background-image: linear-gradient(rgba(55, 64, 71, 0.3), rgba(55, 64, 71, 0.3)), url(https://nwinteriordesigns.com/wp-content/uploads/bathroom-design.jpg);
I need that linear-gradient gone. Any help appreciated. Thanks
Screenshot
I guess I get it resolved. It seems to be an issue with Wordpress post not swipe js
Related
Example: http://www.internationalflow.com/2016IFT/single.html
Looks fine in a normal web browser window but when i resize the browser window to display mobile phone size the flexslider images are not displaying correctly, They are not aligning up to view one image at a time. Does anyone know how to fix this bug?
Thanks in advance
Please update FlexSlider to the newest version 2.6.1.
You used Media Queries in flexslider.css, for example:
#media(max-width:1024px){
li.clone {
width: 275px!important;
}
}
Please remove all lines for this element li.clone in Media Queries.
I'm new to using Animate CC and I have created a project that has to be used with an in house CMS.
However I have implemented the code into the system webpage and all, but I keep being hit with this error cjs.Bitmap is not a constructor from the chrome console.
I am using the create.JS library but I am not sure how to solve the issue. I dont really dabble much in JavaScript as much since I am a designer is there anyone that can help?
===Update===
I have managed to remove the console errors but I am now having issues where the animation does not show at all when the page loads.
===Update 2===
So I figured out that the JS which has been generated by Animate CC does link the height and width directly to the canvas tag which also has the in-line height and width.
This sounds like the EaselJS library is not loaded. The Bitmap class is part of EaselJS, and the library exported from Flash/Animate requires EaselJS to be loaded before the library file.
So I figured out that the JS which has been generated by Animate CC does link the height and width directly to the canvas tag which also has the in-line height and width.
I'm experiencing a weird issue with skrollr - I followed the steps at https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/ using just two slides - a background image with a header that fades and then page content. If I have !doctype set, the first slide doesn't go full-height - but works if I just use
I've seen Strange !doctype bug with parallax plugin 'skrollr', but I can't see anywhere where I'm defining an ambiguous height.
The site I'm working on is http://he.dev.binaryitsystems.com/
I got this fixed up by using the more up to date examples in the github repo.
I have an embedded HTML5 video which works fine in all browsers (or fails gracefully, if the browser is old or lacks video support). But since my site uses iDangerous Swiper (http://www.idangero.us/sliders/swiper/api.php), the custom video controls - the 'play/pause' button - does not work in Internet Explorer 10.
If I remove the swiper js code embed from the head area of my HTML, the embedded video plays fine in ie10. The problem seems to be that Swiper is intercepting the click on the play button in ie10 - and therefore the solution seems to be to disable Swiper for at least that small area of the page.
But it's not clear how to do it.
There seems to be a very scantly documented new feature in the June 2013 Swiper release which lets one create a 'noSwiping' class, but wrapping the video in a div with this class does not solve the ie10 problem.
Has anyone else needed to disable Swiper for an element and succeeded in doing so, particularly regarding ie...? I would be very glad to see a code example. My own project is still on localhost.
All you have to do is to add the html5=1 in the src attribute of the iframe :
The video will be displayed as HTML5 if available, or fallback into flash player.
you can read this:
Force HTML5 youtube video
I had a problem with a embed video of youtube inside a dangerous swiper, but the solution of TSL works for me!
I had added the html5=1 and solve my problem!
thanks!
When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .
Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html
The green div should be on top of the red.
Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?
This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.
So the workaround seems to be "wait a month"...
I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.
My solution is to add style="display:inline-block" to the first child of the foreignObject tag. This seems to fix the problem.