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.
Related
I asked a question a while ago with something similar but fixed the problem myself, I'm trying to get back into web design again as a hobby but I'm stumped.
I'm trying to create a sort of storybook/powerpoint effect, when next is pressed it'll load the next div (.slide) and the previous slide will close.
Here's a code pen of what I have: (buggy on codepen for some reason)
As you can see, it's functional but not very effective. I'm pretty new to JavaScript so I'm struggling. I'm not sure why it's acting broken on the codepen but works on browsers (probably a bad sign) but you can see the how it functions.
However I want to add more functionality/practicality to it and want to be able to navigate to particular slides with the Navigation sidebar. The way I've done it means that the slide can't really be specified since it's set to active using the previous/next buttons.
Any sort of help would be great, some available tutorials or previous questions with the same desired effect (I've tried finding something) or just pointing me in the right direction would be great (I wanna make sure I understand)
After searching the net for several hours, I decided to write my own code for a horizontal dropdown menu that allows html content in the dropdowns instead of the standard 'list' items everyone uses. I have very little code compared to most of the dropdowns I found. I have two issues that are driving me crazy.
Issue #1:
When you mouse over the Category, the 'dropdown' div appears as it should, but when you go to mouseover the 'dropdown' div it disappears. But if you mouseover another category the 'dropdown' div disappears and the new one appears as they both should. What am I missing?
Issue #2:
If you stop the cursor right over where the underline link of the Category appears and leave it there, the 'dropdown' div appears to blink by popping up twice. Can't figure that out either?
I have posted my code here: http://jsfiddle.net/UXxL8/
Thanks so much and I know it's probably something simple I'm overlooking. But you know how it is after you stare at the same code for too long...
Right now you're attaching your behaviors directly to the anchors. When you mouse down to the newly exposed contents you've gone beyond your anchor area and mouseout is triggered. If you place both your anchor and your dropdown inside the same container and then attach your events to that container you'll get the expected behavior.
I would also recommend using mouseenter and mouseleave rather than mouseover and mouseout since you will have child elements with your menu. This question is a good description of why that's advisable.
I set up an updated fiddle here. The Category 3 menu item has been updated.
You also need to bind the mouseover/mouseout to the dropdowns. And the reason why the dropdown is blinking is because animation functions get queued - fadeIn starts after the fadeOut has finished, so you need to stop the current animation before adding another.
Here's the improved code.
hope your all good... Another question :/
Heres the page im working on:
http://beelinetest.site50.net/uw_virtual_tour.html#
Its not a huge problem, but if you press the tabs quickly- two will shoot up- what can i do about this? So it waits for the first tab to complete its movement?
Also, another thing while im here, notice the slight hover over movement ive added to the tabs? When hovered over they move 7px up, then back down when un-hovered. But when clicked the tab moves up and it still thinks my mouse is on hover... Its not until i move the mouse until it moves back down 7px...
Thanks in advance, Tom
Your click handler for each tab should disable the clicks on the other tabs until the "slide in" function is complete. Looking at your code, it might be easier to accomplish if you had a common selector rather than selecting each individual one by id. Perhaps you could add a class to each div you want to use as a tab, then you could operate on them as a group.
I'm trying to create a slideshow using jQuery (similar to jquery scrollhorz) but I want the previous and next image partly shown.
Right now, what I have, is a div (with overflow hidden) containing all the images I have. When previous or next button is pressed, I animate the whole div either to left or right. The problem is, if I have many images loaded into the div, it becomes laggy and slow.
What is the best design to implement this image slider?
Without going into the code required, my suggestion would be to use jquery (or moo if that's your thing) to maintain a div that is three to five images long, and keep a list of urls to all the images you want displayed. When you slide the images left or right, you'll pop off the image on the opposite end and add the appropriate image to the other side.
You could use the same technique to loop through the list seamlessly.
Try this.
Hero carousel
It fits your description....Hope it helps out :)
this might be a solution too.
http://jsfiddle.net/JCQ6Q/15/
Vote up if it helps you :) all the best
I am using jQuery Isotope for my personal website:
http://www.ryanpays.com
The issues i am facing are when a user clicks either 'Websites' or 'HTML-Email' after the page has loaded there is no animation of the project thumbnails when filtering. However, they do animate when either link is clicked again.
Also i would like to preserve the layout of the 'Clients and projects' section after the animation. It seems to break onto a new row/s when there should be enough room for the last child to be positioned on the first row. When 'show all' is clicked it does not return to the original layout either. I am unsure if there is something i need to do in the CSS to achieve this or maybe re-structure my HTML.
Update
I have worked around this issue by initialising isotope on page load and then again on click. Doesn't look right in IE6 (can live with that for now) and is not really the functionality i would ideally like to achieve.
You need to set your #UL to #UL.isotope because it is adding that class on click, and it needs to already be applied for the css3 animations to work. Just had this issue today, www.mactyler.net you can see it working.