Nivo Slider just doesn't show up? All code seems good - javascript

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.

Related

images overlap for masonry and google map not taking up width of division

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.

Images not loading when using jQuery .html apending

Me and the team have been a bit stumped on this so I'm hoping someone has come across this problem before.
I have a notification div that flies in depending on some event calls. The script I have seems to be working everywhere except one application where the images won't load. Both the icon css background image and the actual loading indicator won't show if the container is dynamically appended.
If i remove the initial display:none property the images load, but once the trigger is called they don't.
Unfortunately the application is on an internal network and I can't share a link, but I've included a screen shot and a jsfiddle to the code I'm using. (which in it's self is doing exactly what it's supposed to)
http://jsfiddle.net/FSshV/7/
It's a heavy js based app with some ASP.NET 2.0 here and there and some ajax calls bouncing around but doesn't seem to be giving any errors and i haven't been able to pinpoint the problem.
I know it's a long shot and not much to go on but maybe someone hit that wall before :)
I'm curious if anyone has seen a similar problem before and can share some insight?
PS: yes I've checked if the image paths are correct, and they are ^.^

Weird block of div just outside viewport in Chrome

First off, please excuse my English as it is not my first language.
I have encountered a very weird issue in an online store I am working on. It only happens in Chrome and I simply couldn't figure out what's going on and it's driving me crazy :(
This is the website I am talking about:
heavenlynature.co.nz
To replicate the issue (please bear with me), you need to add a couple of individual items to the shopping cart (at least 2 different items, then click the shopping cart icon (heavenlynature.co.nz/cart), shrink the browser viewport just below the first line of item, like the image below:
http://francisthedesigner.co.nz/images/test/2.png
Then drag the scroll bar downwards, you will find a block of div blocking over the top of the text/image (please try refreshing until the issue appears as sometimes it appears to be loading correctly), like the image below:
http://francisthedesigner.co.nz/images/test/3.png
But as soon as you highlight the page or hover over the div it just disappears. Now this only happens in Chrome and Firefox doesn't seem to replicate this issue.
It seems to happen only in the checkout screens, really losing it trying to make this work, any help will be greatly appreciated :)
Unfortunately even after following your instructions i couldn't replicate your issue. Can you please try to go on your Chrome under Tools/Extensions and disable them all?
Can you also try to replicate this issue from an other computer?

JS conflict with Royal Slider Wordpress

I'm using quicksand to filter categories and Superbox (http://toddmotto.com/labs/superbox/) to show a gallery based off of the premium plugin Royal Slider in a dropdown.
http://bvh.delineamultimedia.com/?page_id=2
There seems to be an issue with the Royal Slider around the _animateTo:function in this file... http://bvh.delineamultimedia.com/wp-content/plugins/new-royalslider/lib/royalslider/jquery.royalslider.js?ver=3.0.93 around line 1825. That is causing the slider to not work properly when inside of the Superbox dropdown feature. When I click the next button on the Royal Slider it doesn't seem to want to go to the next image until I close the Superbox and open it again. Then is when the next image appears.
On this page... http://bvh.delineamultimedia.com/?page_id=13 I don't seem to have an issue with the Royal Slider which is why I believe there is a conflict with the Superbox and Royal Sliders javascript. Also, on this page... http://bvh.delineamultimedia.com/?page_id=12 Superbox works fine with static images perfectly.
I'd like to somehow state "if there is a gallery show it - else show the static image" in the same place.
I also feel like my code that I've altered here. http://bvh.delineamultimedia.com/wp-content/themes/bvh/js/portfolio/superbox.js Isn't the best since I'm guessing a bit here and there to get this to work.
I've been trying to learn how to debug JS but to be honest am a bit lost. The reason I think the issue is happening around _animateTo:funtion is because console isn't firing around _stopAnimation. Could anyone lend a hand on why this is happening and a good way to debug this problem. I feel a bit overwhelmed at the moment.
To see the issue: to go http://bvh.delineamultimedia.com/?page_id=2 and click on the first image, there will be a dropdown where you will see the gallery. If you click the next arrow it does NOT go to the next image. IF you close the Superbox dropdown and reclick on the first image to see the Superbox dropdown, you will see the image move to the next image, but only after you close and re-open superbox after you click the next arrow.
I hope that makes sense. Thanks so much!
I checked out the code in your Superbox.js . The problem is that you were cloning the element instead of appending it. In this case, the Royal Slider. This line is the culprit, it creates two different "sliders". Which only one was working, though it was hidden.
if (sliderData.length > 0) { // show the slider if there is one
superbox.append(sliderData.clone(true));
}
Just remove the .clone() method and it should be fine.
To fix the element from disappearing during the closing callback. Replace this line here:
superbox.find('.royalSlider').remove(); // remove the slider from previous events
to this one:
superbox.find('.royalSlider').appendTo($(this));
So in summary, all this does is move the slider from your list-item element into the Superbox when its triggered, and puts it back when its closed.

Jquery slider javascript help required, thumbnails not in correct order

I am using wow slider and there is some issue, which causes the bullets, which onhover show thumbs of images and point to that image in sequence onClick. Howeverver at no. 13 and afterwards images are not in sync (as shown on bullet hover/onMouseover), but click on bullet in slideshow points to correct image.
I tweaked some css but in vain..is it possible to do it by editing Script.js or style.css, Please somebody help to resolve this.
Please see the code in action here.
Thanks in Adv,
Anita
[PS: I am using IE7.0 as browser.]
Everything seems to be in working order with FF 4 for Mac.
The issue you are having could be a result of IE7's difficulty with :hover
The bullets are in <DIV class=ws_bullets> which has a :hover action associated with it in the stylesheet, and my guess is that's what is causing you problems in IE7.
Do all of the demos on WOWslider.com function properly on your machine in IE7?
I figured it out: it has some internal coding in the script which causes it, since it was demo version of wow slider. It wasn't displaying thumbs beyond 11/12 and used credits in b/w to make it work correctly.

Categories

Resources