Fluid full window width carousel using jQuery.carouFredSel - javascript

I am trying to use the following gallery/carousel http://coolcarousels.frebsite.nl/c/2/ to implement onto a site.
What I am trying to do is add a text area identifying who created the image next to it, i.e. having the image in a div floated to the left and the content floated to the right.
I create the div and set it all out in css and looks all ok but for some reason the carousel does not work, its like there is a problem with adding HTML tags.
Has anyone used this carousel and had a div rotating with an image and text in it if so please help me.
Cheers Andy.

Related

DIV inside another DIV Not Loading Images

I am trying to create a drop down menu. The smaller DIV inside the main DIV that contains an image gallery does not load properly when the website is live (space is there but images do not show up). I am looking for the proper code to make this work properly. This is the code I am using for the drop down of the main DIV with the smaller image gallery DIVs inside.
Read More
The smaller DIVs with the image galleries work fine when the website is live until I change the beginning of the code to . I would like to get the drop down to start off closed and not open when the page is visited.
I am going blind here, but I am assuming that your div does not have height. Give height property to a div and that should solve the problem. Its a common mistake.
Please leave us some code sample next time. Ty.
Don't see your code yet, but here is some possible help.
With showing or hiding HTML elements, like div's, you are dealing with visibility and display. One hides the element altogether and the other takes up the space but does not display the inner elements.
You can read more about display and visibility here:
https://www.lifewire.com/display-none-vs-visibility-hidden-3466884

A Div with images which is scrollable

i am trying to make a div which have a lot of images which takes 85% width of the screen. the height doesn't matter as long as the content stays the same. the footer is fixed and the navigation will drop down a div which contains images at the width (85%) of the content size. and the images should scroll with two buttons, next and previous. i'm new to java, html and Css. please help me. thank you :)
I will help you on your way.
I hope this helps you!
To get a div to get scrollable you have to specify that in your css code with the overflow attribute.
Take a look in this fiddle
http://jsfiddle.net/d8dFd/

hr behind div in mobile

I have code working on all desktop brosers, but in mobile it has a bug.
The lines are hr elements and the square in the middle is a div. The div has position: relative and fixed width and height. I don't use z order.
On mobile all I can do for now is display the background of the div element with certain color, and I can see its indeed occupying the space. I also see in this case, where I use background color, that the hr appears behind it.
Additional information which could be useful: The div in the middle is part of an horizontal ul element, which contains list images with items and also text. Also called content slider ;)
When I initialize the slider with some image slides in it, on mobile, the layout is always displayed correctly. Also when I'm viewing only content slides. But when I put only content slides from the beginning, this error appears.
I don't know what it is... tried getting this behaviour with desktop browser, to find the cause, but didn't success. I don't know why the hr goes there. There's no relation with the content in the slide. The position where the hr appears is somewhere in the middle, between the text...
Thanks in advance.
Without seeing any of your code, a "best guess" based on past experience is:
It looks like you might have floated content inside of your slider, and the slider itself is not "cleared".
If you have any floated content inside of the slider, make sure the outer slider div is cleared.

Fade text out when scrolling

Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.

Centering DIV in javascript

Guys i'm having a problem with the javascript in my website. I cant center the div to properly show the image i click. It only works at the second try, the first try of any image it allways show the div to the bottom right.
I've tried messing around with the javascript but can't get my head around it.
Check it out here
It happens because you apply the CSS properties before setting the image src.
When you first load an image, there is no previous image and it does nothing to center.
When you click another picture, it centers the image according to the previous image's dimensions.
It happens becouse your div doesn't have any offsetWidth and height yet.

Categories