I built a jquery slideshow based on the tutorial found here:
http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
It seems to be working perfectly fine, except that it behaves strangley right at the beginning when it displays the first image. The first image appears like normal and then flashes, fades to white and disappears completely. After that, the first slide reappears and behaves normally, transitioning to the next image.
The slideshow in question is center page on the right:
http://www.loftist.com/
I am not a JS developer, so I am not sure how to troubleshoot this problem. Any help would be greatly appreciated, thanks!
I got it. For future reference, if anyone comes up against this problem with this particular script, the first image needs, to have the class "show" applied to it and all subsequent images need to have some different class.
Related
I've been working on a personal website for a class project. I've come across some bugs in it that I can't seem to get fixed. You can find the website at bnb.im or at CodePen (the codepen is mostly copy and paste; I did the best I could with it).
So, the first problem is the white space to the right of the screen. I can't tell what's causing it--when I use the Select element feature on FF, it just selects <html>. I asked on another site, and someone said that it was caused by the animation of the portfolio items sliding in--I tried the fix they suggested, adding overflow: hidden; to body, but it didn't work (the page became unscrollable). I also tried making the portfolio items smaller (45% instead of 50%), but that didn't help, either. Any ideas?
The second problem is with the portfolio items and/or the social section. Whenever I try to add margin-top or margin-bottom to put some white space between the last portfolio item and the social section, nothing happens for the most part. The only time I've gotten it to work is when I put the margin-top on the social section to 200%, but it was too much so that won't work. Any ideas with this one?
Thanks a lot--I really appreciate you taking the time to read through this and (hopefully!) look at my site.
The first problem looks fixed to me? Did you figure it out?
The second one take off height:100%;from .portfolio
I would like to know how to be able to "darken" the image of a html page without darkening the area I selected over that same image, just like this example http://odyniec.net/projects/imgareaselect/ . I studied the code but remained the same. Can someone help me? Thank you!
EDIT:
I was able to darken the body but unfortunately, even playing with opacity, the content inside the div referring to the selection remained faded to.
They are achieving this affect using four different div's to do the darkening. One for everything to the top, right, bottom and left. Don't have time to explain further right now, but that is what is happening on the surface level.
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?
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.
I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?
Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit
I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.
When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.
Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.