The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.
Related
https://jonathanrace77.github.io/
In the portfolio section there is a "sync" version of the slick carousel. (The top carousel should show what is selected in the bottom).
However, on a fresh load of the page, the top carousel shows nothing. It is only after the page is refreshed (not hard refreshed), that the picture shows.
Can anyone help me understand what is happening here?
The slider div img did not like width:auto.
Setting this as px or vw (in my case) solved the problem.
I'm trying to use fullpage.js (https://alvarotrigo.com/fullPage/) in order to realize a website with a particular section slider, with the requirement that the sections do not use the full height of the website.
This is a demo of the effect:
gif demo
I'm using the fp-auto-height option in order to realize the effect. The problem is I would like to give a preview of both the upper and the lower section's image, when I'm on a section, and I'd like to vertically center the active section.
The text that is on the top and on the bottom of the section would then appear after I scroll to a certain section, and therefore the previews should regard only the image and not the relative text.
The creator of the script advised me to ask here since it's a matter of CSS, but I've tried multiple combinations and still couldn't find a good solution.
Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.
If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.
Neat little effect.
I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.
Not sure how to actually code that though.
Can someone help out, maybe even a basic fiddle?
You can do this with simple CSS.
.div_name {
position:fixed;
}
check W3schools Position fixed property for tags
I want to have a DIV around my main navigation, which contains my navigation, its size will be fixed based on the .. e.g. 600 px, what I want is if the screen resolution is small than the size of navigation, it will add Arrows on left and right so once clicked it will scroll and show the hidden navigation buttons, please check the screenshot to make it more clear..
my question is, is there any jquery plugin that does something similar, if so it will save me a lot of time, OR where should I get started, any direction would be highly appreciated..
This shouldn't be to hard. Take a look at this plugin: http://owlgraphic.com/owlcarousel/
It's a responsive carousel and when you look around at the demo-section, you will see that what you want is possible with the carousel.
I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?