I'm using the jQuery plugin Image Cube (http://keith-wood.name/imageCube.html) for the first time. I love the plugin, but within the context of my landing page I can't for the life of me get it to work.
Here's a test on my server that works well:
http://209.236.69.153/~dentalaw/test.php
And here is my landing page, which does not work (the first dentist image is what is supposed to rotate):
http://209.236.69.153/~dentalaw/
Any suggestions? I've tried adjusting things like position, tried removing the overflow:auto. I mean, I've really tried everything I can think of, and I can't get it to work. Now, I turn to your greater knowledge! ;)
I figured it out. This plugin doesn't like classes, so if I just switch everything to inline styling it works like a charm!
Related
So basically, I made a simple website.
I am using bootstrap along with masonry jquery and google maps.
This is the basic page of my website.
How this website works is like when gallery is click, index page will fadeout and gallery page is faded in.
Lets go straight to the point which is my CSS. I am wondering what is wrong with it since I am encountering this problem.
My masonry images for gallery will overlap each other but if I place things out of the division class section. Everything is fine. Same goes for the google map width problem.
Things will only be ok after the window is resized manually.
Here are the SS for the problems
my entire css link
http://pastebin.com/kqWaszqF
my custom js link
http://pastebin.com/uqSvaMeT
my index page link
http://pastebin.com/eKHyJV95
As you can see, if I place all this codes for gallery and map outside of everything will be working fine and great but if I put it inside of that . This the above problem happens.
I tried everything like min-width: 100%, width: 100% or whatsoever. Seems like this problem always exist. Even if I setTimeOut to my javascript for masonry and googlemap, it works sometimes but not perfect as it also fails.
Can some kind soul please help me out here?
You need to provide a fiddle with html so i can test it in order to help you.
I'm trying to add simple parallax scrolling to my website using stellar.js. The problem is that it just simply doesn't work; I feel like I've tried everything but it just doesn't work. I made this test jsfiddle because I thought it didn't work because it interfered with some of the other code on my website. But even on this test page on which I'm only trying to get parallax scrolling to work it won't work for some reason.
http://jsfiddle.net/5Jctk/4/
I'm calling the stellar.js library like this (as you can see in the fiddle):
$(document).ready(function () {
$.stellar();
});
Why isn't this working on either my website and the jsfiddle?
You didn't set the data-stellar-ratio for each separate element you want to scroll, and also you have to specify the pixel height of each element that scrolls separately.
Using AngularJS 1.2.1 I have a page with 7 separate ngSwitchs and ngAnimates on them so they look like left-right sliders with each switch-on being one full row. The content slides in from right or left controlled by buttons. As I said, there are 7 of these sliding rows, all of which are inside one controller.
Everything works well in every browser I have tried but IE10. Here the animates work on random ngSwitches. Some animate, some just re-display as if there was no animation. Every refresh is different, sometimes none work, sometimes (though rarely) all do.
This seems like some sort of timing problem with each switch being filled in by separate REST get from the server. I have been unable to duplicate this in a Plunkr due to the service.get.
ngAnimate relies on changing the classes in the switch during the animations. Obviously I have the animations defined properly since they work fine everywhere else. Since ngAnimate changes the classes automatically during the animation I can't have messed that up.
Is this a known problem with ngAnimate? Is there a work-around?
As I added the version number I realized I should check for the latest and indeed this seems to be fixed in 1.2.13. If you try to animate too quickly after page load, it may not work but eventually the code catches up and all rows work correctly.
Example here: http://jezebel.com/5896408/racist-hunger-games-fans-dont-care-how-much-money-the-movie-made
Click on the 3x3 Tweets screencap they have up. I love the way the lightbox makes a scrollbar. I viewed the source and inspected the element via Chrome and don't see any script that stands out, so I'm guessing it's probably something custom-made.
If so, does anyone know of similar scripts that look like that lightbox and can have a scrollbar effect like that? It's gorgeous!
Edit: I found the code, and I do not think they use a modified version of lytebox: http://ganja.gawkerassets.com/assets/base.v10/static/base.v10.jqueryplugin.20120424_8.js (ctrl/cmd + f for 'glimage'. They use their own thing. Still, I am having trouble finding the perfect jQuery lightbox with presentable vertical scrolling if the image is larger than the windowWidth.
It seems that they're using a modified version (glytebox) of this script:
http://lytebox.com/
IMHO, their lightbox isn't anything special. The scrollbar is probably something that most lightboxes display when the content is too big to fit on the screen.
Please check this site: pixeli.ca/works/italia
There I work on the site. The problem is when I just open this address, it doesn't show two panels using jScrollPane properly - these look like narrow horizontal stripes with content inside them. Then I click any of the top nav bar items and it becomes what it should be - all looks fine. What can I do to make it work right way from the beginning?
Seems like there is something related to jQuery hide() function. When I turn it off in the document, it works well. Did anybody face something like this before?
Yes, I have solved the issue. So, there is a simple animation effect implemented in the site through jQuery fadeIn function. It shows elements gradually first time, then sets a cookie so this animation doesn't work anymore.
Here is a piece of code where I made it work:
setTimeout(function () {
loadContent('about');
$('#doc2').fadeIn(1000);
}, 7000);
The #doc2 div is the main container for content and I noticed that when it is visible and I load content using my function loadContent('about') it works fine but doesn't work right way if #doc2 is hidden. I just added this function to be executed the same time as fading in #doc2 and now it works well. If you have any questions regarding it, please feel free to ask.