I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?
The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});
Related
Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
Dear Elders of The Internet -
I have created a headache for myself, and I hope you can help :-)
This is a two-part questions. I have a page with three panels, and want a horisontal slide. For this I have created buttons, see live demo here.
1. Horizontal slide, responsive
When clicking top right button "two right panes" I want the page to show just that: the two right panes only. This is not a problem on large screens, but I cannot get it to work on slightly smaller (media queries and further responsiveness, I think I will be able to figure out).
Similarly; when clicking "single left pane" I would like it to stretch the third (far right) panel, and hide the two others.
Clearly, I want it to respond to a 100% viewport.
2. Highchart
I cannot get the Highchart chart to act accordingly depending on the top left buttons sliding. The highchart will adjust if I resize the whole window, but I cannot get it to adjust when sliding panels. For a demo of a chart that works, scroll down in third panel (this is "homemade" graphs).
I have attempted to illustrate the problem in the screenshots below.
(I have posted another question relating to the same page, if you should be so inclined to take a look).
I suspect it is pretty simple, but I cannot for the life of me see where I went wrong. Any hints would be much appreciated. All the best.
Highcharts will resize only when window is resized, if you want to resize chart use chart.setSize(w,h), see reference.
Well, good people, I kinda figured it out myself... for the possible benefit of others; my solution was to set the width of the two first columns fixed (or rather; max-width), and thereby using calc to calculate the size of the third columns with minus the two fixed width divs.
width: -webkit-calc(98% - 520px);
width: calc(98% - 520px);
For the Highchart part of the question, much thanks to #Pawel for prompt answer. I haven´t entirely worked it out, as we are currently discussing whether using Highcharts or not is the way to go. If so, I guess I might be back with more questions later.
I've read quite some posts about webkit browsers having issues with images. I couldn't find a post and thus an answer for the one I'm about to explain.
I created a home-made slideshow using jQuery that basically places all the images next to each other on a row and I then play with a mask element (overflow: hidden) and the margin-left property to select which one is to be displayed. I didn't reinvent the wheel...
On FF, Opera and even IE, it works like a charm! But I have no luck on Chrome (I didn't test Safari) : the first image shows ok but when the sliding effect kicks in, 20px-ish of the first slide remains at the top of the slideshow and overlay the second slide. If I carry on sliding, the first slide part remains as an overlay on the following slides. The images don't refresh ok on Chrome which makes the whole slideshow look rubbish.
I tried to play with the images css properties after the sliding effect to kind of force the container to refresh its content but again, no luck.
Does anybody have an idea on how to work that out?
Thank you
Found the fix...
As I said, trying to force the container to refresh its content using some different css properties didn't work.
What worked though was to add a span to the container, that's it... At the time of the issue, my container only had images in it and a map. I added a span (out of luck) and it worked straight away!
I can only assume why adding a span makes the whole container behave ok. I guess it is kind of the same than the "hasLayout" property IE6 used to throw at geeks. It couldn't render the element properly until it had an element that had a consistency (height, width ... set with a value).
Anyway, I hope this will help and yes, I did dare to compare Chrome to IE6... ;-)
Good day
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.