we are using the Revolution Slider and wordpress, both in newest versions.
Actually we want to set this : http://vincentgarreau.com/particles.js/
as a background animation.
We used the code snippet you get when you hit code pen in the upper right corner.
The html part was added as a layer.
css and js part were added to the custom css / custom javascript field in the slider settings.
The problem:
When the page starts nothing happens. No animation appears. If I hit the area with a right click and press q (in firefox) the animation starts to work.
So I guess it is about a loading issue!?
Can anyone imagine a solution with the given base?
Regards,
Chris
Do you check your console? How have you integrated the script? After testing, it works for me. The piece of javascript must be placed at the end of the page, or create a function wich starts when page is loaded.
Related
I am currently using responsiveSlides
as an image slider on our web page.
It is a jQuery slider using an HTML unsorted list of images to slide through (automatically in my case).
Now the Issue i am having is, that before the slider actually starts (meaning the script is loaded) there is the last picture in the unsorted list displayed, for a short moment. Then the slider starts his work with the first image in that list.
I tried using a minified version of the js-file, and load that script at the very beginning of my HTML markup. This actually shortened the display time of the last picture, but it is still noticeable and annoying. (This happens with every click on a navigation point, as the page is loading new...)
Also i experimented with timeout function (js) to display the unsorted list containing div after some miliseconds, or on document.ready state, etc..
But all of theses attempts where ugly.
So now i am at the point, where i try to understand how the whole slider script is working, and i assume there must be a point, where i can set to start with the last picture in my unsorted list, instead of starting with the first one, but i just can't find that point in the code.
I couldn't manage to post the code here with proper syntax highlighting, so you can find the code here
Any ideas are much appreciated!
As I see on their demo page, sliding happens because of changing z-index, so slides like a pie.
In you slider you may see the last slide while script is initializing because of already applied CSS, but not JS yet.
I'd suggest to add opacity: 0; in CSS to all your slides. When JS will be ready, it'll add opacity: 1; itself.
I would like to make a news portal, where next to the post excerpts there will be an image. When you click on the image, the title or the post excerpt , the whole content will be shown (accordion / toggle effect), resizing automatically, in the responsive way, the assigned picture. How to do that on any drupal theme? Example – news.google.com
Graphic explanation: http://imgur.com/a/eBfjU
Maybe there is an extension / module or template that allows for a simple adaptation of such a solution? I know there are accordion plugins, but I do not know how to apply them to the images auto-expand on-click along with content.
Thank you!
This is more front-end than drupal question.
And "how" - you have to make your own theme by inheriting some other (if you don't want to start from scratch).
Then, you have what will that your page be? Node in some new content type or a view or something else.
Then, find some documentation/tutorial how to theme that kind of page.
You must have some deeper understanding how the drupal works before going to real work.
I've added Nivo Slider to a wordpress home page. I've used it before, and I've followed the steps exactly, but the slideshow does not show up at all. If you view the source of the page you can see the code surrounded by "Nivo Slider" comments. If I take the script that fires the slider completely out, the images appear, but with the script included the slider vanishes. I hope someone with fresh eyes can spot what I'm overlooking. Here is the link:
http://phillipsandphillipslaw.com/
Edit: I found that the height setting of "auto" was preventing the slideshow from showing up, so I set it to the height of the images, and it appears, but it still isn't working. So it seems that something it breaking but I can't determine what it is. I don't get any errors in the console, so I'm stuck in the diagnosis.
It must be a conflict - but I'm not sure how to rule that out.
I implemented an application based on Fabric js, and I changed default controls (normal squares) with custom images and functions (as remove object, etc.), modifying fabric code.
It works fine, but I want to add an overlay message explaining what does each control when you stay over the control 1 or 2 seconds.
It´s possible? If the answer is yes, How could implement this feature?
Thanks in advance.
I have updated your fiddle. i have added "Fabric js Custom Controls" to one label and i have done code in JavaScript at the end on mouse over and i have set timeout for 500 milliseconds so user will get alert on mouse over of that label, same thing you can do in fabric js custom images. I have done code as follow:
$('#demo').on('mouseover',function(){
setTimeout(function(){alert("Hello")}, 500);
});
Recently Google+ and Facebook have added a nice feature that when a user first logs in and there are new features available it displays it as a demo mode of some sort highlighting the element in question and darkening or changing opacity on the rest of the screen as a means to focus on that element. It also shows step by step tooltips for the demo.
Does anybody know of an open source script or jquery plugin that does this already?
They basically block the UI and show an overlay on top of the whole page. You can try jQuery blockUI plugin it will help you block the page and then you can show an overlay on top of it.
http://plugins.jquery.com/project/blockUI
I don't know of one, so I made one: http://jsfiddle.net/minitech/A9AAa/
It's pretty simple, call spotlightOn and pass the element on which the "spotlight" should "shine" as an argument. Call spotlightOff to turn the spotlight off.
It should degrade gracefully.